@extends('layouts.app', ['title' => __tr('Greeting Status')])
@section('content')
@include('users.partials.header', [
'title' => __tr('Greeting Dashboard'),
'description' => '',
'class' => 'col-lg-7'
])
@php
$campaignData = $campaign->__data;
$selectedGroups = Arr::get($campaignData, 'selected_groups', []);
$isRestrictByTemplateContactLanguage = Arr::get($campaignData, 'is_for_template_language_only');
$isAllContacts = Arr::get($campaignData, 'is_all_contacts');
$messageLog = $campaign->messageLog;
$queueMessages = $campaign->queueMessages;
$campaignUid=$campaign->_uid;
@endphp
<style>
    .text-green-600 {
        color: #38a169 !important;
    }
    .text-orange-600 {
        color: #dd6b20 !important;
    }
    .text-red-600 {
        color: #e53e3e !important;
    }
    .text-blue-600 {
        color: #3182ce !important;
    }
    .bg-bluee {
        background-color: #f5f5ff;
    }
    .bg-greene {
        background-color: #f0fdf4;
    }
    .bg-orangee {
        background-color: #fff7ed;
    }
    .bg-rede {
        background-color: #fef2f2;
    }
    .text-default-600 {
        font-weight: 600;
        color: #1e293b;
        font-size: 15px;
    }
    .text-primary-600 {
        color: #6338f0;
    }
    .text-greene-600 {
        color: #00a63e;
    }
    .text-orangee-600 {
        color: #f54a00;
    }
    .text-rede-600 {
        color: #e7000b;
    }
    .icon-shape { 
        border-radius: 0.5rem;
    }
    .bg-bluee-b {
        background-color: #2b7fff;
    }
    .bg-greene-b {
        background-color: #00c951;
    }
    .bg-orangee-b {
        background-color: #ff6900;
    }
    .bg-rede-b {
        background-color: #fb2c36;
    }
    .text-default-title {
        color: #000000;
        font-size: 14px;
        font-weight: 400;
    }
    .icon { 
        width: 2rem;
        height: 2rem;
    }
    .card.card-stats { 
        min-height: 148px;
    }
    /* .card {
        border: none;
    } */
     #lwCampaignQueueLog_filter .input-group-text {
        background: transparent;
        border: none;
        padding-left: 0.5rem;
        padding-right: 0.25rem;
    }
    #lwCampaignQueueLog_filter .search-invoice-input {
        border: 1px solid #bac0c8;
        border-radius: 6px;
        box-shadow: none;
        color: #222;
    }
    #lwCampaignQueueLog_filter .input-group {
        width: 100%;
    }
    div.dataTables_wrapper div.dataTables_filter {
        text-align: left;
        margin-left: 12px;
    }
    .dataTables_wrapper .dataTables_length select { 
         border: 1px solid #bac0c8;
    }
    .nav-tabs {
        margin-left: 0px;
    }
