@extends('layouts.master')

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

@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.2rem; font-weight: 700; line-height: 1.2; color: #222; }
    .grn-summary-card.draft   .icon-wrap { background: #f1f3f5; color: #6c757d; }
    .grn-summary-card.selesai .icon-wrap { background: #d1fae5; color: #059669; }
    .grn-summary-card.item    .icon-wrap { background: #dbeafe; color: #1d6fdf; }
    #tblGRN th, #tblGRN td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblGRN thead th { background: #f8f9fa; }
    #tblGRN_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblGRN_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblGRN_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; min-width: 70px; }
    #tblGRN_wrapper .dataTables_filter label,
    #tblGRN_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblGRN_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">Penerimaan Barang</p>
            <span class="fs-13 text-muted">Gudang &rarr; Penerimaan Barang</span>
        </div>
        @can('penerimaan.create')
        <a href="{{ route('gudang.penerimaan.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 Penerimaan
        </a>
        @endcan
    </div>

    {{-- Summary Cards --}}
    <div class="row g-2 mb-3" id="summaryRow">
        <div class="col-6 col-md-4">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-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="sumDraft">—</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="grn-summary-card selesai">
                        <div class="icon-wrap"><i class="bx bx-check-circle"></i></div>
                        <div><div class="label">Tervalidasi Hari Ini</div><div class="value" id="sumSelesai">—</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="grn-summary-card item">
                        <div class="icon-wrap"><i class="bx bx-package"></i></div>
                        <div><div class="label">Item Diterima Hari Ini</div><div class="value" id="sumItem">—</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 Penerimaan 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-3">
                            <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>
                </div>

                {{-- DataTable --}}
                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tblGRN" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:100px">Aksi</th>
                                    <th>No. Penerimaan</th>
                                    <th>No. PO</th>
                                    <th>Nama Supplier</th>
                                    <th>Tanggal Terima</th>
                                    <th class="text-center">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 Penerimaan
                </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>
const BASE_URL = "{{ url('/') }}";

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

$(function () {
    function loadSummary() {
        $.get(BASE_URL + '/gudang/penerimaan-barang/summary', function (d) {
            $('#sumDraft').text(d.draft);
            $('#sumSelesai').text(d.selesai_hari_ini);
            $('#sumItem').text(d.item_hari_ini);
        });
    }
    loadSummary();

    const tbl = $('#tblGRN').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: BASE_URL + '/gudang/penerimaan-barang/data',
            data: function (d) {
                d.status = $('#filterStatus').val();
            }
        },
        columns: [
            {
                data: 'id', orderable: false, searchable: false, className: 'text-center',
                render: function (id, _, row) {
                    let btn = `<a href="${BASE_URL}/gudang/penerimaan-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>`;
                    if (row.status === 'selesai') {
                        btn += `<button class="btn btn-primary btn-sm px-2 py-1 me-1 btn-cetak-pdf" data-id="${id}" title="Cetak PDF"><i class="bx bx-printer fs-14"></i></button>`;
                    }
                    @can('penerimaan.edit')
                    if (row.status === 'draft') {
                        btn += `<a href="${BASE_URL}/gudang/penerimaan-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('penerimaan.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
                    return btn;
                }
            },
            { data: 'nomor_penerimaan' },
            { data: 'nomor_po' },
            { data: 'nama_supplier' },
            { data: 'tanggal_terima' },
            { data: 'jumlah_item', className: 'text-center' },
            { data: 'status', render: (d) => badgeStatus(d) },
            { data: 'dibuat_oleh' },
        ],
        order: [[0, 'desc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
    });

    $('#filterStatus').on('change', function () { tbl.draw(); });

    $(document).on('click', '.btn-hapus', function () {
        const id = $(this).data('id');
        if (!confirm('Hapus dokumen penerimaan ini?')) return;
        $.ajax({
            url: BASE_URL + '/gudang/penerimaan-barang/' + id,
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function () { tbl.draw(); loadSummary(); },
            error: function (xhr) { alert(xhr.responseJSON?.message || 'Gagal menghapus.'); }
        });
    });

    $(document).on('click', '.btn-cetak-pdf', function () {
        const id  = $(this).data('id');
        const url = BASE_URL + '/gudang/penerimaan-barang/' + 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 = '';
    });
});
</script>
@endsection