@extends('layouts.master')

@section('title', 'Stok Barang')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    #tblRekap th, #tblRekap td,
    #tblRincian th, #tblRincian td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblRekap thead th, #tblRincian thead th { background: #f8f9fa; }
    #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; }
    .select2-container .select2-selection--single { height: 31px !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 29px !important; font-size: .875rem; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 29px !important; }
    .select2-dropdown { font-size: .875rem; }
    .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">Stok Barang</p>
            <span class="fs-13 text-muted">Gudang &rarr; Stok Barang</span>
        </div>
    </div>

    <div class="card custom-card">
        {{-- Tabs --}}
        <div class="card-body pb-0 pt-3">
            <ul class="nav nav-tabs" id="tabStok" 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 Stok
                    </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 Stok
                    </button>
                </li>
            </ul>
        </div>

        <div class="tab-content">
            {{-- TAB 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-3">
                            <label class="form-label mb-1 small fw-semibold">Gudang</label>
                            <select id="filterGudang" class="form-select form-select-sm" style="width:100%;">
                                <option value="">Semua Gudang</option>
                                <option value="__kecuali_pusat__">Semua kecuali GUDANG PUSAT</option>
                                @foreach($gudangList as $g)
                                    <option value="{{ $g->id }}">{{ strtoupper($g->nama) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Merek</label>
                            <select id="filterMerek" class="form-select form-select-sm" style="width:100%;">
                                <option value="">Semua Merek</option>
                                @foreach($merekList as $m)
                                    <option value="{{ $m->id }}">{{ $m->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Ukuran</label>
                            <select id="filterUkuran" class="form-select form-select-sm" style="width:100%;">
                                <option value="">Semua Ukuran</option>
                                @foreach($ukuranList as $u)
                                    <option value="{{ $u }}">{{ $u }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Nama Barang</label>
                            <input type="text" id="filterNama" class="form-control form-control-sm" placeholder="Cari nama...">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Per Tanggal</label>
                            <input type="text" id="filterTanggal" class="form-control form-control-sm" placeholder="dd-mm-yyyy">
                        </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> Cari
                            </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="btnExportExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                                    <li><a class="dropdown-item" href="#" id="btnExportPdf"><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 mt-2">
                        <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:45px">No.</th>
                                    <th class="text-center" style="width:50px">LOT</th>
                                    <th>Nama Barang</th>
                                    <th class="text-center">Stok Baik</th>
                                    <th class="text-center">Stok Rusak</th>
                                    <th>Merek</th>
                                    <th>Ukuran</th>
                                    <th>Manufaktur</th>
                                    <th>Gudang</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- TAB 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-3">
                            <label class="form-label mb-1 small fw-semibold">Gudang</label>
                            <select id="rincianGudang" class="form-select form-select-sm" style="width:100%;">
                                <option value="">Semua Gudang</option>
                                <option value="__kecuali_pusat__">Semua kecuali GUDANG PUSAT</option>
                                @foreach($gudangList as $g)
                                    <option value="{{ $g->id }}">{{ strtoupper($g->nama) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Merek</label>
                            <select id="rincianMerek" class="form-select form-select-sm" style="width:100%;">
                                <option value="">Semua Merek</option>
                                @foreach($merekList as $m)
                                    <option value="{{ $m->id }}">{{ $m->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Ukuran</label>
                            <select id="rincianUkuran" class="form-select form-select-sm" style="width:100%;">
                                <option value="">Semua Ukuran</option>
                                @foreach($ukuranList as $u)
                                    <option value="{{ $u }}">{{ $u }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Nama Barang</label>
                            <input type="text" id="rincianNama" class="form-control form-control-sm" placeholder="Cari nama...">
                        </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> Cari
                            </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 mt-2">
                        <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:45px">No.</th>
                                    <th>Nama Barang</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-center">Kondisi</th>
                                    <th>Merek</th>
                                    <th>Ukuran</th>
                                    <th>Manufaktur</th>
                                    <th>Gudang</th>
                                    <th>No. LOT</th>
                                    <th>No. Serial</th>
                                    <th>Tgl. ED</th>
                                    <th class="text-center">Masa ED</th>
                                    <th>Pengiriman Terakhir</th>
                                    <th>Tgl. Pembelian</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

{{-- Modal Detail LOT --}}
<div class="modal fade" id="modalLot" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <div>
                    <h6 class="modal-title fw-semibold mb-0" id="modalLotTitle"></h6>
                    <small class="text-muted" id="modalLotSub"></small>
                </div>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0" style="font-size:.82rem;">
                        <thead class="table-light">
                            <tr>
                                <th style="width:1%">#</th>
                                <th>No. LOT</th>
                                <th>No. Serial</th>
                                <th>Tgl. Kedaluwarsa</th>
                                <th class="text-center">Kondisi</th>
                                <th class="text-center">Qty</th>
                            </tr>
                        </thead>
                        <tbody id="modalLotBody"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_URL = "{{ url('/') }}";
let tblRekap, tblRincian;

$(function () {
    flatpickr('#filterTanggal', { dateFormat: 'Y-m-d', altInput: true, altFormat: 'd-m-Y', allowInput: true });

    $('#filterGudang, #rincianGudang').select2({ placeholder: 'Semua Gudang', allowClear: true, width: '100%' });
    $('#filterMerek, #rincianMerek').select2({ placeholder: 'Semua Merek', allowClear: true, width: '100%' });
    $('#filterUkuran, #rincianUkuran').select2({ placeholder: 'Semua Ukuran', allowClear: true, width: '100%' });

    // ── REKAP ──────────────────────────────────────────────────────
    tblRekap = $('#tblRekap').DataTable({
        processing: true,
        serverSide: true,
        dom: '<"d-flex align-items-center mb-2"l>rt<"d-flex justify-content-between mt-2"ip>',
        ajax: {
            url: BASE_URL + '/gudang/stok/rekap',
            data: function (d) {
                const gv = $('#filterGudang').val();
                if (gv === '__kecuali_pusat__') { d.gudang = ''; d.kecuali_pusat = 1; }
                else { d.gudang = gv; d.kecuali_pusat = ''; }
                d.merek       = $('#filterMerek').val();
                d.ukuran      = $('#filterUkuran').val();
                d.nama        = $('#filterNama').val();
                d.per_tanggal = $('#filterTanggal').val();
            }
        },
        columns: [
            {
                data: null, orderable: false, searchable: false,
                render: function (_, __, ___, meta) { return meta.row + meta.settings._iDisplayStart + 1; }
            },
            {
                data: null, orderable: false, searchable: false,
                render: function (_, __, row) {
                    return `<button class="btn btn-primary btn-lihat-lot" style="width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:6px;"
                        data-barang-id="${row.barang_id}" data-gudang-id="${row.gudang_id}"
                        data-barang="${row.nama_barang}" data-gudang="${row.nama_gudang}">
                        <i class="bx bx-layer fs-16"></i>
                    </button>`;
                }
            },
            {
                data: 'nama_barang',
                render: function (val, _, row) {
                    return `<div class="fw-semibold">${val}</div><small class="text-muted">${row.kode_barang}</small>`;
                }
            },
            {
                data: 'qty_baik', className: 'text-center',
                render: function (val, _, row) {
                    return `<span class="fw-semibold text-success">${val}</span> <small class="text-muted">${row.satuan}</small>`;
                }
            },
            {
                data: 'qty_rusak', className: 'text-center',
                render: function (val, _, row) {
                    return val > 0
                        ? `<span class="fw-semibold text-danger">${val}</span> <small class="text-muted">${row.satuan}</small>`
                        : `<span class="text-muted">—</span>`;
                }
            },
            { data: 'merek' },
            { data: 'ukuran' },
            { data: 'manufaktur' },
            { data: 'nama_gudang' },
        ],
        order: [[2, 'asc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
    });

    $('#btnFilter').on('click', () => tblRekap.draw());
    $('#filterGudang, #filterUkuran').on('change', () => tblRekap.draw());

    $('#filterMerek').on('change', function () {
        const merekId = $(this).val();
        $.get(BASE_URL + '/gudang/stok/ukuran-by-merek', { merek_id: merekId }, function (data) {
            const current = $('#filterUkuran').val();
            let opts = '<option value="">Semua Ukuran</option>';
            data.forEach(u => { opts += `<option value="${u}"${u === current ? ' selected' : ''}>${u}</option>`; });
            $('#filterUkuran').html(opts);
            if (current && !data.includes(current)) $('#filterUkuran').val('').trigger('change.select2');
        });
        tblRekap.draw();
    });

    function buildRekapExportUrl(format) {
        const params = new URLSearchParams();
        params.set('format', format);
        const g = $('#filterGudang').val();
        const m = $('#filterMerek').val();
        const u = $('#filterUkuran').val();
        const t = $('#filterTanggal').val();
        if (g === '__kecuali_pusat__') params.set('kecuali_pusat', 1);
        else if (g) params.set('gudang', g);
        if (m) params.set('merek', m);
        if (u) params.set('ukuran', u);
        if (t) params.set('per_tanggal', t);
        return BASE_URL + '/gudang/stok/export?' + params.toString();
    }
    $('#btnExportExcel').on('click', function(e) { e.preventDefault(); window.location.href = buildRekapExportUrl('excel'); });
    $('#btnExportPdf').on('click',   function(e) { e.preventDefault(); window.location.href = buildRekapExportUrl('pdf'); });

    // ── RINCIAN ────────────────────────────────────────────────────
    tblRincian = $('#tblRincian').DataTable({
        processing: true,
        serverSide: true,
        dom: '<"d-flex align-items-center mb-2"l>rt<"d-flex justify-content-between mt-2"ip>',
        ajax: {
            url: BASE_URL + '/gudang/stok/detail',
            data: function (d) {
                const gv = $('#rincianGudang').val();
                if (gv === '__kecuali_pusat__') { d.gudang = ''; d.kecuali_pusat = 1; }
                else { d.gudang = gv; d.kecuali_pusat = ''; }
                d.merek  = $('#rincianMerek').val();
                d.ukuran = $('#rincianUkuran').val();
                d.nama   = $('#rincianNama').val();
            }
        },
        columns: [
            {
                data: null, orderable: false, searchable: false,
                render: function (_, __, ___, meta) { return meta.row + meta.settings._iDisplayStart + 1; }
            },
            {
                data: 'nama_barang',
                render: function (val, _, row) {
                    return `<div class="fw-semibold">${val}</div><small class="text-muted">${row.kode_barang}</small>`;
                }
            },
            { data: 'qty', className: 'text-center fw-semibold' },
            {
                data: 'kondisi', className: 'text-center',
                render: function (val) {
                    return val === 'rusak'
                        ? '<span class="badge bg-danger">Rusak</span>'
                        : '<span class="badge bg-success">Baik</span>';
                }
            },
            { data: 'merek' },
            { data: 'ukuran' },
            { data: 'manufaktur' },
            { data: 'nama_gudang' },
            { data: 'no_lot' },
            { data: 'no_serial' },
            { data: 'tanggal_kedaluwarsa' },
            {
                data: 'masa_ed', className: 'text-center',
                render: function (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 <= 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>`;
                }
            },
            { data: 'pengiriman_terakhir', className: 'text-center' },
            { data: 'pembelian_terakhir', className: 'text-center' },
        ],
        order: [[1, 'asc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
    });

    $('#btnRincianFilter').on('click', () => tblRincian.draw());
    $('#rincianGudang, #rincianUkuran').on('change', () => tblRincian.draw());

    $('#rincianMerek').on('change', function () {
        const merekId = $(this).val();
        $.get(BASE_URL + '/gudang/stok/ukuran-by-merek', { merek_id: merekId }, function (data) {
            const current = $('#rincianUkuran').val();
            let opts = '<option value="">Semua Ukuran</option>';
            data.forEach(u => { opts += `<option value="${u}"${u === current ? ' selected' : ''}>${u}</option>`; });
            $('#rincianUkuran').html(opts);
            if (current && !data.includes(current)) $('#rincianUkuran').val('').trigger('change.select2');
        });
        tblRincian.draw();
    });

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

    function buildRincianExportUrl(format) {
        const params = new URLSearchParams();
        params.set('format', format);
        const g = $('#rincianGudang').val();
        const m = $('#rincianMerek').val();
        const u = $('#rincianUkuran').val();
        if (g === '__kecuali_pusat__') params.set('kecuali_pusat', 1);
        else if (g) params.set('gudang', g);
        if (m) params.set('merek', m);
        if (u) params.set('ukuran', u);
        return BASE_URL + '/gudang/stok/export-rincian?' + params.toString();
    }
    $('#btnRincianExcel').on('click', function(e) { e.preventDefault(); window.location.href = buildRincianExportUrl('excel'); });
    $('#btnRincianPdf').on('click',   function(e) { e.preventDefault(); window.location.href = buildRincianExportUrl('pdf'); });

    // ── Modal LOT ──────────────────────────────────────────────────
    $(document).on('click', '.btn-lihat-lot', function () {
        const barangId = $(this).data('barang-id');
        const gudangId = $(this).data('gudang-id');
        const barang   = $(this).data('barang');
        const gudang   = $(this).data('gudang');

        $('#modalLotTitle').text(barang);
        $('#modalLotSub').text(gudang);
        $('#modalLotBody').html('<tr><td colspan="6" class="text-center py-3"><span class="spinner-border spinner-border-sm me-1"></span>Memuat...</td></tr>');
        $('#modalLot').modal('show');

        $.get(BASE_URL + '/gudang/stok/lot', { barang_id: barangId, gudang_id: gudangId }, function (data) {
            if (!data.length) {
                $('#modalLotBody').html('<tr><td colspan="6" class="text-center text-muted">Tidak ada data LOT.</td></tr>');
                return;
            }
            let totalBaik = 0, totalRusak = 0, rows = '';
            data.forEach(function (r, i) {
                const kondisiBadge = r.kondisi === 'rusak'
                    ? '<span class="badge bg-danger">Rusak</span>'
                    : '<span class="badge bg-success">Baik</span>';
                if (r.kondisi === 'rusak') totalRusak += r.qty; else totalBaik += r.qty;
                rows += `<tr>
                    <td>${i + 1}</td>
                    <td>${r.no_lot}</td>
                    <td>${r.no_serial}</td>
                    <td>${r.tanggal_kedaluwarsa}</td>
                    <td class="text-center">${kondisiBadge}</td>
                    <td class="text-center fw-semibold">${r.qty} <small class="text-muted fw-normal">${r.satuan}</small></td>
                </tr>`;
            });
            rows += `<tr class="table-light">
                <td colspan="5" class="text-end fw-semibold">Total Baik / Rusak</td>
                <td class="text-center fw-semibold">
                    <span class="text-success">${totalBaik}</span>${totalRusak > 0 ? ' / <span class="text-danger">'+totalRusak+'</span>' : ''}
                    <small class="text-muted fw-normal">${data[0].satuan}</small>
                </td>
            </tr>`;
            $('#modalLotBody').html(rows);
        });
    });
});
</script>
@endsection