@extends('web.layouts.app')

@section('content')
    <div class="main-chat-container w-100 ml-md-5 overflow-hidden">
        <div class="p-3 p-lg-4 border-top mb-0 main-chat-container-in">
            <a class="nav-link" style="margin-bottom: 15px;font-size: larger;" href="{{ route('web.broadcasts.index') }}">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div class="row">
                <div class="col-md-4 col-sm-6 ">
                    <!--begin::Stats Widget 29-->
                    <div class="card card-custom bg-warning card-stretch gutter-b"
                        style="background-position: right top; background-size: 30% auto; background-image: url(assets/media/svg/shapes/abstract-1.svg)">
                        <!--begin::Body-->
                        <div class="card-body box">
                            <span class="card-title font-weight-bolder text-dark-75 font-size-h2 mb-0 mt-6 d-block">{{$contactsCount}}</span>
                            <span class="font-weight-bold text-muted font-size-h6 ">@lang('admin.sent_contacts')</span>
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Stats Widget 29-->
                </div>
                <div class="col-md-4 col-sm-6 ">
                    <!--begin::Stats Widget 30-->
                    <div class="card card-custom bg-info card-stretch gutter-b">
                        <!--begin::Body-->
                        <div class="card-body box">
                           
                            <span
                                class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 d-block">{{$success_sent_contacts}}</span>
                            <span class="font-weight-bold text-white font-size-h6 ">@lang('admin.success_sent_contacts')</span>
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Stats Widget 30-->
                </div>
                <div class="col-md-4 col-sm-6 ">
                    <!--begin::Stats Widget 31-->
                    <div class="card card-custom bg-danger card-stretch gutter-b">
                        <!--begin::Body-->
                        <div class="card-body box">
                          
                            <span
                                class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 d-block">{{$failed_sent_contacts}}</span>
                            <span class="font-weight-bold text-white font-size-h6 "> @lang('admin.failed_sent_contacts')</span>
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Stats Widget 31-->
                </div>
                {{-- <div class="col-md-3 col-sm-6 ">
                    <!--begin::Stats Widget 32-->
                    <div class="card card-custom bg-success  card-stretch gutter-b">
                        <!--begin::Body-->
                        <div class="card-body box">
                            <span
                                class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 text-hover-primary d-block">{{$pending_sent_contacts}}</span>
                            <span class="font-weight-bold text-white font-size-h6 "> @lang('admin.pending_sent_contacts')</span>
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Stats Widget 32-->
                </div> --}}
            </div>
            <style>
                .box{
                    display: flex;
                    justify-content: space-around;
                }
            </style>
            <div class="row">
                <div class="col-sm-6">
                  <div class="card cardChart">
                    <div class="card-header">
                        <h4 class="card-title">@lang('user.messages')</h4>
                    </div>
                    <div class="card-body">
                        <canvas id="myDonutChart" style="width:100%;max-width:700px"></canvas>
                        <script>
                            document.addEventListener('DOMContentLoaded', function () {
                                const ctxDonut = document.getElementById('myDonutChart');
                                var success_sent = "{{ $success_sent_contacts }}";
                                var failed_sent = "{{ $failed_sent_contacts }}";
                                var pending = "{{ $contactsCount-$success_sent_contacts-$failed_sent_contacts }}";
                                const data = {
                                            labels: ["{{__('user.pending')}}", "{{__('user.success_sent')}}", "{{__('user.failed_sent')}}"],
                                            datasets: [{
                                                label: 'Messages',
                                                data: [pending, success_sent, failed_sent],
                                                backgroundColor: [
                                                    'rgb(255, 209, 102)',
                                                    'rgba(54, 162, 235, 0.5)', // Blue for sent messages
                                                    'rgba(255, 99, 132, 0.5)' // Red for received messages
                                                ],
                                                borderWidth: 0
                                            }]
                                        };
                
                                        new Chart(ctxDonut, {
                                            type: 'doughnut',
                                            data: data,
                                            options: {
                                                responsive: true,
                                                plugins: {
                                                    legend: {
                                                        position: 'bottom',
                                                    },
                                                    title: {
                                                        display: true,
                                                        text: 'Message Distribution'
                                                    }
                                                }
                                            }
                                        });
                            });
                        </script>
                    </div>
                </div>
                </div>
                <div class="col-xl-6 col-xxl-6">
                    <div class="card latest-sales-bx">
                        <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="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 dz-scroll loadmore-content p-0">
                    <div class="table-responsive">
                        <table class="table" id="broadcast-logs-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)
                                    <tr>
                                        <td>
                                            <div class="media align-items-center d-flex">
                                                <div class="media-image me-2">
                                                    @if (isset($broadcastLog->contact) && !empty($broadcastLog->contact->image))
                                                        <img src="{{ asset('storage/' . $broadcastLog->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($broadcastLog->contact->first_name) && empty($broadcastLog->contact->last_name)) ? $broadcastLog->contact->mobile : $broadcastLog->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">{{ $broadcastLog->contact->created_at }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $broadcastLogs->links('vendor.pagination.custom') }}
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    
    <div class="tab-form-pane main-chat-note fade show active" id="pills-note" role="tabpanel"
        aria-labelledby="pills-note-tab">
        <div class="px-4 ">
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>
                        @lang('notes.broadcast_statisrics_note')
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function(){
            $('#status-dropdown').change(function() {
                window.location.href = "{{ route('web.broadcasts.statistics', $id) }}?status=" + $(this).val();
                /*let filter = $("#status-dropdown option:selected").text();
                $('#broadcast-logs-table tr').each(function(){
                    $(this).find('td:nth-child(2)').each(function(){
                        if (filter == "@lang('user.status')" || filter == $(this).text().trim()) {
                            $(this).parent().show();
                        } else {
                            $(this).parent().hide();
                        }
                    });
                });*/
            });
        });
    </script>
@endpush