</style>
<div class="container-fluid container-fluid-padding p-1 lw-campaign-window-{{ $campaign->_uid }}" x-cloak x-data="initialRequiredData">
    <div class="row">
        <!-- button -->
        <div class="col-12 mb-3">
            <div class="float-right">
                <a class="lw-btn btn btn-light" href="{{ route('vendor.birthday.read.list_view') }}">{{ __tr('Back to Greeting Engine') }}</a>
            </div>
        </div>
        <!--/ button -->
        <div class="col-12 mb-4 pl-30">
            <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-md-6">
                            @if($campaign->status == 5) <span class="rounded py-1 px-3 badge-dark text-white mb-2 float-right">{{  __tr('Archived') }}</span> @endif
                            <h5 class="card-title text-uppercase text-muted mb-0">{{ __tr('Greeting Name') }}</h5>
                            <span class="h2 font-weight-bold mb-0">{{ $campaign->title }}</span>
                            <p class="mt-3 mb-0">
                            <h2 class="badge badge-warning fs-2" x-text="statusText"></h2>
                            <h3 class="text-success mr-2">{{ __tr('Execution Scheduled at') }}</h3>
                            @if ($campaign->scheduled_at > now())
                            <div class="text-warning">{{ formatDiffForHumans($campaign->scheduled_at, 3) }}</div>
                            @else
                            <template x-if="(executedCount == 0) && inQueuedCount">
                                <div class="text-warning my-3">
                                    {{  __tr('Awaiting execution') }} <i class="mdi mdi-sync fa-spinner"></i>
                                </div>
                            </template>
                            @endif
                            @if ($campaign->timezone and getVendorSettings('timezone') != $campaign->timezone)
                            <div class="">{!! __tr('__scheduledAt__ as per your account timezone which is __selectedTimezone__', [
                                '__scheduledAt__' => formatDateTime($campaign->scheduled_at),
                                '__selectedTimezone__' => '<strong>'. getVendorSettings('timezone') .'</strong>'
                                ]) !!} </div>
                            <div class=" text-muted">{!! __tr('Campaign scheduled on __scheduledAt__ as per the __selectedTimezone__ timezone', [
                                '__scheduledAt__' => formatDateTime($campaign->scheduled_at_by_timezone, null, null,
                                $campaign->timezone),
                                '__selectedTimezone__' => '<strong>'. $campaign->timezone .'</strong>'
                                ]) !!}</div>
                            @else
                            <span class="text-nowrap">{{ formatDateTime($campaign->scheduled_at) }}</span>
                            @endif

                            </p>
                            <div class="my-3">
                                <h5 class="card-title text-uppercase text-muted mb-2">{{ __tr('template Name') }}</h5>
                                <span class="h3 font-weight-bold mb-2">{{ $campaign->template_name }}</span>
                                <h5 class="card-title text-uppercase text-muted mb-2 mt-3">{{ __tr('template language')
                                    }}
                                </h5>
                                <span class="h3 font-weight-bold mb-2">{{ $campaign->template_language }}</span>
                            </div>
                        </div>
                         <div class="col-md-6 d-flex align-items-center justify-content-center">
                            <div id="campaignDonutChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-4 col-lg-12">
        <div class="col-12">
            <div class="row mb-4">
                {{-- total contacts --}}
                <div class="col-xl-3 col-lg-4 col-md-6" id="CampaignTotalContacts">
                    <div class="card card-stats mb-4 mb-xl-0 cursor-pointer bg-bluee"  
                    :class="filterStatus === 'null' ? 'border-success shadow' : ''"
                        @click="filterTable('null')">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-default-600 mb-0">{{ __tr('Total Contacts') }}
                                    </h5>
                                    <span class="h2 font-weight-bold mb-0 text-primary-600" x-text="totalContacts"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-bluee-b text-white shadow">
                                        <i class="mdi mdi-account fs-15 "></i>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 mb-0 text-default-title">
                                @if ($isAllContacts)
                                {{ __tr('All contacts') }}
                                @else
                                {{ __tr('All contacts from: ') }}
                                @foreach ($selectedGroups as $selectedGroup)
                                <strong class="text-nowrap text-warning">{{ $selectedGroup['title'] }}</strong>
                                @endforeach
                                {{ __tr(' groups.') }}
                                @endif
                                @if ($isRestrictByTemplateContactLanguage)
                                <span class="text-default-title">{!! __tr('Excluding those contacts which don\'t have __languageCode__
                                    language', [
                                    '__languageCode__' => "<span class='text-warning'>". e($campaign->template_language)
                                        ."</span>"
                                    ]) !!}</span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
                {{-- /total contacts --}}
                {{-- delivered to --}}
                <div class="col-xl-3 col-lg-4 col-md-6" id="CampaignTotalDelivered">
                    <div class="card card-stats mb-4 mb-xl-0 cursor-pointer bg-greene"
                     :class="filterStatus === 'delivered' ? 'border-success shadow' : ''"
                      @click="filterTable('delivered')">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-default-600 mb-0">{{ __tr('Total Delivered') }}
                                    </h5>
                                    <span class="h2 font-weight-bold mb-0 text-greene-600" x-text="totalDeliveredInPercent"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-greene-b text-white shadow">
                                        <i class="mdi mdi-check-bold fs-15 "></i>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 mb-0">
                                <span class="text-nowrap text-greene-600" x-text="__Utils.formatAsLocaleNumber(totalDelivered)"></span>
                                <span class="text-nowrap text-default-title">{{ __tr('Contacts') }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                {{-- /delivered to --}}
                {{-- read by --}}
                <div class="col-xl-3 col-lg-4 col-md-6" id="CampaignTotalRead">
                    <div class="card card-stats mb-4 mb-xl-0 cursor-pointer bg-orangee" 
                     :class="filterStatus === 'read' ? 'border-success shadow' : ''"
                      @click="filterTable('read')">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-default-600 mb-0">{{ __tr('Total Read') }}</h5>
                                    <span class="h2 font-weight-bold mb-0 text-orangee-600" x-text="totalReadInPercent"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-orangee-b text-white shadow">
                                        <i class="mdi mdi-check-all fs-15 "></i>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 mb-0">
                                <span class="text-nowrap text-orangee-600" x-text="__Utils.formatAsLocaleNumber(totalRead)"></span>
                                <span class="text-nowrap text-default-title">{{ __tr('Contacts') }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                {{-- /read by --}}
                {{-- failed --}}
                <div class="col-xl-3 col-lg-4 col-md-6" id="CampaignTotalFailed">
                    <div class="card card-stats mb-4 mb-xl-0 cursor-pointer bg-rede" 
                     :class="filterStatus === 'failed' ? 'border-success shadow' : ''"
                      @click="filterTable('failed')">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-default-600 mb-0">{{ __tr('Total Failed') }}
                                    </h5>
                                    <span class="h2 font-weight-bold mb-0 text-rede-600" x-text="__Utils.formatAsLocaleNumber(totalFailedInPercent)"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-rede-b text-white shadow">
                                        <i class="mdi mdi-information-slab-circle fs-15 "></i>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 mb-0">
                                <span class="text-nowrap text-rede-600" x-text="__Utils.formatAsLocaleNumber(totalFailed)"></span>
                                <span class="text-nowrap text-default-title">{{ __tr('Contacts') }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                {{-- /failed --}}
            </div>
            {{-- message log --}}
              <!--start of tabs-->
    <div x-data="campaignTabs" x-init="init">
        <ul class="nav nav-tabs ml-0" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                  <a href="#" class="nav-link" :class="{ 'active': tab === 'queue' }" @click.prevent="tab = 'queue'">{{ __tr('Queue') }}</a>
            </li>
            <li class="nav-item" role="presentation">
                  <a href="#" class="nav-link" :class="{ 'active': tab === 'executed' }" @click.prevent="tab = 'executed'">{{ __tr('Executed') }}</a>
            </li>
            <li class="nav-item text-right col my-3">
                @if (($pageType == "queue") and ($campaign->status == 1))
                <template x-if="campaignStatus == 'executed' && (queueFailedCount > 0)">
                <a class="btn btn-warning btn-sm lw-ajax-link-action" data-confirm="#requeueFailedMessageConfirm-template" data-method="post" href="{{ route('vendor.campaign.requeue.log.write.failed', [
                    'campaignUid' => $campaignUid
                ]) }}"><i class="mdi mdi-arrow-u-right-top fs-15 "></i> {{  __tr('Requeue Failed Message') }}</a>
                 </template>
                @endif
                {{-- <button @click="window.reloadDT('#lwCampaignQueueLog');" class="btn btn-dark btn-sm">
                    <i class="mdi mdi-sync fs-15 "></i>
                    {{  __tr('Refresh') }}
                </button> --}}
                {{-- <button @click="filterTable('null')" class="btn btn-dark btn-sm">
                    <i class="mdi mdi-sync fs-15 "></i>
                    {{  __tr('Refresh') }}
                </button>
             @if($campaignStatus=="executed")
             @if($pageType== "queue")
             <a href="{{ route('vendor.campaign.queue.log.report.write',['campaignUid' => $campaignUid ] 
             ) }}" data-method="post" class="btn btn-dark btn-sm"><i class="mdi mdi-download fs-15 "></i> {{  __tr('Report') }}</a>
             @elseif($pageType== "executed")
                 <a href="{{ route('vendor.campaign.executed.report.write',['campaignUid' => $campaignUid ] 
                     ) }}" data-method="post" class="btn btn-dark btn-sm"><i class="mdi mdi-download fs-15 "></i> {{  __tr('Report') }}</a>
                     @endif
                @endif --}}
                {{-- </template> --}}
            </li>
        </ul>
        <div x-show="tab === 'queue'">
            @include('whatsapp.campaign-queue-log-partial')
        </div>
        <div x-show="tab === 'executed'">
            @include('whatsapp.campaign-executed-log-partial')
        </div>
              </div>
        <!--/end of tabs -->
        <!-- tab Container -->
        <div class="row">
            {{-- <div class="col-12 mb-4 " id="logData">
                @if($pageType== "queue")
                    @include('whatsapp.campaign-queue-log-partial')
                    @elseif($pageType== "executed")
                    @include('whatsapp.campaign-executed-log-partial')
                    @endif
            </div> --}}
        </div>
        <script type="text/template" id="requeueFailedMessageConfirm-template">
            <h2>{{ __tr('Are You Sure!') }}</h2>
            <p>{{ __tr('You want requeue all the failed messages to process it again?') }}</p>
        </script>
        </div>
        </div>
    </div>
