@extends('layouts.master')

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

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .grn-summary-card { border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
    .grn-summary-card .icon-wrap { width: 36px; height: 36px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
    .grn-summary-card .label { font-size: .7rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
    .grn-summary-card .value { font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: #222; }
    .grn-summary-card.c1 .icon-wrap { background: #ede9fe; color: #7c3aed; }
    .grn-summary-card.c2 .icon-wrap { background: #dbeafe; color: #1d6fdf; }
    .grn-summary-card.c3 .icon-wrap { background: #d1fae5; color: #059669; }
    .grn-summary-card.c4 .icon-wrap { background: #fef3c7; color: #d97706; }
    .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); }
    /* Sticky columns */
    tbody td.sticky-col { position: sticky; z-index: 2; background: #fff; }
    .dataTables_scrollHead th.sticky-col { position: relative !important; z-index: 3; background: #f8f9fa; }
    td.sticky-col-last, .dataTables_scrollHead th.sticky-col-last { box-shadow: 2px 0 4px rgba(0,0,0,.07); }
    table.dataTable tbody tr:hover td { background: #f0f4ff !important; }
    .nav-tabs .nav-link { font-size: .875rem; }
</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 Penjualan</p>
            <span class="fs-13 text-muted">Laporan &rarr; Penjualan</span>
        </div>
    </div>

    {{-- Summary Langsung --}}
    <div id="sumLangsung" class="row g-2 mb-3">
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card c1">
                        <div class="icon-wrap"><i class="bx bx-file"></i></div>
                        <div><div class="label">Total Dokumen</div><div class="value" id="sl-dok">—</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card c2">
                        <div class="icon-wrap"><i class="bx bx-package"></i></div>
                        <div><div class="label">Total Item</div><div class="value" id="sl-item">—</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card c3">
                        <div class="icon-wrap"><i class="bx bx-money"></i></div>
                        <div><div class="label">Total Nilai</div><div class="value" id="sl-nilai">—</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card c4">
                        <div class="icon-wrap"><i class="bx bx-check-circle"></i></div>
                        <div><div class="label">Terverifikasi</div><div class="value" id="sl-verified">—</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Summary KSO --}}
    <div id="sumKso" class="row g-2 mb-3 d-none">
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card c1">
                        <div class="icon-wrap"><i class="bx bx-file"></i></div>
                        <div><div class="label">Total Dokumen</div><div class="value" id="sk-dok">—</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card c2">
                        <div class="icon-wrap"><i class="bx bx-user"></i></div>
                        <div><div class="label">Total Pasien</div><div class="value" id="sk-pasien">—</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card c4">
                        <div class="icon-wrap"><i class="bx bx-package"></i></div>
                        <div><div class="label">Total Jumlah Barang</div><div class="value" id="sk-qty">—</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card c3">
                        <div class="icon-wrap"><i class="bx bx-money"></i></div>
                        <div><div class="label">Total Nilai</div><div class="value" id="sk-nilai">—</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Main card with 4 tabs --}}
    <div class="card custom-card">
        <div class="card-body pb-0 pt-3">
            <ul class="nav nav-tabs" id="tabPenjualan" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="btn-rl" data-bs-toggle="tab" data-bs-target="#paneRekapLangsung" type="button" data-jenis="langsung" data-tipe="rekap">
                        <i class="bx bx-receipt me-1"></i> Rekap Langsung
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="btn-vl" data-bs-toggle="tab" data-bs-target="#paneRincianLangsung" type="button" data-jenis="langsung" data-tipe="rincian">
                        <i class="bx bx-detail me-1"></i> Rincian Langsung
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="btn-rk" data-bs-toggle="tab" data-bs-target="#paneRekapKso" type="button" data-jenis="kso" data-tipe="rekap">
                        <i class="bx bx-receipt me-1"></i> Rekap KSO
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="btn-vk" data-bs-toggle="tab" data-bs-target="#paneRincianKso" type="button" data-jenis="kso" data-tipe="rincian">
                        <i class="bx bx-detail me-1"></i> Rincian KSO
                    </button>
                </li>
            </ul>
        </div>

        <div class="tab-content">

            {{-- ============================================================ --}}
            {{-- PANE: Rekap Langsung --}}
            {{-- ============================================================ --}}
            <div class="tab-pane fade show active" id="paneRekapLangsung">
                <div class="card-body border-bottom pb-3 pt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari</label>
                            <input type="text" id="rl-dari" 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="rl-sampai" 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="rl-faskes" 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-2">
                            <label class="form-label mb-1 small fw-semibold">Kode Barang</label>
                            <input type="text" id="rl-kode" class="form-control form-control-sm" placeholder="Cari kode...">
                        </div>
                        <div class="col-md-auto d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnRlFilter">
                                <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="btnRlExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnRlPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblRekapLangsung" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:50px" class="text-center">Aksi</th>
                                    <th>No. Penjualan</th>
                                    <th>No. PO</th>
                                    <th>Tgl. Transaksi</th>
                                    <th>Tgl. Penjualan</th>
                                    <th>Tgl. JT</th>
                                    <th>Fasilitas Kesehatan</th>
                                    <th>Tenaga Kesehatan</th>
                                    <th class="text-center">Item</th>
                                    <th class="text-end">Total Harga</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- ============================================================ --}}
            {{-- PANE: Rincian Langsung --}}
            {{-- ============================================================ --}}
            <div class="tab-pane fade" id="paneRincianLangsung">
                <div class="card-body border-bottom pb-3 pt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari</label>
                            <input type="text" id="vl-dari" 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="vl-sampai" 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="vl-faskes" 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-2">
                            <label class="form-label mb-1 small fw-semibold">Kode Barang</label>
                            <input type="text" id="vl-kode" class="form-control form-control-sm" placeholder="Cari kode...">
                        </div>
                        <div class="col-md-auto d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnVlFilter">
                                <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="btnVlExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnVlPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblRincianLangsung" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:50px" class="text-center">Aksi</th>
                                    <th>No. Penjualan</th>
                                    <th>Tgl. Transaksi</th>
                                    <th>Fasilitas Kesehatan</th>
                                    <th>Tenaga Kesehatan</th>
                                    <th>Status</th>
                                    <th>Kode</th>
                                    <th>Nama Barang</th>
                                    <th>Jenis</th>
                                    <th>Merek</th>
                                    <th>Ukuran</th>
                                    <th>No. LOT</th>
                                    <th>No. Serial</th>
                                    <th>Tgl. ED</th>
                                    <th class="text-center">Masa ED</th>
                                    <th>Satuan</th>
                                    <th class="text-center">Jml.</th>
                                    <th class="text-end">Harga</th>
                                    <th class="text-end">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- ============================================================ --}}
            {{-- PANE: Rekap KSO --}}
            {{-- ============================================================ --}}
            <div class="tab-pane fade" id="paneRekapKso">
                <div class="card-body border-bottom pb-3 pt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari</label>
                            <input type="text" id="rk-dari" 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="rk-sampai" 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="rk-faskes" 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-2">
                            <label class="form-label mb-1 small fw-semibold">Kode Barang</label>
                            <input type="text" id="rk-kode" class="form-control form-control-sm" placeholder="Cari kode...">
                        </div>
                        <div class="col-md-auto d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnRkFilter">
                                <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="btnRkExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnRkPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblRekapKso" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:50px" class="text-center">Aksi</th>
                                    <th>No. KSO</th>
                                    <th>Tgl. Transaksi</th>
                                    <th>Fasilitas Kesehatan</th>
                                    <th>Nama Pasien</th>
                                    <th>No. RM</th>
                                    <th>Nama Dokter</th>
                                    <th class="text-center">Item</th>
                                    <th class="text-end">Total Harga</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- ============================================================ --}}
            {{-- PANE: Rincian KSO --}}
            {{-- ============================================================ --}}
            <div class="tab-pane fade" id="paneRincianKso">
                <div class="card-body border-bottom pb-3 pt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari</label>
                            <input type="text" id="vk-dari" 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="vk-sampai" 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="vk-faskes" 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-2">
                            <label class="form-label mb-1 small fw-semibold">Kode Barang</label>
                            <input type="text" id="vk-kode" class="form-control form-control-sm" placeholder="Cari kode...">
                        </div>
                        <div class="col-md-auto d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnVkFilter">
                                <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="btnVkExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnVkPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblRincianKso" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:50px" class="text-center">Aksi</th>
                                    <th>No. KSO</th>
                                    <th>Tgl. Transaksi</th>
                                    <th>Fasilitas Kesehatan</th>
                                    <th>Nama Pasien</th>
                                    <th>Nama Dokter</th>
                                    <th>Status</th>
                                    <th>Kode</th>
                                    <th>Nama Barang</th>
                                    <th>Jenis</th>
                                    <th>Merek</th>
                                    <th>Ukuran</th>
                                    <th>No. LOT</th>
                                    <th>No. Serial</th>
                                    <th>Tgl. ED</th>
                                    <th class="text-center">Masa ED</th>
                                    <th>Satuan</th>
                                    <th class="text-center">Jml.</th>
                                    <th class="text-end">Harga</th>
                                    <th class="text-end">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>{{-- end tab-content --}}
    </div>{{-- end card --}}
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_URL        = '{{ url('') }}';
const REKAP_URL       = BASE_URL + '/laporan/penjualan/rekap';
const RINCIAN_URL     = BASE_URL + '/laporan/penjualan/rincian';
const SUMMARY_URL     = BASE_URL + '/laporan/penjualan/summary';
const EXP_REKAP_URL   = BASE_URL + '/laporan/penjualan/rekap/export';
const EXP_RINCIAN_URL = BASE_URL + '/laporan/penjualan/rincian/export';

