@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<div class="container-fluid py-4">
    <!-- Filter Card on Result Page -->
    <div class="row gx-4 mb-4">
        <div class="col-lg-12">
            <div class="card shadow-sm border-0">
                <div class="card-header px-4 pt-3 pb-3 bg-transparent d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <h6 class="mb-0 text-uppercase text-xs font-weight-bolder text-body">
                            <i class="fas fa-filter me-1 text-primary"></i> Filter {{ $title_menu }}
                        </h6>
                        <span class="badge bg-light text-primary border ms-2 result-filter-loading-badge" style="display:none; font-size: 0.75rem;">
                            <span class="spinner-border spinner-border-sm me-1" role="status" style="width: 0.75rem; height: 0.75rem;"></span> Memperbarui opsi...
                        </span>
                    </div>
                    <div>
                        <button class="btn btn-xs btn-outline-secondary mb-0" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse" aria-expanded="true" aria-controls="filterCollapse">
                            <i class="fas fa-chevron-down"></i> Toggle Filter
                        </button>
                    </div>
                </div>

                <div class="collapse show" id="filterCollapse">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="sales-report-result-form">
                        @csrf
                        <input type="hidden" name="report_type" id="active_report_type" value="{{ $report_type ?? 'omzet' }}">

                        <div class="card-body px-4 pt-2 pb-3">
                            <div class="row g-3">
                                <!-- 1. Tahun -->
                                <div class="col-6 col-md-3 col-lg-3">
                                    <div class="form-group mb-0">
                                        <label for="res_year" class="form-control-label text-xs font-weight-bold">
                                            1. Tahun
                                        </label>
                                        <select class="form-select form-select-sm" name="year" id="res_year">
                                            @foreach ($year_options as $year)
                                                <option value="{{ $year }}" {{ ($filters['year'] ?? $selected_year) == $year ? 'selected' : '' }}>
                                                    {{ $year }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- 2. Bulan -->
                                <div class="col-6 col-md-3 col-lg-3">
                                    <div class="form-group mb-0">
                                        <label for="res_month" class="form-control-label text-xs font-weight-bold">
                                            2. Bulan
                                        </label>
                                        <select class="form-select form-select-sm" name="month" id="res_month">
                                            <option value="all" {{ ($filters['month'] ?? $selected_month) == 'all' ? 'selected' : '' }}>Semua Bulan (Full Year)</option>
                                            @foreach ($month_options as $mNum => $mName)
                                                <option value="{{ $mNum }}" {{ ($filters['month'] ?? $selected_month) == $mNum ? 'selected' : '' }}>
                                                    {{ $mName }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- 3. Divisi -->
                                <div class="col-6 col-md-3 col-lg-3">
                                    <div class="form-group mb-0">
                                        <label for="res_division" class="form-control-label text-xs font-weight-bold">
                                            3. Divisi
                                        </label>
                                        <select class="form-select form-select-sm" name="division" id="res_division">
                                            <option value="all" {{ ($filters['division'] ?? 'all') == 'all' ? 'selected' : '' }}>Semua Divisi</option>
                                            <option value="HM" {{ ($filters['division'] ?? '') == 'HM' ? 'selected' : '' }}>Hygiene & Medical</option>
                                            <option value="Industrial" {{ ($filters['division'] ?? '') == 'Industrial' ? 'selected' : '' }}>Industrial</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- 4. Sub Divisi -->
                                <div class="col-6 col-md-3 col-lg-3">
                                    <div class="form-group mb-0">
                                        <label for="res_sub_division" class="form-control-label text-xs font-weight-bold">
                                            4. Sub Divisi
                                        </label>
                                        <select class="form-select form-select-sm" name="sub_division" id="res_sub_division">
                                            <option value="all" {{ ($filters['sub_division'] ?? 'all') == 'all' ? 'selected' : '' }}>Semua Sub Divisi</option>
                                            <option value="H" {{ ($filters['sub_division'] ?? '') == 'H' ? 'selected' : '' }}>H (Hygiene)</option>
                                            <option value="M" {{ ($filters['sub_division'] ?? '') == 'M' ? 'selected' : '' }}>M (Medical)</option>
                                            <option value="I" {{ ($filters['sub_division'] ?? '') == 'I' ? 'selected' : '' }}>I (Industrial)</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- 5. Salesperson -->
                                <div class="col-6 col-md-3 col-lg-3">
                                    <div class="form-group mb-0">
                                        <label for="res_salesman" class="form-control-label text-xs font-weight-bold">
                                            5. Salesperson
                                        </label>
                                        <select class="form-select form-select-sm" name="salesman" id="res_salesman">
                                            <option value="all">Semua Salesperson</option>
                                            @foreach ($salesmen as $s)
                                                <option value="{{ $s }}" {{ ($filters['salesman'] ?? 'all') == $s ? 'selected' : '' }}>{{ $s }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- 6. Customer -->
                                <div class="col-6 col-md-3 col-lg-3">
                                    <div class="form-group mb-0">
                                        <label for="res_customer" class="form-control-label text-xs font-weight-bold">
                                            6. Customer
                                        </label>
                                        <select class="form-select form-select-sm" name="customer" id="res_customer">
                                            <option value="all">Semua Customer</option>
                                            @foreach ($customers as $c)
                                                <option value="{{ $c['id'] }}" {{ ($filters['customer'] ?? 'all') == $c['id'] ? 'selected' : '' }}>{{ $c['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- 7. Matgroup -->
                                <div class="col-6 col-md-3 col-lg-3">
                                    <div class="form-group mb-0">
                                        <label for="res_product" class="form-control-label text-xs font-weight-bold">
                                            7. Matgroup
                                        </label>
                                        <select class="form-select form-select-sm" name="product" id="res_product">
                                            <option value="all">Semua Matgroup</option>
                                            @foreach ($product_categories as $code => $name)
                                                <option value="{{ $code }}" {{ ($filters['product'] ?? 'all') == $code ? 'selected' : '' }}>{{ $code }} - {{ $name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- 8. Matcode -->
                                <div class="col-6 col-md-3 col-lg-3">
                                    <div class="form-group mb-0">
                                        <label for="res_matcode" class="form-control-label text-xs font-weight-bold">
                                            8. Matcode
                                        </label>
                                        <select class="form-select form-select-sm" name="matcode" id="res_matcode">
                                            <option value="all">Semua Matcode</option>
                                            @foreach ($matcodes as $mc)
                                                <option value="{{ $mc }}" {{ ($filters['matcode'] ?? 'all') == $mc ? 'selected' : '' }}>{{ $mc }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer px-4 pb-3 pt-0 bg-transparent d-flex justify-content-end gap-2">
                            <button type="submit" class="btn btn-primary btn-sm px-3 mb-0 shadow-sm d-flex align-items-center">
                                <i class="fas fa-sync-alt me-1"></i> Update Filter
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs Card -->
    <div class="row gx-4">
        <div class="col-lg-12">
            <div class="card shadow-sm border-0">
                <div class="card-header pb-0 bg-transparent border-bottom">
                    <ul class="nav nav-tabs border-0" id="reportTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ ($report_type ?? 'omzet') == 'omzet' ? 'active font-weight-bold text-primary' : 'text-secondary' }}" id="omzet-tab" data-bs-toggle="tab" data-bs-target="#omzet-pane" type="button" role="tab" aria-controls="omzet-pane" aria-selected="{{ ($report_type ?? 'omzet') == 'omzet' ? 'true' : 'false' }}">
                                <i class="fas fa-chart-line me-2"></i>Omzet Penjualan
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ ($report_type ?? 'omzet') == 'ytd' ? 'active font-weight-bold text-primary' : 'text-secondary' }}" id="ytd-tab" data-bs-toggle="tab" data-bs-target="#ytd-pane" type="button" role="tab" aria-controls="ytd-pane" aria-selected="{{ ($report_type ?? 'omzet') == 'ytd' ? 'true' : 'false' }}">
                                <i class="fas fa-chart-bar me-2"></i>YTD Comparison
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ ($report_type ?? 'omzet') == 'pareto' ? 'active font-weight-bold text-primary' : 'text-secondary' }}" id="pareto-tab" data-bs-toggle="tab" data-bs-target="#pareto-pane" type="button" role="tab" aria-controls="pareto-pane" aria-selected="{{ ($report_type ?? 'omzet') == 'pareto' ? 'true' : 'false' }}">
                                <i class="fas fa-chart-pie me-2"></i>Pareto Analysis
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body p-4">
                    <div class="tab-content" id="reportTabContent">
                        <!-- Tab 1: Omzet Penjualan -->
                        <div class="tab-pane fade {{ ($report_type ?? 'omzet') == 'omzet' ? 'show active' : '' }}" id="omzet-pane" role="tabpanel" aria-labelledby="omzet-tab">
                            @include('report.rptsls.partials.omzet_per_division')
                        </div>

                        <!-- Tab 2: YTD Comparison -->
                        <div class="tab-pane fade {{ ($report_type ?? 'omzet') == 'ytd' ? 'show active' : '' }}" id="ytd-pane" role="tabpanel" aria-labelledby="ytd-tab">
                            @include('report.rptsls.partials.ytd')
                        </div>

                        <!-- Tab 3: Pareto Analysis -->
                        <div class="tab-pane fade {{ ($report_type ?? 'omzet') == 'pareto' ? 'show active' : '' }}" id="pareto-pane" role="tabpanel" aria-labelledby="pareto-tab">
                            @include('report.rptsls.partials.pareto')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('js')
<script src="{{ asset('/') }}assets/js/plugins/chartjs.min.js"></script>
<script>
(function() {
    const omzetApiUrl = @json(url('rptsls/api/omzet'));
    const filterOptionsUrl = @json(url('rptsls/api/filter-options'));

    window.salesFilters = {
        year: '{{ $filters['year'] ?? $selected_year }}',
        month: '{{ $filters['month'] ?? $selected_month }}',
        division: '{{ $filters['division'] ?? 'all' }}',
        sub_division: '{{ $filters['sub_division'] ?? 'all' }}',
        salesman: '{{ $filters['salesman'] ?? 'all' }}',
        customer: '{{ $filters['customer'] ?? 'all' }}',
        product: '{{ $filters['product'] ?? 'all' }}',
        matcode: '{{ $filters['matcode'] ?? 'all' }}',
        year1: '{{ $selected_year1 }}',
        year2: '{{ $selected_year2 }}',
        pareto_metric: '{{ $pareto_metric ?? 'qty' }}'
    };

    let currentOmzetXhr = null;
    window.omzetDataLoaded = false;

    function fmtKg(v) {
        if (v === null || v === undefined) return '-';
        return parseFloat(v).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' kg';
    }

    function loadOmzetData() {
        if (currentOmzetXhr) {
            currentOmzetXhr.abort();
            currentOmzetXhr = null;
        }

        $('#omzet-table-container').html(`
            <div class="text-center py-5">
                <div class="spinner-border text-primary mb-3" role="status"></div>
                <p class="text-muted mb-0 fw-medium">Memuat data omzet penjualan...</p>
            </div>
        `);

        const params = {
            year: $('#res_year').val() || window.salesFilters.year,
            month: $('#res_month').val() || window.salesFilters.month,
            division: $('#res_division').val() || window.salesFilters.division,
            sub_division: $('#res_sub_division').val() || window.salesFilters.sub_division,
            salesman: $('#res_salesman').val() || window.salesFilters.salesman,
            customer: $('#res_customer').val() || window.salesFilters.customer,
            product: $('#res_product').val() || window.salesFilters.product,
            matcode: $('#res_matcode').val() || window.salesFilters.matcode,
        };

        const monthNames = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
        const periodText = (params.month && params.month !== 'all' && monthNames[parseInt(params.month)])
            ? monthNames[parseInt(params.month)] + ' ' + params.year
            : 'Tahun ' + params.year;
        $('#omzet-period-badge').text(periodText);

        currentOmzetXhr = $.ajax({
            url: omzetApiUrl,
            method: 'GET',
            data: params,
            timeout: 120000,
            success: function(res) {
                currentOmzetXhr = null;
                window.omzetDataLoaded = true;
                const s = res.summary || {};

                // Update Cards (prompt 38: Pisahkan H & M)
                $('#stat-total-lokal-hygiene').text(fmtKg(s.total_lokal_hygiene));
                $('#stat-lokal-hygiene').text(fmtKg(s.lokal_hygiene));
                $('#stat-uci').text(fmtKg(s.uci));
                $('#stat-lokal-medical').text(fmtKg(s.lokal_medical));
                $('#stat-lokal-industrial').text(fmtKg(s.lokal_industrial));
                $('#stat-total-lokal').text(fmtKg(s.total_lokal));
                $('#stat-total-export').text(fmtKg(s.total_export));
                $('#stat-export-hygiene').text(fmtKg(s.export_hygiene));
                $('#stat-export-medical').text(fmtKg(s.export_medical));
                $('#stat-export-industrial').text(fmtKg(s.export_industrial));
                $('#stat-grand-total').text(fmtKg(s.grand_total));

                // Update Summary Table (prompt 38)
                $('#table-lokal-hygiene').text(fmtKg(s.lokal_hygiene));
                $('#table-uci').text(fmtKg(s.uci));
                $('#table-total-lokal-hygiene').text(fmtKg(s.total_lokal_hygiene));
                $('#table-lokal-medical').text(fmtKg(s.lokal_medical));
                $('#table-lokal-industrial').text(fmtKg(s.lokal_industrial));
                $('#table-total-lokal').text(fmtKg(s.total_lokal));
                $('#table-export-hygiene').text(fmtKg(s.export_hygiene));
                $('#table-export-medical').text(fmtKg(s.export_medical));
                $('#table-export-industrial').text(fmtKg(s.export_industrial));
                $('#table-total-export').text(fmtKg(s.total_export));
                $('#table-grand-total').text(fmtKg(s.grand_total));

                // Update Alert Customer Belum Dimapping (prompt 38)
                const unmapped = res.unmapped_customers || [];
                const alertEl = $('#unmapped-customers-alert');
                const listEl = $('#unmapped-customers-list');
                if (unmapped.length > 0) {
                    let badgesHtml = '';
                    unmapped.forEach(c => {
                        badgesHtml += `<span class="badge bg-white text-dark border me-1 mb-1 p-2 text-xxs font-weight-bold"><i class="fas fa-exclamation-circle text-warning me-1"></i>${c.name} (${c.code})</span>`;
                    });
                    listEl.html(badgesHtml);
                    alertEl.slideDown(200);
                } else {
                    alertEl.slideUp(150);
                }

                // Update Details Table (prompt40 & prompt41)
                const details = res.details || [];
                $('#omzet-records-count').text(details.length.toLocaleString() + ' records');

                const isPostCutoff = !!res.is_post_cutoff;
                const dateHeaderLabel = isPostCutoff ? 'Tgl Pengiriman' : 'Tgl Billing';
                const docHeaderLabel  = isPostCutoff ? 'No. DO' : 'Bill Doc';
                const sourceBadgeHtml = isPostCutoff
                    ? '<span class="badge bg-success text-xxs"><i class="fas fa-truck me-1"></i>rpt_et_getonhand (DO Sudah Dikirim)</span>'
                    : '<span class="badge bg-info text-xxs"><i class="fas fa-file-invoice me-1"></i>rpt_ET_ZVBILLING (Billing SAP)</span>';
                $('#omzet-source-badge').html(sourceBadgeHtml);

                if (details.length === 0) {
                    $('#omzet-table-container').html(`
                        <div class="text-center py-5">
                            <i class="fas fa-inbox text-muted fa-2x mb-2"></i>
                            <p class="text-muted mb-0">Tidak ada data transaksi untuk parameter yang dipilih.</p>
                        </div>
                    `);
                    return;
                }

                let rowsHtml = '';
                details.forEach((r, idx) => {
                    const docDate = r.delivery_date || r.billdate || '-';
                    const docNumber = r.do_number || r.billdoc || '-';
                    rowsHtml += `
                        <tr>
                            <td class="text-center">${idx + 1}</td>
                            <td class="text-nowrap">${docDate}</td>
                            <td class="text-nowrap font-weight-bold">${docNumber}</td>
                            <td class="text-nowrap">${r.salesdoc || '-'}</td>
                            <td class="text-nowrap">${r.customer_name || r.customer_code}</td>
                            <td class="text-nowrap">${r.end_user || '-'}</td>
                            <td class="text-nowrap">${r.salesman || '-'}</td>
                            <td class="text-nowrap">${r.division}</td>
                            <td class="text-center">${r.sub_division}</td>
                            <td class="text-center"><span class="badge bg-${r.destination.includes('Export') ? 'warning' : 'info'} text-xxs">${r.destination}</span></td>
                            <td class="text-center">${r.matgr || '-'}</td>
                            <td class="text-nowrap">${r.matnr || '-'}</td>
                            <td class="text-end font-weight-bold">${fmtKg(r.weight)}</td>
                        </tr>
                    `;
                });

                $('#omzet-table-container').html(`
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0" id="omzet-details-datatable" style="width: 100%;">
                            <thead class="bg-light">
                                <tr>
                                    <th class="text-center" style="width: 40px;">No</th>
                                    <th>${dateHeaderLabel}</th>
                                    <th>${docHeaderLabel}</th>
                                    <th>SO Doc</th>
                                    <th>Customer</th>
                                    <th>End User</th>
                                    <th>Salesperson</th>
                                    <th>Divisi</th>
                                    <th class="text-center">Sub</th>
                                    <th class="text-center">Kategori</th>
                                    <th class="text-center">Matgr</th>
                                    <th>Matcode</th>
                                    <th class="text-end">Qty (kg)</th>
                                </tr>
                            </thead>
                            <tbody>${rowsHtml}</tbody>
                        </table>
                    </div>
                `);

                if ($.fn.DataTable) {
                    if ($.fn.DataTable.isDataTable('#omzet-details-datatable')) {
                        $('#omzet-details-datatable').DataTable().destroy();
                    }
                    $('#omzet-details-datatable').DataTable({
                        pageLength: 10,
                        responsive: true,
                        order: [[1, 'desc']]
                    });
                }
            },
            error: function(xhr, textStatus) {
                currentOmzetXhr = null;
                if (textStatus === 'abort' || xhr.statusText === 'abort' || xhr.readyState === 0) {
                    return;
                }
                $('#omzet-table-container').html(`
                    <div class="text-center py-5 text-danger">
                        <i class="fas fa-exclamation-circle fa-2x mb-2"></i>
                        <p class="mb-0 font-weight-bold">Gagal memuat data omzet.</p>
                        <small class="text-muted">${xhr.responseJSON?.error || xhr.statusText || ''}</small>
                        <div class="mt-3">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="loadOmzetData()">
                                <i class="fas fa-sync-alt me-1"></i> Coba Lagi
                            </button>
                        </div>
                    </div>
                `);
            }
        });
    }

    // Cascading Filter Updates
    function updateResultCascadingFilters() {
        const division = $('#res_division').val();
        const subDivision = $('#res_sub_division').val();
        const salesman = $('#res_salesman').val();
        const customer = $('#res_customer').val();
        const matgroup = $('#res_product').val();
        const year = $('#res_year').val();

        $('.result-filter-loading-badge').stop(true, true).fadeIn(150);
        $('#res_sub_division, #res_salesman, #res_customer, #res_product, #res_matcode').addClass('bg-light opacity-75');

        $.ajax({
            url: filterOptionsUrl,
            method: 'GET',
            data: { division, sub_division: subDivision, salesman, customer, matgroup, year },
            beforeSend: function() {
                $('.result-filter-loading-badge').show();
            },
            success: function(res) {
                const currSub = $('#res_sub_division').val();
                let subHtml = '<option value="all">Semua Sub Divisi</option>';
                (res.sub_divisions || []).forEach(s => {
                    const label = s === 'H' ? 'H (Hygiene)' : (s === 'M' ? 'M (Medical)' : 'I (Industrial)');
                    subHtml += `<option value="${s}" ${currSub === s ? 'selected' : ''}>${label}</option>`;
                });
                $('#res_sub_division').html(subHtml);

                const currSales = $('#res_salesman').val();
                let salesHtml = '<option value="all">Semua Salesperson</option>';
                (res.salesmen || []).forEach(s => {
                    salesHtml += `<option value="${s}" ${currSales === s ? 'selected' : ''}>${s}</option>`;
                });
                $('#res_salesman').html(salesHtml);

                const currCust = $('#res_customer').val();
                let custHtml = '<option value="all">Semua Customer</option>';
                (res.customers || []).forEach(c => {
                    custHtml += `<option value="${c.id}" ${currCust === c.id ? 'selected' : ''}>${c.name}</option>`;
                });
                $('#res_customer').html(custHtml);

                // Update Matgroup options
                const currMatgr = $('#res_product').val();
                let matgrHtml = '<option value="all">Semua Matgroup</option>';
                if (res.matgroups) {
                    Object.entries(res.matgroups).forEach(([code, desc]) => {
                        matgrHtml += `<option value="${code}" ${currMatgr === code ? 'selected' : ''}>${code} - ${desc}</option>`;
                    });
                }
                $('#res_product').html(matgrHtml);

                const currMatcode = $('#res_matcode').val();
                let matcodeHtml = '<option value="all">Semua Matcode</option>';
                (res.matcodes || []).forEach(m => {
                    matcodeHtml += `<option value="${m}" ${currMatcode === m ? 'selected' : ''}>${m}</option>`;
                });
                $('#res_matcode').html(matcodeHtml);
            },
            complete: function() {
                $('.result-filter-loading-badge').stop(true, true).fadeOut(250);
                $('#res_sub_division, #res_salesman, #res_customer, #res_product, #res_matcode').removeClass('bg-light opacity-75');
                refreshActiveReportTab();
            }
        });
    }

    function refreshActiveReportTab() {
        // Tandai data tab lain perlu dimuat ulang saat dibuka
        window.omzetDataLoaded = false;
        window.ytdData = null;
        window.paretoData = null;

        const activeTab = $('#active_report_type').val() || 'omzet';
        if (activeTab === 'omzet') {
            loadOmzetData();
        } else if (activeTab === 'ytd') {
            if (typeof loadYtdData === 'function') loadYtdData();
        } else if (activeTab === 'pareto') {
            if (typeof loadParetoData === 'function') loadParetoData();
        }
    }

    // Intercept form submission to refresh active report via AJAX without full-page reload
    $('#sales-report-result-form').on('submit', function(e) {
        e.preventDefault();
        const btn = $(this).find('button[type="submit"]');
        const originalHtml = btn.html();
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Memuat...');
        refreshActiveReportTab();
        setTimeout(function() {
            btn.prop('disabled', false).html(originalHtml);
        }, 1000);
    });

    $('#res_division').on('change', updateResultCascadingFilters);
    $('#res_sub_division').on('change', refreshActiveReportTab);
    $('#res_salesman').on('change', refreshActiveReportTab);
    $('#res_customer').on('change', refreshActiveReportTab);
    $('#res_product').on('change', updateResultCascadingFilters);
    $('#res_matcode').on('change', refreshActiveReportTab);
    $('#res_year').on('change', updateResultCascadingFilters);
    $('#res_month').on('change', refreshActiveReportTab);

    // Initial load
    $(document).ready(function() {
        const activeTab = '{{ $report_type ?? 'omzet' }}';
        if (activeTab === 'omzet') {
            loadOmzetData();
        } else if (activeTab === 'ytd') {
            if (typeof loadYtdData === 'function') loadYtdData();
        } else if (activeTab === 'pareto') {
            if (typeof loadParetoData === 'function') loadParetoData();
        }

        $('#omzet-tab').on('shown.bs.tab', function() {
            $('#active_report_type').val('omzet');
            if (!window.omzetDataLoaded) {
                loadOmzetData();
            }
        });

        $('#ytd-tab').on('shown.bs.tab', function() {
            $('#active_report_type').val('ytd');
            if (window.ytdNeedsChartRender && window.ytdData) {
                if (typeof renderYtdChart === 'function') renderYtdChart();
            }
            if (!window.ytdData) {
                if (typeof loadYtdData === 'function') loadYtdData();
            }
        });

        $('#pareto-tab').on('shown.bs.tab', function() {
            $('#active_report_type').val('pareto');
            if (window.paretoNeedsChartRender && window.paretoData) {
                if (typeof renderParetoChart === 'function') renderParetoChart();
            }
            if (!window.paretoData) {
                if (typeof loadParetoData === 'function') loadParetoData();
            }
        });
    });

    window.loadOmzetData = loadOmzetData;
    window.refreshActiveReportTab = refreshActiveReportTab;
})();
</script>
@endpush
@endsection