@extends('operations.layout.mainlayout')

<style>
    .card {
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }

    .metric-card {
        background: linear-gradient(145deg, #ffffff, #f5f7fa);
        padding: 1.5rem;
    }

    .metric-value {
        font-size: 24px;
        font-weight: 600;
        color: #2c3e50;
    }

    .metric-label {
        font-size: 14px;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .month-details {
        background: #fff;
        display: none;
    }

    .positive-value { color: #28a745; }
    .negative-value { color: #dc3545; }
    .forecast-value { color: #6c757d; font-style: italic; }

    .action-buttons {
        gap: 8px;
        display: flex;
        justify-content: flex-end;
    }

    .filter-card {
        background: #fff;
        margin-bottom: 2rem;
    }

    .collapsed-row {
        cursor: pointer;
        background: #f8f9fa;
        transition: background-color 0.3s;
    }

    .collapsed-row:hover {
        background: #e9ecef;
    }

    .collapse {
        width: 100%;
    }

    .month-details {
        background: #fff;
    }

    .table-row-expandable {
        cursor: pointer;
    }
    .info-box {
        min-height: 100px;
        padding: 20px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }
    .info-box-number {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        display: block;
        margin-top: 10px;
    }
    .info-box-text {
        color: #666;
        text-transform: uppercase;
        font-size: 14px;
    }

    .editable-target {
        cursor: pointer;
        position: relative;
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        transition: all 0.2s ease;
        background-color: rgba(52, 152, 219, 0.1);
        color: #2c3e50;
        border: 1px dashed transparent;
    }

    .editable-target:hover {
        background-color: rgba(52, 152, 219, 0.2);
        border-color: #3498db;
    }

    .editable-target::after {
        content: '✎';
        position: absolute;
        right: -20px;
        color: #3498db;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .editable-target:hover::after {
        opacity: 1;
    }

    .editable-target.editing {
        padding: 0;
        background-color: #fff;
        border: 1px solid #3498db;
    }

    .editable-target.editing input {
        width: 120px;
        text-align: right;
        padding: 4px 8px;
        border: none;
        border-radius: 4px;
        outline: none;
    }

    .editable-target-spinner {
        position: absolute;
        right: -25px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        width: 1rem;
        height: 1rem;
    }

    .editable-target.updated {
        animation: highlight-update 0.8s ease;
    }

    @keyframes highlight-update {
        0% { background-color: rgba(46, 204, 113, 0.3); }
        100% { background-color: rgba(52, 152, 219, 0.1); }
    }

    .edit-icon {
        margin-left: 5px;
        color: #3498db;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .editable-target:hover .edit-icon {
        opacity: 1;
    }

    .editable-target-spinner {
        color: #3498db;
    }

    .btn-outline-success,
    .btn-outline-info {
        transition: all 0.3s ease;
        padding: 0.5rem 1rem;
        font-weight: 500;
        box-shadow: none;
        min-width: 140px;
    }

    .btn-outline-success {
        border-color: #28a745;
        color: #28a745;
    }

    .btn-outline-success:hover {
        background-color: #28a745;
        color: white;
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
    }

    .btn-outline-info {
        border-color: #17a2b8;
        color: #17a2b8;
        background-color: transparent;
    }

    .btn-outline-info:hover {
        background-color: #17a2b8;
        color: white;
        box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2);
    }

    .btn-outline-info:focus,
    .btn-outline-success:focus {
        box-shadow: none;
    }

    .gap-2 {
        gap: 0.5rem !important;
    }

    .gap-3 {
        gap: 1rem !important;
    }

    .me-2 {
        margin-right: 0.5rem !important;
    }

    .ms-auto {
        margin-left: auto !important;
    }

    .form-group {
        margin-right: 1rem;
    }

    .form-control {
        border-radius: 4px;
        border: 1px solid #ced4da;
        transition: border-color 0.3s ease;
    }

    .form-control:focus {
        border-color: #17a2b8;
        box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
    }

    .form-select {
        border-radius: 4px;
        border: 1px solid #ced4da;
        transition: border-color 0.3s ease;
    }

    .form-select:focus {
        border-color: #17a2b8;
        box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
    }
</style>


@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <h1 class="m-0">Sales Forecast</h1>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="card-title mb-0">Yearly Performance</h3>
                            <div class="ms-auto">
                                <button onclick="exportYearlyData()" class="btn btn-outline-success btn-sm d-flex align-items-center">
                                    <i class="fas fa-file-excel me-2"></i>
                                    <span>Export to Excel</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="yearly-performance-container">
                            <div class="d-flex justify-content-center align-items-center py-5 loading-overlay" style="display: none !important; min-height: 300px; background: #f8f9fa; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000;">
                                <div class="text-center">
                                    <div class="spinner-grow text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <div>
                                        <h5 class="text-primary mb-2">Updating Target Data</h5>
                                        <p class="text-muted mb-0">Please wait while we process your request...</p>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>Year</th>
                                    <th class="text-end">Sales Amount</th>
                                    <th class="text-end">Patients</th>
                                    <th class="text-end">AVG Sales/Pat</th>
                                    <th class="text-end">Target Amount</th>
                                    <th class="text-end">Forecast Amount</th>
                                    <th class="text-end">Balance Amount</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($yearly_data as $year)
                                    <tr class="{{ $year->YEAR >= 2024 ? 'table-row-expandable' : '' }}
                                            {{ $year->YEAR > $current_year ? 'table-warning' : '' }}"
                                        @if($year->YEAR >= 2024)
                                            data-bs-toggle="collapse"
                                            data-bs-target="#monthlyDetails_{{ $year->YEAR }}"
                                            aria-expanded="false"
                                            aria-controls="monthlyDetails_{{ $year->YEAR }}"
                                            data-year="{{ $year->YEAR }}"
                                            data-yearly="{{ $yearly_target }}"
                                        @endif
                                    >
                                        <td>
                                            @if($year->YEAR >= 2024)
                                                <i class="fas fa-plus-circle me-2"></i>
                                            @endif
                                            {{ $year->YEAR }}
                                        </td>
                                        <td class="text-end">
                                            @if($year->YEAR < 2024)
                                                <span class="editable-target" 
                                                      data-type="sales"
                                                      data-year="{{ $year->YEAR }}"
                                                      data-original="{{ $year->TOTAL_AMOUNT }}">
                                                    {{ number_format($year->TOTAL_AMOUNT) }}
                                                </span>
                                            @else
                                                {{ number_format($year->TOTAL_AMOUNT) }}
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            @if($year->YEAR < 2024)
                                                <span class="editable-target"
                                                      data-type="patients"
                                                      data-year="{{ $year->YEAR }}"
                                                      data-original="{{ $year->PATIENT_COUNT }}">
                                                    {{ number_format($year->PATIENT_COUNT) }}
                                                </span>
                                            @else
                                                {{ number_format($year->PATIENT_COUNT) }}
                                            @endif
                                        </td>
                                        <td class="text-end">{{ number_format($year->AVG_SALES_PAT) }}</td>
                                        <td class="text-end">
                                            @if($year->YEAR >= 2024)
                                                <span class="editable-target"
                                                      data-type="yearly"
                                                      data-year="{{ $year->YEAR }}"
                                                      data-original="{{ $year->TARGET_AMOUNT }}">
                                                    {{ number_format($year->TARGET_AMOUNT) }}
                                                </span>
                                            @else
                                                <span class="editable-target"
                                                      data-type="target"
                                                      data-year="{{ $year->YEAR }}"
                                                      data-original="{{ $year->TARGET_AMOUNT }}">
                                                    {{ number_format($year->TARGET_AMOUNT) }}
                                                </span>
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            @if($year->YEAR >= 2024)
                                                <span class="forecast-value">{{ number_format($year->FORECAST_AMOUNT, 2) }}</span>
                                            @else
                                                {{ number_format($year->TOTAL_AMOUNT, 2) }}
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            @php
                                                $balance = $year->TOTAL_AMOUNT - $year->TARGET_AMOUNT;
                                            @endphp
                                            <span class="{{ $balance >= 0 ? 'positive-value' : 'negative-value' }}">
                                                {{ number_format(abs($balance)) }}
                                            </span>
                                        </td>
                                    </tr>

                                    @if($year->YEAR >= 2024)
                                        <tr>
                                            <td colspan="7" class="p-0">
                                                <div class="collapse" id="monthlyDetails_{{ $year->YEAR }}">
                                                    <div class="card mb-4">
                                                        <div class="card-body">
                                                            <form method="GET" action="/operations/sales-forecast" class="row g-3">
                                                                <div class="col-md-4">
                                                                    <label class="form-label">Branch</label>
                                                                    <select class="form-select select2" name="branch_id">
                                                                        <option value="">All Branches</option>
                                                                        @foreach($branches as $branch)
                                                                            <option value="{{ $branch->ID }}" {{ $selected_branch == $branch->ID ? 'selected' : '' }}>
                                                                                {{ $branch->NAME_EN }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                <div class="col-12 mt-3">
                                                                    <button type="submit" class="btn btn-outline-info btn-sm px-4 py-2 d-flex align-items-center float-end">
                                                                        <i class="fas fa-sync-alt mr-2"></i>
                                                                        <span>Update</span>
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <table class="table mb-0">
                                                        <thead>
                                                        <tr>
                                                            <th>Month</th>
                                                            <th class="text-end">Sales Amount</th>
                                                            <th class="text-end">Patients</th>
                                                            <th class="text-end">AVG Sales/Pat</th>
                                                            <th class="text-end">Target Amount</th>
                                                            <th class="text-end">Forecast Amount</th>
                                                            <th class="text-end">Balance Amount</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                @if($show_branch_data)
                    <div class="card mt-4">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h3 class="card-title mb-0">Branch Performance {{ $selected_year }}</h3>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="form-group mb-0">
                                        <label class="form-label me-2">Target Amount:</label>
                                        <input type="number" id="branchTargetAmount" class="form-control d-inline-block" style="width: 150px;" 
                                            value="{{ $target_amount ?? 0 }}" 
                                            placeholder="Enter target amount">
                                    </div>
                                    <div class="mb-0" style="width: 170px">
                                        <select id="account-manager" class="form-select select2" name="account_manager_id">
                                            <option selected disabled>Account Manager</option>
                                            <option value="">All</option>
                                            @foreach($accountManagers as $manager)
                                                <option value="{{$manager->ID}}">{{$manager->manager_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <button type="button" class="btn btn-outline-info btn-sm d-flex align-items-center" id="applyBranchTarget">
                                            <i class="fas fa-sync-alt me-2"></i>
                                            <span>Apply Target</span>
                                        </button>
                                        <button onclick="exportBranchesData()" class="btn btn-outline-success btn-sm d-flex align-items-center">
                                            <i class="fas fa-file-excel me-2"></i>
                                            <span>Export to Excel</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body" id="branch-performance-container">
                            <div class="d-flex justify-content-center align-items-center py-5" style="min-height: 300px; background: #f8f9fa;">
                                <div class="text-center">
                                    <div class="spinner-grow text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <div>
                                        <h5 class="text-primary mb-2">Loading Branch Performance Data</h5>
                                        <p class="text-muted mb-0">Please wait while we fetch the latest information...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </section>
    </div>
@endsection


@section('footer-scripts')
    <script>
        function numberFormat(number) {
            return new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(number);
        }

        $(document).ready(function() {
            $('.select2').select2();
            loadBranchPerformanceData();

            $(document).on('click', '[data-bs-toggle="collapse"]', function(e) {
                e.preventDefault();
                const $this = $(this);
                const targetId = $this.attr('data-bs-target');
                const $target = $(targetId);
                const $icon = $this.find('i.fas');
                const year = $this.closest('tr').data('year');
                
                if (!$target.hasClass('loaded')) {
                    loadMonthsData(year, $target, $this.closest('tr').data('yearly'));
                    $target.addClass('loaded');
                }
                
                $target.collapse('toggle');
                
                if ($icon.hasClass('fa-plus-circle')) {
                    $icon.removeClass('fa-plus-circle').addClass('fa-minus-circle');
                } else {
                    $icon.removeClass('fa-minus-circle').addClass('fa-plus-circle');
                }
            });

            function loadMonthsData(year, container, yearlyTarget) {
                const loadingHtml = `
                    <tr>
                        <td colspan="7" class="p-0">
                            <div class="d-flex justify-content-center align-items-center py-4" style="min-height: 200px; background: #f8f9fa;">
                                <div class="text-center">
                                    <div class="spinner-grow text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <div>
                                        <h5 class="text-primary mb-2">Loading Monthly Data</h5>
                                        <p class="text-muted mb-0">Please wait while we fetch the data...</p>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                `;
                
                container.find('table tbody').html(loadingHtml);
                
                $.ajax({
                    url: `/operations/sales-forecast/months/${year}`,
                    method: 'GET',
                    data: {
                        branch_id: $('[name="branch_id"]').val()
                    },
                    success: function(response) {
                        if (response.status === 'error') {
                            container.find('table tbody').html(`<tr><td colspan="7" class="text-center text-danger">${response.message}</td></tr>`);
                            return;
                        }

                        const monthsData = response.current;
                        const monthlyTargets = response.monthly_targets;
                        let tableHtml = '';
                        
                        monthsData.forEach(month => {
                            const monthName = new Date(2024, month.MONTH - 1).toLocaleString('default', { month: 'short' });
                            const avgSalesPerPatient = month.AVRG_SALES_PAT;
                            const monthKey = month.MONTH.toString().padStart(2, '0');
                            const monthlyTarget = monthlyTargets[monthKey]?.target || 0;
                            
                            tableHtml += `
                                <tr>
                                    <td>${monthName}
                                        ${month.is_forecast ? '<span class="badge bg-warning">Forecast</span>' : ''}
                                    </td>
                                    <td class="text-end">${numberFormat(month.TOTAL_AMOUNT)}</td>
                                    <td class="text-end">${numberFormat(month.PATIENT_COUNT)}</td>
                                    <td class="text-end">${numberFormat(avgSalesPerPatient)}</td>
                                    <td class="text-end">
                                        <div class="editable-target-wrapper">
                                            <span class="editable-target"
                                                  data-type="monthly"
                                                  data-year="${year}"
                                                  data-month="${month.MONTH}"
                                                  data-yearly="${yearlyTarget}"
                                                  data-original="${monthlyTarget}">
                                                ${numberFormat(monthlyTarget)}
                                            </span>
                                            <div class="editable-target-spinner spinner-border spinner-border-sm text-primary ms-2" role="status" style="display: none;">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-end">${numberFormat(month.forecast_amount)}</td>
                                    <td class="text-end ${(month.TOTAL_AMOUNT - monthlyTarget) >= 0 ? 'positive-value' : 'negative-value'}">
                                        ${numberFormat(Math.abs(month.TOTAL_AMOUNT - monthlyTarget))}
                                    </td>
                                </tr>
                            `;
                        });
                        
                        container.find('table tbody').html(tableHtml);
                        initializeEditableTargets();
                    },
                    error: function() {
                        container.find('table tbody').html('<tr><td colspan="7" class="text-center text-danger">Error loading month data</td></tr>');
                    }
                });
            }

            function parseNumber(value) {
                if (typeof value === 'string') {
                    return parseFloat(value.replace(/,/g, '')) || 0;
                }
                return parseFloat(value) || 0;
            }

            function formatNumber(number) {
                return new Intl.NumberFormat('en-US', {
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0
                }).format(number || 0);
            }

            function numberFormat(number) {
                return Math.round(parseFloat(number)).toLocaleString('en-US', {
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0
                });
            }

            function loadBranchPerformanceData() {
                const targetAmount = $('.yearly-target').data('original');
                var accountManager = $('#account-manager').val();
                $.ajax({
                    url: '/operations/sales-forecast/branch-performance',
                    method: 'GET',
                    data: {
                        target_amount: targetAmount,
                        account_manager:accountManager
                    },
                    success: function(response) {
                        if (response.status !== 'success') {
                            $('#branch-performance-container').html('<div class="alert alert-danger">Failed to load branch performance data</div>');
                            return;
                        }

                        const branchData = response.data;
                        const remainingMonths = response.remainingMonths || {};
                        const monthColumns = Object.entries(remainingMonths)
                            .sort(([a], [b]) => parseInt(a) - parseInt(b))
                            .map(([key, name]) => ({ key, name }));

                        branchData.sort((a, b) => parseNumber(b.current_total) - parseNumber(a.current_total));

                        let html = '';
                        let totals = {
                            sales: 0,
                            patients: 0,
                            target: 0,
                            forecast: 0,
                            balance: 0,
                            monthlyTargets: {}
                        };

                        monthColumns.forEach(month => {
                            totals.monthlyTargets[month.key] = 0;
                        });

                        branchData.forEach(branch => {
                            totals.sales += parseNumber(branch.current_total);
                            totals.patients += parseNumber(branch.patient_count);
                            totals.target += parseNumber(branch.target);
                            totals.forecast += parseNumber(branch.forecast_amount);
                            totals.balance += parseNumber(branch.balance);

                            monthColumns.forEach(month => {
                                const monthlyTarget = parseNumber(branch.monthly_targets[month.key] || 0);
                                totals.monthlyTargets[month.key] += monthlyTarget;
                            });

                            html += `
                                <tr>
                                    <td>${branch.branch_name}</td>
                                    <td>${branch.manager_name}</td>
                                    <td>${branch.opening_date}</td>
                                    <td class="text-end">${numberFormat(branch.current_total)}</td>
                                    <td class="text-end">${numberFormat(branch.patient_count)}</td>
                                    <td class="text-end">${numberFormat(branch.avg_sales_patient)}</td>
                                    <td class="text-end">
                                        <div class="editable-target-wrapper">
                                            <span class="editable-target branch-target" 
                                                  data-branch-id="${branch.branch_id}"
                                                  data-type="branch_target"
                                                  data-year="${new Date().getFullYear()}"
                                                  data-original-value="${branch.target}"
                                                  data-original="${branch.target}">
                                                ${numberFormat(branch.target)}
                                            </span>
                                            <div class="editable-target-spinner spinner-border spinner-border-sm d-none"></div>
                                        </div>
                                    </td>
                                    <td class="text-end">${numberFormat(branch.forecast_amount)}</td>
                                    <td class="text-end ${branch.balance > 0 ? 'positive-value' : 'negative-value'}">
                                        ${numberFormat(Math.abs(branch.balance))}
                                    </td>`;
                            
                            monthColumns.forEach(month => {
                                html += `<td class="text-end future-month-${month.key}">${numberFormat(branch.monthly_targets[month.key] || 0)}</td>`;
                            });
                            
                            html += '</tr>';
                        });

                        $('#branchTargetAmount').val(Math.round(totals.target));

                        const avgSalesPerPatient = totals.patients > 0 ? totals.sales / totals.patients : 0;

                        html += `
                            <tr class="table-secondary fw-bold">
                                <td>Total</td>
                                <td class="text-end"></td>
                                <td class="text-end"></td>
                                <td class="text-end">${numberFormat(totals.sales)}</td>
                                <td class="text-end">${numberFormat(totals.patients)}</td>
                                <td class="text-end">${numberFormat(avgSalesPerPatient)}</td>
                                <td class="text-end">${numberFormat(totals.target)}</td>
                                <td class="text-end">${numberFormat(totals.forecast)}</td>
                                <td class="text-end ${totals.balance > 0 ? 'positive-value' : 'negative-value'}">
                                    ${numberFormat(Math.abs(totals.balance))}
                                </td>`;
                        
                        monthColumns.forEach(month => {
                            html += `<td class="text-end future-month-${month.key}">${numberFormat(totals.monthlyTargets[month.key])}</td>`;
                        });
                        
                        html += '</tr>';

                        $('#branch-performance-container').html(`
                            <table class="table table-bordered" id="branchPerformanceTable">
                                <thead>
                                    <tr>
                                        <th>Branch</th>
                                        <th>Manager Name</th>
                                        <th>Opening Date</th>
                                        <th class="text-end">Sales Amount</th>
                                        <th class="text-end">Patients</th>
                                        <th class="text-end">AVG Sales/Pat</th>
                                        <th class="text-end">Target Amount</th>
                                        <th class="text-end">Forecast Amount</th>
                                        <th class="text-end">Balance Amount</th>
                                        ${monthColumns.map(month => `<th class="text-end">${month.name}</th>`).join('')}
                                    </tr>
                                </thead>
                                <tbody>
                                    ${html}
                                </tbody>
                            </table>
                        `);
                        initializeEditableTargets();
                    },
                    error: function(xhr, status, error) {
                        $('#branch-performance-container').html(`
                            <div class="alert alert-danger">
                                Error loading branch performance data: ${error}
                            </div>
                        `);
                    }
                });
            }

            function updateYearlyTargetDisplay(response) {
                if (!response.forecast || !response.monthly_targets) return;

                const forecastAmount = response.forecast.forecast_amount;
                const balance = response.balance;
                const yearToDateBalance = response.forecast.year_to_date;
                const currentMonth = new Date().getMonth() + 1;

                $('.forecast-amount').text(formatNumber(forecastAmount));
                $('.target-balance').text(formatNumber(Math.abs(balance)))
                    .removeClass('negative-value positive-value')
                    .addClass(balance > 0 ? 'positive-value' : 'negative-value');

                Object.entries(response.monthly_targets).forEach(([month, data]) => {
                    const monthRow = $(`.editable-target[data-month="${month}"]`).closest('tr');
                    if (monthRow.length) {
                        const targetCell = monthRow.find('.editable-target');
                        targetCell.text(formatNumber(data.target))
                            .data('original', data.target);

                        const forecastValue = data.forecast_amount;
                        const actualSalesValue = data.actual_sales;
                        monthRow.find('td:nth-child(6)').text(formatNumber(forecastValue));

                        const balanceCell = monthRow.find('td:last-child');
                        const monthlyBalance = actualSalesValue - data.target;
                        
                        balanceCell.text(formatNumber(Math.abs(monthlyBalance)))
                            .removeClass('negative-value positive-value')
                            .addClass(monthlyBalance > 0 ? 'positive-value' : 'negative-value');
                    }
                });

                const yearlyRow = $('.editable-target[data-type="yearly"][data-year="' + new Date().getFullYear() + '"]').closest('tr');
                if (yearlyRow.length) {
                    yearlyRow.find('td:nth-child(6)').text(formatNumber(forecastAmount));
                    
                    const yearlyTarget = parseFloat($('.editable-target[data-type="yearly"]').data('original'));
                    const yearlyBalance = forecastAmount - yearlyTarget;

                    yearlyRow.find('td:last-child')
                        .removeClass('negative-value positive-value')
                        .addClass(balance >= 0 ? 'positive-value' : 'negative-value')
                        .text(formatNumber(Math.abs(balance)));
                }
            }

            function updateHistoricalDataDisplay(data) {
                if (data.yearly_data) {
                    data.yearly_data.forEach(yearData => {
                        const year = yearData.YEAR;
                        const row = $(`tr:has(td:contains('${year}'))`).first();
                        
                        if (row.length && yearData.YEAR < 2024) {
                            const salesTarget = row.find('td:eq(1) .editable-target');
                            const patientsTarget = row.find('td:eq(2) .editable-target');
                            const avgSalesCell = row.find('td:eq(3)');
                            const targetAmountTarget = row.find('td:eq(4) .editable-target');
                            const forecastCell = row.find('td:eq(5)');
                            const balanceCell = row.find('td:eq(6)');

                            const currentValues = {
                                sales: parseFloat(salesTarget.data('original')) || 0,
                                patients: parseFloat(patientsTarget.data('original')) || 0,
                                target: parseFloat(targetAmountTarget.data('original')) || 0
                            };

                            if (yearData.TOTAL_AMOUNT !== undefined) {
                                salesTarget.text(numberFormat(yearData.TOTAL_AMOUNT))
                                    .data('original', yearData.TOTAL_AMOUNT);
                                currentValues.sales = yearData.TOTAL_AMOUNT;
                            }

                            if (yearData.PATIENT_COUNT !== undefined) {
                                patientsTarget.text(numberFormat(yearData.PATIENT_COUNT))
                                    .data('original', yearData.PATIENT_COUNT);
                                currentValues.patients = yearData.PATIENT_COUNT;
                            }

                            if (yearData.TARGET_AMOUNT !== undefined) {
                                targetAmountTarget.text(numberFormat(yearData.TARGET_AMOUNT))
                                    .data('original', yearData.TARGET_AMOUNT);
                                currentValues.target = yearData.TARGET_AMOUNT;
                            }

                            const avgSales = currentValues.patients > 0 ? 
                                currentValues.sales / currentValues.patients : 0;
                            avgSalesCell.text(numberFormat(avgSales));

                            forecastCell.text(numberFormat(currentValues.sales));

                            const balance = currentValues.sales - currentValues.target;
                            balanceCell.text(numberFormat(Math.abs(balance)))
                                .removeClass('negative-value positive-value')
                                .addClass(balance > 0 ? 'positive-value' : 'negative-value');
                        }
                    });
                }

                if (data.forecast) {
                    $('.forecast-amount').text(numberFormat(data.forecast.forecast_amount));
                }

                if (data.balance !== undefined) {
                    const balanceElement = $('.target-balance');
                    const balance = data.balance;
                    balanceElement.text(numberFormat(Math.abs(balance)))
                        .removeClass('negative-value positive-value')
                        .addClass(balance > 0 ? 'positive-value' : 'negative-value');
                }

                if (data.forecast && data.forecast.monthly_required) {
                    const currentMonth = new Date().getMonth() + 1;
                    const monthlyRequired = data.forecast.monthly_required;
                    
                    for (let month = 1; month <= 12; month++) {
                        const monthKey = String(month).padStart(2, '0');
                        const monthRow = $(`.editable-target[data-month="${monthKey}"]`).closest('tr');
                        
                        if (monthRow.length) {
                            const forecastCell = monthRow.find('td:nth-child(6)');
                            const salesCell = monthRow.find('td:nth-child(2)');
                            const targetCell = monthRow.find('.editable-target');
                            
                            const actualSales = parseFloat(salesCell.text().replace(/,/g, '')) || 0;
                            
                            if (month <= currentMonth) {
                                forecastCell.text(numberFormat(actualSales));
                            } else {
                                forecastCell.text(numberFormat(monthlyRequired));
                            }
                            
                            const balanceCell = monthRow.find('td:last-child');
                            const target = parseFloat(targetCell.data('original')) || 0;
                            const forecastValue = month <= currentMonth ? actualSales : monthlyRequired;
                            
                            const balance = forecastValue - target;
                            balanceCell.text(numberFormat(Math.abs(balance)))
                                .removeClass('negative-value positive-value')
                                .addClass(balance > 0 ? 'positive-value' : 'negative-value');
                        }
                    }
                }
            }

            function updateMonthlyTargetDisplay(response) {
                if (!response.forecast || !response.monthly_targets) return;

                const forecastAmount = response.forecast.forecast_amount;
                const balance = response.balance;
                const monthlyRequired = response.forecast.monthly_required || response.forecast.monthly_forecast;
                const currentMonth = new Date().getMonth() + 1;

                $('.forecast-amount').text(formatNumber(forecastAmount));
                $('.target-balance').text(formatNumber(Math.abs(balance)))
                    .removeClass('negative-value positive-value')
                    .addClass(balance > 0 ? 'positive-value' : 'negative-value');

                Object.entries(response.monthly_targets).forEach(([month, data]) => {
                    const monthRow = $(`.editable-target[data-month="${month}"]`).closest('tr');
                    if (monthRow.length) {
                        const targetCell = monthRow.find('.editable-target');
                        const forecastCell = monthRow.find('td:nth-child(6)');
                        const salesCell = monthRow.find('td:nth-child(2)');
                        const monthNum = parseInt(month);
                        
                        targetCell.text(formatNumber(data.target))
                            .data('original', data.target);

                        const actualSales = parseFloat(salesCell.text().replace(/,/g, '')) || 0;

                        if (monthNum <= currentMonth) {
                            forecastCell.text(formatNumber(actualSales));
                        } else {
                            forecastCell.text(formatNumber(monthlyRequired));
                        }

                        const balanceCell = monthRow.find('td:last-child');
                        const forecastValue = monthNum <= currentMonth ? actualSales : monthlyRequired;
                        const monthlyBalance = forecastValue - data.target;
                        
                        balanceCell.text(formatNumber(Math.abs(monthlyBalance)))
                            .removeClass('negative-value positive-value')
                            .addClass(monthlyBalance > 0 ? 'positive-value' : 'negative-value');
                    }
                });

            }

            function updateTarget(target, newValue) {
                const type = target.data('type');
                const year = target.data('year');
                const month = target.data('month');
                const spinner = target.closest('.editable-target-wrapper').find('.editable-target-spinner');
                const loadingOverlay = $('#yearly-performance-container .loading-overlay');

                loadingOverlay.css('display', 'flex !important');
                spinner.show();

                let url, data;

                if (type === 'yearly' || type === 'monthly') {
                    url = type === 'yearly' 
                        ? '/operations/sales-forecast/update-yearly-target'
                        : '/operations/sales-forecast/update-monthly-target';
                    
                    data = {
                        year: year,
                        target: Math.round(parseNumber(newValue)),
                        branch_id: target.data('branch-id')
                    };

                    if (type === 'monthly') {
                        data.month = month;
                        data.yearly_target = Math.round(parseNumber($('.editable-target[data-type="yearly"]').data('original')));
                    }
                } else {
                    url = '/operations/sales-forecast/update-historical-data';
                    data = {
                        year: year,
                        type: type,
                        value: Math.round(parseNumber(newValue)),
                        yearly_target: $('[name="target_amount"]').val(),
                        branch_id: target.data('branch-id')
                    };
                }

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            target.removeClass('editing')
                                .data('original', parseNumber(newValue))
                                .html(`
                                    <span class="editable-value">${numberFormat(newValue)}</span>
                                `);

                            setTimeout(() => target.removeClass('updated'), 1000);

                            if (type === 'yearly') {
                                const row = target.closest('tr');
                                const forecastCell = row.find('.forecast-value');
                                const balanceCell = row.find('td:last-child span');
                                const forecastAmount = parseNumber(forecastCell.text());
                                const balance = forecastAmount - parseNumber(newValue);
                                
                                balanceCell.text(numberFormat(Math.abs(balance)))
                                    .removeClass('negative-value positive-value')
                                    .addClass(balance > 0 ? 'positive-value' : 'negative-value');

                                updateYearlyTargetDisplay(response);
                            } else if (type === 'monthly') {
                                updateMonthlyTargetDisplay(response);
                            } else {
                                updateHistoricalDataDisplay(response);
                            }
                        }
                    },
                    error: function(xhr, status, error) {
                        target.removeClass('editing')
                            .html(`
                                <span class="editable-value">${numberFormat(target.data('original'))}</span>
                            `);
                    },
                    complete: function() {
                        spinner.hide();
                        loadingOverlay.css('display', 'none !important');
                    }
                });
            }

            function updateBranchPerformanceTarget(target, newValue) {
                const spinner = target.closest('.editable-target-wrapper').find('.editable-target-spinner');
                spinner.removeClass('d-none');

                $.ajax({
                    url: '/operations/sales-forecast/update-historical-data',
                    method: 'POST',
                    data: {
                        year: new Date().getFullYear(),
                        type: 'branch_target',
                        value: Math.round(parseNumber(newValue)),
                        branch_id: target.data('branch-id'),
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            target.removeClass('editing')
                                .data('original', newValue)
                                .data('original-value', newValue)
                                .html(`<span class="editable-value">${numberFormat(newValue)}</span>`);
                            
                            const branchData = response.data.find(branch => branch.branch_id === parseInt(target.data('branch-id')));
                            if (branchData) {
                                const row = target.closest('tr');
                                row.find('td:nth-child(6)').text(numberFormat(branchData.forecast_amount));
                                const balanceCell = row.find('td:nth-child(7)');
                                balanceCell.text(numberFormat(Math.abs(branchData.balance)))
                                    .removeClass('positive-value negative-value')
                                    .addClass(branchData.balance >= 0 ? 'positive-value' : 'negative-value');
                                
                                if (branchData.future_months) {
                                    const monthNameToNumber = {
                                        'Jan': '1', 'Feb': '2', 'Mar': '3', 'Apr': '4',
                                        'May': '5', 'Jun': '6', 'Jul': '7', 'Aug': '8',
                                        'Sep': '9', 'Oct': '10', 'Nov': '11', 'Dec': '12'
                                    };

                                    Object.entries(branchData.future_months).forEach(([month, value]) => {
                                        const monthNumber = monthNameToNumber[month];
                                        if (monthNumber) {
                                            row.find(`.future-month-${monthNumber}`).text(numberFormat(value));
                                        }
                                    });
                                }

                                let totalTargetAmount = 0;
                                $('#branch-performance-container .editable-target').each(function() {
                                    totalTargetAmount += parseNumber($(this).data('original') || 0);
                                });
                                
                                $('#branchTargetAmount').val(Math.round(totalTargetAmount));
                                $('[name="target_amount"]').val(Math.round(totalTargetAmount));
                            }
                            toastr.success('Target updated successfully');
                        } else {
                            target.removeClass('editing')
                                .html(`<span class="editable-value">${numberFormat(target.data('original'))}</span>`);
                            toastr.error('Failed to update target value');
                        }
                    },
                    error: function(xhr, status, error) {
                        target.removeClass('editing')
                            .html(`<span class="editable-value">${numberFormat(target.data('original'))}</span>`);
                        toastr.error('Failed to update target value');
                    },
                    complete: function() {
                        spinner.addClass('d-none');
                    }
                });
            }

            function initializeEditableTargets() {
                $('.editable-target').each(function() {
                    const target = $(this);
                    const originalValue = target.text().trim();
                    
                    target.html(`<span class="editable-value">${originalValue}</span>`);

                    target.click(function() {
                        if (target.hasClass('editing')) return;

                        const currentValue = Math.round(parseFloat(target.data('original')));
                        target.addClass('editing');
                        target.html(`<input type="number" step="1" value="${currentValue}" class="form-control form-control-sm">`);

                        const input = target.find('input');
                        input.focus().select();

                        input.blur(function() {
                            const newValue = Math.round(parseFloat($(this).val()));
                            if (isNaN(newValue) || newValue === currentValue) {
                                target.removeClass('editing');
                                target.html(`<span class="editable-value">${numberFormat(currentValue)}</span>`);
                                return;
                            }
                            
                            if (target.closest('#branch-performance-container').length) {
                                updateBranchPerformanceTarget(target, newValue);
                            } else {
                                updateTarget(target, newValue);
                            }
                        });

                        input.keypress(function(e) {
                            if (e.which === 13) {
                                $(this).blur();
                            }
                        });
                    });
                });

                $('.branch-target').each(function() {
                    const target = $(this);
                    const originalValue = target.text().trim();
                    
                    target.html(`<span class="editable-value">${originalValue}</span>`);

                    target.click(function() {
                        if (target.hasClass('editing')) return;

                        const currentValue = parseFloat(target.data('original')) || 0;
                        target.addClass('editing');
                        target.html(`<input type="number" class="form-control form-control-sm" value="${currentValue}">`);
                        const input = target.find('input');
                        input.focus().select();

                        input.blur(function() {
                            const newValue = Math.round(parseFloat($(this).val()));
                            if (isNaN(newValue) || newValue === currentValue) {
                                target.removeClass('editing');
                                target.html(`<span class="editable-value">${numberFormat(currentValue)}</span>`);
                                return;
                            }
                            updateBranchPerformanceTarget(target, newValue);
                        });

                        input.keypress(function(e) {
                            if (e.key === 'Enter') {
                                e.preventDefault();
                                $(this).blur();
                            } else if (e.key === 'Escape') {
                                target.removeClass('editing');
                                target.html(`<span class="editable-value">${numberFormat(currentValue)}</span>`);
                            }
                        });
                    });
                });
            }

            initializeEditableTargets();

            $(document).on('click', '.branch-target', function(e) {
                const target = $(this);
                if (target.hasClass('editing')) return;

                const currentValue = parseFloat(target.data('original')) || 0;
                target.addClass('editing');
                target.html(`<input type="number" class="form-control form-control-sm" value="${currentValue}">`);
                const input = target.find('input');
                input.focus().select();

                const finishEditing = () => {
                    target.removeClass('editing');
                    target.html(numberFormat(target.data('original')));
                };

                input.on('blur', function() {
                    finishEditing();
                });

                input.on('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        const newValue = parseFloat($(this).val());
                        if (isNaN(newValue) || newValue < 0) {
                            finishEditing();
                            return;
                        }

                        const spinner = target.closest('.editable-target-wrapper').find('.editable-target-spinner');
                        spinner.show();

                        $.ajax({
                            url: '/operations/sales-forecast/update-branch-target',
                            method: 'POST',
                            data: {
                                branch_id: target.data('branch-id'),
                                target: newValue,
                                yearly_target: $('[name="target_amount"]').val(),
                                _token: $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                if (response.status === 'success') {
                                    target.data('original-value', newValue);
                                    target.addClass('updated');
                                    setTimeout(() => target.removeClass('updated'), 1000);
                                    
                                    $('#branch-performance-container').html(generateBranchTable(response.data));
                                } else {
                                    finishEditing();
                                }
                            },
                            error: function(xhr, status, error) {
                                finishEditing();
                            },
                            complete: function() {
                                spinner.hide();
                            }
                        });
                    } else if (e.key === 'Escape') {
                        finishEditing();
                    }
                });
            });

            $('#applyBranchTarget').click(function() {
                const targetAmount = $('#branchTargetAmount').val();
                if (!targetAmount) {
                    alert('Please enter a target amount');
                    return;
                }

                $.ajax({
                    url: '/operations/sales-forecast/update-branch-target',
                    method: 'POST',
                    data: {
                        target_amount: targetAmount,
                        year: $('select[name="year"]').val(),
                        branch_id: $('select[name="branch_id"]').val(),
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            loadBranchPerformanceData();
                        } else {
                            alert(response.message || 'Failed to update branch targets');
                        }
                    },
                    error: function() {
                        alert('Failed to update branch targets');
                    }
                });
            });
            $("#account-manager").change(function() {
                    loadBranchPerformanceData();
            })
        });


    </script>

    <script>
        function exportBranchesData() {
            const targetAmount = $('#branchTargetAmount').val() || 0;
            window.location.href = '{{ route("sales-forecast.export-branches") }}?yearly_target=' + targetAmount;
        }

        function exportYearlyData() {
            const branchId = $('#branch_id').val() || 0;
            window.location.href = '{{ route("sales-forecast.export-yearly") }}?branch_id=' + branchId;
        }
    </script>
@endsection