@extends('layouts.master')

@section('title', 'Laporan Penerimaan Barang')

@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.qty    .icon-wrap { background: #dbeafe; color: #1d6fdf; }
    .grn-summary-card.baik   .icon-wrap { background: #d1fae5; color: #059669; }
    .grn-summary-card.rusak  .icon-wrap { background: #fee2e2; color: #dc2626; }
    #tblRekap th, #tblRekap td,
    #tblRincian th, #tblRincian 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 { 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 { background: #f0f4ff !important; }
    #tblRekap_wrapper .dataTables_filter input,
    #tblRincian_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 { 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 { 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 { font-size: .875rem; color: #6c757d; }
    #tblRekap_wrapper .dataTables_info,
    #tblRincian_wrapper .dataTables_info { font-size: .8rem; color: #6c757d; }
    .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 Penerimaan Barang</p>
            <span class="fs-13 text-muted">Laporan &rarr; Penerimaan Barang</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 total">
                        <div class="icon-wrap"><i class="bx bx-package"></i></div>
                        <div><div class="label">Total Penerimaan</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 qty">
                        <div class="icon-wrap"><i class="bx bx-transfer-alt"></i></div>
                        <div><div class="label">Total Jml. Diterima</div><div class="value" id="sumQty">—</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 baik">
                        <div class="icon-wrap"><i class="bx bx-check-circle"></i></div>
                        <div><div class="label">Jml. Kondisi Baik</div><div class="value" id="sumBaik">—</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 rusak">
                        <div class="icon-wrap"><i class="bx bx-error-circle"></i></div>
                        <div><div class="label">Jml. Rusak / Tdk Sesuai</div><div class="value" id="sumRusak">—</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 Penerimaan
                    </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 Penerimaan
                    </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. Penerimaan</th>
                                    <th>Tgl. Terima</th>
                                    <th>No. PO</th>
                                    <th>Supplier</th>
                                    <th class="text-center">Item</th>
                                    <th class="text-center">Jml. Pesan</th>
                                    <th class="text-center">Jml. Diterima</th>
                                    <th class="text-center">Baik</th>
                                    <th class="text-center">Rusak</th>
                                    <th class="text-center">Tdk Sesuai</th>
                                    <th class="text-end">Nilai Realisasi</th>
                                    <th>Status</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-2">
                            <label class="form-label mb-1 small fw-semibold">Kode Barang</label>
                            <input type="text" id="rincianKodeBarang" class="form-control form-control-sm" placeholder="Cari kode barang...">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Serial / LOT</label>
                            <input type="text" id="rincianLotSerial" class="form-control form-control-sm" placeholder="Cari no. lot / serial...">
                        </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. Penerimaan</th>
                                    <th>Tgl. Terima</th>
                                    <th>No. PO</th>
                                    <th>Supplier</th>
                                    <th>Status</th>
                                    <th>Kode</th>
                                    <th>Nama Barang</th>
                                    <th>Jenis</th>
                                    <th>Merek</th>
                                    <th>Ukuran</th>
                                    <th>Satuan</th>
                                    <th class="text-center">Jml. Pesan</th>
                                    <th class="text-center">Jml. Diterima</th>
                                    <th>No. Lot</th>
                                    <th>No. Serial</th>
                                    <th>Tgl. Kedaluwarsa</th>
                                    <th>Kondisi</th>
                                    <th class="text-end">Harga Beli</th>
                                    <th class="text-end">Nilai 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;

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

    // Compute offsets from scrollHead cloned header (the visible one)
    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; }
    });

    // CSS sticky on tbody cells — works because scrollBody has overflow-x: scroll
    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');
            }
        });
    });

    // JS transform on scrollHead cloned cells — scrollHead has overflow:hidden so CSS sticky doesn't work
    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 getRekapFilters() {
    return {
        dari:     $('#rekapDari').val(),
        sampai:   $('#rekapSampai').val(),
        produsen: $('#rekapProdusen').val(),
    };
}

function getRincianFilters() {
    return {
        dari:        $('#rincianDari').val(),
        sampai:      $('#rincianSampai').val(),
        produsen:    $('#rincianProdusen').val(),
        kode_barang: $('#rincianKodeBarang').val(),
        lot_serial:  $('#rincianLotSerial').val(),
    };
}

