@extends('layouts.master')

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

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .pgb-summary-card { border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
    .pgb-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; }
    .pgb-summary-card .label { font-size: .7rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
    .pgb-summary-card .value { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #222; }
    .pgb-summary-card.draft   .icon-wrap { background: #f1f3f5; color: #6c757d; }
    .pgb-summary-card.selesai .icon-wrap { background: #d1fae5; color: #059669; }
    .pgb-summary-card.item    .icon-wrap { background: #dbeafe; color: #1d6fdf; }
    #tblPgb th, #tblPgb td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblPgb thead th { background: #f8f9fa; }
    #tblPgb_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblPgb_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblPgb_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; min-width: 70px; }
    #tblPgb_wrapper .dataTables_filter label,
    #tblPgb_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblPgb_wrapper .dataTables_info { font-size: .8rem; color: #6c757d; }
</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">Penggunaan Barang</p>
            <span class="fs-13 text-muted">Gudang &rarr; Penggunaan Barang</span>
        </div>
        @can('penggunaan_barang.create')
        <a href="{{ route('gudang.penggunaan-barang.create') }}" class="btn btn-primary btn-sm px-2 py-1 mt-2 mt-md-0">
            <i class="bx bx-plus me-1"></i> Buat Baru
        </a>
        @endcan
    </div>

    {{-- Summary Cards --}}
    <div class="row g-2 mb-3">
        <div class="col-6 col-md-4">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="pgb-summary-card draft">
                        <div class="icon-wrap"><i class="bx bx-file-blank"></i></div>
                        <div><div class="label">Draft</div><div class="value" id="cDraft">—</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="pgb-summary-card selesai">
                        <div class="icon-wrap"><i class="bx bx-check-circle"></i></div>
                        <div><div class="label">Tervalidasi Bulan Ini</div><div class="value" id="cSelesai">—</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="pgb-summary-card item">
                        <div class="icon-wrap"><i class="bx bx-package"></i></div>
                        <div><div class="label">Total Item Bulan Ini</div><div class="value" id="cTotalItem">—</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="card-title mb-0">Daftar Penggunaan Barang</div>
                </div>

                {{-- Filter --}}
                <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">Status</label>
                            <select id="filterStatus" class="form-select form-select-sm">
                                <option value="">Semua</option>
                                <option value="draft">Draft</option>
                                <option value="selesai">Tervalidasi</option>
                            </select>
                        </div>
                        <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">
                                <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">Dari</label>
                            <input type="text" id="filterDari" class="form-control form-control-sm flatpickr" placeholder="dd-mm-yyyy">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Sampai</label>
                            <input type="text" id="filterSampai" class="form-control form-control-sm flatpickr" placeholder="dd-mm-yyyy">
                        </div>
                        <div class="col-md-auto">
                            <button type="button" class="btn btn-primary btn-sm px-2 py-1" onclick="tbl.ajax.reload()">
                                <i class="bx bx-search me-1"></i> Cari
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm px-2 py-1 ms-1" onclick="resetFilter()">Reset</button>
                        </div>
                    </div>
                </div>

                {{-- DataTable --}}
                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tblPgb" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:90px">Aksi</th>
                                    <th>Nomor</th>
                                    <th>Tgl. Input</th>
                                    <th>Tgl. Penggunaan</th>
                                    <th>Gudang</th>
                                    <th class="text-center">Total Item</th>
                                    <th>Status</th>
                                    <th>Dibuat Oleh</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Preview PDF --}}
<div class="modal fade" id="modalPdfIndex" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:860px">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-semibold mb-0">
                    <i class="bx bx-file-blank me-1 text-primary"></i> Preview PDF Penggunaan Barang
                </h6>
                <div class="d-flex gap-2 ms-auto">
                    <a id="pdfIndexUnduh" href="#" target="_blank" class="btn btn-primary btn-sm px-2 py-1">
                        <i class="bx bx-download me-1"></i> Unduh / Print
                    </a>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
            </div>
            <div class="modal-body p-0" style="height:80vh">
                <iframe id="pdfFrameIndex" src="" width="100%" height="100%"
                        style="border:none;display:block" loading="lazy"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

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

function badgeStatus(status) {
    const map   = { draft: 'secondary', selesai: 'success', batal: 'danger' };
    const label = { draft: 'Draft', selesai: 'Tervalidasi', batal: 'Batal' };
    return `<span class="badge bg-${map[status] || 'secondary'}">${label[status] || status}</span>`;
}

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

    tbl = $('#tblPgb').DataTable({
        processing: true, serverSide: true,
        ajax: {
            url: '{{ route("gudang.penggunaan-barang.data") }}',
            data: d => {
                d.status         = $('#filterStatus').val();
                d.gudang_id      = $('#filterGudang').val();
                d.tanggal_dari   = $('#filterDari').val();
                d.tanggal_sampai = $('#filterSampai').val();
            },
        },
        order: [[2, 'desc']],
        columns: [
            {
                data: 'aksi', orderable: false, searchable: false, className: 'text-center',
                render: (id, _, row) => {
                    let btn = `<a href="${BASE_URL}/gudang/penggunaan-barang/${id}" class="btn btn-info btn-sm px-2 py-1 me-1" title="Detail"><i class="bx bx-show fs-14"></i></a>`;
                    @can('penggunaan_barang.edit')
                    if (row.status === 'draft') {
                        btn += `<a href="${BASE_URL}/gudang/penggunaan-barang/${id}/edit" class="btn btn-warning btn-sm px-2 py-1 me-1" title="Edit"><i class="bx bx-edit fs-14"></i></a>`;
                    }
                    @endcan
                    @can('penggunaan_barang.delete')
                    if (row.status === 'draft') {
                        btn += `<button class="btn btn-danger btn-sm px-2 py-1 btn-hapus" data-id="${id}" title="Hapus"><i class="bx bx-trash fs-14"></i></button>`;
                    }
                    @endcan
                    if (row.status === 'selesai') {
                        btn += `<button class="btn btn-primary btn-sm px-2 py-1 btn-cetak-pdf" data-id="${id}" title="Cetak PDF"><i class="bx bx-printer fs-14"></i></button>`;
                    }
                    return btn;
                }
            },
            { data: 'nomor', name: 'nomor' },
            { data: 'tanggal_fmt', name: 'tanggal_fmt' },
            { data: 'tanggal_penggunaan_fmt', name: 'tanggal_penggunaan_fmt', orderable: false },
            { data: 'nama_gudang', name: 'nama_gudang' },
            { data: 'total_item', name: 'total_item', className: 'text-center' },
            { data: 'status_badge', name: 'status', orderable: false },
            { data: 'dibuat_oleh.nama', name: 'dibuat_oleh.nama', defaultContent: '—' },
        ],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
    });

    $.get('{{ route("gudang.penggunaan-barang.summary") }}', d => {
        $('#cDraft').text(d.draft);
        $('#cSelesai').text(d.selesai_bulan);
        $('#cTotalItem').text(d.total_item_bulan);
    });

    $('#filterStatus, #filterGudang').on('change', () => tbl.ajax.reload());

    $(document).on('click', '.btn-cetak-pdf', function () {
        const url = BASE_URL + '/gudang/penggunaan-barang/' + $(this).data('id') + '/cetak';
        document.getElementById('pdfFrameIndex').src = url;
        document.getElementById('pdfIndexUnduh').href = url;
        $('#modalPdfIndex').modal('show');
    });
    $('#modalPdfIndex').on('hidden.bs.modal', function () {
        document.getElementById('pdfFrameIndex').src = '';
    });

    $(document).on('click', '.btn-hapus', function () {
        const id = $(this).data('id');
        if (!confirm('Hapus dokumen penggunaan ini?')) return;
        $.ajax({
            url: BASE_URL + '/gudang/penggunaan-barang/' + id,
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: () => { tbl.ajax.reload(); $.get('{{ route("gudang.penggunaan-barang.summary") }}', d => { $('#cDraft').text(d.draft); $('#cSelesai').text(d.selesai_bulan); $('#cTotalItem').text(d.total_item_bulan); }); },
            error: xhr => alert(xhr.responseJSON?.message || 'Gagal menghapus.'),
        });
    });
});

function resetFilter() {
    $('#filterStatus').val('');
    $('#filterGudang').val('');
    document.getElementById('filterDari')._flatpickr?.clear();
    document.getElementById('filterSampai')._flatpickr?.clear();
    tbl.ajax.reload();
}
</script>
@endsection