@extends('layouts.admin')
@section('content')
    <div class="page-header text-uppercase __marketing_analytics_page">
        <ul class="list-unstyled space-list m-0">
            <li>
                <p>{{ __('marketing.title')}}</p>
            </li>
            <li>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{ __('common.home')}}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('marketing.title')}}</li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col">
        <div class="row marketing">
            <div class="col-12">
                <div class="row col-12 d-flex mb-1 mx-0 px-0">
                    <div class="col-md-4 mb-0 pl-0 pr-0">
                        <div class="form-group custom-input-group custom-input-group-small date-form-control float-left w-80">
                            <div data-time="1" class="order_dt_picker_range"
                                 style="background: #fff; cursor: pointer; padding: 8px 6px; border: 1px solid #ccc; width: 100%;height: 40px;">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-0">
                    </div>
                    <div class="col-md-4 mb-0">
                    </div>
                </div>
                @php
                    $headingCards = [
                                        [
                                            'title' => __('marketing.total_notification_sent'),
                                            'icon' => 'fa fa-apple',
                                            'delivered' => __('marketing.delivered'),
                                            'delivered_class' => '__total_delivered',
                                            'failed' => __('marketing.failed'),
                                            'failed_class' => '__total_failed',
                                            'background' => '#7289d740'
                                        ],
                                        [
                                            'title' => __('marketing.android'),
                                            'icon' => 'fa fa-apple',
                                            'delivered' => __('marketing.delivered'),
                                            'delivered_class' => '__android_delivered',
                                            'failed' => __('marketing.failed'),
                                            'failed_class' => '__android_failed',
                                            'background' => '#75dbd66b'
                                        ],
                                        [
                                            'title' => __('marketing.ios'),
                                            'icon' => 'fa fa-address',
                                            'delivered' => __('marketing.delivered'),
                                            'delivered_class' => '__ios_delivered',
                                            'failed' => __('marketing.failed'),
                                            'failed_class' => '__ios_failed',
                                            'background' => '#72c19c3d'
                                        ],
                                ];

                @endphp
                <div class="row col-12 d-flex mb-3">
                    @foreach($headingCards as $hc)
                    <div class="col-md-3 round-white-bg box-shadow top-card mr-3" style="height: 90px;background:{!! $hc['background'] !!}">
                        <p style="margin-bottom: 8px;"> {!! $hc['title'] !!}</p >
                        <div class="d-flex">
                            <div class="col-6 pl-0">
                                <p class="w100 mb-0">{!! $hc['delivered'] !!}</p>
                            </div>
                            <div class="col-6 pr-0 d-flex justify-content-end align-items-center">
                                {{--<i class="fa fa-check px-1 w-auto text-success" aria-hidden="true"></i>--}}<p class="mb-0 font-bold {!! $hc['delivered_class'] !!}"></p>
                            </div>
                        </div>
                        <div class="d-flex">
                            <div class="col-6 pl-0">
                                <p class="mb-0">{!! $hc['failed'] !!}</p>
                            </div>
                            <div class="col-6 pr-0 d-flex justify-content-end align-items-center">
                                {{--<i class="fa fa-times px-1 w-auto text-danger" aria-hidden="true"></i>--}}<p class="mb-0 font-bold {!! $hc['failed_class'] !!}"></p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="round-white-bg box-shadow mb-3">
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex row">
                                <div class="col-md-3">
                                    <label for="" class="text-center m-0 w-100">{!! __('marketing.opened') !!}</label>
                                    <p class="text-center w-100 m-0 _total_click font-bold"></p>
                                    <div>
                                        <canvas id="chart2" class="chart-canvas" style="height: 130px;width: 130px"></canvas>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label for="" class="text-center m-0 w-100">{!! __('marketing.uninstall') !!}</label>
                                    <p class="text-center w-100 m-0 _total_uninstall font-bold"></p>
                                    <div>
                                        <canvas id="chart3" class="chart-canvas" style="height: 130px;width: 130px"></canvas>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label for="" class="text-center m-0 w-100">{!! __('marketing.disabled') !!}</label>
                                    <p class="text-center w-100 m-0 _total_disabled font-bold"></p>
                                    <div>
                                        <canvas id="chart4" class="chart-canvas" style="height: 130px;width: 130px"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="round-white-bg box-shadow d-none">
                    <div class="row">
                        <div class="col-12">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function(){
            getStatistics();
        });

        function getStatistics(){
            const date = $('.order_dt_picker_range').html().split(' - ');

            let data = {
                start_date : date[0],
                end_date : date[1],
            }
            $.ajax({
               url : '{!! route('marketing-analytics.statistics') !!}',
                method : 'GET',
                data : data,
                success : function(response){
                   response = JSON.parse(response);

                    $('.__total_delivered').html(response.total_delivered);
                    $('.__total_failed').html(response.total_failed);

                    $('.__android_delivered').html(response.android_delivered);
                    $('.__android_failed').html(response.android_failed);

                    $('.__ios_delivered').html(response.ios_delivered);
                    $('.__ios_failed').html(response.ios_failed);

                    if(response.top_donut_data.length > 0){
                        renderDonutDiagram(response);
                    }
                }
            });
        }

        const renderDonutDiagram = (response) =>{
            // Create the donut charts
            response.top_donut_data.forEach((data, index) => {

                let chartStatus = Chart.getChart(`chart${data.chart_id}`); // <canvas> id
                if (chartStatus != undefined) {
                    chartStatus.destroy();
                }

                const ctx = document.getElementById(`chart${data.chart_id}`).getContext("2d");
//                let centerPercentage = '0%';
//                let fill =  0;
//                let empty =  100;
//                if(data.chart_id == 2 || data.chart_id == 3){
                    let centerPercentage = data.center_percentage;
                    let fill = data.fill;
                    let empty = data.empty;
                    $('.'+data.class).html(data.value);
//                }

                const chart = new Chart(ctx, {
                    type: "doughnut",
                    data: {
                        datasets: [
                            {
                                data: [fill, empty],
                                backgroundColor: [data.color, "#E2E2E2"],
                            },
                        ],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        legend: {
                            display: false,
                        },
                        cutout: "80%",
                        plugins: {
                            tooltip: {
                                enabled: false
                            }
                        },
                        animation: {
                            onComplete: function () {
                                const chartInstance = chart; // Use the 'chart' variable instead of 'this.chart'
                                const ctx = chartInstance.ctx;
                                const chartArea = chartInstance.chartArea;

                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'middle';
                                ctx.font = 'bold 16px Arial';
                                ctx.fillStyle = data.color;

                                const centerX = (chartArea.left + chartArea.right) / 2;
                                const centerY = (chartArea.top + chartArea.bottom) / 2;
                                ctx.fillText(centerPercentage, centerX, centerY);
                            },
                        },
                    },
                });
            });

        }


    </script>
@endsection