function loadSummary() {
    $.get(BASE_URL + '/laporan/penerimaan/summary', getRekapFilters(), function(d) {
        $('#sumTotal').text(d.total_dokumen);
        $('#sumQty').text(d.total_qty.toLocaleString('id-ID'));
        $('#sumBaik').text(d.qty_baik.toLocaleString('id-ID'));
        $('#sumRusak').text(d.qty_tidak_baik.toLocaleString('id-ID'));
    });
}

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

    const tblRekap = $('#tblRekap').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: BASE_URL + '/laporan/penerimaan/rekap',
            data: function(d) { Object.assign(d, getRekapFilters()); },
        },
        columns: [
            {
                data: 'id', orderable: false, className: 'text-center',
                render: (id) => `<a href="${BASE_URL}/gudang/penerimaan-barang/${id}" target="_blank" class="btn btn-info btn-sm px-2 py-1"><i class="bx bx-show fs-14"></i></a>`
            },
            { data: 'nomor_penerimaan' },
            { data: 'tanggal_terima' },
            { data: 'nomor_po' },
            { data: 'nama_produsen' },
            { data: 'jumlah_item', className: 'text-center' },
            { data: 'total_qty_pesan', className: 'text-center' },
            { data: 'total_qty_diterima', className: 'text-center' },
            { data: 'qty_baik', className: 'text-center', render: (v) => v > 0 ? `<span class="text-success fw-semibold">${v}</span>` : `<span class="text-muted">${v}</span>` },
            { data: 'qty_rusak', className: 'text-center', render: (v) => v > 0 ? `<span class="text-danger fw-semibold">${v}</span>` : `<span class="text-muted">${v}</span>` },
            { data: 'qty_tidak_sesuai', className: 'text-center', render: (v) => v > 0 ? `<span class="text-warning fw-semibold">${v}</span>` : `<span class="text-muted">${v}</span>` },
            { data: 'nilai_realisasi', className: 'text-end', render: (v) => fmt(v) },
            { data: 'status_badge', orderable: false },
        ],
        order: [[2, 'desc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
        scrollX: true,
        drawCallback: function() { applyStickyColumns('tblRekap', 5); },
        initComplete: function() { applyStickyColumns('tblRekap', 5); },
    });

    const tblRincian = $('#tblRincian').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: BASE_URL + '/laporan/penerimaan/rincian',
            data: function(d) { Object.assign(d, getRincianFilters()); },
        },
        columns: [
            {
                data: 'pb_id', orderable: false, className: 'text-center',
                render: (id) => `<a href="${BASE_URL}/gudang/penerimaan-barang/${id}" target="_blank" class="btn btn-info btn-sm px-2 py-1"><i class="bx bx-show fs-14"></i></a>`
            },
            { data: 'nomor_penerimaan' },
            { data: 'tanggal_terima' },
            { data: 'nomor_po' },
            { data: 'nama_produsen' },
            { data: 'status_badge', orderable: false },
            { data: 'kode_barang' },
            { data: 'nama_barang' },
            { data: 'jenis_barang' },
            { data: 'merek_barang' },
            { data: 'ukuran' },
            { data: 'satuan' },
            { data: 'qty_pesan', className: 'text-center' },
            {
                data: 'qty_diterima', className: 'text-center',
                render: (v, _, row) => {
                    const color = v >= row.qty_pesan && v > 0 ? 'text-success fw-semibold' : v > 0 ? 'text-warning' : 'text-muted';
                    return `<span class="${color}">${v}</span>`;
                }
            },
            { data: 'no_lot' },
            { data: 'no_serial' },
            { data: 'tanggal_kedaluwarsa' },
            { data: 'kondisi_badge', orderable: false },
            { data: 'harga_beli', className: 'text-end', render: (v) => fmt(v) },
            { data: 'nilai_realisasi', className: 'text-end', render: (v) => fmt(v) },
        ],
        order: [[2, 'desc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
        scrollX: true,
        drawCallback: function() { applyStickyColumns('tblRincian', 5); },
        initComplete: function() { applyStickyColumns('tblRincian', 5); },
    });

    function rekapExportUrl(format) {
        const p = new URLSearchParams(Object.assign(getRekapFilters(), { format }));
        return BASE_URL + '/laporan/penerimaan/rekap/export?' + p.toString();
    }
    function rincianExportUrl(format) {
        const p = new URLSearchParams(Object.assign(getRincianFilters(), { format }));
        return BASE_URL + '/laporan/penerimaan/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', 5);
    });

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