@extends('layouts.master')

@section('title', 'Laporan Penggunaan 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.c1 .icon-wrap { background: #ede9fe; color: #7c3aed; }
    .grn-summary-card.c2 .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); }
</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 Penggunaan Barang</p>
            <span class="fs-13 text-muted">Laporan &rarr; Penggunaan 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 c1">
                        <div class="icon-wrap"><i class="bx bx-file"></i></div>
                        <div><div class="label">Total Dokumen</div><div class="value" id="sum-dokumen">—</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-cube"></i></div>
                        <div><div class="label">Total Qty Digunakan</div><div class="value" id="sum-qty">—</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">Dari</label>
                    <input type="text" id="flt-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="flt-sampai" 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">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-2">
                    <label class="form-label mb-1 small fw-semibold">Kode Barang</label>
                    <input type="text" id="flt-kode" class="form-control form-control-sm" placeholder="Cari kode...">
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-1 small fw-semibold">Nama Barang</label>
                    <input type="text" id="flt-nama" 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="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="tblPenggunaan" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center" style="width:30px">No.</th>
                            <th style="white-space:nowrap">No. Penggunaan</th>
                            <th style="white-space:nowrap">Tgl. Penggunaan</th>
                            <th style="white-space:nowrap">Tgl. Transaksi</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 class="text-center" style="white-space:nowrap">Ukuran</th>
                            <th style="white-space:nowrap">No. LOT</th>
                            <th style="white-space:nowrap">No. Serial</th>
                            <th class="text-center" style="white-space:nowrap">Tgl. ED</th>
                            <th class="text-center" style="white-space:nowrap">Qty</th>
                            <th class="text-center" style="white-space:nowrap">Kondisi</th>
                            <th class="text-center" style="white-space:nowrap">Satuan</th>
                            <th style="white-space:nowrap">Keterangan</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_URL  = '{{ url('') }}';
const DATA_URL  = BASE_URL + '/laporan/penggunaan/data';
const SUMMARY_URL = BASE_URL + '/laporan/penggunaan/summary';
const EXPORT_URL  = BASE_URL + '/laporan/penggunaan/export';

function getFilters() {
    return {
        dari:        $('#flt-dari').val(),
        sampai:      $('#flt-sampai').val(),
        gudang:      $('#flt-gudang').val(),
        kode_barang: $('#flt-kode').val(),
        nama_barang: $('#flt-nama').val(),
    };
}

function loadSummary() {
    fetch(SUMMARY_URL + '?' + new URLSearchParams(getFilters()), { headers: { 'Accept': 'application/json' } })
        .then(r => r.json())
        .then(d => {
            $('#sum-dokumen').text(Number(d.total_dokumen).toLocaleString('id-ID') + ' dok.');
            $('#sum-qty').text(Number(d.total_qty).toLocaleString('id-ID'));
        }).catch(() => {});
}

$(function () {
    flatpickr('.flatpickr', { dateFormat: 'd-m-Y' });

    const tbl = $('#tblPenggunaan').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: 'nomor' },
            { data: 'tanggal_penggunaan', className: 'text-center' },
            { data: 'tanggal_input',      className: 'text-center' },
            { data: 'nama_gudang' },
            { data: 'kode_barang' },
            { data: 'nama_barang' },
            { data: 'ukuran',    className: 'text-center' },
            { data: 'no_lot' },
            { data: 'no_serial' },
            { data: 'tgl_ed',   className: 'text-center' },
            { data: 'qty',      className: 'text-center' },
            { data: 'kondisi',  className: 'text-center', render: function(v) {
                return v === 'rusak'
                    ? '<span class="badge bg-danger">Rusak</span>'
                    : '<span class="badge bg-success">Baik</span>';
            }},
            { data: 'satuan',   className: 'text-center' },
            { data: 'keterangan' },
        ],
        order: [[2, 'desc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
        pageLength: 25,
    });

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

    function exportUrl(format) {
        return EXPORT_URL + '?' + 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