@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.notification_summary')}}</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" aria-current="page"><a href="{{route('notifications.index')}}">{{ __('notifications.title') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('marketing.notification_summary')}}</li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col">
        <div class="row marketing px-2">
            <div class="col-12 d-flex">
                <div class="col-6 mr-2 round-white-bg box-shadow">
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex row">
                                    <div class="col-md-4">
                                        <p class="text-center w-100 m-0 font-18 font-bold text-primary _delivered">{!! $notification->success + $notification->failed !!}</p>
                                        <label for="" class="text-center m-0 font-12 w-100">{!! __('marketing.total_sent')  !!}</label>
                                    </div>
                                    <div class="col-md-4">
                                        <p class="text-center w-100 m-0 font-18 font-bold text-success _delivered">{!! $notification->success ?? 0 !!}</p>
                                        <label for="" class="text-center m-0 font-12 w-100">{!! __('marketing.delivered').' ('.$notification->delivered_percentage.')'  !!}</label>
                                    </div>
                                    <div class="col-md-4">
                                        <p class="text-center w-100 m-0 font-18 font-bold text-danger _failed">{!! $notification->failed ?? 0 !!}</p>
                                        <label for="" class="text-center text-bold m-0 font-12 w-100 ">{!! __('marketing.failed').' ('.$notification->failed_percentage.')'  !!}</label>
                                    </div>
                                </div>
                                <div class="notification_graph mt-4 col-12 d-flex">
                                    <div class="col-4">
                                        <div>
                                            <canvas id="notification-donut" class="chart-canvas" style="height: 130px;width: 130px"></canvas>
                                        </div>
                                        <label class="text-center mt-1" style="width: -webkit-fill-available;">{!! __('marketing.total_sent').' <b>'.($notification->success + $notification->failed).'</b>' !!}</label>
                                    </div>
                                    <div class="col-8 noti-graph-stats">
                                        <div class="d-flex">
                                            <div class="col-4 text-right">
                                                <label class="badge badge-info">{!! $notification->opened !!}</label>
                                            </div>
                                            <div class="notification-bar col-8">
                                                <div class="inner-bar" style="background: #17a2b8;width: {!! $notification->opened_percentage !!}">
                                                    <span class="font-12 p-1">{!! __('marketing.opened') !!} {!! $notification->opened_percentage !!}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="col-4 text-right">
                                                <label class="badge badge-dark">{!! $notification->unopened !!}</label>
                                            </div>
                                            <div class="notification-bar col-8">
                                                <div class="inner-bar" style="background: #8392a7;width: {!! $notification->unopened_percentage !!}">
                                                    <span class="font-12 p-1">{!! __('marketing.not_opened') !!} {!! $notification->unopened_percentage !!}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="col-6 ml-2 round-white-bg box-shadow">
                    <div class="row">
                        <div class="col-12 d-flex" style="border-bottom: 1px solid #00000014;">
                            <div class="col-md-3 py-3 font-bold">{!! __('marketing.topic') !!}</div>
                            <div class="col-md-9 py-3">{!! $notification->title !!}</div>
                        </div>
                        <div class="col-12 d-flex" style="border-bottom: 1px solid #00000014;">
                            <div class="col-md-3 py-3 font-bold">{!! __('marketing.content') !!}</div>
                            <div class="col-md-9 py-3">{!! $notification->message !!}</div>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>

            <!-- Users table who clicked the notification start -->
            <div class="col-12 mt-4 pr-0">
                <div class="round-white-bg box-shadow">
                    <div class="row">
                        <div class="col-12">
                            <h5 class="mt-4 mb-2">{!! __('marketing.opened_users_list') !!}</h5>
                            <div class="table-responsive">
                                <table id="dTable" data-sort="1" data-url="{{route('notifications.users-pagination',$notification->id)}}" class="striped-table w-100 custom-datatable font13">
                                    <thead>
                                    <tr>
                                        <th class="font-medium font13 no-sort">{{ __('common.sr-no')}}</th>
                                        <th class="font-medium font13">{{ __('notifications.name')}}</th>
                                        <th class="font-medium font13">{{ __('notifications.email')}}</th>
                                        <th class="font-medium font13">{{ __('notifications.phone')}}</th>
                                        <th class="font-medium font13">{{ __('notifications.joined_on')}}</th>
                                    </tr>
                                    </thead>
                                    <tbody class="text-muted font-medium"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Users table who clicked the notification end -->
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function(){
            const ctx = document.getElementById(`notification-donut`).getContext("2d");
            let delivered =  "{!! $notification->success !!}";
            {{--let failed =  "{!! $notification->failed !!}";--}}
            let opened =  "{!! $notification->opened !!}";
            let unopened =  "{!! $notification->unopened !!}";

            centerPercentage = "{!! $notification->center_percentage !!}";

            let empty = (opened == 0 && unopened == 0) ? '100' : '0';

            const chart = new Chart(ctx, {
                type: "doughnut",
                data: {
                    datasets: [
                        {
                            data: [opened,unopened,empty], // delivered, failed,
                            backgroundColor: ["#17a2b8", "#8392a7","#dedede"], //"#7ed321","#C62D23",
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        display: false,
                    },
                    cutout: "70%",
                    plugins: {
                        tooltip: {
                            enabled: false
                        }
                    },
                    animation: {
                        onComplete: function () {
                            const chartInstance = chart; 
                            const ctx = chartInstance.ctx;
                            const chartArea = chartInstance.chartArea;

                            let centerText = "Opened\n" + opened;
                            let centerX = chartArea.width / 2;
                            let centerY = chartArea.height / 2;
                            let lineHeight = 20;

                            let lines = centerText.split('\n');
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.font = 'bold 18px Arial';

                            for (let line of lines) {
                                ctx.fillText(line, centerX, centerY);
                                centerY += lineHeight;
                            }
                        },
                    },
                },
            });
        });
    </script>
@endsection