@extends('layouts.master')

@section('title', 'Monitoring Stok Opname (SO)')

@section('styles')
<style>
    /* Summary cards */
    .mso-card { border-radius: 8px; padding: 10px 14px; display:flex; align-items:center; gap:10px; }
    .mso-card .ic { width:36px; height:36px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
    .mso-card .lbl { font-size:.7rem; color:#888; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
    .mso-card .val { font-size:1.1rem; font-weight:700; line-height:1.2; color:#222; }
    .mso-card.c1 .ic { background:#ede9fe; color:#7c3aed; }
    .mso-card.c2 .ic { background:#d1fae5; color:#059669; }
    .mso-card.c3 .ic { background:#fee2e2; color:#dc2626; }
    .mso-card.c4 .ic { background:#fef3c7; color:#d97706; }

    /* Main table */
    #msoWrap { overflow-x: auto; }
    #msoWrap::-webkit-scrollbar { height: 8px; }
    #msoWrap::-webkit-scrollbar-track { background: rgba(132,90,223,.1); border-radius:4px; }
    #msoWrap::-webkit-scrollbar-thumb { background: rgba(132,90,223,.5); border-radius:4px; }
    #tblMso { border-collapse: collapse; width: 100%; white-space: nowrap; font-size:.84rem; }
    #tblMso thead th { background:#f8f9fa; font-weight:600; padding:7px 10px; border:1px solid #e9ecef; text-align:center; position:sticky; top:0; z-index:3; }
    #tblMso thead th.th-gudang { text-align:left; position:sticky; left:0; z-index:5; min-width:180px; }
    #tblMso thead th.th-faskes { text-align:left; position:sticky; left:180px; z-index:5; box-shadow: 2px 0 4px rgba(0,0,0,.06); min-width:160px; }
    #tblMso tbody td { padding:6px 10px; border:1px solid #e9ecef; vertical-align:middle; }
    #tblMso tbody td.td-gudang { position:sticky; left:0; z-index:2; background:#fff; width:180px; min-width:180px; font-weight:600; white-space:normal; word-break:break-word; }
    #tblMso tbody td.td-faskes { position:sticky; left:180px; z-index:2; background:#fff; width:160px; min-width:160px; box-shadow:2px 0 4px rgba(0,0,0,.06); color:#6c757d; font-size:.8rem; white-space:normal; word-break:break-word; }
    #tblMso tbody tr.row-pusat  td.td-gudang { background:#f3f0ff; }
    #tblMso tbody tr.row-faskes td.td-gudang { background:#f0f9ff; }
    #tblMso tbody tr.row-pusat  td.td-faskes { background:#f3f0ff; }
    #tblMso tbody tr.row-faskes td.td-faskes { background:#f0f9ff; }
    #tblMso tbody tr:hover td.td-gudang { background:#f8f5ff !important; }
    #tblMso tbody tr:hover td.td-faskes { background:#f8f5ff !important; }
    #tblMso tbody tr:hover td { background:#f8f5ff !important; }
    #tblMso tfoot td { font-weight:700; background:#f8f9fa; border:1px solid #dee2e6; padding:6px 10px; text-align:center; border-top:2px solid #dee2e6; }
    #tblMso tfoot td.td-label { text-align:right; }

    /* Cells */
    .cell-ok     { text-align:center; font-weight:700; }
    .cell-zero   { text-align:center; color:#adb5bd; }
    .cell-future { text-align:center; color:#dee2e6; }

    /* Separator between pusat and faskes groups */
    tr.row-separator td { padding:0; height:6px; background:#f0f0f0; border:none; }

    /* Loading */
    #msoLoading { display:none; }
    #msoEmpty   { display:none; }
    #msoContent { display:none; }

    /* Legend dot */
    .legend-dot { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; vertical-align:middle; }
</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">Monitoring Stok Opname (SO)</p>
            <span class="fs-13 text-muted">Laporan &rarr; Monitoring SO</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="mso-card c1">
                        <div class="ic"><i class="bx bx-clipboard"></i></div>
                        <div><div class="lbl">Total SO Tahun Ini</div><div class="val" 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="mso-card c4">
                        <div class="ic"><i class="bx bx-store"></i></div>
                        <div><div class="lbl">Total Gudang</div><div class="val" id="sumGudang">—</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="mso-card c2">
                        <div class="ic"><i class="bx bx-check-circle"></i></div>
                        <div><div class="lbl">Sudah SO Bulan Ini</div><div class="val" id="sumSudah">—</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="mso-card c3">
                        <div class="ic"><i class="bx bx-error-circle"></i></div>
                        <div><div class="lbl">Belum SO Bulan Ini</div><div class="val" id="sumBelum">—</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-2">
                    <label class="form-label mb-1 small fw-semibold">Tahun</label>
                    <select id="fltTahun" class="form-select form-select-sm">
                        @foreach($tahunList as $t)
                        <option value="{{ $t }}" {{ $t == now()->year ? 'selected' : '' }}>{{ $t }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-auto d-flex gap-2 align-items-end">
                    <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnTampilkan">
                        <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">
                            <li><a class="dropdown-item" href="#" id="btnExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                            <li><a class="dropdown-item" href="#" id="btnPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-auto ms-auto d-flex align-items-end gap-3 small text-muted">
                    <span><span class="legend-dot" style="background:#d1fae5;border:1px solid #6ee7b7"></span>SO selesai</span>
                    <span><span class="legend-dot" style="background:#fee2e2;border:1px solid #fca5a5"></span>Belum SO</span>
                    <span><span class="legend-dot" style="background:#f3f4f6;border:1px solid #d1d5db"></span>Belum berlalu</span>
                </div>
            </div>
        </div>

        <div class="card-body">
            {{-- Loading --}}
            <div id="msoLoading" class="text-center py-5">
                <div class="spinner-border text-primary" role="status"></div>
                <div class="mt-2 text-muted small">Memuat data...</div>
            </div>
            {{-- Empty --}}
            <div id="msoEmpty" class="text-center py-5">
                <i class="bx bx-data fs-1 text-muted opacity-50"></i>
                <div class="mt-2 text-muted">Tekan <strong>Tampilkan</strong> untuk memuat data.</div>
            </div>
            {{-- Table --}}
            <div id="msoContent">
                <div id="msoWrap">
                    <table id="tblMso">
                        <thead>
                            <tr>
                                <th class="th-gudang" style="min-width:160px">Gudang</th>
                                <th class="th-faskes" style="min-width:140px">Faskes</th>
                                <th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th>
                                <th>Mei</th><th>Jun</th><th>Jul</th><th>Agu</th>
                                <th>Sep</th><th>Okt</th><th>Nov</th><th>Des</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody id="msoTbody"></tbody>
                        <tfoot id="msoTfoot"></tfoot>
                    </table>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    * Hanya menampilkan SO berstatus <strong>Selesai</strong>.
                    Gudang diurutkan: Gudang Pusat teratas, kemudian Gudang Faskes.
                </p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const BASE_URL = '{{ url('') }}';
let msoData = null;

function nowMonth() { return {{ (int) now()->format('n') }}; }
function nowYear()  { return {{ (int) now()->format('Y') }}; }

function cellHtml(val, isPast) {
    if (!isPast) return `<td class="cell-future">·</td>`;
    if (val === 0) return `<td class="cell-zero">0</td>`;
    const bg = val === 1
        ? 'rgba(52,211,153,.25)'
        : val >= 3 ? 'rgba(5,150,105,.35)' : 'rgba(52,211,153,.4)';
    return `<td class="cell-ok" style="background:${bg}">${val}</td>`;
}

function buildMsoHtml(data) {
    if (!data.length) return '';

    let html = '';
    let prevTipe = null;
    let footTotals = Array(12).fill(0);
    let footGrand  = 0;

    data.forEach(r => {
        // Separator row between pusat and faskes groups
        if (prevTipe !== null && prevTipe !== r.tipe) {
            html += `<tr class="row-separator"><td colspan="15"></td></tr>`;
        }
        prevTipe = r.tipe;

        const rowCls = r.tipe === 'pusat' ? 'row-pusat' : 'row-faskes';
        const faskesText = r.tipe === 'faskes' ? r.nama_faskes : '<span class="text-muted">—</span>';

        html += `<tr class="${rowCls}">`;
        html += `<td class="td-gudang">${r.nama_gudang}</td>`;
        html += `<td class="td-faskes">${faskesText}</td>`;

        for (let m = 1; m <= 12; m++) {
            const val    = r['m' + m] || 0;
            const isPast = r['m' + m + '_past'];
            footTotals[m - 1] += val;
            html += cellHtml(val, isPast);
        }

        footGrand += r.total;
        const totalBg = r.total === 0 ? '' : 'background:rgba(52,211,153,.18);font-weight:700';
        html += `<td class="text-center" style="${totalBg}">${r.total}</td>`;
        html += '</tr>';
    });

    // Footer
    let footHtml = '<tr>';
    footHtml += `<td class="td-label" colspan="2" style="text-align:right">Grand Total</td>`;
    footTotals.forEach(t => {
        footHtml += `<td>${t || 0}</td>`;
    });
    footHtml += `<td>${footGrand}</td></tr>`;
    document.getElementById('msoTfoot').innerHTML = footHtml;

    return html;
}

function updateSummary(s) {
    document.getElementById('sumTotal').textContent  = s.total_so.toLocaleString('id-ID') + ' SO';
    document.getElementById('sumGudang').textContent = s.total_gudang + ' gudang';
    document.getElementById('sumSudah').textContent  = s.sudah_so_bulan_ini + ' gudang';
    document.getElementById('sumBelum').textContent  = s.belum_so_bulan_ini + ' gudang';
    // Update label dinamis
    document.querySelector('#sumSudah').closest('.card').querySelector('.lbl').textContent = `Sudah SO ${s.bulan_ini}`;
    document.querySelector('#sumBelum').closest('.card').querySelector('.lbl').textContent = `Belum SO ${s.bulan_ini}`;
}

function loadMso() {
    const tahun = $('#fltTahun').val();
    $('#msoLoading').show();
    $('#msoEmpty, #msoContent').hide();

    $.get(BASE_URL + '/laporan/monitoring-so/data', { tahun })
        .done(function(d) {
            msoData = d.data;
            updateSummary(d.summary);
            if (!msoData.length) {
                $('#msoEmpty').show();
            } else {
                document.getElementById('msoTbody').innerHTML = buildMsoHtml(msoData);
                $('#msoContent').show();
            }
        })
        .always(function() { $('#msoLoading').hide(); });
}

function exportUrl(format) {
    return BASE_URL + '/laporan/monitoring-so/export?' + new URLSearchParams({
        tahun: $('#fltTahun').val(),
        format,
    });
}

$(function() {
    $('#btnTampilkan').on('click', loadMso);
    $('#btnExcel').on('click', function(e) { e.preventDefault(); window.location.href = exportUrl('excel'); });
    $('#btnPdf').on('click',   function(e) { e.preventDefault(); window.location.href = exportUrl('pdf'); });

    // Auto-load saat halaman pertama dibuka
    loadMso();
});
</script>
@endsection