function fmt(n) {
    return 'Rp ' + parseFloat(n || 0).toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
}
function fmtNum(n) {
    return parseFloat(n || 0).toLocaleString('id-ID');
}

// ── Filters ──────────────────────────────────────────────────────────────────

function getRlFilters() { return { dari: $('#rl-dari').val(), sampai: $('#rl-sampai').val(), faskes: $('#rl-faskes').val(), kode_barang: $('#rl-kode').val(), jenis: 'langsung' }; }
function getVlFilters() { return { dari: $('#vl-dari').val(), sampai: $('#vl-sampai').val(), faskes: $('#vl-faskes').val(), kode_barang: $('#vl-kode').val(), jenis: 'langsung' }; }
function getRkFilters() { return { dari: $('#rk-dari').val(), sampai: $('#rk-sampai').val(), faskes: $('#rk-faskes').val(), kode_barang: $('#rk-kode').val(), jenis: 'kso' }; }
function getVkFilters() { return { dari: $('#vk-dari').val(), sampai: $('#vk-sampai').val(), faskes: $('#vk-faskes').val(), kode_barang: $('#vk-kode').val(), jenis: 'kso' }; }

// ── Summary ───────────────────────────────────────────────────────────────────

function loadSummaryLangsung() {
    fetch(SUMMARY_URL + '?' + new URLSearchParams(getRlFilters()))
        .then(r => r.json())
        .then(d => {
            $('#sl-dok').text(fmtNum(d.total_dokumen));
            $('#sl-item').text(fmtNum(d.total_item));
            $('#sl-nilai').text(fmt(d.total_nilai));
            $('#sl-verified').text(fmtNum(d.terverifikasi) + ' dok.');
        });
}

