@php
    use Carbon\Carbon;
    use App\Models\DaClass;
    use App\Models\LevelCompletionModule\LevelCompletion;

    $startOfMonth = date('Y-m-d', strtotime(Carbon::now()->startOfMonth()));
    $today = date('Y-m-d');
    $currentMonth = Carbon::now()->format('F');

@endphp
<x-dashboard.admin-layout>
    <x-slot name='title'>Presales Dashboard - Dreamers Academy</x-slot>
    <x-slot name="style">
        <link rel="stylesheet" href="{{ asset('assets/libs/daterangepicker/css/daterangepicker.css') }}">
    </x-slot>
    <style>
        .pd-5 {
            /* padding: 5px 10px !important; */
        }
    </style>
    <!-- Main wrapper -->
    <div class="container-fluid">
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <input class="form-control" type="text" value="{{ $startOfMonth . ' to ' . $today }}"
                            name="registrationDateRange" id="registrationDateRange">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 d-flex align-items-stretch">
                <div class="card w-100 bg-light-info overflow-hidden shadow-none">
                    <div class="card-body position-relative">
                        <div class="row">
                            <div class="col-sm-7">
                                <div class="d-flex align-items-center mb-7">
                                    <h5 class="fw-semibold mb-0 fs-5">Presales Dashboard</h5>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="border-end pe-4 border-muted border-opacity-10">
                                        <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">
                                            <span class="totalRegistrationCount">0</span>
                                            <i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
                                        </h3>
                                        <p class="mb-0 text-dark">Total registration</p>
                                    </div>
                                    <div class="ps-4">
                                        <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">
                                            <span class="perDayRegistrationCount">0</span>
                                            <i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
                                        </h3>
                                        <p class="mb-0 text-dark">Per day average registration</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="welcome-bg-img mb-n7 text-end">
                                    <div class="text-center">
                                        <img src="{{ asset('assets/modernize/images/breadcrumb/ChatBc.png') }}"
                                            alt="" class="img-fluid">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-4 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body p-4">
                        <div class="d-sm-flex d-block align-items-center justify-content-between mb-3">
                            <div class="mb-3 mb-sm-0">
                                <h4 class="fw-semibold">
                                    <span class="noDeviceCount">0</span> <span class="noDeviceCountPercent fs-3"> (0%)
                                    </span>
                                </h4>
                                <p class="mb-2 fs-3">No device</p>
                            </div>
                        </div>


                        <div id="device"></div>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <div
                                    class="bg-light-primary rounded-2 me-8 p-8 d-flex align-items-center justify-content-center">
                                    <i class="ti ti-grid-dots text-primary fs-6"></i>
                                </div>
                                <div>
                                    <h6 class="fw-semibold text-dark fs-4 mb-0">
                                        <span class="hasDeviceCount">0</span>
                                    </h6>
                                    <p class="fs-3 mb-0 fw-normal">Has Device</p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div
                                    class="bg-light-secondary rounded-2 me-8 p-8 d-flex align-items-center justify-content-center">
                                    <i class="ti ti-grid-dots text-secondary fs-6"></i>
                                </div>
                                <div>
                                    <h6 class="fw-semibold text-dark fs-4 mb-0">
                                        <span class="noDeviceCount">0</span>
                                    </h6>
                                    <p class="fs-3 mb-0 fw-normal">No Device</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div>
                        <h5 class="card-title fw-semibold mb-1">Daily Trail Class Registration Count</h5>
                        <div id="dailyTrialClassCount" class="mb-7 pb-8"></div>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <div
                                    class="bg-light-primary rounded me-8 p-8 d-flex align-items-center justify-content-center">
                                    <i class="ti ti-grid-dots text-primary fs-6"></i>
                                </div>
                                <div>
                                    <p class="fs-3 mb-0 fw-normal">Total</p>
                                    <h6 class="fw-semibold text-dark fs-4 mb-0">
                                        <span class="monthlyTotalRegistrationCount">0</span>
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card w-100">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <h5 class="card-title fw-semibold">Trial Class Status Count</h5>
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle text-nowrap mb-0 table-borderd"
                                    id="cs-trial-class-status">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center">Name</th>
                                            <th style="text-align: center">Registered</th>
                                            <th style="text-align: center">Absent</th>
                                            <th style="text-align: center">Wants to Reschedule</th>
                                            <th style="text-align: center">Not Reachable</th>
                                            <th style="text-align: center">Will Attend</th>
                                            <th style="text-align: center">Rescheduled</th>
                                            <th style="text-align: center">Not Interested</th>
                                        </tr>
                                    </thead>
                                    <tbody class="border-top">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card w-100">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <h5 class="card-title fw-semibold">Teachers Trial Class Count</h5>
                            <div class="table-responsive">
                                <table id="teacher-trialclass-count-datatable"
                                    class="table border table-striped table-bordered display table-responsive"
                                    style="width: 100%">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">Teacher</th>
                                            <th scope="col">Trial Class Count</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card w-100">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <h5 class="fw-semibold">Age </h5>
                            <div id="agePieChart"></div>
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <div
                                        class="bg-light-primary rounded-2 me-8 p-8 d-flex align-items-center justify-content-center">
                                        <i class="ti ti-grid-dots text-primary fs-6"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-semibold text-dark fs-4 mb-0">
                                            <span class="has7to8Count">0</span>
                                        </h6>
                                        <p class="fs-3 mb-0 fw-normal">7-8 Age</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div
                                        class="bg-light-primary rounded-2 me-8 p-8 d-flex align-items-center justify-content-center">
                                        <i class="ti ti-grid-dots text-primary fs-6"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-semibold text-dark fs-4 mb-0">
                                            <span class="has8to9Count">0</span>
                                        </h6>
                                        <p class="fs-3 mb-0 fw-normal">8-9 Age</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div
                                        class="bg-light-secondary rounded-2 me-8 p-8 d-flex align-items-center justify-content-center">
                                        <i class="ti ti-grid-dots text-secondary fs-6"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-semibold text-dark fs-4 mb-0">
                                            <span class="has11to12Count">0</span>
                                        </h6>
                                        <p class="fs-3 mb-0 fw-normal">11-16 Age</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-lg-6">
                            <h5 class="card-title fw-semibold">Top 5</h5>
                            <div class="table-responsive">
                                <table id="top-daytime-trialclass-count-datatable"
                                    class="table border table-striped table-bordered display table-responsive"
                                    style="width: 100%">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">Day</th>
                                            <th scope="col">Time</th>
                                            <th scope="col">Count</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="card w-100">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <h5 class="card-title fw-semibold mb-4">Upcoming Trial Class Schedule Report</h5>
                            <div class="table-responsive">
                                <table id="upcoming-trialclass-schedule-count-datatable"
                                    class="table border table-striped table-bordered display table-responsive"
                                    style="width: 100%">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">Date</th>
                                            <th scope="col">Day</th>
                                            <th scope="col">Schedule</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <h5 class="card-title fw-semibold mb-4">Intro Call CS Report</h5>
                            <div class="table-responsive">
                                <table id="intro-call-cs-report-datatable"
                                    class="table border table-striped table-bordered display table-responsive"
                                    style="width: 100%">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center">ID</th>
                                            <th style="text-align: center">Name</th>
                                            <th style="text-align: center">Registered</th>
                                            <th style="text-align: center">Intro Call</th>
                                            <th style="text-align: center">Diff</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <x-slot name="script">

        <script src="{{ asset('assets/libs/daterangepicker/js/moment.min.js') }}"></script>
        <script src="{{ asset('assets/libs/daterangepicker/js/daterangepicker.js') }}"></script>
        <script src="{{ asset('assets/libs/daterangepicker/js/daterangepicker-init.js') }}"></script>

        <script>
            $(document).ready(function() {
                var dateRange = $('#registrationDateRange').val();

                filterTotalTrialClassRegistrationCount(dateRange);

                filterTotalTrialClassDeviceCount(dateRange);

                filterDailyTrialClassCountBarChart(dateRange);

                filterCsTrialClassStatusCount(dateRange);

                filterTeacherTrialClassScheduleCount(dateRange);

                filterAgeRangeCount(dateRange);
                
                filterTopDayTimeTrialClassCount(dateRange);

                filterUpcomingTrialClassDayTimeScheduleCount(dateRange);

                filterIntroCallCsReport(dateRange);

                // ======== deviceCountChart =======
                function deviceCountChart(getCurrentMonthHasDeviceCount, getCurrentMonthNoDeviceCount) {
                    $("#device").html("");
                    var device = {
                        series: [getCurrentMonthHasDeviceCount, getCurrentMonthNoDeviceCount],
                        labels: ["Has Device", "No Device"],
                        chart: {
                            height: 110,
                            type: "donut",
                            fontFamily: "Plus Jakarta Sans', sans-serif",
                            foreColor: "#c6d1e9",
                        },

                        tooltip: {
                            theme: "dark",
                            fillSeriesColor: false,
                        },

                        colors: ["var(--bs-primary)", "var(--bs-secondary)"],
                        dataLabels: {
                            enabled: false,
                        },

                        legend: {
                            show: false,
                        },

                        stroke: {
                            show: true,
                        },

                        plotOptions: {
                            pie: {
                                donut: {
                                    size: "70%",
                                    background: "none",
                                    labels: {
                                        show: false,
                                        name: {
                                            show: true,
                                            fontSize: "18px",
                                            color: undefined,
                                            offsetY: -10,
                                        },
                                        value: {
                                            show: false,
                                            color: "#98aab4",
                                        },
                                    },
                                },
                            },
                        },
                    };

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

                // ======== ageRangeCountChart =======
                function ageRangeCountChart(get7to8HasCount, get8to9HasCount, get11to16HasCount) {

                    $("#agePieChart").html("");
                    var agePieChart = {
                        series: [get7to8HasCount, get8to9HasCount, get11to16HasCount],
                        labels: ["7-8 Age", "8-9 Age", "11-16 Age"],
                        chart: {
                            height: 110,
                            type: "donut",
                            fontFamily: "Plus Jakarta Sans', sans-serif",
                            foreColor: "#c6d1e9",
                        },

                        tooltip: {
                            theme: "dark",
                            fillSeriesColor: false,
                        },

                        colors: ["var(--bs-primary)", "var(--bs-secondary)", "var(--bs-info)"],
                        dataLabels: {
                            enabled: false,
                        },

                        legend: {
                            show: true,
                        },

                        stroke: {
                            show: true,
                        },

                        plotOptions: {
                            pie: {
                                donut: {
                                    size: "70%",
                                    background: "none",
                                    labels: {
                                        show: false,
                                        name: {
                                            show: true,
                                            fontSize: "18px",
                                            color: undefined,
                                            offsetY: -10,
                                        },
                                        value: {
                                            show: true,
                                            color: "#98aab4",
                                        },
                                    },
                                },
                            },
                        },
                    };

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

                // ========= dailyTrialClassCountBarChart =============
                function dailyTrialClassCountBarChart(days, dailySum) {
                    $("#dailyTrialClassCount").html("");
                    var dailyTrialClassCount = {
                        series: [{
                            name: "Trial Class Registration",
                            data: dailySum, //[20, 15, 30, 25, 10, 15],
                        }, ],

                        chart: {
                            toolbar: {
                                show: false,
                            },
                            height: 260,
                            type: "bar",
                            fontFamily: "Plus Jakarta Sans', sans-serif",
                            foreColor: "#adb0bb",
                        },
                        // colors: ["#f2f6fad9", "#f2f6fad9", "var(--bs-primary)", "#f2f6fad9", "#f2f6fad9", "#f2f6fad9"],
                        colors: ["var(--bs-primary)"],
                        plotOptions: {
                            bar: {
                                borderRadius: 4,
                                columnWidth: "45%",
                                distributed: true,
                                endingShape: "rounded",
                            },
                        },

                        dataLabels: {
                            enabled: true,
                        },
                        legend: {
                            show: false,
                        },
                        grid: {
                            yaxis: {
                                lines: {
                                    show: false,
                                },
                            },
                            xaxis: {
                                lines: {
                                    show: false,
                                },
                            },
                        },
                        xaxis: {
                            categories: days, //[["Apr"], ["May"], ["June"], ["July"], ["Aug"], ["Sept"]],
                            axisBorder: {
                                show: false,
                            },
                            axisTicks: {
                                show: false,
                            },
                        },
                        yaxis: {
                            labels: {
                                show: false,
                            },
                        },
                        tooltip: {
                            theme: "dark",
                        },
                    };

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

                //  its for filterTotalTrialClassRegistrationCount 
                function filterTotalTrialClassRegistrationCount(dateRange) {

                    $.ajax({
                        type: "GET",
                        url: "/filter-total-trial-class-registration-count",
                        data: {
                            dateRange: dateRange
                        },
                        success: function(response) {
                            $('.totalRegistrationCount').text(response
                                .totalTrialClassRegistrationCount);
                            $('.perDayRegistrationCount').text(response.perDayRegistrationsCount);
                        },
                        error: function(data) {
                            console.log('fail');
                        }
                    });
                }

                //  its for filterTotalTrialClassDeviceCount
                function filterTotalTrialClassDeviceCount(dateRange) {
                    $.ajax({
                        type: "GET",
                        url: "/filter-total-device-count",
                        data: {
                            dateRange: dateRange
                        },
                        success: function(response) {
                            $('.hasDeviceCount').text(response.getFilterHasDeviceCount);
                            $('.noDeviceCount').text(response.getFilterNoDeviceCount);
                            $('.noDeviceCountPercent').text(response.noDevicePercent);

                            deviceCountChart(response.getFilterHasDeviceCount, response
                                .getFilterNoDeviceCount);
                        },
                        error: function(data) {
                            console.log('fail');
                        }
                    });
                }


                // dailyTrialclassCountChart
                function filterDailyTrialClassCountBarChart(dateRange) {
                    $.ajax({
                        type: "GET",
                        url: "/daily-trialclass-count-chart",
                        data: {
                            dateRange: dateRange
                        },
                        success: function(response) {
                            $(".monthlyTotalRegistrationCount").text(response.total);
                            dailyTrialClassCountBarChart(response.daysInMonth, response.getDailySums);

                            // loadTrialClassesStatus(response.trialClassStatusCounts);

                        },
                        error: function(data) {
                            console.log('fail');
                        }
                    });
                }


                // =============== its for cs-trial-class-status ===========
                function filterCsTrialClassStatusCount(dateRange) {
                    if ($.fn.DataTable.isDataTable('#cs-trial-class-status')) {
                        $('#cs-trial-class-status').DataTable().destroy();
                    }

                    var dataTable = $('#cs-trial-class-status').DataTable({
                        dom: "<'row'<'col-sm-4'l><'col-sm-4'B><'col-sm-4'f>>tip",
                        buttons: ["excel", "pdf", "print"],
                        buttons: [{
                                extend: "excel",
                                title: "Trial Class Status Count",
                                text: '<i class="ti ti-file-spreadsheet"></i> Excel',
                                titleAttr: 'Trial Class Status Count Excel File',
                                footer: true,
                                messageTop: 'Trial Class Status Count Report',
                                className: "btn-sm btn-sm btn-success",
                            },
                            {
                                extend: "print",
                                title: "Trial Class Status Count",
                                text: '<i class="ti ti-printer fs-4"></i> Print',
                                titleAttr: 'Trial Class Status Count Excel File',
                                footer: true,
                                messageTop: 'Trial Class Status Count Report',
                                className: "btn-sm btn-sm btn-primary",
                            },
                            {
                                extend: "pdf",
                                title: "Trial Class Status Count",
                                text: '<i class="ti ti-file-text"></i> PDF',
                                titleAttr: 'Trial Class Status Count PDF File',
                                footer: true,
                                messageTop: 'Trial Class Status Count Report',
                                className: "btn-sm btn-sm btn-secondary",
                                orientation: 'landscape',
                                pageSize: 'LEGAL'
                            },
                        ],
                        scrollX: true,
                        orderCellsTop: true,
                        fixedHeader: true,
                        lengthMenu: [
                            [10, 20, 50, 100, 150, 200, 500],
                            [10, 20, 50, 100, 150, 200, "All"],
                        ],
                        processing: true,
                        sProcessing: "<span class='fas fa-sync-alt'></span>",
                        serverSide: false,
                        ajax: {
                            type: 'post',
                            url: "{{ route('trialclass-status-count-datatable') }}",
                            data: function(d) {
                                d._token = "{{ csrf_token() }}";
                                d.dateRange = dateRange;
                            },
                        },
                        columnDefs: [{
                            className: 'text-center',
                            targets: '_all'
                        }],
                        columns: [
                            {
                                data: 'name',
                                name: 'name',
                            },
                            {
                                data: 'registeredCount',
                                name: 'registeredCount',
                            },
                            {
                                data: 'absentCount',
                                name: 'absentCount',
                            },
                            {
                                data: 'wantsToRescheduleCount',
                                name: 'wantsToRescheduleCount',
                            },
                            {
                                data: 'notReachableCount',
                                name: 'notReachableCount',
                            },
                            {
                                data: 'willAttendCount',
                                name: 'willAttendCount',
                            },
                            {
                                data: 'rescheduledCount',
                                name: 'rescheduledCount',
                            },
                            {
                                data: 'notInterestedCount',
                                name: 'notInterestedCount',
                            },
                        ],
                    });

                    $(".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel").addClass(
                        "btn btn-primary mr-1");
                }

                // =============== its for teacher-trialclass-count-datatable ===========
                function filterTeacherTrialClassScheduleCount(dateRange) {
                    if ($.fn.DataTable.isDataTable('#teacher-trialclass-count-datatable')) {
                        $('#teacher-trialclass-count-datatable').DataTable().destroy();
                    }
                    var dataTable = $('#teacher-trialclass-count-datatable').DataTable({
                        dom: "<'row'<'col-sm-4'l><'col-sm-4'B><'col-sm-4'f>>tip",
                        buttons: ["excel", "pdf", "print"],
                        buttons: [{
                                extend: "excel",
                                title: "Teacher Trial Class Schedule",
                                text: '<i class="ti ti-file-spreadsheet"></i> Excel',
                                titleAttr: 'Teacher Trial Class Schedule Excel File',
                                footer: true,
                                messageTop: 'Teacher Trial Class Schedule Report',
                                className: "btn-sm btn-sm btn-success",
                            },
                            {
                                extend: "print",
                                title: "Teacher Trial Class Schedule",
                                text: '<i class="ti ti-printer fs-4"></i> Print',
                                titleAttr: 'Teacher Trial Class Schedule Excel File',
                                footer: true,
                                messageTop: 'Teacher Trial Class Schedule Report',
                                className: "btn-sm btn-sm btn-primary",
                            },
                            {
                                extend: "pdf",
                                title: "Teacher Trial Class Schedule",
                                text: '<i class="ti ti-file-text"></i> PDF',
                                titleAttr: 'Teacher Trial Class Schedule PDF File',
                                footer: true,
                                messageTop: 'Teacher Trial Class Schedule Report',
                                className: "btn-sm btn-sm btn-secondary",
                                orientation: 'landscape',
                                pageSize: 'LEGAL'
                            },
                        ],
                        scrollX: true,
                        orderCellsTop: true,
                        fixedHeader: true,
                        lengthMenu: [
                            [10, 20, 50, 100, 150, 200, 500],
                            [10, 20, 50, 100, 150, 200, "All"],
                        ],
                        processing: true,
                        sProcessing: "<span class='fas fa-sync-alt'></span>",
                        serverSide: false,
                        ajax: {
                            type: 'post',
                            url: "{{ route('teacher-trialclass-count-datatable') }}",
                            data: function(d) {
                                d._token = "{{ csrf_token() }}";
                                d.dateRange = dateRange;
                            },
                        },
                        columnDefs: [{
                            className: 'text-center',
                            targets: '_all'
                        }],
                        columns: [{
                                data: 'DT_RowIndex',
                                name: 'DT_RowIndex',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'name',
                                name: 'name',
                            },
                            {
                                data: 'count',
                                name: 'count',
                            },
                        ],
                    });

                    $(".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel").addClass(
                        "btn btn-primary mr-1");
                }
                
                // =============== its for top-daytime-trialclass-count-datatable ===========
                function filterTopDayTimeTrialClassCount(dateRange) {
                    if ($.fn.DataTable.isDataTable('#top-daytime-trialclass-count-datatable')) {
                        $('#top-daytime-trialclass-count-datatable').DataTable().destroy();
                    }
                    var dataTable = $('#top-daytime-trialclass-count-datatable').DataTable({
                        dom: "<'row'<'col-sm-2'><'col-sm-5'B><'col-sm-5'f>>tip",
                        buttons: ["excel", "pdf", "print"],
                        buttons: [{
                                extend: "excel",
                                title: "Top Day Time Trial Class",
                                text: '<i class="ti ti-file-spreadsheet"></i> Excel',
                                titleAttr: 'Top Day Time Trial Class Excel File',
                                footer: true,
                                messageTop: 'Top Day Time Trial Class Report',
                                className: "btn-sm btn-sm btn-success",
                            },
                            {
                                extend: "print",
                                title: "Top Day Time Trial Class",
                                text: '<i class="ti ti-printer fs-4"></i> Print',
                                titleAttr: 'Top Day Time Trial Class Excel File',
                                footer: true,
                                messageTop: 'Top Day Time Trial Class Report',
                                className: "btn-sm btn-sm btn-primary",
                            },
                            {
                                extend: "pdf",
                                title: "Top Day Time Trial Class",
                                text: '<i class="ti ti-file-text"></i> PDF',
                                titleAttr: 'Top Day Time Trial Class PDF File',
                                footer: true,
                                messageTop: 'Top Day Time Trial Class Report',
                                className: "btn-sm btn-sm btn-secondary",
                                orientation: 'landscape',
                                pageSize: 'LEGAL'
                            },
                        ],
                        scrollX: true,
                        orderCellsTop: true,
                        fixedHeader: true,
                        lengthMenu: [
                            [10, 20, 50, 100, 150, 200, 500],
                            [10, 20, 50, 100, 150, 200, "All"],
                        ],
                        processing: true,
                        sProcessing: "<span class='fas fa-sync-alt'></span>",
                        serverSide: false,
                        ajax: {
                            type: 'post',
                            url: "{{ route('top-day-time-trial-class-count-datatable') }}",
                            data: function(d) {
                                d._token = "{{ csrf_token() }}";
                                d.dateRange = dateRange;
                            },
                        },
                        columnDefs: [{
                            className: 'text-center',
                            targets: '_all'
                        }],
                        columns: [{
                                data: 'DT_RowIndex',
                                name: 'DT_RowIndex',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'day',
                                name: 'day',
                            },
                            {
                                data: 'time',
                                name: 'time',
                            },
                            {
                                data: 'count',
                                name: 'count',
                            },
                        ],
                    });

                    $(".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel").addClass("btn btn-primary mr-1");
                }

                // =============== its for upcoming-trialclass-schedule-count-datatable ===========
                function filterUpcomingTrialClassDayTimeScheduleCount(dateRange) {
                    if ($.fn.DataTable.isDataTable('#upcoming-trialclass-schedule-count-datatable')) {
                        $('#upcoming-trialclass-schedule-count-datatable').DataTable().destroy();
                    }
                    var dataTable = $('#upcoming-trialclass-schedule-count-datatable').DataTable({
                        dom: "<'row'<'col-sm-3'l><'col-sm-6'B><'col-sm-3'f>>tip",
                        buttons: ["excel", "pdf", "print"],
                        buttons: [{
                                extend: "excel",
                                title: "Upcoming Trial Class Schedule",
                                text: '<i class="ti ti-file-spreadsheet"></i> Excel',
                                titleAttr: 'Upcoming Trial Class Schedule Excel File',
                                footer: true,
                                messageTop: 'Upcoming Trial Class Schedule Report',
                                className: "btn-sm btn-sm btn-success",
                            },
                            {
                                extend: "print",
                                title: "Upcoming Trial Class Schedule",
                                text: '<i class="ti ti-printer fs-4"></i> Print',
                                titleAttr: 'Upcoming Trial Class Schedule Excel File',
                                footer: true,
                                messageTop: 'Upcoming Trial Class Schedule Report',
                                className: "btn-sm btn-sm btn-primary",
                            },
                            {
                                extend: "pdf",
                                title: "Upcoming Trial Class Schedule",
                                text: '<i class="ti ti-file-text"></i> PDF',
                                titleAttr: 'Upcoming Trial Class Schedule PDF File',
                                footer: true,
                                messageTop: 'Upcoming Trial Class Schedule Report',
                                className: "btn-sm btn-sm btn-secondary",
                                orientation: 'landscape',
                                pageSize: 'LEGAL'
                            },
                        ],
                        scrollX: true,
                        orderCellsTop: true,
                        fixedHeader: true,
                        lengthMenu: [
                            [10, 20, 50, 100, 150, 200, 500],
                            [10, 20, 50, 100, 150, 200, "All"],
                        ],
                        processing: true,
                        sProcessing: "<span class='fas fa-sync-alt'></span>",
                        serverSide: false,
                        ajax: {
                            type: 'post',
                            url: "{{ route('upcoming-trial-class-schedule-count-datatable') }}",
                            data: function(d) {
                                d._token = "{{ csrf_token() }}";
                                d.dateRange = dateRange;
                            },
                        },
                        columnDefs: [{
                            className: 'text-center',
                            targets: '_all'
                        }],
                        columns: [{
                                data: 'DT_RowIndex',
                                name: 'DT_RowIndex',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'date',
                                name: 'date',
                            },
                            {
                                data: 'day',
                                name: 'day',
                            },
                            {
                                data: 'schedule',
                                name: 'schedule',
                            },
                        ],
                    });

                    $(".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel").addClass("btn btn-primary mr-1");
                }

                // =============== its for intro-call-cs-report-datatable ===========
                function filterIntroCallCsReport(dateRange) {
                    if ($.fn.DataTable.isDataTable('#intro-call-cs-report-datatable')) {
                        $('#intro-call-cs-report-datatable').DataTable().destroy();
                    }
                    var dataTable = $('#intro-call-cs-report-datatable').DataTable({
                        dom: "<'row'<'col-sm-3'l><'col-sm-6'B><'col-sm-3'f>>tip",
                        buttons: ["excel", "pdf", "print"],
                        buttons: [{
                                extend: "excel",
                                title: "Intro Call CS Report",
                                text: '<i class="ti ti-file-spreadsheet"></i> Excel',
                                titleAttr: 'Intro Call CS Report Excel File',
                                footer: true,
                                messageTop: 'Intro Call CS Report Report',
                                className: "btn-sm btn-sm btn-success",
                            },
                            {
                                extend: "print",
                                title: "Intro Call CS Report",
                                text: '<i class="ti ti-printer fs-4"></i> Print',
                                titleAttr: 'Intro Call CS Report Excel File',
                                footer: true,
                                messageTop: 'Intro Call CS Report Report',
                                className: "btn-sm btn-sm btn-primary",
                            },
                            {
                                extend: "pdf",
                                title: "Intro Call CS Report",
                                text: '<i class="ti ti-file-text"></i> PDF',
                                titleAttr: 'Intro Call CS Report PDF File',
                                footer: true,
                                messageTop: 'Intro Call CS Report Report',
                                className: "btn-sm btn-sm btn-secondary",
                                orientation: 'landscape',
                                pageSize: 'LEGAL'
                            },
                        ],
                        scrollX: true,
                        orderCellsTop: true,
                        fixedHeader: true,
                        lengthMenu: [
                            [10, 20, 50, 100, 150, 200, 500],
                            [10, 20, 50, 100, 150, 200, "All"],
                        ],
                        processing: true,
                        sProcessing: "<span class='fas fa-sync-alt'></span>",
                        serverSide: false,
                        ajax: {
                            type: 'post',
                            url: "{{ route('intro-call-cs-report-datatable') }}",
                            data: function(d) {
                                d._token = "{{ csrf_token() }}";
                                d.dateRange = dateRange;
                            },
                        },
                        columnDefs: [{
                            className: 'text-center',
                            targets: '_all'
                        }],
                        columns: [
                            {
                                data: 'id',
                                name: 'id',
                            },
                            {
                                data: 'name',
                                name: 'name',
                            },
                            {
                                data: 'registered',
                                name: 'registered',
                            },
                            {
                                data: 'intro_call',
                                name: 'intro_call',
                            },
                            {
                                data: 'diff',
                                name: 'diff',
                            },
                        ],
                        rowCallback: function(row, data) {
                            // Check the `diff` value and apply background color if condition is true
                            if (data.diff > 30) {
                                $(row).css({
                                    'background-color': 'red',
                                    'color': '#fff'
                                });
                            }
                        }
                    });

                    $(".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel").addClass("btn btn-primary mr-1");
                }

                //  its for filterAgeRangeCount
                function filterAgeRangeCount(dateRange) {
                    $.ajax({
                        type: "GET",
                        url: "/filter-age-range-count",
                        data: {
                            dateRange: dateRange
                        },
                        success: function(response) {
                            $('.has7to8Count').text(response.get7to8HasCount);
                            $('.has8to9Count').text(response.get8to9HasCount);
                            $('.has11to12Count').text(response.get11to16HasCount);

                            ageRangeCountChart(response.get7to8HasCount, response
                                .get8to9HasCount, response.get11to16HasCount);
                        },
                        error: function(data) {
                            console.log('fail');
                        }
                    });
                }

                $('input[name="registrationDateRange"]').daterangepicker({
                    autoUpdateInput: false,
                    locale: {
                        cancelLabel: 'Clear'
                    },
                    autoApply: true,
                    minDate: "01/01/2021",

                });

                $('input[name="registrationDateRange"]').on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format(
                        'YYYY-MM-DD'));
                    var dateRange = $('#registrationDateRange').val();

                    filterTotalTrialClassRegistrationCount(dateRange);

                    filterTotalTrialClassDeviceCount(dateRange);

                    filterDailyTrialClassCountBarChart(dateRange);

                    filterCsTrialClassStatusCount(dateRange);

                    filterTeacherTrialClassScheduleCount(dateRange);

                    filterAgeRangeCount(dateRange);

                    filterTopDayTimeTrialClassCount(dateRange);

                    filterUpcomingTrialClassDayTimeScheduleCount(dateRange);

                    filterIntroCallCsReport(dateRange);
                });

                
            });
        </script>
    </x-slot>
</x-dashboard.admin-layout>