@extends('User/layout/app')

@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="border_rs">
            <div class="row justify-content-end mb-4">
                @if (Auth::user()->user_role == 'Admin')
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectTLM"
                            name="selectTLM" onchange="getSLMDAta();">
                            <option value="" selected Default>Select TLM</option>
                            @foreach ($tlmList as $TLM)
                                <option value="{{ $TLM->position_code }}">{{ $TLM->employee_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectSLM" name="selectSLM" onchange="getFLMDAta();">
                            <option value="" selected Default>Select SLM</option>
                        </select>
                    </div>
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectFLM" name="selectFLM" onchange="getSODAta();">
                            <option value="" selected Default>Select PS</option>
                        </select>
                    </div>

                    {{--  <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectSO" name="selectSO">
                            <option value="" selected Default>Select SO</option>
                        </select>
                    </div> --}}
                @elseif (Auth::user()->user_role == 'TLM')
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectSLM" name="selectSLM" onchange="getFLMDAta();">
                            <option value="" selected Default>Select SLM</option>
                            @foreach ($slmList as $SLM)
                                <option value="{{ $SLM->position_code }}">{{ $SLM->employee_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectFLM" name="selectFLM" onchange="getSODAta();">
                            <option value="" selected Default>Select PS</option>
                        </select>
                    </div>

                    {{--  <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectSO" name="selectSO">
                            <option value="" selected Default>Select SO</option>
                        </select>
                    </div> --}}
                @elseif (Auth::user()->user_role == 'SLM')
                    <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectFLM" name="selectFLM" onchange="getSODAta();">
                            <option value="" selected Default>Select PS</option>
                            @foreach ($flmList as $FLM)
                                <option value="{{ $FLM->position_code }}">{{ $FLM->employee_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{--  <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectSO" name="selectSO">
                            <option value="" selected Default>Select SO</option>
                        </select>
                    </div> --}}
                @elseif (Auth::user()->user_role == 'FLM')
                    {{-- <div class="col-lg-auto  col-md-6 col-sm-6">
                        <select class="form-select js-example-basic-single" aria-label="Default select example"
                            id="selectSO" name="selectSO">
                            <option value="" selected Default>Select SO</option>
                            @foreach ($soList as $SO)
                                <option value="{{ $SO->position_code }}">{{ $SO->employee_name }}</option>
                            @endforeach
                        </select>
                    </div> --}}
                @endif
                <div class="col-lg-auto  col-md-6 col-sm-6">
                    <div class="d-flex align-items-center">
                        <div id="reportrange" class="daterange">
                            <i class="fa fa-calendar"></i>&nbsp;
                            <span></span> <i class="fa fa-caret-down"></i>
                        </div>
                        <input type="hidden" name="datefilter" id="datefilter">

                        <button type="submit" id="applyfilter"><a href="javascript:void(0)" class="btn btn-primary ms-2"><i
                                    class="fa fa-search"></i></a></button>
                        <button type="submit" id="clearfilter"><a href="javascript:void(0)" class="btn btn-danger ms-2"><i
                                    class="fa fa-times"></i></a></button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="white_bx">
                        <div class="left">
                            <div class="green_bg icon_mx">
                                <img src="{{ asset('/images/enrolled.png') }}" alt="">
                            </div>
                        </div>
                        <div class="middal">
                            <span>Total Enrolled Doctor</span>
                            <h4 id="doctorCount">{{ $doctorCount }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="white_bx">
                        <div class="left">
                            <div class="grey_bg icon_mx">
                                <img src="{{ asset('/images/patient.png') }}" alt="">
                            </div>
                        </div>
                        <div class="middal">
                            <span>Total Patient</span>
                            <h4 id="patientCount">{{ $patientCount }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="white_bx">
                        <div class="left">
                            <div class="orange_bg icon_mx">
                                <img src="{{ asset('/images/purchased.png') }}" alt="">
                            </div>
                        </div>
                        <div class="middal">
                            <span>Total Purchased Cartridges</span>
                            <h4 id="totalCartridgesSum">{{ $totalCartridgesSum }}</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mb-3">
                <div class="row ps-2 pe-2 sr_pj">
                    <div class="col-auto my-auto ms-auto">
                        <select class="form-select js-example-basic-single" id="financialYear">
                            <option value="">Select Year</option>
                        </select>
                    </div>
                </div>
                <table class="table datatable_current table-bordered w-100" id="dashboardMonthTable">
                    <thead>
                        <tr>
                            <th style="width:330px;"></th>
                            <th>Apr</th>
                            <th>May</th>
                            <th>Jun</th>
                            <th>Jul</th>
                            <th>Aug</th>
                            <th>Sep</th>
                            <th>Oct</th>
                            <th>Nov</th>
                            <th>Dec</th>
                            <th>Jan</th>
                            <th>Feb</th>
                            <th>Mar</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- <tr>
                            <td>Total Patients Enrolled</td> --}}
                        {{-- <td colspan="12" class="text-center">Loading...</td> --}}
                        {{-- </tr> --}}
                        {{-- <tr>
                            <td>Total Cartridges Purchased</td> --}}
                        {{-- <td colspan="12" class="text-center">Loading...</td> --}}
                        {{-- </tr>
                        <tr>
                            <td>Total Doctors Enrolled</td> --}}
                        {{-- <td colspan="12" class="text-center">Loading...</td> --}}
                        {{-- </tr   > --}}
                    </tbody>
                    {{-- <thead>
                        <tr>
                            <th></th>
                            <th>Apr</th>
                            <th>May</th>
                            <th>Jun</th>
                            <th>Jul</th>
                            <th>Aug</th>
                            <th>Sep</th>
                            <th>Oct</th>
                            <th>Nov</th>
                            <th>Dec</th>
                            <th>Jan</th>
                            <th>Feb</th>
                            <th>Mar</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Total Patients Enrolled</td>
                            <td>01</td>
                            <td>09</td>
                            <td>10</td>
                            <td>12</td>
                            <td>01</td>
                            <td>09</td>
                            <td>10</td>
                            <td>12</td>
                            <td>01</td>
                            <td>09</td>
                            <td>10</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>Total Cartridges Purchased</td>
                            <td>01</td>
                            <td>09</td>
                            <td>10</td>
                            <td>12</td>
                            <td>01</td>
                            <td>09</td>
                            <td>10</td>
                            <td>12</td>
                            <td>01</td>
                            <td>09</td>
                            <td>10</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>Total Doctors Enrolled</td>
                            <td>01</td>
                            <td>09</td>
                            <td>10</td>
                            <td>12</td>
                            <td>01</td>
                            <td>09</td>
                            <td>10</td>
                            <td>12</td>
                            <td>01</td>
                            <td>09</td>
                            <td>10</td>
                            <td>-</td>
                        </tr>
                    </tbody> --}}
                </table>
            </div>

        </div>
        <div class="row pt-3 pb-3">
            @if (Auth::user()->user_role === 'Admin')
                <div class="col-lg-6 col-xl-6 col-xxl-6 col-sm-12">
                @else
                    <div class="col-lg-7 col-xl-7 col-xxl-8 col-sm-12">
            @endif
            <div class="white_shadow">
                {{-- <div class="d-flex justify-content-between ps-2 pe-2 sr_pj">
                        <h4>Top 10 Doctor's list</h4>
                        <h4>{{ $currentMonth }} {{ $currentYear }}</h4>
                    </div> --}}
                <div class="row ps-2 pe-2 sr_pj">
                    <div class="col-auto my-auto me-auto">
                        <h4>Top 10 Doctor's list</h4>
                    </div>
                    <div class="col-auto my-auto">
                        <select class="form-select js-example-basic-single" id="topDoctorMonth">
                            <option value="">Select Month</option>
                        </select>
                    </div>
                </div>
                <table class="table datatable_current w-100" id="listTopDoctor">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Doctor Name</th>
                            <th>SC Code</th>
                            <th>Speciality</th>
                            <th>Patient Count</th>
                            <th>Total Cartridges</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

        {{-- admin-only --}}
        @if (Auth::user()->user_role === 'Admin')
            <div class="col-lg-6 col-xl-6 col-xxl-6 col-sm-12">
                <div class="white_shadow">
                    <div class="row ps-2 pe-2 sr_pj">
                        <div class="col-auto my-auto me-auto">
                            <h4>Top 10 User's list</h4>
                        </div>
                        <div class="col-auto my-auto">
                            <select class="form-select js-example-basic-single" id="topUserMonth">
                                <option value="">Select Month</option>
                            </select>
                        </div>
                    </div>

                    <table class="table datatable_current w-100" id="listTopUsers">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Employee Name</th>
                                <th>Employee Code</th>
                                <th>Total Doctor Enrolled</th>
                                <th>Total Patients Enrolled</th>
                                <th>Total Cartridges</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="w-100 mt-3"></div>
        @endif


        <div class="col-lg-5 col-xl-5 col-xxl-4 col-sm-12">
            <div class="row">
                <div class="col-12 col-lg-12 col-md-6">
                    <div class="white_shadow1 mb-3">
                        <!-- <canvas id="buyers" width="600" height="280"></canvas> -->
                        <canvas id="chLine"></canvas>
                    </div>
                </div>
                @if (Auth::user()->user_role === 'Admin')
            </div>
        </div>
        <div class="col-lg-5 col-xl-5 col-xxl-4 col-sm-12">
            <div class="row">
                @endif
                <div class="col-12 col-lg-12 col-md-6">
                    <div class="white_shadow1">
                        <canvas id="chDonut1"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection


@section('js')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js'></script>

    <!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js'></script> -->




    <script>
        function filterData() {

            $('#loader').show();


            $.ajax({
                url: "{{ url('/get-dashboard-data') }}",
                type: "POST",
                data: {
                    datefilter: $('#datefilter').val(),
                    selectTLM: $('#selectTLM option:selected').val(),
                    selectSLM: $('#selectSLM option:selected').val(),
                    selectFLM: $('#selectFLM option:selected').val(),
                    selectSO: $('#selectSO option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                async: true,
                cache: false,
                success: function(result) {
                    $('#doctorCount').text(result.doctorCount);
                    $('#patientCount').text(result.patientCount);
                    $('#totalCartridgesSum').text(result.totalCartridgesSum);
                    $('#loader').hide();
                }
            })

        }


        $('#applyfilter').click(function() {
            filterData();
        });

        $('#clearfilter').click(function() {

            // $("#iSMID").val('').trigger('change');
            // $("#iRBMID").val('').trigger('change');
            // $("#iABMID").val('').trigger('change');
            // $("#iBEID").val('').trigger('change');
            // var start = moment().subtract('Year').startOf('Year');
            // var end = moment().subtract('Year').endOf('Year');
            // cb(start, end);
            // filterData();
            window.location.reload();

        });

        function getSLMDAta() {
            $.ajax({
                url: "{{ url('/get-parent-data') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectTLM option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectSLM').html('<option value="">Select SLM</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectSLM").append('<option value="' + value.position_code + '">' + value
                            .employee_name + '</option>');
                    });
                    $('#selectFLM').html('<option value="">Select PS</option>');
                    $('#selectSO').html('<option value="">Select SO</option>');
                }
            })
        }

        function getFLMDAta() {
            $.ajax({
                url: "{{ url('/get-parent-data') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectSLM option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectFLM').html('<option value="">Select PS</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectFLM").append('<option value="' + value.position_code + '">' + value
                            .employee_name + '</option>');
                    });
                    $('#selectSO').html('<option value="">Select SO</option>');
                }
            })
        }

        function getSODAta() {
            $.ajax({
                url: "{{ url('/get-parent-data') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectFLM option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectSO').html('<option value="">Select SO</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectSO").append('<option value="' + value.position_code + '">' + value
                            .employee_name + '</option>');
                    });
                }
            })
        }

        /* chart.js chart examples */

        // chart colors
        var colors = ['#a75f49', '#3BD502', '#F80D38', '#a75f49', '#dc3545', '#6c757d'];

        /* large line chart */




        var chLine = document.getElementById("chLine");
        var chartData = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [{
                data: @json($totalCartridgesGraph),
                backgroundColor: 'transparent',
                borderColor: colors[0],
                borderWidth: 4,
                pointBackgroundColor: colors[0]
            }]
        };

        if (chLine) {
            new Chart(chLine, {
                type: 'line',
                data: chartData,
                options: {
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '(Months)'
                            },
                            ticks: {
                                beginAtZero: false
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '(Units)'
                            },
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    legend: {
                        display: false
                    },
                    responsive: true
                }
            });
        }


        /* large pie/donut chart */
        var chPie = document.getElementById("chPie");
        if (chPie) {
            new Chart(chPie, {
                type: 'pie',
                data: {
                    labels: ['Desktop', 'Phone', 'Tablet', 'Unknown'],
                    datasets: [{
                        backgroundColor: [colors[1], colors[0], colors[2], colors[5]],
                        borderWidth: 0,
                        data: [50, 40, 15, 5]
                    }]
                },
                plugins: [{
                    beforeDraw: function(chart) {
                        var width = chart.chart.width,
                            height = chart.chart.height,
                            ctx = chart.chart.ctx;
                        ctx.restore();
                        var fontSize = (height / 70).toFixed(2);
                        ctx.font = fontSize + "em sans-serif";
                        ctx.textBaseline = "middle";
                        var text = chart.config.data.datasets[0].data[0] + "%",
                            textX = Math.round((width - ctx.measureText(text).width) / 2),
                            textY = height / 2;
                        ctx.fillText(text, textX, textY);
                        ctx.save();
                    }
                }],
                options: {
                    layout: {
                        padding: 0
                    },
                    legend: {
                        display: false
                    },
                    cutoutPercentage: 80
                }
            });
        }

        /* bar chart */
        var chBar = document.getElementById("chBar");
        if (chBar) {
            new Chart(chBar, {
                type: 'bar',
                data: {
                    labels: ["S", "M", "T", "W", "T", "F", "S"],
                    datasets: [{
                            data: [589, 445, 483, 503, 689, 692, 634],
                            backgroundColor: colors[0]
                        },
                        {
                            data: [639, 465, 493, 478, 589, 632, 674],
                            backgroundColor: colors[1]
                        }
                    ]
                },
                options: {
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            barPercentage: 0.4,
                            categoryPercentage: 0.5
                        }]
                    }
                }
            });
        }

        /* 3 donut charts */
        var donutOptions = {
            cutoutPercentage: 85,
            legend: {
                position: 'bottom',
                padding: 5,
                labels: {
                    pointStyle: 'circle',
                    usePointStyle: true
                }
            }
        };

        // donut 1
        var chDonutData1 = {
            labels: ['Ongoing', 'Dropped out', 'Completed'],
            datasets: [{
                backgroundColor: colors.slice(1, 4),
                borderWidth: 0,
                data: [{{ $ongoingCount }}, {{ $droppedOutCount }}, {{ $completedCount }}]
            }]
        };

        var chDonut1 = document.getElementById("chDonut1");
        if (chDonut1) {
            new Chart(chDonut1, {
                type: 'pie',
                data: chDonutData1,
                options: donutOptions
            });
        }

        // donut 2
        var chDonutData2 = {
            labels: ['Wips', 'Pops', 'Dags'],
            datasets: [{
                backgroundColor: colors.slice(0, 3),
                borderWidth: 0,
                data: [40, 45, 30]
            }]
        };
        var chDonut2 = document.getElementById("chDonut2");
        if (chDonut2) {
            new Chart(chDonut2, {
                type: 'pie',
                data: chDonutData2,
                options: donutOptions
            });
        }

        // donut 3
        var chDonutData3 = {
            labels: ['Angular', 'React', 'Other'],
            datasets: [{
                backgroundColor: colors.slice(0, 3),
                borderWidth: 0,
                data: [21, 45, 55, 33]
            }]
        };
        var chDonut3 = document.getElementById("chDonut3");
        if (chDonut3) {
            new Chart(chDonut3, {
                type: 'pie',
                data: chDonutData3,
                options: donutOptions
            });
        }

        /* 3 line charts */
        var lineOptions = {
            legend: {
                display: false
            },
            tooltips: {
                interest: false,
                bodyFontSize: 11,
                titleFontSize: 11
            },
            scales: {
                xAxes: [{
                    ticks: {
                        display: false
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false
                    }
                }],
                yAxes: [{
                    display: false
                }]
            },
            layout: {
                padding: {
                    left: 6,
                    right: 6,
                    top: 4,
                    bottom: 6
                }
            }
        };

        var chLine1 = document.getElementById("chLine1");
        if (chLine1) {
            new Chart(chLine1, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
                    datasets: [{
                        backgroundColor: '#ffffff',
                        borderColor: '#ffffff',
                        data: [10, 11, 4, 11, 4],
                        fill: false
                    }]
                },
                options: lineOptions
            });
        }
        var chLine2 = document.getElementById("chLine2");
        if (chLine2) {
            new Chart(chLine2, {
                type: 'line',
                data: {
                    labels: ['A', 'B', 'C', 'D', 'E'],
                    datasets: [{
                        backgroundColor: '#ffffff',
                        borderColor: '#ffffff',
                        data: [4, 5, 7, 13, 12],
                        fill: false
                    }]
                },
                options: lineOptions
            });
        }

        var chLine3 = document.getElementById("chLine3");
        if (chLine3) {
            new Chart(chLine3, {
                type: 'line',
                data: {
                    labels: ['Pos', 'Neg', 'Nue', 'Other', 'Unknown'],
                    datasets: [{
                        backgroundColor: '#ffffff',
                        borderColor: '#ffffff',
                        data: [13, 15, 10, 9, 14],
                        fill: false
                    }]
                },
                options: lineOptions
            });
        }

        $(function() {
            var i = 1;
            var table = $('#listTopDoctor').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                searching: false,
                paging: false,
                info: false,
                ajax: {
                    url: "{{ route('DashboardPaginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.month = $('#topDoctorMonth').val();
                    },
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: ".venobox_img",
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'plane'
                    });
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'doctor_name',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'sc_code',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'speciality_name',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'total_patients',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'total_cartridges',
                        orderable: false,
                        searchable: true
                    },
                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5], // Column to target
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    },
                }, ],

            });

            $('#topDoctorMonth').on('change', function() {
                $('#listTopDoctor').DataTable().ajax.reload();
            });
        });
    </script>
    {{-- FY year data show monthly wise --}}

    <script>
        $(function() {

            // Load year dropdown first
            loadFinancialYears();

            // Initialize DataTable
            var monthTable = $('#dashboardMonthTable').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: false, // client-side
                responsive: true,
                autoWidth: false,
                searching: false,
                paging: false,
                info: false,
                ordering: false,

                ajax: {
                    url: "{{ url('/get-dashboard-month-data') }}",
                    type: "POST",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.financialYear = $('#financialYear').val();
                    },
                    dataSrc: function(res) {
                        // Convert API response to DataTables rows
                        return [{
                                row_title: 'Total Patients Enrolled',
                                months: res.patients
                            },
                            {
                                row_title: 'Total Cartridges Purchased',
                                months: res.cartridges
                            },
                            {
                                row_title: 'Total Doctors Enrolled',
                                months: res.doctors
                            }
                        ];
                    }
                },

                columns: [{
                        data: 'row_title',
                        orderable: false
                    },
                    {
                        data: 'months.0'
                    }, // Apr
                    {
                        data: 'months.1'
                    }, // May
                    {
                        data: 'months.2'
                    }, // Jun
                    {
                        data: 'months.3'
                    }, // Jul
                    {
                        data: 'months.4'
                    }, // Aug
                    {
                        data: 'months.5'
                    }, // Sep
                    {
                        data: 'months.6'
                    }, // Oct
                    {
                        data: 'months.7'
                    }, // Nov
                    {
                        data: 'months.8'
                    }, // Dec
                    {
                        data: 'months.9'
                    }, // Jan
                    {
                        data: 'months.10'
                    }, // Feb
                    {
                        data: 'months.11'
                    } // Mar
                ],

                columnDefs: [{
                    targets: '_all',
                    render: function(data) {
                        return data ?? '-';
                    }
                }]
            });

            // Reload table when year changes
            $('#financialYear').on('change', function() {
                monthTable.ajax.reload();
            });


            // -------- Financial Year Dropdown --------
            function loadFinancialYears() {
                const startYear = 2023;
                const today = new Date();
                const currentMonth = today.getMonth() + 1;

                const fyStart = (currentMonth >= 4) ? today.getFullYear() : today.getFullYear() - 1;
                const fyEndShort = (fyStart + 1).toString().slice(-2);

                let html = `<option value="">Select Year</option>`;
                let defaultFY = `${fyStart}-${fyEndShort}`;


                // Reverse loop (latest first)
                for (let year = fyStart; year >= startYear; year--) {
                    let nextYearShort = (year + 1).toString().slice(-2);
                    let val = `${year}-${nextYearShort}`;
                    html += `<option value="${val}">FY ${year}–${nextYearShort}</option>`;
                }

                $('#financialYear').html(html);
                $('#financialYear').val(defaultFY).trigger('change');
            }

        });
    </script>

    {{-- Top 10 Doctor's list apply filter --}}

    <script>
        function loadMonthDropdown() {
            const startYear = 2023;
            const now = new Date();
            const currentYear = now.getFullYear();
            const currentMonth = now.getMonth() + 1;

            let html = `<option value="">Select Month</option>`;
            let defaultVal = `${currentYear}-${currentMonth}`;

            // Reverse year loop
            for (let y = currentYear; y >= startYear; y--) {

                // Reverse month loop
                for (let m = 12; m >= 1; m--) {

                    if (y === currentYear && m > currentMonth) continue;

                    const monthName = new Date(y, m - 1, 1)
                        .toLocaleString('default', {
                            month: 'long'
                        });

                    html += `<option value="${y}-${m}">${monthName} ${y}</option>`;
                }
            }

            $('#topDoctorMonth').html(html);
            $('#topDoctorMonth').val(defaultVal).trigger('change');
        }


        $(document).ready(function() {
            loadMonthDropdown();
        });
    </script>


    {{-- Top 10 User's list with filter ( only for ADMIN ) --}}

    <script>
        function loadUserMonthDropdown() {
            const startYear = 2023;
            const now = new Date();
            const currentYear = now.getFullYear();
            const currentMonth = now.getMonth() + 1;

            let html = `<option value="">Select Month</option>`;
            let defaultVal = `${currentYear}-${currentMonth}`;

            for (let y = currentYear; y >= startYear; y--) {
                for (let m = 12; m >= 1; m--) {

                    if (y === currentYear && m > currentMonth) continue;

                    const monthName = new Date(y, m - 1, 1)
                        .toLocaleString('default', {
                            month: 'long'
                        });

                    html += `<option value="${y}-${m}">${monthName} ${y}</option>`;
                }
            }

            $('#topUserMonth').html(html);
            $('#topUserMonth').val(defaultVal).trigger('change');
        }

        $(document).ready(function() {
            loadUserMonthDropdown();
        });


        $(function() {
            var userTable = $('#listTopUsers').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                searching: false,
                paging: false,
                info: false,
                ajax: {
                    url: "{{ route('dashboardUserPaginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.month = $('#topUserMonth').val();
                    },
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: ".venobox_img",
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'plane'
                    });
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'employee_name',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'employee_code',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'total_doctors',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'total_patients',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'total_cartridges',
                        orderable: false,
                        searchable: true
                    },
                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5],
                    "mRender": function(data, type, full) {
                        return data ?? '-';
                    }
                }]
            });

            // Reload on month change — like doctor table
            $('#topUserMonth').on('change', function() {
                $('#listTopUsers').DataTable().ajax.reload();
            });
        });
    </script>



    {{-- <script>
            // line chart data
            var buyerData = {
                labels: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
                datasets: [{
                    fillColor: "rgb(167 95 73 / 50%)",
                    strokeColor: "#a75f49",
                    pointColor: "#fff",
                    pointStrokeColor: "#a75f49",
                    data: [203, 156, 99, 251, 305, 247, 255, 212, 299, 222, 100, 50, 10]
                }]
            }
            // get line chart canvas
            var buyers = document.getElementById('buyers').getContext('2d');
            // draw line chart
            new Chart(buyers).Line(buyerData);
            // pie chart data
            var pieData = [{
                    value: 20,
                    color: "#878BB6"
                },
                {
                    value: 40,
                    color: "#4ACAB4"
                }
                // {
                //     value : 10,
                //     color : "#FF8153"
                // },
                // {
                //     value : 30,
                //     color : "#FFEA88"
                // }
            ];
            // pie chart options
            var pieOptions = {
                segmentShowStroke: true,
                animateScale: false
            }
            // get pie chart canvas
            var countries = document.getElementById("countries").getContext("2d");
            // draw pie chart
            new Chart(countries).Pie(pieData, pieOptions);
            // bar chart data
            var barData = {
                labels: ["January", "February", "March", "April", "May", "June"],
                datasets: [{
                        fillColor: "#48A497",
                        strokeColor: "#48A4D1",
                        data: [456, 479, 324, 569, 702, 600]
                    },
                    {
                        fillColor: "rgba(73,188,170,0.4)",
                        strokeColor: "rgba(72,174,209,0.4)",
                        data: [364, 504, 605, 400, 345, 320]
                    }
                ]
            }
            // get bar chart canvas
            var income = document.getElementById("income").getContext("2d");
            // draw bar chart
            new Chart(income).Bar(barData);
        </script> --> --}}
@endsection