function loadSummaryKso() {
    fetch(SUMMARY_URL + '?' + new URLSearchParams(getRkFilters()))
        .then(r => r.json())
        .then(d => {
            $('#sk-dok').text(fmtNum(d.total_dokumen));
            $('#sk-pasien').text(fmtNum(d.total_pasien));
            $('#sk-qty').text(fmtNum(d.total_qty));
            $('#sk-nilai').text(fmt(d.total_nilai));
        });
}

// ── Sticky columns ────────────────────────────────────────────────────────────

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();
    }
}

// ── DataTables ────────────────────────────────────────────────────────────────

$(function () {
    // Flatpickr
    document.querySelectorAll('.flatpickr').forEach(el => {
        flatpickr(el, { dateFormat: 'd-m-Y', allowInput: true });
    });

    const dtLang = { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' };

    // ── Rekap Langsung ──
    const tblRL = $('#tblRekapLangsung').DataTable({
        processing: true, serverSide: true, scrollX: true,
        ajax: { url: REKAP_URL, data: function(d) { Object.assign(d, getRlFilters()); } },
        columns: [
            { data: null, orderable: false, className: 'text-center',
              render: (_, __, row) => `<a href="${BASE_URL}/penjualan/${row.id}" target="_blank" class="btn btn-info btn-sm px-2 py-1"><i class="bx bx-show fs-14"></i></a>` },
            { data: 'nomor_penjualan' },
            { data: 'nomor_po' },
            { data: 'tanggal_transaksi' },
            { data: 'tanggal_penjualan' },
            { data: 'tanggal_jatuh_tempo' },
            { data: 'nama_faskes' },
            { data: 'nama_nakes' },
            { data: 'jumlah_item', className: 'text-center', render: v => fmtNum(v) },
            { data: 'total_harga', className: 'text-end',    render: v => fmt(v) },
            { data: 'status_badge', orderable: false },
        ],
        order: [[3, 'desc']],
        language: dtLang,
        drawCallback: function() { applyStickyColumns('tblRekapLangsung', 5); },
        initComplete: function() { applyStickyColumns('tblRekapLangsung', 5); },
    });

    // ── Rincian Langsung ──
    const tblVL = $('#tblRincianLangsung').DataTable({
        processing: true, serverSide: true, scrollX: true,
        ajax: { url: RINCIAN_URL, data: function(d) { Object.assign(d, getVlFilters()); } },
        columns: [
            { data: null, orderable: false, className: 'text-center',
              render: (_, __, row) => `<a href="${BASE_URL}/penjualan/${row.id}" target="_blank" class="btn btn-info btn-sm px-2 py-1"><i class="bx bx-show fs-14"></i></a>` },
            { data: 'nomor_penjualan' },
            { data: 'tanggal_transaksi' },
            { data: 'nama_faskes' },
            { data: 'nama_nakes' },
            { data: 'status_badge', orderable: false },
            { data: 'kode_barang' },
            { data: 'nama_barang' },
            { data: 'jenis_barang' },
            { data: 'merek_barang' },
            { data: 'ukuran',   className: 'text-center' },
            { data: 'no_lot' },
            { data: 'no_serial' },
            { data: 'tgl_kedaluwarsa', className: 'text-center' },
            {
                data: 'masa_ed', className: 'text-center',
                render: function(val) {
                    if (val === null || val === undefined) return '<span class="text-muted">—</span>';
                    if (val < 0)   return `<span class="badge bg-danger">Lewat ${Math.abs(val)} hr</span>`;
                    if (val <= 30) return `<span class="badge bg-warning text-dark">${val} hr</span>`;
                    if (val <= 90) return `<span class="badge bg-info">${val} hr</span>`;
                    return `<span class="badge bg-success">${val} hr</span>`;
                }
            },
            { data: 'satuan',   className: 'text-center' },
            { data: 'jumlah',   className: 'text-center', render: v => fmtNum(v) },
            { data: 'harga',    className: 'text-end',    render: v => fmt(v) },
            { data: 'subtotal', className: 'text-end',    render: v => fmt(v) },
        ],
        order: [[2, 'desc']],
        language: dtLang,
        drawCallback: function() { applyStickyColumns('tblRincianLangsung', 5); },
        initComplete: function() { applyStickyColumns('tblRincianLangsung', 5); },
    });

    // ── Rekap KSO ──
    const tblRK = $('#tblRekapKso').DataTable({
        processing: true, serverSide: true, scrollX: true,
        ajax: { url: REKAP_URL, data: function(d) { Object.assign(d, getRkFilters()); } },
        columns: [
            { data: null, orderable: false, className: 'text-center',
              render: (_, __, row) => `<a href="${BASE_URL}/penjualan-kso/${row.id}" target="_blank" class="btn btn-info btn-sm px-2 py-1"><i class="bx bx-show fs-14"></i></a>` },
            { data: 'nomor_kso' },
            { data: 'tanggal_transaksi' },
            { data: 'nama_faskes' },
            { data: 'nama_pasien' },
            { data: 'no_rm' },
            { data: 'nama_dokter' },
            { data: 'jumlah_item', className: 'text-center', render: v => fmtNum(v) },
            { data: 'total_harga', className: 'text-end',    render: v => fmt(v) },
            { data: 'status_badge', orderable: false },
        ],
        order: [[2, 'desc']],
        language: dtLang,
        drawCallback: function() { applyStickyColumns('tblRekapKso', 4); },
        initComplete: function() { applyStickyColumns('tblRekapKso', 4); },
    });

    // ── Rincian KSO ──
    const tblVK = $('#tblRincianKso').DataTable({
        processing: true, serverSide: true, scrollX: true,
        ajax: { url: RINCIAN_URL, data: function(d) { Object.assign(d, getVkFilters()); } },
        columns: [
            { data: null, orderable: false, className: 'text-center',
              render: (_, __, row) => `<a href="${BASE_URL}/penjualan-kso/${row.id}" target="_blank" class="btn btn-info btn-sm px-2 py-1"><i class="bx bx-show fs-14"></i></a>` },
            { data: 'nomor_kso' },
            { data: 'tanggal_transaksi' },
            { data: 'nama_faskes' },
            { data: 'nama_pasien' },
            { data: 'nama_dokter' },
            { data: 'status_badge', orderable: false },
            { data: 'kode_barang' },
            { data: 'nama_barang' },
            { data: 'jenis_barang' },
            { data: 'merek_barang' },
            { data: 'ukuran',   className: 'text-center' },
            { data: 'no_lot' },
            { data: 'no_serial' },
            { data: 'tgl_kedaluwarsa', className: 'text-center' },
            {
                data: 'masa_ed', className: 'text-center',
                render: function(val) {
                    if (val === null || val === undefined) return '<span class="text-muted">—</span>';
                    if (val < 0)   return `<span class="badge bg-danger">Lewat ${Math.abs(val)} hr</span>`;
                    if (val <= 30) return `<span class="badge bg-warning text-dark">${val} hr</span>`;
                    if (val <= 90) return `<span class="badge bg-info">${val} hr</span>`;
                    return `<span class="badge bg-success">${val} hr</span>`;
                }
            },
            { data: 'satuan',   className: 'text-center' },
            { data: 'jumlah',   className: 'text-center', render: v => fmtNum(v) },
            { data: 'harga',    className: 'text-end',    render: v => fmt(v) },
            { data: 'subtotal', className: 'text-end',    render: v => fmt(v) },
        ],
        order: [[2, 'desc']],
        language: dtLang,
        drawCallback: function() { applyStickyColumns('tblRincianKso', 5); },
        initComplete: function() { applyStickyColumns('tblRincianKso', 5); },
    });

    // ── Filter buttons ────────────────────────────────────────────────────────

    $('#btnRlFilter').on('click', function () { loadSummaryLangsung(); tblRL.ajax.reload(); });
    $('#btnVlFilter').on('click', function () { tblVL.ajax.reload(); });
    $('#btnRkFilter').on('click', function () { loadSummaryKso(); tblRK.ajax.reload(); });
    $('#btnVkFilter').on('click', function () { tblVK.ajax.reload(); });

    // ── Export buttons ────────────────────────────────────────────────────────

    function exportUrl(tipe, filters, format) {
        const base = tipe === 'rekap' ? EXP_REKAP_URL : EXP_RINCIAN_URL;
        return base + '?' + new URLSearchParams(Object.assign({}, filters, { format }));
    }
    $('#btnRlExcel').on('click', function(e) { e.preventDefault(); window.location.href = exportUrl('rekap',   getRlFilters(), 'xlsx'); });
    $('#btnRlPdf').on('click',   function(e) { e.preventDefault(); window.location.href = exportUrl('rekap',   getRlFilters(), 'pdf'); });
    $('#btnVlExcel').on('click', function(e) { e.preventDefault(); window.location.href = exportUrl('rincian', getVlFilters(), 'xlsx'); });
    $('#btnVlPdf').on('click',   function(e) { e.preventDefault(); window.location.href = exportUrl('rincian', getVlFilters(), 'pdf'); });
    $('#btnRkExcel').on('click', function(e) { e.preventDefault(); window.location.href = exportUrl('rekap',   getRkFilters(), 'xlsx'); });
    $('#btnRkPdf').on('click',   function(e) { e.preventDefault(); window.location.href = exportUrl('rekap',   getRkFilters(), 'pdf'); });
    $('#btnVkExcel').on('click', function(e) { e.preventDefault(); window.location.href = exportUrl('rincian', getVkFilters(), 'xlsx'); });
    $('#btnVkPdf').on('click',   function(e) { e.preventDefault(); window.location.href = exportUrl('rincian', getVkFilters(), 'pdf'); });

    // ── Tab switch ────────────────────────────────────────────────────────────

    $('#tabPenjualan button[data-bs-toggle="tab"]').on('shown.bs.tab', function () {
        const jenis = $(this).data('jenis');
        const tipe  = $(this).data('tipe');
        const target = $(this).data('bs-target');

        // Toggle summary cards
        $('#sumLangsung').toggleClass('d-none', jenis !== 'langsung');
        $('#sumKso').toggleClass('d-none',      jenis !== 'kso');

        // Refresh summary when rekap tab is shown
        if (tipe === 'rekap' && jenis === 'langsung') loadSummaryLangsung();
        if (tipe === 'rekap' && jenis === 'kso')      loadSummaryKso();

        // Fix column widths for hidden tabs
        if (target === '#paneRincianLangsung') { tblVL.columns.adjust(); applyStickyColumns('tblRincianLangsung', 5); }
        if (target === '#paneRekapKso')        { tblRK.columns.adjust(); applyStickyColumns('tblRekapKso', 4); }
        if (target === '#paneRincianKso')      { tblVK.columns.adjust(); applyStickyColumns('tblRincianKso', 5); }
    });

    // ── Initial load ──────────────────────────────────────────────────────────
    loadSummaryLangsung();
});
</script>
@endsection