@extends('admin.layouts.app')

@section('content')
    <div class=" content-body default-height">
        <!-- row -->
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.reports.broadcasts') }}">@lang('admin.broadcasts')</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">@lang('admin.statistics')</a></li>
                </ol>
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="row">
                        <div class="col-xl-4 col-xxl-4 col-sm-6 ">
                            <div class="card chart-bx">
                                <div class="card-header border-0 pb-0">
                                    <div class="d-flex align-items-center">
                                        <h2 class="chart-num font-w600 mb-0">{{ $contactsCount }}</h2>
                                    </div>
                                    <div>
                                        <h5 class="text-black font-w500 mb-0">@lang('admin.sent_contacts')</h5>
                                    </div>
                                </div>
                                <div class="card-body pt-0">
                                    <canvas id="widgetChart1" height="60"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-xxl-4 col-sm-6 ">
                            <div class="card chart-bx">
                                <div class="card-header border-0 pb-0">
                                    <div class="d-flex align-items-center">
                                        <h2 class="chart-num font-w600 mb-0">{{ $success_sent_contacts }}</h2>
                                    </div>
                                    <div>
                                        <h5 class="text-black font-w500 mb-0">@lang('admin.success_sent_contacts')</h5>
                                    </div>
                                </div>
                                <div class="card-body pt-0">
                                    <canvas id="widgetChart2" height="60"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-xxl-4 col-sm-6 ">
                            <div class="card chart-bx">
                                <div class="card-header border-0 pb-0">
                                    <div class="d-flex align-items-center">
                                        <h2 class="chart-num font-w600 mb-0">{{ $failed_sent_contacts }}</h2>
                                    </div>
                                    <div>
                                        <h5 class="text-black font-w500 mb-0">@lang('admin.failed_sent_contacts')</h5>
                                    </div>
                                </div>
                                <div class="card-body pt-0">
                                    <canvas id="widgetChart3" height="60"></canvas>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="col-xl-3 col-xxl-3 col-sm-6 ">
                            <div class="card chart-bx">
                                <div class="card-body pt-sm-4 pt-3 d-flex align-items-center justify-content-between">
                                    <div class="me-3">
                                        <div class="d-flex align-items-center">
                                            <h2 class="chart-num font-w600 mb-0">{{ $pending_sent_contacts }}</h2>
                                        </div>
                                        <div>
                                            <h5 class="text-black font-w500 mb-3 mt-2">@lang('admin.pending_sent_contacts')</h5>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="d-inline-block position-relative donut-chart-sale">
                                            @if ($sent_contacts > 0)
                                                <span class="donut1 donut-chart"
                                                    data-peity='{ "fill": ["var(--primary)", "rgba(240, 240, 240)"],   "innerRadius": 35, "radius": 10}'>{{ $pending_sent_contacts }}/{{ $sent_contacts }}</span>
                                                <small
                                                    class="text-black">{{ round(($pending_sent_contacts / $sent_contacts) * 100) }}%</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-6">
                    {{-- <div class="row">
                        <div class="col-xl-6"> --}}
                            <div class="card">
                                <div class="card-header border-0 pb-0 flex-wrap">
                                    <h4 class="fs-20 card-title font-w500">@lang('admin.messagesSentNumber')</h4>
                                </div>
                                <div class="card-body pt-2">
                                    <div class="tab-content">
                                        <div class="tab-pane fade active show" id="Monthly">
                                            <div class="d-sm-flex d-block align-items-center justify-content-center">
                                                <div class="col-xl-6 col-xxl-5 text-center">
                                                    <div id="donutChart2" class="donutChart2 d-inline-block"></div>
                                                </div>
                                                <div class="col-xl-6 col-xxl-7">
                                                    {{-- <p class="fs-14 mt-3">Lorem ipsum dolor sit amet, consectetur
                                                        adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                                                        dolore magna aliqua.</p> --}}
                                                    <div class="d-flex  mt-4">
                                                        <div class="me-4">
                                                            <svg class="primary-icon" width="20" height="8"
                                                                viewBox="0 0 20 8" fill="none"
                                                                xmlns="http://www.w3.org/2000/svg">
                                                                <rect width="20" height="8" rx="4"
                                                                    fill="#0E8A74" />
                                                            </svg>
                                                            <h4 id="sent_message" class="fs-18 text-black mb-0 font-w600">
                                                                {{ $success_sent_contacts }}
                                                            </h4>
                                                            <span class="fs-14">@lang('admin.success_sent_contacts')</span>
                                                        </div>
                                                        <div class="me-4">
                                                            <svg width="20" height="8" viewBox="0 0 20 8"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect width="20" height="8" rx="4"
                                                                    fill="#FB3E7A" />
                                                            </svg>
                                                            <h4 id="received_message"
                                                                class="fs-18 text-black mb-0 font-w600">
                                                                {{ $failed_sent_contacts }}</h4>
                                                            <span class="fs-14">@lang('admin.failed_sent_contacts')</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {{-- </div>
                        </div> --}}
                        {{-- <div class="col-xl-6">
                            <div class="card bg-primary">
                                <div class="card-body">
                                    <div class="d-sm-flex d-block pb-sm-3 align-items-end mb-2">
                                        <div class="me-auto pe-3 mb-3 mb-sm-0">
                                            <span
                                                class="chart-num-3 font-w200 d-block mb-sm-3 mb-2 text-white">@lang('admin.messges_sent_today')</span>
                                            <h2 id="numberofsentmessges" class="chart-num-2 text-white mb-0">0 </h2><span
                                                class="fs-18 me-2 ms-3 chart-num-2 text-white mb-0">@lang('admin.message')</span>
                                        </div>
                                        <div class="d-flex flex-wrap mb-3 mb-sm-0">
                                            <svg width="87" height="58" viewBox="0 0 87 58" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M18.4571 37.6458C11.9375 44.6715 4.81049 52.3964 2 55.7162H68.8125C77.6491 55.7162 84.8125 48.5528 84.8125 39.7162V2L61.531 31.9333C56.8486 37.9536 48.5677 39.832 41.746 36.4211L37.3481 34.2222C30.9901 31.0432 23.2924 32.4352 18.4571 37.6458Z"
                                                    fill="url(#paint0_linear)" />
                                                <path
                                                    d="M2 55.7162C4.81049 52.3964 11.9375 44.6715 18.4571 37.6458C23.2924 32.4352 30.9901 31.0432 37.3481 34.2222L41.746 36.4211C48.5677 39.832 56.8486 37.9536 61.531 31.9333L84.8125 2"
                                                    stroke="white" stroke-width="4" stroke-linecap="round" />
                                                <defs>
                                                    <linearGradient id="paint0_linear" x1="43.4062" y1="8.71453"
                                                        x2="46.7635" y2="55.7162" gradientUnits="userSpaceOnUse">
                                                        <stop stop-color="white" offset="0" />
                                                        <stop offset="1" stop-color="white" stop-opacity="0" />
                                                    </linearGradient>
                                                </defs>
                                            </svg>
                                            <div class="ms-3">
                                                <p id="percentageIncrease" class="fs-20 mb-0 font-w500 text-white">+0%</p>
                                                <span class="fs-12 text-white">@lang('admin.than_yasterday')</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress style-1" style="height:15px;">
                                        <div class="progress-bar bg-white progress-animated"
                                            style="width: 1%; height:15px;" role="progressbar">
                                            <span class="sr-only">0% Complete</span>
                                            <span class="bg-white arrow"></span>
                                        </div>
                                    </div>
                                        <br>
                                    <a href="{{ route('admin.reports.conversations') }}"
                                        class="text-white">@lang('admin.details')<i
                                            class="las la-long-arrow-alt-right scale5 ms-3"></i></a>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
                <div class="col-xl-6 col-xxl-6">
                    <div class="card">
                        <div class="card-header border-0 mb-0">
                            <h4 class="fs-20 card-title">@lang('admin.tags')</h4>
                            <div class="dropdown custom-dropdown mb-0 tbl-orders-style">
                            </div>
                        </div>
                        <div class="card-body pb-0 dz-scroll loadmore-content pt-0">
                            <div class="d-flex flex-wrap">
                                @foreach ($broadcast->tags as $tag)
                                    <div class="me-3 mb-3">
                                        <span class="badge bg-primary">{{ $tag->name }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-12 col-xxl-12">
                    <div class="card latest-sales-bx">
                        <div class="card-header border-0 mb-0">
                            <div class="col-md-9 float-start">
                                <h4 class="fs-20 card-title mt-3">
                                    @lang('admin.contacts')
                                </h4>
                            </div>
                            <div class="col-md-3 float-end">
                                {{ Form::select('status', ['' => __('user.status'), 'pending' => __('admin.pending')] + \App\Models\Message::$statusNames, request()->input('status'), ['class' => 'form-control', 'id' => 'status-dropdown']) }}
                            </div>
                        </div>
                        <div class="card-body pb-0 dz-scroll loadmore-content pt-0">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>@lang('admin.name')</th>
                                            <th>@lang('admin.send_status')</th>
                                            <th>@lang('admin.error_message')</th>
                                            <th>@lang('admin.created_at')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($broadcastLogs as $broadcastLog)
                                            @php $contact = $broadcastLog->contact; @endphp
                                            <tr>
                                                <td>
                                                    <div class="media align-items-center">
                                                        <div class="media-image me-2">
                                                            @if (isset($contact) && !empty($contact->image))
                                                                <img src="{{ asset('storage/' . $contact->image) }}"
                                                                    alt="company Image" class="img-fluid rounded-circle"
                                                                    style="max-width: 60px;width: 60px;height: 60px;">
                                                            @else
                                                                <img src="{{ asset('dummy_user.png') }}"
                                                                    alt="company Image" class="img-fluid rounded-circle"
                                                                    style="max-width: 60px;width: 60px;height: 60px;">
                                                            @endif
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="fs-16 mb-0">{{ (empty($contact->first_name) && empty($contact->last_name)) ? $contact->mobile : $contact->name }}</h6>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="fs-14 text-nowrap mb-3 pb-3">
                                                        {{ $broadcastLog->status !== NULL ? \App\Models\Message::$statusNames[$broadcastLog->status ?? 0] : __('admin.pending') }}
                                                    </span>
                                                </td>
                                                <td>{{ $broadcastLog->status == 6 ? $broadcastLog->response : '' }}</td>
                                                <td>
                                                    <span
                                                        class="fs-14 text-nowrap mb-3 pb-3">{{ $contact->created_at }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                {{ $broadcastLogs->links('vendor.pagination.custom') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#status-dropdown').change(function() {
                window.location.href = "{{ route('admin.reports.broadcasts.statistics', $id) }}?status=" + $(this).val();
            });
            
            var donutChart2 = function() {
                var success_sent = ("{{ $success_sent_contacts }}" / "{{ $contactsCount }}") * 100;
                var failed_sent = ("{{ $failed_sent_contacts }}" / "{{ $contactsCount }}") * 100;

                var options = {
                    series: [success_sent, failed_sent],
                    chart: {
                        type: 'donut',
                        height: 230,
                    },
                    legend: {
                        show: false
                    },
                    plotOptions: {
                        pie: {
                            //startAngle: -96,
                            donut: {
                                size: '50%',
                            }
                        },
                    },

                    states: {
                        normal: {
                            filter: {
                                type: 'none',
                                value: 0,
                            }
                        },
                        hover: {
                            filter: {
                                type: 'lighten',
                                value: 0,
                            }
                        },
                        active: {
                            filter: {
                                type: 'lighten',
                                value: 0,
                            }
                        },
                    },

                    stroke: {
                        width: '5'
                    },
                    dataLabels: {
                        formatter(val, opts) {
                            const name = opts.w.globals.labels[opts.seriesIndex]
                            return [val.toFixed() + '%']
                        },
                        dropShadow: {
                            enabled: false
                        },
                        style: {
                            fontSize: '15px',
                            colors: ["#fff"],
                        }
                    },
                    colors: ['#0E8A74', '#FB3E7A', '#C8C8C8'],
                    responsive: [{
                        breakpoint: 1600,
                        options: {
                            chart: {
                                height: 200
                            },
                        }
                    }]
                };

                var chart = new ApexCharts(document.querySelector("#donutChart2"), options);
                chart.render();
            }

            donutChart2();

            // Fetch data from Laravel backend
            $.ajax({
                url: "{{ route('admin.reports.broadcast.numberOfMessages') }}",
                type: "GET",
                data: {
                    id: "{{ $id }}"
                },
                success: function(data) {
                    // Update progress bar with received data
                    updateProgressBar(data.numberOfMessagesSentToday, data.percentageIncrease);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });

            // Function to update progress bar
            function updateProgressBar(sentMessages, percentageIncrease) {
                // Update progress bar width based on the percentage of messages sent
                var progressBarWidth = (sentMessages / 1000) * 100; // Assuming max 1000 messages
                $('.progress-bar').css('width', progressBarWidth * 1000 + '%');
                $('#numberofsentmessges').text(sentMessages);
                $('#percentageIncrease').text('+' + percentageIncrease + '%');
            }

            {{-- var pendingSentContacts = {{ $pending_sent_contacts }};
            var totalSentContacts = {{ $contactsCount }};
            var ratio = (pendingSentContacts / totalSentContacts) * 100;

            $('.donut-chart').text(pendingSentContacts + '/' + totalSentContacts).peity('donut', {
                fill: ["var(--primary)", "rgba(240, 240, 240)"],
                innerRadius: 35,
                radius: 10
            }); --}}

            $('.donut-chart').siblings('small').text(ratio.toFixed(0) + '%');
        });
    </script>
@endsection