</div>
@php
    $queueReportUrl = route('vendor.campaign.queue.log.report.write', ['campaignUid' => $campaignUid]);
    $executedReportUrl = route('vendor.campaign.executed.report.write', ['campaignUid' => $campaignUid]);
@endphp
@php
$totalContacts = (int) Arr::get($campaignData, 'total_contacts');
$totalRead = $messageLog->where('status', 'read')->count();
$totalReadInPercent = round($totalRead / $totalContacts * 100, 2);
$totalDelivered = $messageLog->where('status', 'delivered')->count();
$totalDeliveredInPercent = round(($totalDelivered + $totalRead) / $totalContacts * 100, 2) . '%';
// $totalDeliveredInPercent = round(($totalDelivered) / $totalContacts * 100, 2) . '%';
$totalFailed = $queueMessages->where('status', 2)->count() + $messageLog->where('status', 'failed')->count();
$totalFailedInPercent = round($totalFailed / $totalContacts * 100, 2);
$totalSent = $messageLog->where('status', 'sent')->count();
$totalSentInPercent = round($totalSent / $totalContacts * 100, 2);
$TotalDeliveredinperForChart =  round($totalDelivered  / $totalContacts * 100, 2);
$totalQueuedForChat = $queueMessages->count(); // In Queue + Queue Failed Both
$totalQueueforChartInpercent = round($totalQueuedForChat / $totalContacts * 100, 2);
@endphp
{!! __yesset([
    'dist/js/apexcharts.js'
]) !!}
<script>
    window.campaignLogFilterData = {
        status: null
    };
    (function() {
        'use strict';
        let campaignChart = null;
        document.addEventListener('alpine:init', () => {
            Alpine.data('initialRequiredData', () => ({
                filterStatus: null,
                totalContacts:'{{ __tr($totalContacts)  }}',
                totalDeliveredInPercent:'{{ __tr($totalDeliveredInPercent) }}',
                totalDelivered:'{{ __tr($totalDelivered + $totalRead) }}',
                // totalDelivered:'{{ __tr($totalDelivered) }}',
                totalRead:'{{ __tr($totalRead) }}',
                totalReadInPercent:'{{ __tr($totalReadInPercent) }}',
                totalFailed:'{{ __tr($totalFailed) }}',
                totalFailedInPercent:'{{ __tr($totalFailedInPercent) }}',
                executedCount:{{ $messageLog->count() ?? 0 }},
                inQueuedCount:{{ $queueMessages->where('status', 1)->count() ?? 0 }},
                statusText:'{{ $statusText }}',
                campaignStatus:'{{ $campaignStatus }}',
                queueFailedCount:{{ $queueFailedCount }},
                filterStatus: null,
                filterTable(status) {
                    this.filterStatus = status;
                    window.campaignLogFilterData.status = status;
                    // let baseUrl = "{{ route('vendor.campaign.executed.log.list.view', ['campaignUid' => $campaignUid]) }}";
                    // let finalUrl = status ? `${baseUrl}?status=${status}` : baseUrl;
                    // $('#lwCampaignQueueLog').DataTable().ajax.url(finalUrl).load();
                    $('#lwCampaignQueueLog').DataTable().ajax.reload(null, true);
                }
            }));
            Alpine.data('campaignTabs', () => ({
                tab: 'executed',
                init() {
                    this.$watch('tab', value => {
                        if (value === 'queue') {
                            this.initQueueTable();
                        }
                         else if (value === 'executed') {
                            this.initExecutedTable();
                        }
                    });

                    if (this.tab === 'queue') this.initQueueTable();
                    if (this.tab === 'executed') this.initExecutedTable();
                },
                initQueueTable() {
                    Alpine.nextTick(() => {
                        const tableId = '#lwCampaignQueueTable';

                        // if ($.fn.DataTable.isDataTable(tableId)) {
                        //     // $(tableId).DataTable().clear().destroy();
                        //     $('#lwCampaignQueueTable').DataTable().destroy();
                        //     // Remove wrappers just in case
                        //     $(tableId).siblings('.dataTables_length, .dataTables_filter, .dataTables_wrapper').remove();
                        // }
                    });
                },
                initExecutedTable() {
                    Alpine.nextTick(() => {
                        const tableId = '#lwCampaignQueueLog';

                        // if ($.fn.DataTable.isDataTable(tableId)) {
                        //     // $(tableId).DataTable().clear().destroy();
                        //     $('#lwCampaignQueueLog').DataTable().destroy();
                        //     // Remove wrappers just in case
                        //     $(tableId).siblings('.dataTables_length, .dataTables_filter, .dataTables_wrapper').remove();
                        // }
                    });
                }
            }));
            window.campaignLogFilterData = {
                status: null
            };
            window.LoadCamapignPieChartData = function(seriesData) {
                const total = seriesData.reduce((a, b) => a + b, 0);
                const options = {
                    chart: { 
                        width: 380, 
                        type: 'donut' 
                    },
                    fill: { 
                        type: 'gradient' 
                    },
                    labels: total > 0 ? ['In Queue','Delivered', 'Failed','Read','Sent'] : ['No Data'],
                    series: total > 0 ? seriesData : [1],
                    colors: total > 0 
                        ? ['#FF9800','#2E7D32','#C62828','#1565C0','#6A1B9A'] 
                        : ['#008ae6'],
                    legend: { 
                        position: 'bottom' 
                    },
                    responsive: [
                        {
                            breakpoint: 1024,
                            options: {
                                chart: { 
                                    width: 350 
                                },
                                legend: {
                                     position: 'bottom' 
                                }
                            }
                        },
                    ]
                };
                if (!campaignChart) {
                    campaignChart = new ApexCharts(document.querySelector("#campaignDonutChart"), options);
                    campaignChart.render();
                } else {
                    campaignChart.updateSeries(options.series);
                }
            };
            // function fetchAndUpdateCampaignChart() {
            //     $.get("{{ route('vendor.campaign.status.data', ['campaignUid' => $campaignUid ]) }}", function(response) {
            //         if (response && response.data) {
            //             const seriesData = [
            //                 response.data.total_queued_for_chat ?? 0,
            //                 response.data.total_delivered ?? 0,
            //                 response.data.total_failed ?? 0,
            //                 response.data.total_read ?? 0,
            //                 response.data.total_sent ?? 0
            //             ];
            //             LoadCamapignPieChartData(seriesData);
            //         }
            //     });
            // }
        });
    })();
