@extends('layouts.master')

@section('title', 'Laporan Retur Faskes')

@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); }
    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 Retur Faskes</p>
            <span class="fs-13 text-muted">Laporan &rarr; Retur Faskes</span>
        </div>
    </div>

    {{-- Summary Cards --}}
    <div 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="sum-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-list-ul"></i></div>
                        <div><div class="label">Total Item</div><div class="value" id="sum-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-package"></i></div>
                        <div><div class="label">Total Jumlah</div><div class="value" id="sum-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 c4">
                        <div class="icon-wrap"><i class="bx bx-check-shield"></i></div>
                        <div><div class="label">Qty Kondisi Baik</div><div class="value" id="sum-baik">—</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card custom-card">
        <div class="card-body pb-0 pt-3">
            <ul class="nav nav-tabs" id="tabReturKso" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#paneRekap" type="button">
                        <i class="bx bx-receipt me-1"></i> Rekap
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#paneRincian" type="button">
                        <i class="bx bx-detail me-1"></i> Rincian
                    </button>
                </li>
            </ul>
        </div>

        <div class="tab-content">

            {{-- ============================================================ --}}
            {{-- PANE: Rekap --}}
            {{-- ============================================================ --}}
            <div class="tab-pane fade show active" id="paneRekap">
                <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">
                                <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">Status</label>
                            <select id="rk-status" class="form-select form-select-sm">
                                <option value="">Semua Status</option>
                                <option value="draft">Draft</option>
                                <option value="divalidasi">Divalidasi</option>
                                <option value="direvisi">Direvisi</option>
                                <option value="selesai">Selesai</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="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="tblRekap" 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. Retur</th>
                                    <th>Tgl. Retur</th>
                                    <th>Fasilitas Kesehatan</th>
                                    <th class="text-center">Jml. Item</th>
                                    <th class="text-center">Total Jumlah</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- ============================================================ --}}
            {{-- PANE: Rincian --}}
            {{-- ============================================================ --}}
            <div class="tab-pane fade" id="paneRincian">
                <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="ri-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="ri-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="ri-faskes" class="form-select form-select-sm">
                                <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">Status</label>
                            <select id="ri-status" class="form-select form-select-sm">
                                <option value="">Semua Status</option>
                                <option value="draft">Draft</option>
                                <option value="divalidasi">Divalidasi</option>
                                <option value="direvisi">Direvisi</option>
                                <option value="selesai">Selesai</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="btnRiFilter">
                                <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="btnRiExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnRiPdf"><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 style="width:50px" class="text-center">Aksi</th>
                                    <th>No. Retur</th>
                                    <th>Tgl. Retur</th>
                                    <th>Fasilitas Kesehatan</th>
                                    <th>Status</th>
                                    <th>Kode</th>
                                    <th>Nama Barang</th>
                                    <th style="white-space:nowrap">No. Lot</th>
                                    <th style="white-space:nowrap">No. Serial</th>
                                    <th style="white-space:nowrap">Tgl. Exp</th>
                                    <th>Satuan</th>
                                    <th class="text-center">Jumlah</th>
                                    <th>Kondisi</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/retur-kso/rekap';
const RINCIAN_URL = BASE_URL + '/laporan/retur-kso/rincian';
const SUMMARY_URL = BASE_URL + '/laporan/retur-kso/summary';
const EXP_REKAP   = BASE_URL + '/laporan/retur-kso/rekap/export';
const EXP_RINCIAN = BASE_URL + '/laporan/retur-kso/rincian/export';

function fmtNum(n) { return parseFloat(n || 0).toLocaleString('id-ID'); }

function getRkFilters() { return { dari: $('#rk-dari').val(), sampai: $('#rk-sampai').val(), faskes: $('#rk-faskes').val(), status: $('#rk-status').val() }; }
function getRiFilters() { return { dari: $('#ri-dari').val(), sampai: $('#ri-sampai').val(), faskes: $('#ri-faskes').val(), status: $('#ri-status').val() }; }

function loadSummary() {
    fetch(SUMMARY_URL + '?' + new URLSearchParams(getRkFilters()))
        .then(r => r.json())
        .then(d => {
            $('#sum-dok').text(fmtNum(d.total_dokumen));
            $('#sum-item').text(fmtNum(d.total_item));
            $('#sum-qty').text(fmtNum(d.total_qty));
            $('#sum-baik').text(fmtNum(d.qty_baik));
        });
}

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 () {
    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 ──
    const tblRk = $('#tblRekap').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}/retur-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' },
            { data: 'tanggal_retur' },
            { data: 'nama_faskes' },
            { data: 'jumlah_item',  className: 'text-center', render: v => fmtNum(v) },
            { data: 'total_qty',    className: 'text-center', render: v => fmtNum(v) },
            { data: 'status_badge', orderable: false },
        ],
        order: [[2, 'desc']],
        language: dtLang,
        drawCallback: function() { applyStickyColumns('tblRekap', 4); },
        initComplete: function() { applyStickyColumns('tblRekap', 4); },
    });

    // ── Rincian ──
    const tblRi = $('#tblRincian').DataTable({
        processing: true, serverSide: true, scrollX: true,
        ajax: { url: RINCIAN_URL, data: function(d) { Object.assign(d, getRiFilters()); } },
        columns: [
            { data: null, orderable: false, className: 'text-center',
              render: (_, __, row) => `<a href="${BASE_URL}/retur-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' },
            { data: 'tanggal_retur' },
            { data: 'nama_faskes' },
            { data: 'status_badge',        orderable: false },
            { data: 'kode_barang' },
            { data: 'nama_barang' },
            { data: 'no_lot' },
            { data: 'no_serial' },
            { data: 'tanggal_kedaluwarsa', className: 'text-center' },
            { data: 'satuan',              className: 'text-center' },
            { data: 'qty',                 className: 'text-center', render: v => fmtNum(v) },
            { data: 'kondisi_badge',       orderable: false },
        ],
        order: [[2, 'desc']],
        language: dtLang,
        drawCallback: function() { applyStickyColumns('tblRincian', 4); },
        initComplete: function() { applyStickyColumns('tblRincian', 4); },
    });

    // ── Filter buttons ──
    $('#btnRkFilter').on('click', function () { loadSummary(); tblRk.ajax.reload(); });
    $('#btnRiFilter').on('click', function () { tblRi.ajax.reload(); });

    // ── Export ──
    $('#btnRkExcel').on('click', function(e) { e.preventDefault(); window.location.href = EXP_REKAP   + '?' + new URLSearchParams(Object.assign({}, getRkFilters(), { format: 'xlsx' })); });
    $('#btnRkPdf').on('click',   function(e) { e.preventDefault(); window.location.href = EXP_REKAP   + '?' + new URLSearchParams(Object.assign({}, getRkFilters(), { format: 'pdf' })); });
    $('#btnRiExcel').on('click', function(e) { e.preventDefault(); window.location.href = EXP_RINCIAN + '?' + new URLSearchParams(Object.assign({}, getRiFilters(), { format: 'xlsx' })); });
    $('#btnRiPdf').on('click',   function(e) { e.preventDefault(); window.location.href = EXP_RINCIAN + '?' + new URLSearchParams(Object.assign({}, getRiFilters(), { format: 'pdf' })); });

    // ── Tab switch ──
    $('#tabReturKso button[data-bs-toggle="tab"]').on('shown.bs.tab', function () {
        const target = $(this).data('bs-target');
        if (target === '#paneRincian') { tblRi.columns.adjust(); applyStickyColumns('tblRincian', 4); }
    });

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