@extends('layouts.master')

@section('title', 'Monitoring Stok ED')

@section('styles')
<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: #fde8e8; color: #c0392b; }
    .grn-summary-card.c2 .icon-wrap { background: #fef3c7; color: #d97706; }
    .grn-summary-card.c3 .icon-wrap { background: #dbeafe; color: #1d6fdf; }
    .grn-summary-card.c4 .icon-wrap { background: #d1fae5; color: #059669; }
    .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; }
</style>
@endsection

{{-- Modal Top Faskes --}}
<div class="modal fade" id="modalTopFaskes" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-semibold">Top 5 Faskes Penjualan — <span id="mfNamaBarang"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small mb-2">Data penjualan KSO &amp; Langsung dalam 1 tahun terakhir</p>
                <div id="mfLoading" class="text-center py-3"><div class="spinner-border spinner-border-sm text-primary"></div></div>
                <table class="table table-bordered table-sm mb-0" id="mfTable" style="display:none">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center" style="width:40px">No.</th>
                            <th>Nama Faskes</th>
                            <th class="text-center" style="width:160px">Qty Penjualan</th>
                        </tr>
                    </thead>
                    <tbody id="mfBody"></tbody>
                </table>
                <div id="mfEmpty" class="text-center text-muted py-3" style="display:none">Tidak ada data penjualan dalam 1 tahun terakhir.</div>
            </div>
        </div>
    </div>
</div>

@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">Monitoring Stok ED</p>
            <span class="fs-13 text-muted">Laporan &rarr; Monitoring Stok ED</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-error-circle"></i></div>
                        <div><div class="label">Sudah ED</div><div class="value" id="sum-expired">—</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-time-five"></i></div>
                        <div><div class="label">ED 0–1 Bulan</div><div class="value" id="sum-1m">—</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-time"></i></div>
                        <div><div class="label">ED 1–3 Bulan</div><div class="value" id="sum-3m">—</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">ED 3–6 Bulan</div><div class="value" id="sum-6m">—</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card custom-card">
        {{-- Filters --}}
        <div class="card-body border-bottom pb-3 pt-3">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label mb-1 small fw-semibold">Gudang</label>
                    <select id="flt-gudang" class="form-select form-select-sm">
                        <option value="">Semua Gudang</option>
                        @foreach($gudangList as $g)
                        <option value="{{ $g->id }}">{{ $g->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label mb-1 small fw-semibold">Nama Barang</label>
                    <select id="flt-barang" 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="flt-merek" class="form-select form-select-sm" style="width:100%">
                        <option value="">Semua Merek</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-1 small fw-semibold">Durasi ED</label>
                    <select id="flt-durasi" class="form-select form-select-sm">
                        <option value="semua">Semua</option>
                        <option value="sudah_ed">Sudah ED</option>
                        <option value="1">1 bulan</option>
                        <option value="2">2 bulan</option>
                        <option value="3">3 bulan</option>
                        <option value="4">4 bulan</option>
                        <option value="5">5 bulan</option>
                        <option value="6">6 bulan</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="btnFilter">
                        <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="btnExcelDl"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                            <li><a class="dropdown-item" href="#" id="btnPdfDl"><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="tblMonitoringEd" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                    <thead class="table-light">
                        <tr>
                            <th style="width:30px;white-space:nowrap" class="text-center">No.</th>
                            <th style="white-space:nowrap">Gudang</th>
                            <th style="white-space:nowrap">Kode Barang</th>
                            <th style="white-space:nowrap">Nama Barang</th>
                            <th style="white-space:nowrap">Merek</th>
                            <th style="white-space:nowrap">Ukuran</th>
                            <th style="white-space:nowrap">No. LOT</th>
                            <th style="white-space:nowrap">No. Serial</th>
                            <th style="white-space:nowrap">Tgl. ED</th>
                            <th class="text-center" style="white-space:nowrap">Masa ED</th>
                            <th class="text-center" style="white-space:nowrap">Qty</th>
                            <th style="white-space:nowrap">Satuan</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const BASE_URL = '{{ url('') }}';
const DATA_URL = BASE_URL + '/laporan/monitoring-ed/data';

function getFilters() {
    return {
        gudang:      $('#flt-gudang').val(),
        nama_barang: $('#flt-barang').val(),
        merek:       $('#flt-merek').val(),
        durasi:      $('#flt-durasi').val(),
    };
}

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 renderMasaEd(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)} bln</span>`;
    if (val === 0) return `<span class="badge bg-danger">Bulan ini</span>`;
    if (val <= 1)  return `<span class="badge bg-warning text-dark">${val} bln</span>`;
    if (val <= 3)  return `<span class="badge bg-info">${val} bln</span>`;
    return `<span class="badge bg-success">${val} bln</span>`;
}

function loadSummary() {
    const base = { gudang: $('#flt-gudang').val(), nama_barang: $('#flt-barang').val(), merek: $('#flt-merek').val() };
    const countUrl = (durasi) => DATA_URL + '?' + new URLSearchParams(Object.assign({}, base, { durasi, start: 0, length: 1, draw: 1 }));

    fetch(countUrl('sudah_ed')).then(r => r.json()).then(d => { $('#sum-expired').text(d.recordsTotal.toLocaleString('id-ID') + ' item'); });
    fetch(countUrl('1')).then(r => r.json()).then(d => { $('#sum-1m').text(d.recordsTotal.toLocaleString('id-ID') + ' item'); });
    fetch(countUrl('3')).then(r => r.json()).then(d => { $('#sum-3m').text(d.recordsTotal.toLocaleString('id-ID') + ' item'); });
    fetch(countUrl('6')).then(r => r.json()).then(d => { $('#sum-6m').text(d.recordsTotal.toLocaleString('id-ID') + ' item'); });
}

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

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

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

    const tbl = $('#tblMonitoringEd').DataTable({
        processing: true, serverSide: true, scrollX: true,
        ajax: {
            url: DATA_URL,
            data: function(d) { Object.assign(d, getFilters()); },
        },
        columns: [
            { data: null, orderable: false, className: 'text-center',
              render: function(_, __, ___, meta) { return meta.row + meta.settings._iDisplayStart + 1; } },
            { data: 'nama_gudang' },
            { data: 'kode_barang' },
            { data: null, render: function(_, __, row) {
                return `${row.nama_barang} <a href="#" class="btn-top-faskes ms-1 text-primary" data-id="${row.barang_id}" data-nama="${row.nama_barang}" title="Lihat top faskes penjualan"><i class="bx bx-show-alt"></i></a>`;
            }},
            { data: 'nama_merek' },
            { data: 'ukuran',    className: 'text-center' },
            { data: 'no_lot' },
            { data: 'no_serial' },
            { data: 'tanggal_kedaluwarsa', className: 'text-center' },
            { data: 'masa_ed', className: 'text-center', render: renderMasaEd },
            { data: 'qty',     className: 'text-center' },
            { data: 'satuan',  className: 'text-center' },
        ],
        order: [[8, 'asc']],
        language: dtLang,
        pageLength: 25,
        drawCallback: function() { applyStickyColumns('tblMonitoringEd', 4); },
        initComplete: function() { applyStickyColumns('tblMonitoringEd', 4); },
    });

    // Top faskes modal
    const TOP_FASKES_URL = BASE_URL + '/laporan/monitoring-ed/top-faskes';
    $('#tblMonitoringEd').on('click', '.btn-top-faskes', function(e) {
        e.preventDefault();
        const barangId   = $(this).data('id');
        const namaBarang = $(this).data('nama');
        $('#mfNamaBarang').text(namaBarang);
        $('#mfLoading').show();
        $('#mfTable').hide();
        $('#mfEmpty').hide();
        $('#modalTopFaskes').modal('show');
        fetch(TOP_FASKES_URL + '?barang_id=' + barangId, { headers: { 'Accept': 'application/json' } })
            .then(r => r.json())
            .then(function(rows) {
                $('#mfLoading').hide();
                if (!rows.length) { $('#mfEmpty').show(); return; }
                const html = rows.map((r, i) =>
                    `<tr><td class="text-center">${i+1}</td><td>${r.nama_faskes || '—'}</td><td class="text-center">${Number(r.qty).toLocaleString('id-ID')} ${r.satuan || ''}</td></tr>`
                ).join('');
                $('#mfBody').html(html);
                $('#mfTable').show();
            })
            .catch(function() { $('#mfLoading').hide(); $('#mfEmpty').show(); });
    });

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

    function exportUrl(format) {
        return BASE_URL + '/laporan/monitoring-ed/export?' + new URLSearchParams(Object.assign({}, getFilters(), { format }));
    }
    $('#btnExcelDl').on('click', function(e) { e.preventDefault(); window.location.href = exportUrl('xlsx'); });
    $('#btnPdfDl').on('click',   function(e) { e.preventDefault(); window.location.href = exportUrl('pdf'); });

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