@extends('layouts.master')

@section('title', 'Laporan Analisis Penjualan')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    #tblTrend th, #tblTrend td,
    #tblPerFaskes th, #tblPerFaskes td,
    #tblTerlaris th, #tblTerlaris td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    .dataTables_scrollBody { overflow-x: scroll !important; }
    .dataTables_scrollBody::-webkit-scrollbar { height: 8px; }
    .dataTables_scrollBody::-webkit-scrollbar-track { background: rgba(132,90,223,.12); border-radius: 4px; }
    .dataTables_scrollBody::-webkit-scrollbar-thumb { background: rgba(132,90,223,.55); border-radius: 4px; }
    .dataTables_scrollBody::-webkit-scrollbar-thumb:hover { background: rgb(132,90,223); }
    #tblTrend thead th, #tblPerFaskes thead th, #tblTerlaris thead th { background: #f8f9fa; }
    /* Sticky columns (DataTable tabs) */
    #tblTrend td.sticky-col, #tblPerFaskes td.sticky-col, #tblTerlaris td.sticky-col { position: sticky; z-index: 2; background: #fff; }
    .dataTables_scrollHead th.sticky-col { position: relative !important; z-index: 3; background: #f8f9fa; }
    #tblTrend td.sticky-col-last, #tblPerFaskes td.sticky-col-last, #tblTerlaris td.sticky-col-last,
    .dataTables_scrollHead th.sticky-col-last { box-shadow: 2px 0 4px rgba(0,0,0,.07); }
    .nav-tabs .nav-link { font-size: .875rem; }
    .rank-badge { display:inline-block; width:28px; height:28px; border-radius:50%; text-align:center; line-height:28px; font-size:.75rem; font-weight:700; }
    .rank-1 { background:#ffd700; color:#7a5c00; }
    .rank-2 { background:#c0c0c0; color:#555; }
    .rank-3 { background:#cd7f32; color:#fff; }
    .rank-other { background:#e9ecef; color:#555; }
    /* Tab 4 — Trend Sales Faskes */
    #paneSf .sf-wrap { overflow: auto; max-height: 66vh; }
    #paneSf .sf-wrap::-webkit-scrollbar { height: 8px; width: 6px; }
    #paneSf .sf-wrap::-webkit-scrollbar-track { background: rgba(132,90,223,.1); border-radius: 4px; }
    #paneSf .sf-wrap::-webkit-scrollbar-thumb { background: rgba(132,90,223,.5); border-radius: 4px; }
    #tblSf { border-collapse: collapse; white-space: nowrap; font-size: .82rem; min-width: 100%; }
    #tblSf th, #tblSf td { border: 1px solid #e9ecef; padding: 5px 8px; vertical-align: middle; }
    #tblSf thead th { background: #f8f9fa; font-weight: 600; position: sticky; top: 0; z-index: 4; }
    #tblSf thead th.sf-s1 { z-index: 6; }
    #tblSf thead th.sf-s2 { z-index: 6; }
    #tblSf td.sf-s1, #tblSf th.sf-s1 { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 130px; max-width: 130px; }
    #tblSf td.sf-s2, #tblSf th.sf-s2 { position: sticky; left: 130px; background: #fff; z-index: 2; min-width: 130px; max-width: 130px; box-shadow: 2px 0 5px rgba(0,0,0,.06); }
    #tblSf thead th.sf-s1 { background: #f8f9fa; }
    #tblSf thead th.sf-s2 { background: #f8f9fa; }
    #tblSf td.sf-sales { background: #f5f0fe !important; font-weight: 600; }
    #tblSf td.sf-faskes { background: #faf8ff !important; }
    #tblSf td.sf-zero { color: #c5c5c5; font-size: .78rem; }
    #tblSf tfoot td { font-weight: 700; background: #f8f9fa; border-top: 2px solid #dee2e6; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Laporan Analisis Penjualan</p>
            <span class="fs-13 text-muted">Laporan &rarr; Analisis Penjualan</span>
        </div>
    </div>

    <div class="card custom-card">
        <div class="card-body pb-0 pt-3">
            <ul class="nav nav-tabs" id="tabAnalisis" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="tab-trend" data-bs-toggle="tab" data-bs-target="#paneTrend" type="button">
                        <i class="bx bx-trending-up me-1"></i> Trend Bulanan
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="tab-faskes" data-bs-toggle="tab" data-bs-target="#paneFaskes" type="button">
                        <i class="bx bx-buildings me-1"></i> Per Faskes
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="tab-terlaris" data-bs-toggle="tab" data-bs-target="#paneTerlaris" type="button">
                        <i class="bx bx-trophy me-1"></i> Barang Terlaris
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="tab-sf" data-bs-toggle="tab" data-bs-target="#paneSf" type="button">
                        <i class="bx bx-grid-alt me-1"></i> Trend Sales Faskes
                    </button>
                </li>
            </ul>
        </div>

        <div class="tab-content">

            {{-- TAB TREND BULANAN --}}
            <div class="tab-pane fade show active" id="paneTrend">
                <div class="card-body">
                    <div class="row g-2 align-items-end pb-3 border-bottom mb-3">
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari Tahun</label>
                            <select id="trendDariTahun" class="form-select form-select-sm">
                                @foreach($tahunList as $t)
                                <option value="{{ $t }}" {{ $t == now()->year ? 'selected' : '' }}>{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Sampai Tahun</label>
                            <select id="trendSampaiTahun" class="form-select form-select-sm">
                                @foreach($tahunList as $t)
                                <option value="{{ $t }}" {{ $t == now()->year ? 'selected' : '' }}>{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Fasilitas Kesehatan</label>
                            <select id="trendFaskes" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Faskes</option>
                                @foreach($faskesList as $f)
                                <option value="{{ $f->id }}">{{ $f->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-auto d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnTrend">
                                <i class="bx bx-search me-1"></i> Tampilkan
                            </button>
                            <div class="dropdown">
                                <button class="btn btn-secondary btn-sm px-2 py-1 dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="bx bx-download me-1"></i> Unduh
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="#" id="btnTrendExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnTrendPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="tblTrend" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th>Tahun</th>
                                    <th class="text-end">Jan</th>
                                    <th class="text-end">Feb</th>
                                    <th class="text-end">Mar</th>
                                    <th class="text-end">Apr</th>
                                    <th class="text-end">Mei</th>
                                    <th class="text-end">Jun</th>
                                    <th class="text-end">Jul</th>
                                    <th class="text-end">Agu</th>
                                    <th class="text-end">Sep</th>
                                    <th class="text-end">Okt</th>
                                    <th class="text-end">Nov</th>
                                    <th class="text-end">Des</th>
                                    <th class="text-end">Total Nilai</th>
                                    <th class="text-center">Total Dok.</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- TAB PER FASKES --}}
            <div class="tab-pane fade" id="paneFaskes">
                <div class="card-body">
                    <div class="row g-2 align-items-end pb-3 border-bottom mb-3">
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari</label>
                            <input type="text" id="faskesDari" class="form-control form-control-sm flatpickr" placeholder="dd-mm-yyyy" readonly>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Sampai</label>
                            <input type="text" id="faskesSampai" class="form-control form-control-sm flatpickr" placeholder="dd-mm-yyyy" readonly>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Fasilitas Kesehatan</label>
                            <select id="faskesFaskes" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Faskes</option>
                                @foreach($faskesList as $f)
                                <option value="{{ $f->id }}">{{ $f->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-auto d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnFaskes">
                                <i class="bx bx-search me-1"></i> Tampilkan
                            </button>
                            <div class="dropdown">
                                <button class="btn btn-secondary btn-sm px-2 py-1 dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="bx bx-download me-1"></i> Unduh
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="#" id="btnFaskesExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnFaskesPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="tblPerFaskes" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:40px">No.</th>
                                    <th>Fasilitas Kesehatan</th>
                                    <th class="text-center">Total Dokumen</th>
                                    <th class="text-end">Total Nilai</th>
                                    <th class="text-end">Rata-rata per Dokumen</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- TAB BARANG TERLARIS --}}
            <div class="tab-pane fade" id="paneTerlaris">
                <div class="card-body">
                    <div class="row g-2 align-items-end pb-3 border-bottom mb-3">
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari</label>
                            <input type="text" id="terlarisDari" class="form-control form-control-sm flatpickr" placeholder="dd-mm-yyyy" readonly>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Sampai</label>
                            <input type="text" id="terlarisSampai" class="form-control form-control-sm flatpickr" placeholder="dd-mm-yyyy" readonly>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Fasilitas Kesehatan</label>
                            <select id="terlarisFaskes" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Faskes</option>
                                @foreach($faskesList as $f)
                                <option value="{{ $f->id }}">{{ $f->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-auto d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnTerlaris">
                                <i class="bx bx-search me-1"></i> Tampilkan
                            </button>
                            <div class="dropdown">
                                <button class="btn btn-secondary btn-sm px-2 py-1 dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="bx bx-download me-1"></i> Unduh
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="#" id="btnTerlarisExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnTerlarisPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="tblTerlaris" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:50px">Rank</th>
                                    <th>Kode</th>
                                    <th>Nama Barang</th>
                                    <th>Jenis</th>
                                    <th>Merek</th>
                                    <th>Ukuran</th>
                                    <th>Satuan</th>
                                    <th class="text-center">Total Qty</th>
                                    <th class="text-end">Total Nilai</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- TAB TREND SALES FASKES --}}
            <div class="tab-pane fade" id="paneSf">
                <div class="card-body">
                    <div class="row g-2 align-items-end pb-3 border-bottom mb-3">
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Tahun</label>
                            <select id="sfTahun" class="form-select form-select-sm">
                                @foreach($tahunList as $t)
                                <option value="{{ $t }}" {{ $t == now()->year ? 'selected' : '' }}>{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Sales</label>
                            <select id="sfSales" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Sales</option>
                                @foreach($salesList as $s)
                                <option value="{{ $s->id }}">{{ $s->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Fasilitas Kesehatan</label>
                            <select id="sfFaskes" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Faskes</option>
                                @foreach($faskesList as $f)
                                <option value="{{ $f->id }}">{{ $f->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-auto d-flex align-items-end gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnSf">
                                <i class="bx bx-search me-1"></i> Tampilkan
                            </button>
                            <div class="btn-group btn-group-sm" role="group">
                                <input type="radio" class="btn-check" name="sfMode" id="sfModeQty" value="qty" checked>
                                <label class="btn btn-outline-secondary" for="sfModeQty">Qty</label>
                                <input type="radio" class="btn-check" name="sfMode" id="sfModeNilai" value="nilai">
                                <label class="btn btn-outline-secondary" for="sfModeNilai">Nilai</label>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-secondary btn-sm px-2 py-1 dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="bx bx-download me-1"></i> Unduh
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="#" id="btnSfExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnSfPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    {{-- Loading --}}
                    <div id="sfLoading" class="text-center py-5" style="display:none">
                        <div class="spinner-border text-primary" role="status"></div>
                        <div class="mt-2 text-muted small">Memuat data...</div>
                    </div>
                    {{-- Empty --}}
                    <div id="sfEmpty" class="text-center py-5" style="display:none">
                        <i class="bx bx-data fs-1 text-muted opacity-50"></i>
                        <div class="mt-2 text-muted">Tidak ada data. Tekan <strong>Tampilkan</strong> untuk memuat.</div>
                    </div>

                    {{-- Table --}}
                    <div id="sfTableWrap" class="sf-wrap" style="display:none">
                        <table id="tblSf">
                            <thead>
                                <tr>
                                    <th class="sf-s1">Sales</th>
                                    <th class="sf-s2">Faskes</th>
                                    <th>Kode</th>
                                    <th>Nama Barang</th>
                                    <th class="text-center">Sat.</th>
                                    <th class="text-center">Jan</th>
                                    <th class="text-center">Feb</th>
                                    <th class="text-center">Mar</th>
                                    <th class="text-center">Apr</th>
                                    <th class="text-center">Mei</th>
                                    <th class="text-center">Jun</th>
                                    <th class="text-center">Jul</th>
                                    <th class="text-center">Agu</th>
                                    <th class="text-center">Sep</th>
                                    <th class="text-center">Okt</th>
                                    <th class="text-center">Nov</th>
                                    <th class="text-center">Des</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody id="sfTbody"></tbody>
                            <tfoot id="sfTfoot"></tfoot>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_URL = '{{ url('') }}';

function applyStickyColumns(tableId, stickyCount) {
    const table = document.getElementById(tableId);
    const wrapper = document.getElementById(tableId + '_wrapper');
    if (!table || !wrapper) return;

    table.querySelectorAll('tbody .sticky-col').forEach(el => {
        el.classList.remove('sticky-col', 'sticky-col-last');
        el.style.left = '';
    });
    wrapper.querySelectorAll('.dataTables_scrollHead .sticky-col').forEach(el => {
        el.classList.remove('sticky-col', 'sticky-col-last');
        el.style.transform = '';
    });

    const headCells = wrapper.querySelectorAll('.dataTables_scrollHead thead tr:first-child th');
    const offsets = [];
    let cum = 0;
    headCells.forEach((th, i) => {
        if (i < stickyCount) { offsets.push(cum); cum += th.offsetWidth; }
    });

    table.querySelectorAll('tbody tr').forEach(row => {
        row.querySelectorAll('td').forEach((cell, i) => {
            if (i < stickyCount) {
                cell.classList.add('sticky-col');
                cell.style.left = offsets[i] + 'px';
                if (i === stickyCount - 1) cell.classList.add('sticky-col-last');
            }
        });
    });

    const stickyCells = Array.from(headCells).slice(0, stickyCount);
    stickyCells.forEach((th, i) => {
        th.classList.add('sticky-col');
        if (i === stickyCount - 1) th.classList.add('sticky-col-last');
    });

    const scrollBody = wrapper.querySelector('.dataTables_scrollBody');
    if (scrollBody && stickyCells.length) {
        if (wrapper._stickyHandler) scrollBody.removeEventListener('scroll', wrapper._stickyHandler);
        wrapper._stickyHandler = function() {
            const left = scrollBody.scrollLeft;
            stickyCells.forEach((th) => { th.style.transform = 'translateX(' + left + 'px)'; });
        };
        scrollBody.addEventListener('scroll', wrapper._stickyHandler, { passive: true });
        wrapper._stickyHandler();
    }
}

function fmt(n) {
    return 'Rp ' + parseFloat(n || 0).toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
}
function fmtShort(n) {
    n = parseFloat(n || 0);
    if (n >= 1e9) return 'Rp ' + (n / 1e9).toFixed(1) + 'M';
    if (n >= 1e6) return 'Rp ' + (n / 1e6).toFixed(1) + 'jt';
    if (n >= 1e3) return 'Rp ' + (n / 1e3).toFixed(0) + 'rb';
    return 'Rp ' + n;
}
function rankBadge(r) {
    const cls = r === 1 ? 'rank-1' : r === 2 ? 'rank-2' : r === 3 ? 'rank-3' : 'rank-other';
    return `<span class="rank-badge ${cls}">${r}</span>`;
}

$(function () {
    flatpickr('.flatpickr', { dateFormat: 'd-m-Y', locale: 'id' });
    $('#trendFaskes, #faskesFaskes, #terlarisFaskes').select2({ placeholder: 'Semua Faskes', allowClear: true, width: '100%' });

    // ---- TREND ----
    const tblTrend = $('#tblTrend').DataTable({
        ajax: {
            url: BASE_URL + '/laporan/analisis/trend',
            dataSrc: 'data',
            data: function(d) {
                d.dari_tahun   = $('#trendDariTahun').val();
                d.sampai_tahun = $('#trendSampaiTahun').val();
                d.faskes       = $('#trendFaskes').val();
            },
        },
        columns: [
            { data: 'tahun' },
            { data: 'm1',  className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm2',  className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm3',  className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm4',  className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm5',  className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm6',  className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm7',  className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm8',  className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm9',  className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm10', className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm11', className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'm12', className: 'text-end', render: (v) => v ? fmtShort(v) : '—' },
            { data: 'total_nilai',   className: 'text-end fw-semibold', render: (v) => fmt(v) },
            { data: 'total_dokumen', className: 'text-center fw-semibold' },
        ],
        paging: false,
        searching: false,
        ordering: true,
        order: [[0, 'asc']],
        scrollX: true,
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
        drawCallback: function() {
            $('#tblTrend_wrapper .dataTables_info').hide();
            applyStickyColumns('tblTrend', 1);
        },
        initComplete: function() { applyStickyColumns('tblTrend', 1); },
    });

    // ---- PER FASKES ----
    const tblPerFaskes = $('#tblPerFaskes').DataTable({
        ajax: {
            url: BASE_URL + '/laporan/analisis/per-faskes',
            dataSrc: 'data',
            data: function(d) {
                d.dari   = $('#faskesDari').val();
                d.sampai = $('#faskesSampai').val();
                d.faskes = $('#faskesFaskes').val();
            },
        },
        columns: [
            { data: null, className: 'text-center', render: (_, __, _r, meta) => meta.row + 1 },
            { data: 'nama_faskes' },
            { data: 'total_dokumen', className: 'text-center' },
            { data: 'total_nilai',   className: 'text-end', render: (v) => fmt(v) },
            { data: 'avg_per_dok',   className: 'text-end', render: (v) => fmt(v) },
        ],
        order: [[3, 'desc']],
        scrollX: true,
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
        drawCallback: function() { applyStickyColumns('tblPerFaskes', 1); },
        initComplete: function() { applyStickyColumns('tblPerFaskes', 1); },
    });

    // ---- BARANG TERLARIS ----
    const tblTerlaris = $('#tblTerlaris').DataTable({
        ajax: {
            url: BASE_URL + '/laporan/analisis/terlaris',
            dataSrc: 'data',
            data: function(d) {
                d.dari   = $('#terlarisDari').val();
                d.sampai = $('#terlarisSampai').val();
                d.faskes = $('#terlarisFaskes').val();
            },
        },
        columns: [
            { data: 'rank',        className: 'text-center', render: (v) => rankBadge(v) },
            { data: 'kode_barang' },
            { data: 'nama_barang' },
            { data: 'jenis_barang' },
            { data: 'merek_barang' },
            { data: 'ukuran' },
            { data: 'satuan' },
            { data: 'total_qty',   className: 'text-center fw-semibold' },
            { data: 'total_nilai', className: 'text-end', render: (v) => fmt(v) },
        ],
        order: [[7, 'desc']],
        scrollX: true,
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
        drawCallback: function() { applyStickyColumns('tblTerlaris', 1); },
        initComplete: function() { applyStickyColumns('tblTerlaris', 1); },
    });

    // ---- Buttons ----
    $('#btnTrend').on('click', function () { tblTrend.ajax.reload(); });
    $('#btnFaskes').on('click', function () { tblPerFaskes.ajax.reload(); });
    $('#btnTerlaris').on('click', function () { tblTerlaris.ajax.reload(); });

    function buildUrl(endpoint, getFilters) {
        return function(format) {
            const p = new URLSearchParams(Object.assign(getFilters(), { format }));
            return BASE_URL + '/laporan/analisis/' + endpoint + '/export?' + p.toString();
        };
    }

    const trendUrl   = buildUrl('trend',      () => ({ dari_tahun: $('#trendDariTahun').val(), sampai_tahun: $('#trendSampaiTahun').val(), faskes: $('#trendFaskes').val() }));
    const faskesUrl  = buildUrl('per-faskes', () => ({ dari: $('#faskesDari').val(), sampai: $('#faskesSampai').val(), faskes: $('#faskesFaskes').val() }));
    const terlarisUrl = buildUrl('terlaris',  () => ({ dari: $('#terlarisDari').val(), sampai: $('#terlarisSampai').val(), faskes: $('#terlarisFaskes').val() }));

    $('#btnTrendExcel').on('click',    function(e) { e.preventDefault(); window.location.href = trendUrl('excel'); });
    $('#btnTrendPdf').on('click',      function(e) { e.preventDefault(); window.location.href = trendUrl('pdf'); });
    $('#btnFaskesExcel').on('click',   function(e) { e.preventDefault(); window.location.href = faskesUrl('excel'); });
    $('#btnFaskesPdf').on('click',     function(e) { e.preventDefault(); window.location.href = faskesUrl('pdf'); });
    $('#btnTerlarisExcel').on('click', function(e) { e.preventDefault(); window.location.href = terlarisUrl('excel'); });
    $('#btnTerlarisPdf').on('click',   function(e) { e.preventDefault(); window.location.href = terlarisUrl('pdf'); });

    // Load tab on first switch
    $('#tab-faskes').one('shown.bs.tab', function () { tblPerFaskes.ajax.reload(); });
    $('#tab-terlaris').one('shown.bs.tab', function () { tblTerlaris.ajax.reload(); });

    // ---- TREND SALES FASKES ----
    $('#sfSales, #sfFaskes').select2({ placeholder: 'Semua', allowClear: true, width: '100%' });

    let sfData = null;
    let sfMode = 'qty';

    function escHtml(s) {
        const d = document.createElement('div');
        d.textContent = s != null ? String(s) : '';
        return d.innerHTML;
    }

    function buildSfHtml(data, mode) {
        if (!data.length) return '';

        // Group by nama_sales → (faskes_id + nama_faskes) → items
        const salesGroups = {};
        data.forEach(r => {
            const sk = r.nama_sales;
            const fk = (r.faskes_id ?? '') + '|||' + r.nama_faskes;
            if (!salesGroups[sk]) salesGroups[sk] = {};
            if (!salesGroups[sk][fk]) salesGroups[sk][fk] = [];
            salesGroups[sk][fk].push(r);
        });

        let html = '';
        let grandQty = 0, grandNilai = 0;

        Object.entries(salesGroups).forEach(([salesName, faskesGroups]) => {
            const salesTotal = Object.values(faskesGroups).reduce((s, items) => s + items.length, 0);
            let salesFirst = true;

            Object.entries(faskesGroups).forEach(([, items]) => {
                const faskesName = items[0].nama_faskes;
                let faskesFirst = true;

                items.forEach(r => {
                    grandQty   += r.total_qty;
                    grandNilai += r.total_nilai;

                    let rowMax = 0;
                    for (let m = 1; m <= 12; m++) rowMax = Math.max(rowMax, r[`m${m}_${mode}`] || 0);

                    html += '<tr>';

                    if (salesFirst) {
                        html += `<td rowspan="${salesTotal}" class="sf-s1 sf-sales align-middle">${escHtml(salesName)}</td>`;
                        salesFirst = false;
                    }
                    if (faskesFirst) {
                        html += `<td rowspan="${items.length}" class="sf-s2 sf-faskes align-middle">${escHtml(faskesName)}</td>`;
                        faskesFirst = false;
                    }

                    html += `<td>${escHtml(r.kode_barang || '—')}</td>`;
                    html += `<td>${escHtml(r.nama_barang || '—')}</td>`;
                    html += `<td class="text-center">${escHtml(r.satuan || '—')}</td>`;

                    for (let m = 1; m <= 12; m++) {
                        const val = r[`m${m}_${mode}`] || 0;
                        if (!val) {
                            html += `<td class="text-center sf-zero">—</td>`;
                        } else {
                            const opacity = rowMax > 0 ? Math.min((val / rowMax) * 0.42, 0.42).toFixed(2) : '0';
                            const display = mode === 'nilai' ? fmtShort(val) : val.toLocaleString('id-ID');
                            html += `<td class="text-center" style="background:rgba(34,197,94,${opacity})">${display}</td>`;
                        }
                    }

                    const total = mode === 'qty' ? r.total_qty : r.total_nilai;
                    html += `<td class="text-end fw-semibold">${mode === 'nilai' ? fmt(total) : total.toLocaleString('id-ID')}</td>`;
                    html += '</tr>';
                });
            });
        });

        // Footer row
        const footTotal = mode === 'qty' ? grandQty.toLocaleString('id-ID') : fmt(grandNilai);
        const emptyCols = '<td></td>'.repeat(12);
        const footHtml = `<tr><td colspan="5" class="text-end">Grand Total</td>${emptyCols}<td class="text-end">${footTotal}</td></tr>`;
        document.getElementById('sfTfoot').innerHTML = footHtml;

        return html;
    }

    function renderSf() {
        if (!sfData) return;
        document.getElementById('sfTbody').innerHTML = buildSfHtml(sfData, sfMode);
    }

    function loadSf() {
        $('#sfLoading').show();
        $('#sfEmpty, #sfTableWrap').hide();
        sfData = null;

        $.get(BASE_URL + '/laporan/analisis/trend-sales-faskes', {
            tahun:  $('#sfTahun').val(),
            sales:  $('#sfSales').val(),
            faskes: $('#sfFaskes').val(),
        })
        .done(function(d) {
            sfData = d.data;
            if (!sfData.length) {
                $('#sfEmpty').show();
            } else {
                renderSf();
                $('#sfTableWrap').show();
            }
        })
        .always(function() { $('#sfLoading').hide(); });
    }

    $('#btnSf').on('click', loadSf);
    $('[name="sfMode"]').on('change', function() {
        sfMode = this.value;
        if (sfData) renderSf();
    });

    function sfExportUrl(format) {
        return BASE_URL + '/laporan/analisis/trend-sales-faskes/export?' + new URLSearchParams({
            tahun:  $('#sfTahun').val(),
            sales:  $('#sfSales').val(),
            faskes: $('#sfFaskes').val(),
            format,
        });
    }
    $('#btnSfExcel').on('click', function(e) { e.preventDefault(); window.location.href = sfExportUrl('excel'); });
    $('#btnSfPdf').on('click',   function(e) { e.preventDefault(); window.location.href = sfExportUrl('pdf'); });

    $('#tab-sf').one('shown.bs.tab', function() {
        if (!sfData) loadSf();
    });
});
</script>
@endsection