@extends('operations.layout.mainlayout')
@section('content')
    <style>
        .custom-select-wrapper {
            position: relative;
            border: 1px solid #CCCDDA;
            border-radius: 30px;
            padding: 0 20px;
            display: flex;
            align-items: baseline;
            white-space: nowrap;
        }

        .custom-select-wrapper label {
            font-weight: bold;
            color: #8590B2;
        }

        .custom-select {
            border: none;
            box-shadow: none;
            background: transparent;
            color: #4b4b4b;
            font-weight: bold;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .custom-select-wrapper::after {
            content: '';
            background-image: url('/img/branch-dashboard/arrow-down.png');
            background-size: 50%; /* Adjust the size to your preference */
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            right: 10px;
            top: 50%;
            width: 20px;
            height: 20px;
            transform: translateY(-50%);
            pointer-events: none;
        }

        #report-row thead{
            background-color: transparent !important;
            color: #8590B2;
        }

        #report-row thead th {
            font-weight: 400;
        }

        #report-row tbody td{
            padding-top: 0;
            font-weight: 700;
            line-height: 21px;
        }

        #report-row .card{
            padding: 20px;
            border-radius: 30px;
            box-shadow: 0px 2px 30px 0px #0000000F;
        }

        #report-row .card-body .report-title{
            gap: 10px;
            padding-left: 0.25rem;
        }

        #branches-total .table{
            border-collapse: separate;
            border-spacing: 0;
            display: block;
            width: 100%;
        }

        #branches-total .header-color {
            background-color: #BA395F;
        }
        #branches-total .table-section {
            background: #FFF;
            border-radius: 0.75rem;
            padding: 1rem;
        }
        #branches-total .table-header {
            color: white;
            border-radius: 30px;
            padding: 5px 30px;
            font-size: 18px;
            font-weight: 700;
        }

        #branches-total .table-responsive {
            margin-bottom: 1rem;
        }
        #branches-total .table thead th {
            border: none;
            color: #BA395F;
            width: 33.33%;
            /*padding: 1px 50px;*/
            padding: 0;
        }
        #branches-total tbody tr:not(:first-of-type) td {
            /*padding: 1px 50px;*/
            padding: 0;
            font-weight: 700;
            line-height: 21px;
        }
        #branches-total tbody tr:not(:first-of-type) td:first-child {
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
        }

        #branches-total tbody tr:not(:first-of-type) td:last-child {
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        #branches-total tbody tr:not(:first-of-type):nth-child(odd) td {
            background-color: #EBEFF5 !important;
        }

        #branches-total tbody tr:not(:first-of-type):nth-child(even) td {
            background-color: #F4F6F9 !important;
        }

        #branches-total tbody tr:first-of-type td {
            border: 1px solid #CCCDDA;
            border-style: solid none;
            /*padding: 1px 50px;*/
            padding: 0;
            color: #8590B2;
            font-weight: 700;
        }

        #branches-total tbody tr:first-of-type td:first-child {
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            border-left-style: solid;
        }

        #branches-total tbody tr:first-of-type td:last-child {
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            border-right-style: solid;
        }

        #branches-total .table td, .table th {
            border: none;
        }
        #branches-total .card{
            padding: 10px;
            border-radius: 30px;
        }
        #branches-total tbody tr, #branches-total thead tr, #branches-total table thead{
            background: transparent !important;
            width: 100%;
            display: flex;
            padding: 5px 0;
        }

        #branches-total .col-md-3 tbody{
            display: block;
            width: 100%;
        }

        #branches-total .col-md-3:first-of-type tbody tr{
            display: block;
            width: 100%;
        }

        #branches-total .col-md-3:not(:first-of-type) tbody tr, #branches-total .col-md-3:not(:first-of-type) thead tr{
            display: flex;
            text-align: center;
            align-items: center;
            width: 100%;
            justify-content: space-between;
        }
        #branches-total .col-md-3 tbody tr{
            padding: 5px 0;
        }

        #branches-total tbody tr td{
            width: 33.33%;
        }

        #branches-total .col-md-3:first-child .table td {
            padding: 0 30px;
            display: block;
            width: 100%;
            text-wrap: nowrap;
        }

        #branches-total .col-md-3:first-of-type{
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
            overflow-x: hidden;
        }
        #branches-total .col-md-3:not(:first-of-type){
            -ms-flex: 0 0 26.66%;
            flex: 0 0 26.66%;
            max-width: 26.66%;
        }
        /*#branches-total .col-md-3:nth-child(1), #branches-total .col-md-3:nth-child(2) {
            -ms-flex: 0 0 24%;
            flex: 0 0 24%;
            max-width: 24%;
        }

        #branches-total .col-md-3:not(:nth-child(1)):not(:nth-child(2)) {
            -ms-flex: 0 0 26%;
            flex: 0 0 26%;
            max-width: 26%;
        }*/

        .fa-stack-1x{
            font-size: 18px;
        }
        .fa-stack{
            width: 42px;
            height: 42px;
            line-height: 42px;
        }

        @media (max-width: 1070px) {

            /*#branches-total .col-md-3, #report-row .col-md-4{
                -ms-flex: 100% !important;
                flex: 100% !important;
                max-width: 100% !important;
            }*/

            #branches-total .card, #report-row .card{
                padding: 0;
            }

            #time-row .col-md-6:nth-child(2){
                padding-top: 1rem;
            }

            #report-row .flex-fill{
                display: block;
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .table-header{
                text-align: center;
            }
            img{
                max-width: 24px;
            }
        }

        .export-btn {
            background: linear-gradient(135deg, #217346 0%, #1e6b3e 100%);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 8px 20px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(33, 115, 70, 0.3);
        }

        .export-btn:hover {
            background: linear-gradient(135deg, #1e6b3e 0%, #185a33 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(33, 115, 70, 0.4);
        }

        .export-btn:active {
            transform: translateY(0);
        }

        .export-btn i {
            font-size: 16px;
        }

    </style>
<div class="container-fluid p-4" style="max-width: 1920px">

    <div class="row mb-5" id="report-row">
        <div class="col-md-4 d-flex">
            <div class="card flex-fill">
                <div class="card-body">
                    <div class="d-flex align-items-center report-title mb-3">
                        {{--<span class="fa-stack fa-lg">
                          <i class="fa fa-circle fa-stack-2x icon-background" style="color: #77C348"></i>
                          <i class="fa fa-percentage text-white fa-stack-1x"></i>
                        </span>--}}

                        <img src="/img/branch-dashboard/1-r.png" width="42" alt="">
                        <h2 class="m-0 font-weight-bold" style="font-size: 24px">Best Branch Sales</h2>
                    </div>
                    <table class="table table-borderless">
                        <thead>
                        <tr>
                            <th scope="col">Branch</th>
                            <th scope="col">Manager</th>
                            <th scope="col">Sales</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4 d-flex">
            <div class="card flex-fill">
                <div class="card-body">
                    <div class="d-flex align-items-center report-title mb-3">
                        {{--<span class="fa-stack fa-lg">
                          <i class="fa fa-circle fa-stack-2x icon-background" style="color: #605BFE"></i>
                          <i class="fa fa-percentage text-white fa-stack-1x"></i>
                        </span>--}}
                        <img src="/img/branch-dashboard/2-r.png" width="42" alt="">
                        <h2 class="m-0 font-weight-bold" style="font-size: 24px">Best Employee Sales</h2>
                    </div>
                    <table class="table table-borderless">
                        <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Branch</th>
                            <th scope="col">Manager</th>
                            <th scope="col">Sales</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4 d-flex">
            <div class="card flex-fill">
                <div class="card-body">
                    <div class="d-flex align-items-center report-title mb-3">
                        <img src="/img/branch-dashboard/3-r.png" width="42" alt="">
                        {{--<span class="fa-stack fa-lg">
                          <i class="fa fa-circle fa-stack-2x icon-background" style="color: #FF7244"></i>
                          <i class="fa fa-file-invoice-dollar text-white fa-stack-1x"></i>
                        </span>--}}
                        <h2 class="m-0 font-weight-bold" style="font-size: 24px">Best Employee Invoice</h2>
                    </div>
                    <table class="table table-borderless">
                        <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Branch</th>
                            <th scope="col">Manager</th>
                            <th scope="col">Sales</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row align-items-center mb-3" id="time-row">
        <div class="col-md-6">
            <div id="branche_income_range_date" class="form-control"
                 style="background: transparent; border-radius: 30px; cursor: pointer; padding: 6px 20px; border: 1px solid #CCCDDA; width: 100%">
                <i class="fa fa-calendar"></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div>
        </div>
        <div class="col-md-6">
            <div class="custom-select-wrapper" style="border-color: #E3E5EC">
                <label>Auto Refresh:</label>
                <select class="custom-select" id="auto-refresh-select">
                    <option value="6">30 Minutes</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col d-flex justify-content-between align-items-center flex-wrap">
            <div class="d-flex align-items-center flex-wrap" style="gap: 1.5rem;">
                <div class="custom-control custom-switch custom-switch-on-info" style="margin: 0 0 1rem 0.5rem;">
                    <input type="checkbox" class="custom-control-input" id="type">
                    <label class="custom-control-label" for="type">Collection Time</label>
                </div>
                <div class="custom-control custom-switch custom-switch-on-info" style="margin: 0 0 1rem 0;">
                    <input type="checkbox" class="custom-control-input" id="hideOS">
                    <label class="custom-control-label" for="hideOS">Hide OS</label>
                </div>
                <div class="custom-control custom-switch custom-switch-on-info" style="margin: 0 0 1rem 0;">
                    <input type="checkbox" class="custom-control-input" id="hideHV">
                    <label class="custom-control-label" for="hideHV">Hide HV</label>
                </div>
                <div class="custom-control custom-switch custom-switch-on-info" style="margin: 0 0 1rem 0;">
                    <input type="checkbox" class="custom-control-input" id="collectionBranch" checked>
                    <label class="custom-control-label" for="collectionBranch">Collection Branch</label>
                </div>
            </div>
            <button class="export-btn" id="export-excel-btn" style="margin-bottom: 1rem;">
                <i class="fa fa-file-excel"></i>
                Export to Excel
            </button>
        </div>
    </div>

    <div class="row mb-4" id="branches-total">
        <div class="card w-100">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 table-responsive">
                        <div class="table-header header-color">Totals Branches</div>
                        <table class="table">
                            <thead style="height: 44px">
                            <tr>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-3 table-responsive">
                        <div class="table-header text-center header-color">Sales</div>
                        <table class="table">
                            <thead>
                            <tr>
                                <th>OP</th>
                                <th class="hv-column">HV</th>
                                <th class="os-column">OS</th>
                                <th>Total</th>
                                <th>Target</th>
                                <th>Balance</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-3 table-responsive">
                        <div class="table-header text-center header-color">Patient</div>
                        <table class="table">
                            <thead>
                            <tr>
                                <th>OP</th>
                                <th class="hv-column">HV</th>
                                <th class="os-column">OS</th>
                                <th>Total</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-3 table-responsive">
                        <div class="table-header text-center header-color">Average</div>
                        <table class="table">
                            <thead>
                            <tr>
                                <th>OP</th>
                                <th class="hv-column">HV</th>
                                <th class="os-column">OS</th>
                                <th>Total</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="loader" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;justify-content:center;align-items:center;">
        <div style="background:white;padding:20px;border-radius:5px;">
            <i class="fa fa-spinner fa-spin"></i> Loading...
        </div>
    </div>
</div>
@endsection

@section('footer-scripts')
    <script>

        var start = moment();
        var end = moment();

        function cb(start, end) {
            $('#branche_income_range_date span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }

        @if(session()->has('profile_id') && session('profile_id') == '50')
            start = moment().startOf('year');
            end = moment().endOf('year');
        @endif

        $('#branche_income_range_date').daterangepicker({
            startDate: start,
            endDate: end,
            showDropdowns: true,
            showCustomRangeLabel: false,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            },
            maxSpan: {
                days: 30
            }
        }, cb);

        cb(start, end);
        $(".daterangepicker").click(function (e) {
            e.stopPropagation();
            let rangePicker = $('#branche_income_range_date');
            let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
            let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
            var rangeDates = {
                'from': fromDate,
                'to': toDate,
            }
            appendDashboardData(rangeDates)
        });

        var cachedBranchesInfo = null;
        var cachedPatientInfo = null;
        var cachedSalesInfo = null;
        var cachedAverageInfo = null;
        var cachedActiveBranchCount = 0;

        $('#type, #hideOS, #hideHV, #collectionBranch').on('change', function() {
            let rangePicker = $('#branche_income_range_date');
            let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
            let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
            var rangeDates = {
                'from': fromDate,
                'to': toDate,
            }
            if ($(this).attr('id') === 'hideOS' || $(this).attr('id') === 'hideHV') {
                reRenderTables();
            } else {
                appendDashboardData(rangeDates);
            }
        });

        function reRenderTables() {
            if (cachedBranchesInfo) {
                insertIntoTables(cachedBranchesInfo, cachedPatientInfo, cachedSalesInfo, cachedAverageInfo, cachedActiveBranchCount);
            }
        }

        function toggleOSColumns() {
            var hideOS = $('#hideOS').is(':checked');
            if (hideOS) {
                $('.os-column').hide();
            } else {
                $('.os-column').show();
            }
        }

        function toggleHVColumns() {
            var hideHV = $('#hideHV').is(':checked');
            if (hideHV) {
                $('.hv-column').hide();
            } else {
                $('.hv-column').show();
            }
        }

        function fetchDashboardDataAndUpdateUI(dateRole = null) {
            $('#loader').show();
            var data = dateRole || {};
            data.type = $('#type').is(':checked') ? 1 : 0;
            data.paymentMethod = $('#paymentSelect').val();
            data.collectionBranch = $('#collectionBranch').is(':checked') ? 1 : 0;
            $.ajax({
                url: '/operations/branches-income/dashboard-data',
                method: 'GET',
                data: data,
                headers:{
                    'api-key': "{{$api_key}}",
                    'profile-id': "{{$profile_id}}"
                },
                success: function(response) {
                    let allReady = true;
                    let results = {};
                    ['perBranchTotalsV2', 'bestEmployeesSales', 'bestEmployeesInvoice'].forEach(function(type) {
                        if (!response[type] || response[type].status === 'processing') {
                            allReady = false;
                        } else if (response[type].status === 'ready') {
                            results[type] = response[type].data;
                        } else if (response[type].status === 'error') {
                            results[type] = {error: response[type].error};
                        }
                    });
                    if (allReady) {
                        $('#loader').hide();
                        if (results.perBranchTotalsV2) populateTables(results.perBranchTotalsV2);
                        if (results.bestEmployeesSales) populateBestEmployeeSales(results.bestEmployeesSales);
                        if (results.bestEmployeesInvoice) populateBestEmployeeInvoice(results.bestEmployeesInvoice);
                    } else {
                        setTimeout(function() {
                            fetchDashboardDataAndUpdateUI(dateRole);
                        }, 2000); // poll every 2 seconds
                    }
                },
                error: function() {
                    $('#loader').hide();
                    alert('Failed to load dashboard data.');
                }
            });
        }

        // Replace appendDashboardData with the new polling function
        function appendDashboardData(dateRole = null) {
            fetchDashboardDataAndUpdateUI(dateRole);
        }

        function populateTables(data) {
            var branchesInfo = [];
            var patientInfo = {};
            var salesInfo = {};
            var averageInfo = {};
            var branchManagers = {};
            var activeBranchCount = 0;

            $.each(data, function(branchName, branchData) {
                var opPatients = 0, hvPatients = 0, osPatients = 0;
                var opAmount = 0, hvAmount = 0, osAmount = 0;
                var hvAverage = null;
                var branchManager = 'N/A';
                var isActiveBranch = false;
                var target = 0;

                $.each(branchData, function(_, entry) {
                    if (entry.BRANCH_MANAGER != null) branchManager = entry.BRANCH_MANAGER;
                    if (entry.ACTIVE_STATUS == 1) isActiveBranch = true;
                    target = parseFloat(entry.TARGET_AMOUNT || 0);
                    if (entry.IS_AFFILIATE == 1) {
                        osPatients += parseInt(entry.TOTAL_PATIENTS);
                        osAmount += Math.round(entry.TOTAL_AMOUNT);
                    } else if (entry.TYPE_ID == 2) {
                        hvPatients += parseInt(entry.TOTAL_PATIENTS);
                        hvAmount += Math.round(entry.TOTAL_AMOUNT);
                        if (entry.SPLIT_HOME_VISIT_AVERAGE !== undefined) hvAverage = parseFloat(entry.SPLIT_HOME_VISIT_AVERAGE);
                    } else if (entry.TYPE_ID == 1) {
                        opPatients += parseInt(entry.TOTAL_PATIENTS);
                        opAmount += Math.round(entry.TOTAL_AMOUNT);
                    }
                });

                if (isActiveBranch) activeBranchCount++;
                branchesInfo.push(branchName);
                var totalPatients = opPatients + hvPatients + osPatients;
                var totalAmount = opAmount + hvAmount + osAmount;
                patientInfo[branchName] = {op: opPatients, hv: hvPatients, os: osPatients, total: totalPatients};
                salesInfo[branchName] = {op: opAmount, hv: hvAmount, os: osAmount, total: totalAmount, target: target};
                averageInfo[branchName] = {
                    op: opPatients ? opAmount / opPatients : 0,
                    hv: hvAverage !== null ? hvAverage : (hvPatients ? hvAmount / hvPatients : 0),
                    os: osPatients ? osAmount / osPatients : 0,
                    total: totalPatients ? totalAmount / totalPatients : 0
                };
                branchManagers[branchName] = branchManager;
            });

            sortDataByTotalAmountAndInsert(branchesInfo, patientInfo, salesInfo, averageInfo, branchManagers, activeBranchCount);
        }

        function sortDataByTotalAmountAndInsert(branchesInfo, patientInfo, salesInfo, averageInfo, branchManagers, activeBranchCount) {
            let sortableArray = Object.entries(salesInfo).map(([branchName, data]) => ({
                branchName,
                totalAmount: data.total,
                target: data.target,
                patientData: patientInfo[branchName],
                averageData: averageInfo[branchName],
                branchManager: branchManagers[branchName]
            })); // removed osAmount

            sortableArray.sort((a, b) => b.totalAmount - a.totalAmount);
            populateBestBranchSalesTable(sortableArray);
            sortableArray.sort((a, b) => a.totalAmount - b.totalAmount);

            let sortedBranchesInfo = sortableArray.map(item => item.branchName);
            let sortedPatientInfo = {};
            let sortedSalesInfo = {};
            let sortedAverageInfo = {};

            sortableArray.forEach(item => {
                sortedPatientInfo[item.branchName] = item.patientData;
                sortedSalesInfo[item.branchName] = salesInfo[item.branchName];
                sortedAverageInfo[item.branchName] = item.averageData;
            });

            cachedBranchesInfo = sortedBranchesInfo;
            cachedPatientInfo = sortedPatientInfo;
            cachedSalesInfo = sortedSalesInfo;
            cachedAverageInfo = sortedAverageInfo;
            cachedActiveBranchCount = activeBranchCount;

            insertIntoTables(sortedBranchesInfo, sortedPatientInfo, sortedSalesInfo, sortedAverageInfo, activeBranchCount);
        }

        function populateBestBranchSalesTable(sortedData) {
            $('#report-row .table').eq(0).find('tbody tr').remove();

            sortedData.slice(0, 5).forEach(function(item) {
                $('#report-row .table').eq(0).find('tbody').append(`
            <tr>
                <td>${item.branchName}</td>
                <td>${item.branchManager}</td>
                <td>${Math.round(item.totalAmount).toLocaleString()}</td>
            </tr>
        `);
            });
        }

        function populateBestEmployeeSales(data) {
            var bestEmployeeSalesTable = $('#report-row .card').eq(1).find('.table tbody');

            bestEmployeeSalesTable.empty();
            if (!Array.isArray(data)) return;
            data.forEach(function(item) {
                var row = `
            <tr>
                <td>${item.USERNAME}</td>
                <td>${item.NAME_EN}</td>
                <td>${item.BRANCH_MANAGER == null ? 'N/A' : item.BRANCH_MANAGER}</td>
                <td>${Math.round(item.TOTAL_AMOUNT).toLocaleString()}</td>
            </tr>
        `;
                bestEmployeeSalesTable.append(row);
            });
        }

        function populateBestEmployeeInvoice(data) {
            var bestEmployeeSalesTable = $('#report-row .card').eq(2).find('.table tbody');

            bestEmployeeSalesTable.empty();
            if (!Array.isArray(data)) return;
            data.forEach(function(item) {
                var row = `
            <tr>
                <td>${item.USERNAME}</td>
                <td>${item.NAME_EN}</td>
                <td>${item.BRANCH_MANAGER == null ? 'N/A' : item.BRANCH_MANAGER}</td>
                <td>${Math.round(item.TOTAL_AMOUNT).toLocaleString()}</td>
            </tr>
        `;
                bestEmployeeSalesTable.append(row);
            });
        }

        function insertIntoTables(branchesInfo, patientInfo, salesInfo, averageInfo, activeBranchCount) {
            $(".table-responsive .table").each(function() {
                $(this).find("tbody tr").remove();
            });

            var hideOS = $('#hideOS').is(':checked');
            var hideHV = $('#hideHV').is(':checked');

            var totalBranches = branchesInfo.length;
            var totalOPPatients = 0, totalHVPatients = 0, totalOSPatients = 0;
            var totalOPAmount = 0, totalHVAmount = 0, totalOSAmount = 0;
            var totalTargetAmount = 0;

            $.each(patientInfo, function(_, data) {
                totalOPPatients += data.op;
                totalHVPatients += data.hv || 0;
                totalOSPatients += data.os;
            });

            $.each(salesInfo, function(_, data) {
                totalOPAmount += data.op;
                totalHVAmount += data.hv || 0;
                totalOSAmount += data.os;
                totalTargetAmount += data.target || 0;
            });

            var totalOPAverage = Math.round(totalOPPatients ? totalOPAmount / totalOPPatients : 0);
            var totalHVAverage = Math.round(totalHVPatients ? totalHVAmount / totalHVPatients : 0);
            var totalOSAverage = Math.round(totalOSPatients ? totalOSAmount / totalOSPatients : 0);
            var totalAllPatients = totalOPPatients + (hideHV ? 0 : totalHVPatients) + (hideOS ? 0 : totalOSPatients);
            var totalAllAmount = totalOPAmount + (hideHV ? 0 : totalHVAmount) + (hideOS ? 0 : totalOSAmount);
            var totalBalance = totalAllAmount - totalTargetAmount;
            var totalBalanceClass = totalBalance >= 0 ? 'text-success' : 'text-danger';
            var totalBalancePrefix = totalBalance > 0 ? '+' : totalBalance < 0 ? '-' : '';
            var totalAverage = totalAllPatients ? Math.round(totalAllAmount / totalAllPatients) : 0;
            var averageSales = activeBranchCount > 0 ? Math.round(totalAllAmount / activeBranchCount) : 0;


            $('#branches-total .table').eq(0).find('tbody').prepend(`<tr>
            <td style="display: flex; justify-content: space-between;">
            <span>${totalBranches} Branches</span>
            <span>${averageSales.toLocaleString()} @if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
            {!! $global_symbol['currency'] !!}
            @else
            {{ $global_symbol['currency'] ?? 'SAR' }}
            @endif</span>
        </td></tr>`);
            $('#branches-total .table').eq(2).find('tbody').prepend(`
        <tr>
            <td>${totalOPPatients}</td>
            <td class="hv-column">${totalHVPatients}</td>
            <td class="os-column">${totalOSPatients}</td>
            <td>${totalAllPatients}</td>
        </tr>
    `);
            $('#branches-total .table').eq(1).find('tbody').prepend(`
        <tr>
            <td>${Math.round(totalOPAmount).toLocaleString()}</td>
            <td class="hv-column">${Math.round(totalHVAmount).toLocaleString()}</td>
            <td class="os-column">${Math.round(totalOSAmount).toLocaleString()}</td>
            <td>${Math.round(totalAllAmount).toLocaleString()}</td>
            <td>${Math.round(totalTargetAmount).toLocaleString()}</td>
            <td><span class="${totalBalanceClass}">${totalBalancePrefix}${Math.abs(Math.round(totalBalance)).toLocaleString()}</span></td>
        </tr>
    `);
            $('#branches-total .table').eq(3).find('tbody').prepend(`
        <tr>
            <td>${totalOPAverage}</td>
            <td class="hv-column">${totalHVAverage}</td>
            <td class="os-column">${totalOSAverage}</td>
            <td>${totalAverage}</td>
        </tr>
    `);

            $.each(branchesInfo, function(index, branchName) {
                $('#branches-total .table').eq(0).find('tbody').append(`<tr><td>${branchName}</td></tr>`);
            });

            $.each(patientInfo, function(branchName, data) {
                var rowTotal = data.op + (hideHV ? 0 : (data.hv || 0)) + (hideOS ? 0 : data.os);
                $('#branches-total .table').eq(2).find('tbody').append(`
            <tr>
                <td>${data.op}</td>
                <td class="hv-column">${data.hv || 0}</td>
                <td class="os-column">${data.os}</td>
                <td>${rowTotal}</td>
            </tr>
        `);
            });

            $.each(salesInfo, function(branchName, data) {
                var rowTotal = data.op + (hideHV ? 0 : (data.hv || 0)) + (hideOS ? 0 : data.os);
                var balance = rowTotal - data.target;
                var balanceClass = balance >= 0 ? 'text-success' : 'text-danger';
                var balancePrefix = balance > 0 ? '+' : balance < 0 ? '-' : '';
                $('#branches-total .table').eq(1).find('tbody').append(`
            <tr>
                <td>${Math.round(data.op).toLocaleString()}</td>
                <td class="hv-column">${Math.round(data.hv || 0).toLocaleString()}</td>
                <td class="os-column">${Math.round(data.os).toLocaleString()}</td>
                <td>${Math.round(rowTotal).toLocaleString()}</td>
                <td>${Math.round(data.target).toLocaleString()}</td>
                <td><span class="${balanceClass}">${balancePrefix}${Math.abs(Math.round(balance)).toLocaleString()}</span></td>
            </tr>
        `);
            });

            $.each(averageInfo, function(branchName, data) {
                var pData = patientInfo[branchName];
                var sData = salesInfo[branchName];
                var rowPatients = pData.op + (hideHV ? 0 : (pData.hv || 0)) + (hideOS ? 0 : pData.os);
                var rowAmount = sData.op + (hideHV ? 0 : (sData.hv || 0)) + (hideOS ? 0 : sData.os);
                var rowAvg = rowPatients ? Math.round(rowAmount / rowPatients) : 0;

                var opAverageRounded = Math.round(data.op).toLocaleString();
                var hvAverageRounded = Math.round(data.hv || 0).toLocaleString();
                var osAverageRounded = Math.round(data.os).toLocaleString();

                $('#branches-total .table').eq(3).find('tbody').append(`
            <tr>
                <td>${opAverageRounded}</td>
                <td class="hv-column">${hvAverageRounded}</td>
                <td class="os-column">${osAverageRounded}</td>
                <td>${rowAvg.toLocaleString()}</td>
            </tr>
        `);
            });

            toggleOSColumns();
            toggleHVColumns();
        }


        function updateActiveExistsTableWithStats(tableId, data) {
            let table = $(`#${tableId}`);
            Object.keys(data).forEach((key, index) => {
                let rowData = data[key];
                table.find('.branch-data-row').eq(index+1).find('.text-center').eq(1).text(rowData.COUNT_CITY);
                table.find('.branch-data-row').eq(index+1).find('.text-center').eq(2).text(rowData.COUNT_BRANCHES);
                table.find('.branch-data-row').eq(index+1).find('.text-center').eq(3).text(rowData.COUNT_CLIENTS);
                //table.find('.text-center')
                /*table.find('tbody tr').eq(index).find('td').eq(1).text(rowData.COUNT_CITY);
                table.find('tbody tr').eq(index).find('td').eq(2).text(rowData.COUNT_BRANCHES);
                table.find('tbody tr').eq(index).find('td').eq(3).text(rowData.COUNT_CLIENTS);*/
            });
        }

        function updateTableWithStats(tableId, data, customKey = 'TOTAL_AMOUNT') {
            let table = $(`#${tableId}`);
            var number = (data[0][customKey]);
            var number2 = (data[1][customKey]);
            var number3 = (data[0][customKey] + data[1][customKey]);
            var formattedNumber = number.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
            var formattedNumber2 = number2.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
            var formattedNumber3 = number3.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
            table.find('p').eq(0).text(formattedNumber);
            table.find('p').eq(1).text(formattedNumber2);
            table.find('p').eq(2).text(formattedNumber3);
        }

        function updateTablePaymentWithStats(tableId, data) {
            let table = $(`#${tableId}`);
            let totalPatients = 0;
            let totalAmount = 0;
            let totalAverage = 0;
            Object.keys(data).forEach((key, index) => {
                let rowData = data[key];
                table.find('.branch-data-row').eq(index).find('.text-center').eq(0).text((rowData.TOTAL_PATIENTS).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
                table.find('.branch-data-row').eq(index).find('.text-center').eq(1).text((rowData.TOTAL_AMOUNT).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
                table.find('.branch-data-row').eq(index).find('.text-center').eq(2).text((rowData.AVG_AMOUNT_PER_PATIENT).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
                totalAmount += parseFloat(rowData.TOTAL_AMOUNT);
                totalPatients += parseFloat(rowData.TOTAL_PATIENTS);
                totalAverage += parseFloat(rowData.AVG_AMOUNT_PER_PATIENT);
            });
            table.find('.branch-data-row').eq(2).find('.text-center').eq(0).text((totalPatients).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
            table.find('.branch-data-row').eq(2).find('.text-center').eq(1).text((totalAmount).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
            table.find('.branch-data-row').eq(2).find('.text-center').eq(2).text((totalPatients > 0 ? totalAmount/ totalPatients : 0).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
        }

        function appendAvailableBranches(data){
            $('.col-md-custom').remove();

            const sortedBranches = aggregateAndSort(data);
            sortedBranches.forEach(branchName => {
                const branchData = data[branchName];
                var outPatient = {TOTAL_PATIENTS: 0, TOTAL_AMOUNT: 0, AVG_REVENUE_PER_PATIENT: 0};
                var outsource = {TOTAL_PATIENTS: 0, TOTAL_AMOUNT: 0, AVG_REVENUE_PER_PATIENT: 0};

                Object.values(branchData).forEach(item => {
                    if (item.IS_AFFILIATE == 1) {
                        outsource.TOTAL_PATIENTS += item.TOTAL_PATIENTS;
                        outsource.TOTAL_AMOUNT += item.TOTAL_AMOUNT;
                    } else if (item.TYPE_ID === 1) {
                        outPatient = item;
                    }
                });
                outsource.AVG_REVENUE_PER_PATIENT = outsource.TOTAL_PATIENTS > 0 ? outsource.TOTAL_AMOUNT / outsource.TOTAL_PATIENTS : 0;
                var avgRevenuePerPatient = outsource.TOTAL_PATIENTS > 0 ? (outsource.TOTAL_AMOUNT / outsource.TOTAL_PATIENTS).toFixed(2) : 0;
                var formattedAvgRevenue = parseFloat(avgRevenuePerPatient).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
                var formattedOutPatientTotal = parseFloat(outPatient.TOTAL_AMOUNT).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
                var formattedOutsourceTotal = parseFloat(outsource.TOTAL_AMOUNT).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
                var revenueTotal = outPatient.TOTAL_AMOUNT + outsource.TOTAL_AMOUNT;
                var formattedRevenueTotal = parseFloat(revenueTotal).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
                const totalAmount = outsource.TOTAL_AMOUNT + outPatient.TOTAL_AMOUNT;
                const totalPatients = outPatient.TOTAL_PATIENTS + outsource.TOTAL_PATIENTS;
                const result = totalPatients > 0 ? totalAmount / totalPatients : 0;
                const formattedResult = result.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });

                var branchDiv = $(
                    `<div class="col-md-custom">
                        <div class="card card-holder">
                            <div class="card-header d-flex" style="gap: 15px">
                                <div class="icon-container"><img src="/img/branch-dashboard/branch-icon.png" alt="Avatar" width="40"></div>
                                <span class="font-weight-bold pt-1">${branchName}</span>
                            </div>
                            <div class="card-body mt-3">
                                <div class="d-flex justify-content-between align-items-center" style="padding: 0 25px">
                                    <div class="text-center">
                                        <img src="/img/branch-dashboard/out-patient.png" width="25" alt="">
                                    </div>
                                    <div class="text-center">
                                        <img src="/img/branch-dashboard/home-visit.png" width="25" alt="">
                                    </div>
                                    <div class="text-center">
                                        <img src="/img/branch-dashboard/total.png" width="25" alt="">
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center branch-data-row" style="background: #EFEFFF; margin-top: 0.75rem">
                                    <div class="text-center">
                                        ${outPatient.TOTAL_PATIENTS}
                                    </div>
                                    <div class="text-center">
                                        ${formattedOutPatientTotal}
                                    </div>
                                    <div class="text-center">
                                         ${(outPatient.AVG_REVENUE_PER_PATIENT).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center branch-data-row" style="background: #FFFAED; margin-top: 0.5rem">
                                    <div class="text-center">
${outsource.TOTAL_PATIENTS}

                                    </div>
                                    <div class="text-center">
                                        ${formattedOutsourceTotal}
                                    </div>
                                    <div class="text-center">
                                        ${formattedAvgRevenue > 0 ? formattedAvgRevenue : 0}
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center branch-data-row" style="background: #FBECF1; margin-top: 0.5rem;">
                                    <div class="text-center">
${outPatient.TOTAL_PATIENTS + outsource.TOTAL_PATIENTS}

                                    </div>
                                    <div class="text-center">
                                   ${formattedRevenueTotal}
                                    </div>
                                    <div class="text-center">

${formattedResult}


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`
                );



                $('#branches-container').append(branchDiv);
            });

        }

        function aggregateAndSort(data) {
            const totals = {};
            Object.entries(data).forEach(([branchName, branchData]) => {
                totals[branchName] = Object.values(branchData).reduce((acc, curr) => acc + curr.TOTAL_AMOUNT, 0);
            });

            const sortedBranchNames = Object.entries(totals)
                .sort((a, b) => a[1] - b[1])
                .map(entry => entry[0]);

            const lowestThree = sortedBranchNames.slice(0, 3);
            const others = sortedBranchNames.slice(3).sort((a, b) => totals[b] - totals[a]);

            return [...lowestThree, ...others];
        }


        $( document ).ready(function() {
            appendDashboardData();

            var idleTimer, idleIntervalID;
            var baseIdleInterval = 300000;
            var idleInterval = baseIdleInterval;

            function onIdle() {
                let rangePicker = $('#branche_income_range_date');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                }
                appendDashboardData(rangeDates)
            }

            $(document).on('mousemove', function() {
                if (idleIntervalID) {
                    clearInterval(idleIntervalID);
                    idleIntervalID = null;
                }
                clearTimeout(idleTimer);
                idleTimer = setTimeout(function() {
                    idleIntervalID = setInterval(onIdle, idleInterval);
                }, idleInterval);
            });

            $('#auto-refresh-select').on('change', function (e) {
                var selectedMultiplier = $(this).val();

                idleInterval = baseIdleInterval * selectedMultiplier;

                if (idleIntervalID) {
                    clearInterval(idleIntervalID);
                    idleIntervalID = null;
                }
                clearTimeout(idleTimer);
                idleTimer = setTimeout(function() {
                    idleIntervalID = setInterval(onIdle, idleInterval);
                }, idleInterval);
            })
            /*$(document).on('mousemove', function() {
                if (idleIntervalID) {
                    clearInterval(idleIntervalID);
                    idleIntervalID = null;
                }
                clearTimeout(idleTimer);
                idleTimer = setTimeout(function() {
                    idleIntervalID = setInterval(onIdle, idleInterval);
                }, idleInterval);
            });*/

            idleIntervalID = setInterval(onIdle, idleInterval);

            $('#export-excel-btn').on('click', function() {
                exportToExcel();
            });
        });

        function exportToExcel() {
            var rangePicker = $('#branche_income_range_date');
            var fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
            var toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');

            var hideHV = $('#hideHV').is(':checked');
            var hideOS = $('#hideOS').is(':checked');

            var branchesTable = $('#branches-total .table').eq(0).find('tbody tr');
            var salesTable = $('#branches-total .table').eq(1).find('tbody tr');
            var patientTable = $('#branches-total .table').eq(2).find('tbody tr');
            var averageTable = $('#branches-total .table').eq(3).find('tbody tr');

            var csvContent = "\uFEFF";
            csvContent += "Branch Income Report\n";
            csvContent += "Date Range: " + fromDate + " to " + toDate + "\n";
            csvContent += "Generated: " + new Date().toLocaleString() + "\n\n";

            var header = "Branch,Sales OP";
            if (!hideHV) header += ",Sales HV";
            if (!hideOS) header += ",Sales OS";
            header += ",Sales Total,Patient OP";
            if (!hideHV) header += ",Patient HV";
            if (!hideOS) header += ",Patient OS";
            header += ",Patient Total,Average OP";
            if (!hideHV) header += ",Average HV";
            if (!hideOS) header += ",Average OS";
            header += ",Average Total\n";
            csvContent += header;

            var rowCount = branchesTable.length;
            for (var i = 0; i < rowCount; i++) {
                var branchName = $(branchesTable[i]).find('td').text().trim().replace(/,/g, ' ');
                
                var salesRow = $(salesTable[i]).find('td');
                var salesOP = salesRow.eq(0).text().trim().replace(/,/g, '');
                var salesHV = salesRow.eq(1).text().trim().replace(/,/g, '');
                var salesOS = salesRow.eq(2).text().trim().replace(/,/g, '');
                var salesTotal = salesRow.eq(3).text().trim().replace(/,/g, '');
                
                var patientRow = $(patientTable[i]).find('td');
                var patientOP = patientRow.eq(0).text().trim().replace(/,/g, '');
                var patientHV = patientRow.eq(1).text().trim().replace(/,/g, '');
                var patientOS = patientRow.eq(2).text().trim().replace(/,/g, '');
                var patientTotal = patientRow.eq(3).text().trim().replace(/,/g, '');
                
                var avgRow = $(averageTable[i]).find('td');
                var avgOP = avgRow.eq(0).text().trim().replace(/,/g, '');
                var avgHV = avgRow.eq(1).text().trim().replace(/,/g, '');
                var avgOS = avgRow.eq(2).text().trim().replace(/,/g, '');
                var avgTotal = avgRow.eq(3).text().trim().replace(/,/g, '');

                if (i === 0) {
                    branchName = "TOTALS";
                }

                var row = branchName + "," + salesOP;
                if (!hideHV) row += "," + salesHV;
                if (!hideOS) row += "," + salesOS;
                row += "," + salesTotal + "," + patientOP;
                if (!hideHV) row += "," + patientHV;
                if (!hideOS) row += "," + patientOS;
                row += "," + patientTotal + "," + avgOP;
                if (!hideHV) row += "," + avgHV;
                if (!hideOS) row += "," + avgOS;
                row += "," + avgTotal + "\n";
                csvContent += row;
            }

            var blob = new Blob([csvContent], { type: 'application/vnd.ms-excel;charset=utf-8;' });
            var link = document.createElement("a");
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", "branch_income_report_" + fromDate + "_to_" + toDate + ".csv");
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    </script>
@endsection