@extends('layouts.master')

@section('title', 'Laporan Purchase Order')

@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.total   .icon-wrap { background: #ede9fe; color: #7c3aed; }
    .grn-summary-card.nilai   .icon-wrap { background: #dbeafe; color: #1d6fdf; }
    .grn-summary-card.real    .icon-wrap { background: #d1fae5; color: #059669; }
    .grn-summary-card.nreal   .icon-wrap { background: #fef3c7; color: #d97706; }
    #tblRekap th, #tblRekap td,
    #tblRincian th, #tblRincian td,
    #tblRealisasi th, #tblRealisasi 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); }
    #tblRekap thead th, #tblRincian thead th, #tblRealisasi thead th { background: #f8f9fa; }
    /* Sticky columns */
    #tblRekap td.sticky-col, #tblRincian td.sticky-col { position: sticky; z-index: 2; background: #f8f9fa; }
    #tblRekap tbody td.sticky-col, #tblRincian tbody td.sticky-col { background: #fff; }
    .dataTables_scrollHead th.sticky-col { position: relative !important; z-index: 3; background: #f8f9fa; }
    #tblRekap td.sticky-col-last, #tblRincian td.sticky-col-last,
    .dataTables_scrollHead th.sticky-col-last { box-shadow: 2px 0 4px rgba(0,0,0,.07); }
    #tblRekap tr:hover td, #tblRincian tr:hover td, #tblRealisasi tr:hover td { background: #f0f4ff !important; }
    #tblRekap_wrapper .dataTables_filter input,
    #tblRincian_wrapper .dataTables_filter input,
    #tblRealisasi_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblRekap_wrapper .dataTables_filter input:focus,
    #tblRincian_wrapper .dataTables_filter input:focus,
    #tblRealisasi_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblRekap_wrapper .dataTables_length select,
    #tblRincian_wrapper .dataTables_length select,
    #tblRealisasi_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; min-width: 70px; }
    #tblRekap_wrapper .dataTables_filter label,
    #tblRekap_wrapper .dataTables_length label,
    #tblRincian_wrapper .dataTables_filter label,
    #tblRincian_wrapper .dataTables_length label,
    #tblRealisasi_wrapper .dataTables_filter label,
    #tblRealisasi_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblRekap_wrapper .dataTables_info,
    #tblRincian_wrapper .dataTables_info,
    #tblRealisasi_wrapper .dataTables_info { font-size: .8rem; color: #6c757d; }
    .progress-thin { height: 5px; border-radius: 3px; }
    .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 Purchase Order</p>
            <span class="fs-13 text-muted">Laporan &rarr; Purchase Order</span>
        </div>
    </div>

    {{-- Summary Cards --}}
    <div class="row g-2 mb-3" id="summaryRow">
        <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 total">
                        <div class="icon-wrap"><i class="bx bx-file-blank"></i></div>
                        <div><div class="label">Total PO</div><div class="value" id="sumTotal">—</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 nilai">
                        <div class="icon-wrap"><i class="bx bx-money"></i></div>
                        <div><div class="label">Nilai Total PO</div><div class="value" id="sumNilai">—</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 real">
                        <div class="icon-wrap"><i class="bx bx-check-circle"></i></div>
                        <div><div class="label">PO Terealisasi</div><div class="value" id="sumReal">—</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 nreal">
                        <div class="icon-wrap"><i class="bx bx-trending-up"></i></div>
                        <div><div class="label">Nilai Terealisasi</div><div class="value" id="sumNilaiReal">—</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card custom-card">
        {{-- Tabs --}}
        <div class="card-body pb-0 pt-3">
            <ul class="nav nav-tabs" id="tabLaporan" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="tab-rekap" data-bs-toggle="tab" data-bs-target="#paneRekap" type="button">
                        <i class="bx bx-list-ul me-1"></i> Rekap PO
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="tab-rincian" data-bs-toggle="tab" data-bs-target="#paneRincian" type="button">
                        <i class="bx bx-detail me-1"></i> Rincian PO
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="tab-realisasi" data-bs-toggle="tab" data-bs-target="#paneRealisasi" type="button">
                        <i class="bx bx-bar-chart-alt-2 me-1"></i> Realisasi PO
                    </button>
                </li>
            </ul>
        </div>

        <div class="tab-content">
            {{-- TAB REKAP --}}
            <div class="tab-pane fade show active" id="paneRekap">
                {{-- Filter Rekap --}}
                <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="rekapDari" 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="rekapSampai" 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">Supplier</label>
                            <select id="rekapProdusen" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Supplier</option>
                                @foreach($produsenList as $p)
                                <option value="{{ $p->id }}">{{ $p->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="btnRekapFilter">
                                <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="btnRekapExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnRekapPdf"><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="tblRekap" 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">Aksi</th>
                                    <th>No. PO</th>
                                    <th>Supplier</th>
                                    <th>Tgl. PO</th>
                                    <th>Tgl. Estimasi</th>
                                    <th class="text-center">Item</th>
                                    <th class="text-center">Penerimaan</th>
                                    <th class="text-end">Total Nilai</th>
                                    <th class="text-end">Nilai Realisasi</th>
                                    <th style="width:100px">% Realisasi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- TAB RINCIAN --}}
            <div class="tab-pane fade" id="paneRincian">
                {{-- Filter Rincian --}}
                <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="rincianDari" 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="rincianSampai" 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">Supplier</label>
                            <select id="rincianProdusen" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Supplier</option>
                                @foreach($produsenList as $p)
                                <option value="{{ $p->id }}">{{ $p->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Nama Barang</label>
                            <select id="rincianNamaBarang" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Barang</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Merek</label>
                            <select id="rincianMerekBarang" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Merek</option>
                            </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="btnRincianFilter">
                                <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="btnRincianExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnRincianPdf"><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="tblRincian" 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">Aksi</th>
                                    <th>No. PO</th>
                                    <th>Supplier</th>
                                    <th>Tgl. PO</th>
                                    <th>Kode</th>
                                    <th>Nama Barang</th>
                                    <th>Jenis</th>
                                    <th>Merek</th>
                                    <th>Ukuran</th>
                                    <th>Satuan</th>
                                    <th class="text-center">Qty Pesan</th>
                                    <th class="text-center">Qty Diterima</th>
                                    <th class="text-end">Harga</th>
                                    <th class="text-end">Subtotal</th>
                                    <th class="text-end">Nilai Realisasi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
            {{-- TAB REALISASI --}}
            <div class="tab-pane fade" id="paneRealisasi">
                <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="realisasiDari" 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="realisasiSampai" 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">Supplier</label>
                            <select id="realisasiProdusen" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Supplier</option>
                                @foreach($produsenList as $p)
                                <option value="{{ $p->id }}">{{ $p->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Nama Barang</label>
                            <select id="realisasiNamaBarang" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Barang</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Merek</label>
                            <select id="realisasiMerekBarang" class="form-select form-select-sm" style="width:100%">
                                <option value="">Semua Merek</option>
                            </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="btnRealisasiFilter">
                                <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="btnRealisasiExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnRealisasiPdf"><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="tblRealisasi" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th>Supplier</th>
                                    <th>Kode</th>
                                    <th>Nama Barang</th>
                                    <th>Merek</th>
                                    <th>Satuan</th>
                                    <th class="text-center">Qty Dipesan</th>
                                    <th class="text-center">Qty Diterima</th>
                                    <th class="text-center">Sisa</th>
                                    <th style="min-width:130px">% Realisasi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </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 getRekapFilters() {
    return {
        dari:     $('#rekapDari').val(),
        sampai:   $('#rekapSampai').val(),
        produsen: $('#rekapProdusen').val(),
    };
}

function getRincianFilters() {
    return {
        dari:         $('#rincianDari').val(),
        sampai:       $('#rincianSampai').val(),
        produsen:     $('#rincianProdusen').val(),
        nama_barang:  $('#rincianNamaBarang').val(),
        merek_barang: $('#rincianMerekBarang').val(),
    };
}

function loadSummary() {
    $.get(BASE_URL + '/laporan/po/summary', getRekapFilters(), function(d) {
        $('#sumTotal').text(d.total);
        $('#sumNilai').text(fmtShort(d.nilai_total));
        $('#sumReal').text(d.terealisasi + ' / ' + d.total);
        $('#sumNilaiReal').text(fmtShort(d.nilai_terealisasi));
    });
}

$(function () {
    flatpickr('.flatpickr', { dateFormat: 'd-m-Y', locale: 'id' });
    $('#rekapProdusen, #rincianProdusen, #realisasiProdusen').select2({ placeholder: 'Semua Supplier', allowClear: true, width: '100%' });

    function initBarangSelect2(selector) {
        $(selector).select2({
            placeholder: 'Semua Barang',
            allowClear: true,
            width: '100%',
            minimumInputLength: 0,
            ajax: {
                url: BASE_URL + '/laporan/po/barang-search',
                dataType: 'json',
                delay: 250,
                data: function(params) { return { term: params.term || '' }; },
                processResults: function(data) { return { results: data.results }; },
                cache: true,
            },
        });
    }
    initBarangSelect2('#rincianNamaBarang');
    initBarangSelect2('#realisasiNamaBarang');

    function initMerekSelect2(selector) {
        $(selector).select2({
            placeholder: 'Semua Merek',
            allowClear: true,
            width: '100%',
            minimumInputLength: 0,
            ajax: {
                url: BASE_URL + '/laporan/po/merek-search',
                dataType: 'json',
                delay: 250,
                data: function(params) { return { term: params.term || '' }; },
                processResults: function(data) { return { results: data.results }; },
                cache: true,
            },
        });
    }
    initMerekSelect2('#rincianMerekBarang');
    initMerekSelect2('#realisasiMerekBarang');

    const tblRekap = $('#tblRekap').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: BASE_URL + '/laporan/po/rekap',
            data: function(d) { Object.assign(d, getRekapFilters()); },
        },
        columns: [
            {
                data: 'id', orderable: false, className: 'text-center',
                render: (id) => `<a href="${BASE_URL}/pengadaan/purchase-order/${id}" target="_blank" class="btn btn-info btn-sm px-2 py-1"><i class="bx bx-show fs-14"></i></a>`
            },
            { data: 'nomor_po' },
            { data: 'nama_produsen' },
            { data: 'tanggal_po' },
            { data: 'tanggal_estimasi' },
            { data: 'jumlah_item', className: 'text-center' },
            { data: 'jumlah_penerimaan', className: 'text-center' },
            {
                data: 'total_harga', className: 'text-end',
                render: (v) => fmt(v)
            },
            {
                data: 'nilai_realisasi', className: 'text-end',
                render: (v) => fmt(v)
            },
            {
                data: null, orderable: false,
                render: (_, __, row) => {
                    const pct = row.total_harga > 0 ? Math.min(100, Math.round(row.nilai_realisasi / row.total_harga * 100)) : 0;
                    const color = pct >= 100 ? 'success' : pct > 0 ? 'warning' : 'secondary';
                    return `<div class="d-flex align-items-center gap-1">
                        <div class="progress flex-grow-1 progress-thin"><div class="progress-bar bg-${color}" style="width:${pct}%"></div></div>
                        <small class="text-muted" style="width:32px;text-align:right">${pct}%</small>
                    </div>`;
                }
            },
        ],
        order: [[3, 'desc']],
        scrollX: true,
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
        drawCallback: function() { applyStickyColumns('tblRekap', 3); },
        initComplete: function() { applyStickyColumns('tblRekap', 3); },
    });

    const tblRincian = $('#tblRincian').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: BASE_URL + '/laporan/po/rincian',
            data: function(d) { Object.assign(d, getRincianFilters()); },
        },
        columns: [
            {
                data: 'po_id', orderable: false, className: 'text-center',
                render: (id) => `<a href="${BASE_URL}/pengadaan/purchase-order/${id}" target="_blank" class="btn btn-info btn-sm px-2 py-1"><i class="bx bx-show fs-14"></i></a>`
            },
            { data: 'nomor_po' },
            { data: 'nama_produsen' },
            { data: 'tanggal_po' },
            { data: 'kode_barang' },
            { data: 'nama_barang' },
            { data: 'jenis_barang' },
            { data: 'merek_barang' },
            { data: 'ukuran' },
            { data: 'satuan_beli' },
            {
                data: 'qty', className: 'text-center',
                render: (v, _, row) => {
                    const pct = v > 0 ? Math.min(100, Math.round(row.qty_diterima / v * 100)) : 0;
                    const color = pct >= 100 ? 'text-success' : pct > 0 ? 'text-warning' : '';
                    return `<span class="${color}">${v}</span>`;
                }
            },
            {
                data: 'qty_diterima', className: 'text-center',
                render: (v, _, row) => {
                    const color = v >= row.qty ? 'text-success fw-semibold' : v > 0 ? 'text-warning' : 'text-muted';
                    return `<span class="${color}">${v}</span>`;
                }
            },
            { data: 'harga_beli', className: 'text-end', render: (v) => fmt(v) },
            { data: 'subtotal', className: 'text-end', render: (v) => fmt(v) },
            { data: 'nilai_realisasi', 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('tblRincian', 3); },
        initComplete: function() { applyStickyColumns('tblRincian', 3); },
    });

    function getRealisasiFilters() {
        return {
            dari:         $('#realisasiDari').val(),
            sampai:       $('#realisasiSampai').val(),
            produsen:     $('#realisasiProdusen').val(),
            nama_barang:  $('#realisasiNamaBarang').val(),
            merek_barang: $('#realisasiMerekBarang').val(),
        };
    }

    const tblRealisasi = $('#tblRealisasi').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: BASE_URL + '/laporan/po/realisasi',
            data: function(d) { Object.assign(d, getRealisasiFilters()); },
        },
        columns: [
            { data: 'nama_produsen' },
            { data: 'kode_barang' },
            { data: 'nama_barang' },
            { data: 'merek_barang' },
            { data: 'satuan_beli' },
            { data: 'total_dipesan', className: 'text-center fw-semibold' },
            {
                data: 'total_diterima', className: 'text-center',
                render: (v, _, row) => {
                    const pct = row.total_dipesan > 0 ? Math.min(100, Math.round(v / row.total_dipesan * 100)) : 0;
                    const cls = pct >= 100 ? 'text-success fw-semibold' : pct > 0 ? 'text-warning fw-semibold' : 'text-muted';
                    return `<span class="${cls}">${v}</span>`;
                }
            },
            {
                data: 'sisa', className: 'text-center',
                render: (v) => {
                    const cls = v === 0 ? 'text-success' : 'text-danger';
                    return `<span class="${cls}">${v}</span>`;
                }
            },
            {
                data: null, orderable: false,
                render: (_, __, row) => {
                    const pct = row.total_dipesan > 0 ? Math.min(100, Math.round(row.total_diterima / row.total_dipesan * 100)) : 0;
                    const color = pct >= 100 ? 'success' : pct > 0 ? 'warning' : 'secondary';
                    return `<div class="d-flex align-items-center gap-1">
                        <div class="progress flex-grow-1 progress-thin"><div class="progress-bar bg-${color}" style="width:${pct}%"></div></div>
                        <small class="text-muted" style="width:32px;text-align:right">${pct}%</small>
                    </div>`;
                }
            },
        ],
        order: [[0, 'asc'], [2, 'asc']],
        scrollX: true,
        pageLength: 25,
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
    });

    $('#btnRealisasiFilter').on('click', function () {
        tblRealisasi.ajax.reload();
    });

    $('#tab-realisasi').on('shown.bs.tab', function () {
        tblRealisasi.columns.adjust();
    });

    function realisasiExportUrl(format) {
        const p = new URLSearchParams(Object.assign(getRealisasiFilters(), { format }));
        return BASE_URL + '/laporan/po/realisasi/export?' + p.toString();
    }

    $('#btnRealisasiExcel').on('click', function(e) { e.preventDefault(); window.location.href = realisasiExportUrl('excel'); });
    $('#btnRealisasiPdf').on('click',   function(e) { e.preventDefault(); window.location.href = realisasiExportUrl('pdf'); });

    function rekapExportUrl(format) {
        const p = new URLSearchParams(Object.assign(getRekapFilters(), { format }));
        return BASE_URL + '/laporan/po/rekap/export?' + p.toString();
    }
    function rincianExportUrl(format) {
        const p = new URLSearchParams(Object.assign(getRincianFilters(), { format }));
        return BASE_URL + '/laporan/po/rincian/export?' + p.toString();
    }

    $('#btnRekapExcel').on('click',   function(e) { e.preventDefault(); window.location.href = rekapExportUrl('excel'); });
    $('#btnRekapPdf').on('click',     function(e) { e.preventDefault(); window.location.href = rekapExportUrl('pdf'); });
    $('#btnRincianExcel').on('click', function(e) { e.preventDefault(); window.location.href = rincianExportUrl('excel'); });
    $('#btnRincianPdf').on('click',   function(e) { e.preventDefault(); window.location.href = rincianExportUrl('pdf'); });

    $('#btnRekapFilter').on('click', function () {
        loadSummary();
        tblRekap.ajax.reload();
    });

    $('#btnRincianFilter').on('click', function () {
        tblRincian.ajax.reload();
    });

    $('#tab-rincian').on('shown.bs.tab', function () {
        tblRincian.columns.adjust();
        applyStickyColumns('tblRincian', 3);
    });

    loadSummary();
});
</script>
@endsection