@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = 'Panel';

        $currentYear = now()->year;
        $lastYear = $currentYear - 1;

    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-10">
                @if (!empty($subscription_info['renews_at']) || !empty($trial_info['days_left']))
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                @if (!empty($subscription_info['renews_at']))
                                    <div class="col-3">
                                        <div class="description-block border-right">
                                            <span>Folios adquiridos en el periodo</span>
                                            <h5 class="description-header">{{ $subscription_info['invoices_package'] }}
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="description-block border-right">
                                            <span>Folios consumidos</span>
                                            <h5 class="description-header">{{ $subscription_info['invoices_generated'] }}
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="description-block">
                                            <span>Folios restantes</span>
                                            <h5 class="description-header">{{ $subscription_info['invoices_left'] }}</h5>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="description-block">
                                            <span> Fecha de corte</span>
                                            <h5 class="description-header">{{ $subscription_info['renews_at'] }}</h5>
                                        </div>
                                    </div>
                                @elseif(!empty($trial_info['days_left']))
                                    <div class="col-6">
                                        <div class="description-block border-right">
                                            <span>Periodo de pruebas vence</span>
                                            <h5 class="description-header">{{ $trial_info['days_left'] }}</h5>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="description-block border-right">
                                            <span> Folios restantes en periodo de pruebas</span>
                                            <h5 class="description-header">{{ $trial_info['invoices_left'] }}</h5>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title fw-bold">Balance</h3>
                    </div>
                    <div class="card-body">
                        <div class="row g-3"> <!-- Added gutter spacing -->
                            <!-- First Chart -->
                            <div class="col-lg-6 col-md-12">
                                <div class="d-flex justify-content-center flex-wrap"> <!-- Added flex-wrap -->
                                    <div class="chart-responsive">
                                        <canvas id="balanceChart_2" height="160"></canvas>
                                        <div class="chart-title">
                                            {{ __('This month') }}<br>
                                            <span class="fw-bold" style="font-weight:bold">
                                                @if ($balances['month'] < 0)
                                                    -${{ number_format(abs($balances['month']), 2) }}
                                                @else
                                                    ${{ number_format($balances['month'], 2) }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                    <div id="balance-legend-2" class="chart-legend custom-legend ms-4"></div>
                                </div>
                            </div>
                            <!-- Second Chart -->
                            <div class="col-lg-6 col-md-12 mb-5 mb-lg-0">
                                <!-- Added bottom margin that disappears on lg -->
                                <div class="d-flex justify-content-center flex-wrap"> <!-- Added flex-wrap -->
                                    <div class="chart-responsive">
                                        <canvas id="balanceChart_1" height="160"></canvas>
                                        <div class="chart-title">
                                            {{ __('Today') }}<br>
                                            <span class="fw-bold" style="font-weight:bold">
                                                @if ($balances['total'] < 0)
                                                    -${{ number_format(abs($balances['total']), 2) }}
                                                @else
                                                    ${{ number_format($balances['total'], 2) }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                    <div id="balance-legend-1" class="chart-legend custom-legend ms-4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="font-weight:bold">{{ __('Sales') }}</h3>
                    </div>
                    <div class="card-body">
                        <div class="row g-9 alert alert-danger" style="display:none"></div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div class="form-group input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="far fa-calendar"></i></span>
                                        </div>
                                        <input type="text" id="date_range_sale" class="form-control" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="info-box" style="background-color: rgba(143, 179, 143, 0.4);">
                                    <div class="info-box-content" style="text-align:center">
                                        <span class="info-box-text">{{ __('Total Sales') }}</span>
                                        <span class="info-box-number" id="sales_total"></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box" style="background-color: rgba(143, 179, 143, 0.4);">
                                    <div class="info-box-content" style="text-align:center">
                                        <span class="info-box-text">{{ __('Active Clients') }}</span>
                                        <span class="info-box-number" id="subclient_count"></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-box" style="background-color: rgba(143, 179, 143, 0.4);">

                                    <div class="info-box-content" style="text-align:center">
                                        <span class="info-box-text">{{ __('Average Sale') }}</span>
                                        <span class="info-box-number" id="sales_average"></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 pt-2">
                            <div class="col-md-12">
                                <div class="card card-info">
                                    <div class="card-header">
                                        <h3 class="card-title">Ventas por cliente</h3>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body d-flex align-items-center" style="overflow: hidden;">
                                        <canvas id="sales_chart_2" width="800" height="400"
                                            style="width: 800px; height: 400px;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 pt-2">
                            <div class="col-md-12">
                                <div class="card card">
                                    <div class="card-header" style="color:white;background-color:#3399cc">
                                        <h3 class="card-title">Ventas acumuladas mensuales</h3>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool" data-card-widget="collapse"
                                                style="color:white;">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <button type="button" class="btn btn-tool" data-card-widget="remove"
                                                style="color:white;">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <canvas id="sales_chart_3"
                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 pt-2">
                            <div class="col-md-12">
                                <div class="card card-success">
                                    <div class="card-header">
                                        <h3 class="card-title">Ventas contra cotizaciones</h3>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <canvas id="sales_chart_4"
                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="font-weight:bold">Estado de Facturación</h3>
                    </div>
                    <div class="card-body">
                        <div class="row g-12 alert alert-danger" style="display:none"></div>
                        <div class="row g-3">
                            {{-- <div class="col-md-3">
                                <div class="info-box" style="background-color: rgba(143, 179, 143, 0.4);">
                                    <div class="info-box-content" style="text-align:center">
                                        <span class="info-box-text">Facturado</span>
                                        <span class="info-box-number" id="total_invoiced">
                                            @if ($balances['receivable']['all'] < 0)
                                                -${{ number_format(abs($balances['receivable']['all']), 2) }}
                                            @else
                                                ${{ number_format($balances['receivable']['all'], 2) }}
                                            @endif
                                        </span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                            </div> --}}
                            <div class="col-md-4">
                                <a href="javascript:loadContent('{{ route('reports.receivable', ['end_date' => $end_of_month]) }}')"
                                    class="info-box-link">
                                    <div class="info-box"
                                        style="background-color: rgba(102, 153, 102); text-align: center;">
                                        <div class="info-box-content" style="color: white;">
                                            <span class="info-box-text">Por cobrar este mes</span>
                                            <span class="info-box-number" id="receivable_month">
                                                @if ($balances['receivable']['month'] < 0)
                                                    -${{ number_format(abs($balances['receivable']['month']), 2) }}
                                                @else
                                                    ${{ number_format($balances['receivable']['month'], 2) }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="javascript:loadContent('{{ route('reports.receivable', ['end_date' => $end_of_week]) }}')"
                                    class="info-box-link">
                                    <div class="info-box"
                                        style="background-color: rgba(102, 153, 0); text-align: center;">
                                        <div class="info-box-content" style="color: white;">
                                            <span class="info-box-text">Por cobrar esta semana</span>
                                            <span class="info-box-number" id="receivable_week">
                                                @if ($balances['receivable']['week'] < 0)
                                                    -${{ number_format(abs($balances['receivable']['week']), 2) }}
                                                @else
                                                    ${{ number_format($balances['receivable']['week'], 2) }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="javascript:loadContent('{{ route('reports.receivable', ['end_date' => $today]) }}')"
                                    class="info-box-link">
                                    <div class="info-box" style="background-color: rgba(0, 153, 0); text-align: center;">
                                        <div class="info-box-content" style="color: white;">
                                            <span class="info-box-text">Por cobrar al día de hoy</span>
                                            <span class="info-box-number" id="receivable_today">
                                                @if ($balances['receivable']['today'] < 0)
                                                    -${{ number_format(abs($balances['receivable']['today']), 2) }}
                                                @else
                                                    ${{ number_format($balances['receivable']['today'], 2) }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="font-weight:bold">{{ __('Expenses') }}</h3>
                    </div>
                    <div class="card-body">
                        <div class="row g-3 pt-2">
                            <div class="col-md-12">
                                <div class="card card-success">
                                    <div class="card-header">
                                        <h3 class="card-title">Gastos contra ventas mensual</h3>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <canvas id="expenses_chart_1"
                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 pt-2">
                            <div class="col-md-4">
                                <a href="javascript:loadContent('{{ route('reports.payable', ['end_date' => $end_of_month]) }}')"
                                    class="info-box-link">
                                    <div class="info-box"
                                        style="background-color: rgba(102, 153, 102); text-align: center;">
                                        <div class="info-box-content" style="color: white;">
                                            <span class="info-box-text">Por pagar este mes</span>
                                            <span class="info-box-number" id="payable_month">
                                                @if ($balances['payable']['month'] < 0)
                                                    -${{ number_format(abs($balances['payable']['month']), 2) }}
                                                @else
                                                    ${{ number_format($balances['payable']['month'], 2) }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="javascript:loadContent('{{ route('reports.payable', ['end_date' => $end_of_week]) }}')"
                                    class="info-box-link">
                                    <div class="info-box"
                                        style="background-color: rgba(102, 153, 0); text-align: center;">
                                        <div class="info-box-content" style="color: white;">
                                            <span class="info-box-text">Por pagar esta semana</span>
                                            <span class="info-box-number" id="payable_week">
                                                @if ($balances['payable']['week'] < 0)
                                                    -${{ number_format(abs($balances['payable']['week']), 2) }}
                                                @else
                                                    ${{ number_format($balances['payable']['week'], 2) }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="javascript:loadContent('{{ route('reports.payable', ['end_date' => $today]) }}')"
                                    class="info-box-link">
                                    <div class="info-box" style="background-color: rgba(0, 153, 0); text-align: center;">
                                        <div class="info-box-content" style="color: white;">
                                            <span class="info-box-text">Por pagar al día de hoy</span>
                                            <span class="info-box-number" id="payable_today">
                                                @if ($balances['payable']['today'] < 0)
                                                    -${{ number_format(abs($balances['payable']['today']), 2) }}
                                                @else
                                                    ${{ number_format($balances['payable']['today'], 2) }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .info-box-link {
            display: block;
            text-decoration: none;
            color: inherit;
            transition: background-color 0.2s ease;
        }

        .info-box-link:hover .info-box {
            filter: brightness(0.95);
            cursor: pointer;
        }

        .chart-responsive {
            position: relative;
            text-align: center;
            /* Center the content inside the div */
        }

        .chart-title {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            text-align: center;
            margin: 0 auto;
            font-size: 16px;
            color: #333;
        }

        .custom-legend {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .legend-text {
            font-size: 14px;
            white-space: nowrap;
        }

        .custom-legend .legend-item {
            margin-bottom: 3px;
            /* Reduced space between items */
        }

        .chart-legend .legend-item.green .legend-box {
            background-color: rgba(204, 255, 204, 0.4);
            border: 2px solid rgba(102, 153, 102, 0.4);
            /* Border for the green item */
        }

        .chart-legend .legend-item.yellow .legend-box {
            background-color: rgba(255, 255, 204, 0.6);
            border: 2px solid rgba(204, 204, 153, 0.8);
            /* Border for the yellow item */
        }

        .chart-legend .legend-item.red .legend-box {
            background-color: rgba(255, 204, 204, 0.6);
            border: 2px solid rgba(204, 153, 153, 0.4);
            /* Border for the red item */
        }

        .custom-legend .legend-box {
            display: inline-block;
            width: 100px;
            /* Increased width of the legend boxes */
            height: 50px;
            /* Height of the box */
            text-align: center;
            padding: 3px;
            border-radius: 4px;
            position: relative;
            font-size: 12px;
            font-weight: 500;
            margin-right: 10px;
            /* Adjusted margin between boxes */
        }

        .custom-legend .legend-label {
            display: block;
            margin-top: 4px;
            /* Reduced space between label and value */
            color: black;
        }

        .custom-legend .legend-value {
            display: block;
            margin-top: 0px;
            /* Reduced margin between label and value */
            color: black;
            font-size: 10px;
            font-weight: bold;
        }
    </style>
    <script>
        var today = new Date();
        startDate = new Date(today.getFullYear(), today.getMonth(), 1);
        endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);

        var checking = '{{ $balances['checking'] }}';
        var cash = '{{ $balances['cash'] }}';
        var receivable = '{{ $balances['receivable']['all'] }}';
        var payable = '{{ $balances['payable']['all'] }}';
        var receivable_month = '{{ $balances['receivable']['month'] }}';
        var payable_month = '{{ $balances['payable']['month'] }}';

        var ctx_1 = document.getElementById('balanceChart_1').getContext('2d');
        var ctx_2 = document.getElementById('balanceChart_2').getContext('2d');

        var balanceChart_1 = new Chart(ctx_1, {
            type: 'doughnut',
            data: {
                labels: ['Saldo en Cuentas', 'Efectivo', 'Por Cobrar', 'Por Pagar'],
                datasets: [{
                    data: [checking, cash, receivable, payable],
                    backgroundColor: [
                        'rgba(102, 153, 102, 0.6)', // Light Green with full opacity
                        'rgba(153, 204, 153, 0.6)', // Light Green with full opacity (same as above)
                        'rgba(255, 255, 153, 0.6)', // Light Yellow with full opacity
                        'rgba(255, 204, 204, 1)' // Light Red with full opacity
                    ],
                    borderColor: [
                        'rgba(102, 153, 102, 0.6)', // Darker Light Green border
                        'rgba(102, 153, 102, 0.6)', // Darker Light Green border (same as above)
                        'rgba(204, 204, 102, 1)', // Darker Light Yellow border
                        'rgba(204, 153, 153, 0.8)' // Darker Light Red border
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                legend: {
                    display: false
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var dataset = data.datasets[tooltipItem.datasetIndex];
                            var value = dataset.data[tooltipItem.index];
                            var label = data.labels[tooltipItem.index];
                            return label + ': ' + currencyFormat(value);
                        }
                    }
                },
                legendCallback: function(chart) {
                    var text = [];
                    var data = chart.data;
                    var bgColors = data.datasets[0].backgroundColor;

                    for (var i = 0; i < data.labels.length; i++) {
                        text.push('<div class="legend-item">');
                        text.push('<div class="legend-box" style="background-color:' + bgColors[i] + ';">');
                        text.push('<span class="legend-label">' + data.labels[i] +
                            '</span>'); // label inside the box
                        text.push('<span class="legend-value">' + currencyFormat(data.datasets[0].data[i]) +
                            '</span>'); // value below the label inside the box
                        text.push('</div>');
                        text.push('</div>');
                    }

                    return text.join("");
                }
            }
        });

        var balanceChart_2 = new Chart(ctx_2, {
            type: 'doughnut',
            data: {
                labels: ['Saldo en Cuentas', 'Efectivo', 'Por Cobrar', 'Por Pagar'],
                datasets: [{
                    data: [checking, cash, receivable_month, payable_month],
                    backgroundColor: [
                        'rgba(102, 153, 102, 0.6)', // Light Green with full opacity
                        'rgba(153, 204, 153, 0.6)', // Light Green with full opacity (same as above)
                        'rgba(255, 255, 153, 0.6)', // Light Yellow with full opacity
                        'rgba(255, 204, 204, 1)' // Light Red with full opacity
                    ],
                    borderColor: [
                        'rgba(102, 153, 102, 0.6)', // Darker Light Green border
                        'rgba(102, 153, 102, 0.6)', // Darker Light Green border (same as above)
                        'rgba(204, 204, 102, 1)', // Darker Light Yellow border
                        'rgba(204, 153, 153, 0.8)' // Darker Light Red border
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                legend: {
                    display: false
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var dataset = data.datasets[tooltipItem.datasetIndex];
                            var value = dataset.data[tooltipItem.index];
                            var label = data.labels[tooltipItem.index];
                            return label + ': ' + currencyFormat(value);
                        }
                    }
                },
                legendCallback: function(chart) {
                    var text = [];
                    var data = chart.data;
                    var bgColors = data.datasets[0].backgroundColor;

                    for (var i = 0; i < data.labels.length; i++) {
                        text.push('<div class="legend-item">');
                        text.push('<div class="legend-box" style="background-color:' + bgColors[i] + ';">');
                        text.push('<span class="legend-label">' + data.labels[i] +
                            '</span>'); // label inside the box
                        text.push('<span class="legend-value">' + currencyFormat(data.datasets[0].data[i]) +
                            '</span>'); // value below the label inside the box
                        text.push('</div>');
                        text.push('</div>');
                    }

                    return text.join("");
                }
            }
        });

        $('#balance-legend-1').html(balanceChart_1.generateLegend());
        $('#balance-legend-1 .legend-item').eq(0).addClass('green');
        $('#balance-legend-1 .legend-item').eq(1).addClass('green');
        $('#balance-legend-1 .legend-item').eq(2).addClass('yellow');
        $('#balance-legend-1 .legend-item').eq(3).addClass('red');

        $('#balance-legend-2').html(balanceChart_2.generateLegend());
        $('#balance-legend-2 .legend-item').eq(0).addClass('green');
        $('#balance-legend-2 .legend-item').eq(1).addClass('green');
        $('#balance-legend-2 .legend-item').eq(2).addClass('yellow');
        $('#balance-legend-2 .legend-item').eq(3).addClass('red');

        var lineChartData = @json($sales['by_month']);
        createLineChart('#sales_chart_3', lineChartData);

        var barChartData1 = @json($sales['vs_quotes']);
        createBarChart('#sales_chart_4', barChartData1);

        var barChartData2 = @json($sales['vs_expenses']);
        createBarChart('#expenses_chart_1', barChartData2);

        getSalesByDateRange();

        $('#date_range_sale').daterangepicker({
            startDate: startDate,
            endDate: endDate,
            locale: {
                autoUpdateInput: false,
                format: 'YYYY/MM/DD',
                applyLabel: "Aplicar",
                cancelLabel: "Cancelar",
                fromLabel: "De",
                toLabel: "A",
                customRangeLabel: "Personalizado",
                daysOfWeek: [
                    "Do",
                    "Lu",
                    "Ma",
                    "Mi",
                    "Ju",
                    "Vi",
                    "Sa"
                ],
                monthNames: [
                    "Enero",
                    "Febrero",
                    "Marzo",
                    "Abril",
                    "Mayo",
                    "Junio",
                    "Julio",
                    "Agosto",
                    "Septiembre",
                    "Octubre",
                    "Noviembre",
                    "Diciembre"
                ],
                firstDay: 1
            }
        }, function(start, end, label) {});

        $(".input-group-text i.far.fa-calendar").on("click", function() {
            $("#date_range_sale").focus();
        });

        $('#date_range_sale').on('cancel.daterangepicker', function(ev, picker) {
            if (!startDate && !endDate) {
                $('#date_range_sale').val('');
            }
        });

        $('#date_range_sale').on('hide.daterangepicker', function() {
            if (!startDate && !endDate) {
                $('#date_range_sale').val('');
            }
        });

        $('#date_range_sale').on('apply.daterangepicker', function(ev, picker) {

            if (picker.startDate && picker.endDate) {
                startDate = moment(picker.startDate, 'YYYY/MM/DD');
                endDate = moment(picker.endDate, 'YYYY/MM/DD');

                $('#date_range_sale').val(startDate.format('YYYY/MM/DD') + ' - ' + endDate.format(
                    'YYYY/MM/DD'));

                getSalesByDateRange();
            }
        });

        $('#date_range_sale').val(
            moment(startDate).format('YYYY/MM/DD') + ' - ' + moment(endDate).format('YYYY/MM/DD')
        );

        function getSalesByDateRange() {

            $(".overlay").show();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                    method: 'POST',
                    data: {
                        startDate: moment(startDate).format('YYYY-MM-DD'),
                        endDate: moment(endDate).format('YYYY-MM-DD')
                    },
                    url: '{{ route('dashboard-client.sales') }}',
                    success: function(response) {
                        if (response.success === false) {
                            showStatus(false, 'Unable to retrieve sales data.');
                            return;
                        }

                        let sales = response.sales;

                        $('#sales_total').text(currencyFormat(sales.total));
                        $('#subclient_count').text(sales.subclient_count);
                        $('#sales_average').text(currencyFormat(sales.average));

                        let salesPieData = response.sales.by_subclient;

                        createPieChart('#sales_chart_2', {
                            labels: salesPieData.labels,
                            data: salesPieData.data
                        });
                    }
                })
                .fail(function(xhr) {
                    console.log(xhr);
                    if (xhr.status === 401 || xhr.status === 419) {
                        window.location.href = "/login";
                    } else {
                        console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
                        alert('{{ __('Unable to retrieve sales data.') }}');
                    }
                }).always(function() {
                    $(".overlay").hide();
                });
        }

        function createPieChart(id, chartData) {
            const ctx = $(id)[0].getContext('2d');

            if (ctx.chart) {
                ctx.chart.destroy();
            }

            let pieChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: chartData.labels,
                    datasets: [{
                        data: chartData.data,
                        backgroundColor: [
                            '#4dc9f6', '#f67019', '#f53794', '#537bc4', '#acc236',
                            '#166a8f', '#00a950', '#58595b', '#8549ba', '#e6194b',
                            '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4',
                            '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080',
                            '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3',
                            '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff'
                        ]
                    }]
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    layout: {
                        padding: {
                            left: 50, // moves chart closer to the left edge
                            right: 200, // makes room for the legend
                            top: 0,
                            bottom: 0
                        }
                    },
                    legend: {
                        display: true,
                        position: 'right',
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                const dataset = data.datasets[tooltipItem.datasetIndex];
                                const value = dataset.data[tooltipItem.index];
                                const label = data.labels[tooltipItem.index];
                                return `${label}: ${currencyFormat(value)}`;
                            }
                        }
                    }
                }
            });

            ctx.chart = pieChart;

            return pieChart;
        }

        function createLineChart(id, chartData) {
            const ctx = $(id)[0].getContext('2d');

            if (ctx.chart) {
                ctx.chart.destroy();
            }

            let lineChart = new Chart(ctx, {
                type: 'line',
                data: chartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'top',
                        labels: {
                            boxWidth: 10
                        }
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                callback: function(value) {
                                    return currencyFormat(value);
                                }
                            }
                        }]
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                const datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                                const value = tooltipItem.yLabel;
                                return `${datasetLabel}: ${currencyFormat(value)}`;
                            }
                        }
                    }
                }
            });

            ctx.chart = lineChart;

            return lineChart;
        }

        function createBarChart(id, chartData) {
            const ctx = $(id)[0].getContext('2d');

            if (ctx.chart) {
                ctx.chart.destroy();
            }

            let barChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: chartData.labels,
                    datasets: chartData.datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                const dataset = data.datasets[tooltipItem
                                    .datasetIndex];
                                const label = dataset.label || '';
                                const value = tooltipItem.yLabel;
                                const formattedValue = currencyFormat(
                                    value);

                                return `${label}: ${formattedValue}`;
                            }
                        }
                    },
                    scales: {
                        xAxes: [{
                            categoryPercentage: 0.8,
                            barPercentage: 0.6,
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                callback: function(value) {
                                    return currencyFormat(value);
                                }
                            }
                        }]
                    }
                }
            });

            ctx.chart = barChart;

            return barChart;
        }
    </script>
@endsection