</script>
@push('appScripts')
<script>
(function($) {
    'use strict';

    // Wait until the table is initialized
    $(document).ready(function () {
        // const table = $('#lwCampaignQueueLog').DataTable();
        // // Inject status into every request
        // table.on('preXhr.dt', function (e, settings, data) {
        //     data.status = window.campaignLogFilterData.status;
        // });
        LoadCamapignPieChartData([
            {{ $totalQueuedForChat ?? 0 }},
            {{ $totalDelivered ?? 0 }},
            {{ $totalFailed ?? 0 }},
            {{ $totalRead ?? 0 }},
            {{ $totalSent ?? 0 }}
        ]);
        $('#lwCampaignQueueLog').on('preXhr.dt', function (e, settings, data) {
            data.status = window.campaignLogFilterData.status;
        });

        
        $('#lwCampaignQueueLog_wrapper, #lwCampaignQueueTable_wrapper').each(function() {
            var $wrapper = $(this);

            var $flexContainer = $('<div class="d-flex justify-content-between align-items-center mb-2"></div>');
            var $leftControls = $('<div class="d-flex"></div>');
            $leftControls.append($wrapper.find('.dataTables_length'));
            $leftControls.append($wrapper.find('.dataTables_filter'));

             $('#lwCampaignQueueLog_filter input[type="search"], #lwCampaignQueueTable_filter input[type="search"]')
             .attr('placeholder', 'Search...').addClass('search-invoice-input');

                $('#lwCampaignQueueLog_filter input[type="search"]').wrap('<div class="input-group"></div>');
                // $('#lwCampaignQueueLog_filter .input-group').prepend(`
                //     <span class="input-group-text bg-white border-0" style="padding-right:0.5rem;">
                //         <i class="mdi mdi-magnify fs-15  text-muted"></i>
                //     </span>
                // `);

                // $('#lwCampaignQueueLog_length label, #lwCampaignQueueTable_length label').html(function(_, html) {
                //     return html.replace(' entries', '');
                // });
                
                // Remove the default label text
                $('#lwCampaignQueueLog_filter label,#lwCampaignQueueTable_filter label').contents().filter(function() {
                    return this.nodeType === 3;
                }).remove();
                
                var $actions = $(`
                    <div class="d-flex custom-table-actions" x-data="{
                        get reportUrl() {
                            return tab === 'queue' ? '{{ $queueReportUrl }}' : '{{ $executedReportUrl }}';
                        }
                    }">
                        <button type="button" class="btn btn-dark btn-sm mr-2" id="refreshTable" @click="filterTable('null')">
                            <i class="mdi mdi-sync fs-15 "></i> {{ __tr('Refresh') }}
                        </button>
                            <a :href="reportUrl" data-method="post" class="btn btn-dark btn-sm">
                                <i class="mdi mdi-download fs-15 "></i> {{ __tr('Report') }}
                            </a>
                    </div>
                `);

            $flexContainer.append($leftControls).append($actions);
            $wrapper.prepend($flexContainer);

            // $actions.on('click', '#refreshTable', function() {
            //     var tableId = $wrapper.find('table').attr('id');
            //     $('#' + tableId).DataTable().ajax.reload(null, false);
            // });
        });
    });

    // if (window.Echo) {
    //     window.Echo.private(`vendor-channel.${window.appConfig.vendorUid}`)
    //         .listen('.VendorChannelBroadcast', function(data) {
    //             if (data.campaignUid === "{{ $campaignUid }}" && $('.lw-campaign-window-{{ $campaignUid }}').length) {
    //                 fetchAndUpdateCampaignChart();
    //             }
    //         });
    // }
    // initial request
    __DataRequest.get("{{ route('vendor.campaign.status.data', ['campaignUid' => $campaignUid ]) }}");
})(jQuery);
</script>
@endpush
@endsection()