@extends('layouts.adminlte')

@section('title', 'PENERIMAAN GUDANG DARI PO')
@section('page_title', 'PENERIMAAN GUDANG DARI PO')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header">
            <h3 class="card-title m-0">Barang PO Masuk Gudang</h3>
        </div>
        <div class="card-body">
            @include('masterproject::partials.warehouse_nav', [
                'warehouseActive' => 'receipts',
                'warehouseActionButton' => '<button class="btn btn-primary btn-sm" id="btnAddReceipt"><i class="fas fa-truck-ramp-box me-1"></i>Input Penerimaan</button>',
            ])
            <div class="alert alert-info mb-3">
                PO yang bisa diterima ke gudang hanya PO status <strong>approved</strong> atau <strong>closed</strong>.
                Saat penerimaan disimpan, stok gudang akan otomatis bertambah dan bukti pengiriman/surat jalan pembelian ikut tersimpan.
            </div>
            <div class="table-responsive">
                <table id="receiptTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>No Penerimaan</th>
                        <th>PO</th>
                        <th>Project</th>
                        <th>Gudang</th>
                        <th>Tanggal</th>
                        <th>Surat Jalan</th>
                        <th>Bukti</th>
                        <th>Items</th>
                        <th>Aksi</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="receiptModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Input Penerimaan Gudang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="receiptForm" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">PO</label>
                                <select class="form-select" id="receiptPoId" required></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Gudang</label>
                                <select class="form-select" id="receiptGudangId" required></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">No Penerimaan</label>
                                <input type="text" class="form-control" id="receiptNumber" placeholder="Auto jika kosong" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tanggal Terima</label>
                                <input type="date" class="form-control" id="receiptDate" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Surat Jalan Pembelian</label>
                                <input type="text" class="form-control" id="receiptSupplierNote" maxlength="120" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Bukti Pengiriman</label>
                                <input type="file" class="form-control" id="receiptProof" accept=".jpg,.jpeg,.png,.pdf" />
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Notes</label>
                                <input type="text" class="form-control" id="receiptNotes" />
                            </div>
                        </div>
                        <hr />
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle" id="receiptItemsTable">
                                <thead>
                                <tr>
                                    <th>Item PO</th>
                                    <th>Qty PO</th>
                                    <th>Sudah Diterima</th>
                                    <th>Sisa</th>
                                    <th>Satuan Terima</th>
                                    <th>Qty Terima</th>
                                    <th>Notes</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Simpan Penerimaan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const modal = new bootstrap.Modal(document.getElementById('receiptModal'));
            const table = $('#receiptTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'delivery_number' },
                    { data: 'po_number' },
                    { data: null, render: (r) => `${r.project_code || ''} - ${r.project_name || ''}` },
                    { data: null, render: (r) => `${r.gudang_code || ''} - ${r.gudang_name || ''}` },
                    { data: 'delivery_date', render: (v) => v || '-' },
                    { data: 'supplier_delivery_note_number', render: (v) => v || '-' },
                     { data: 'proof_url', render: (v) => v ? `<a href="${v}" target="_blank" class="btn btn-sm btn-outline-primary">Lihat</a>` : '-' },
                     { data: 'items', render: (v) => {
                         const items = Array.isArray(v) ? v : [];
                         if (!items.length) return '-';
                         const lines = items.slice(0, 3).map((it) => {
                             const code = (it.rab_item_code || '').toString();
                             const qty = Number(it.qty || 0).toLocaleString('id-ID');
                             const unit = (it.satuan_name || '').toString();
                             return `${code} (${qty} ${unit})`.trim();
                         });
                         const more = items.length > 3 ? `<div class="small text-muted">+${items.length - 3} item</div>` : '';
                         return `${lines.join('<br>')}${more}`;
                    }},
                    { data: null, orderable: false, render: (r) => `
                        <a href="{{ url('/master-project/warehouse-receipts') }}/${r.id}/pdf" target="_blank" class="btn btn-sm btn-outline-primary">Print</a>
                    `},
                ]
            });

            let poRows = [];
            let gudangRows = [];
            let rabRows = [];
            const rabMap = {};
            const reinitSelect2 = ($el, opts) => {
                if ($el.data('select2')) $el.select2('destroy');
                $el.select2(opts);
            };

            const buildUnitOptions = (rabItemId, selectedId = '') => {
                const row = rabMap[Number(rabItemId || 0)];
                if (!row) return '<option value="">-</option>';
                const seen = new Set();
                const options = [];
                const pushOpt = (id, label) => {
                    const numId = Number(id || 0);
                    if (numId <= 0 || seen.has(numId)) return;
                    seen.add(numId);
                    const selected = Number(selectedId || 0) === numId ? ' selected' : '';
                    options.push(`<option value="${numId}"${selected}>${label}</option>`);
                };
                pushOpt(row.satuan_id, row.satuan_name || row.unit || 'Satuan RAB');
                pushOpt(row.base_satuan_id, row.base_satuan_name || 'Satuan Dasar');
                (row.unit_conversions || []).forEach((conv) => pushOpt(conv.satuan_id, conv.satuan_name || 'Konversi'));
                return options.join('');
            };

            const fillPoSelect = () => {
                const options = poRows
                    .filter((row) => ['approved', 'closed'].includes((row.status || '').toString()) && (row.delivery_status || '') !== 'received')
                    .map((row) => `<option value="${row.id}">${row.po_number} | ${row.project_code || ''} | ${row.vendor_name || '-'}</option>`);
                $('#receiptPoId').html(options.join(''));
                $('#receiptPoId').trigger('change');
                reinitSelect2($('#receiptPoId'), { theme: 'bootstrap-5', dropdownParent: $('#receiptModal'), width: '100%', placeholder: 'Cari PO...' });
            };

            const fillGudangSelect = () => {
                $('#receiptGudangId').html(gudangRows.map((row) => `<option value="${row.id}">${row.code} - ${row.name}</option>`).join(''));
                reinitSelect2($('#receiptGudangId'), { theme: 'bootstrap-5', dropdownParent: $('#receiptModal'), width: '100%', placeholder: 'Cari gudang...' });
            };

            const renderItemRows = () => {
                const poId = Number($('#receiptPoId').val() || 0);
                const row = poRows.find((item) => Number(item.id) === poId);
                const $tbody = $('#receiptItemsTable tbody');
                $tbody.empty();
                if (!row) return;
                (row.items || []).forEach((item) => {
                    const remainingBase = Math.max(0, Number(item.ordered_qty_base || 0) - Number(item.received_qty_base || 0));
                    const html = `
                        <tr>
                            <td data-po-item-id="${item.id}" data-rab-item-id="${item.rab_item_id}">
                                <div class="fw-semibold">${item.rab_item_code || ''}</div>
                                <div class="text-muted small">${item.rab_item_name || ''}</div>
                            </td>
                            <td>${Number(item.qty || 0).toLocaleString('id-ID')}</td>
                            <td>${Number(item.received_qty_base || 0).toLocaleString('id-ID')}</td>
                            <td>${remainingBase.toLocaleString('id-ID')}</td>
                            <td><select class="form-select form-select-sm receipt-satuan">${buildUnitOptions(item.rab_item_id)}</select></td>
                            <td><input type="number" class="form-control form-control-sm receipt-qty" min="0" step="0.001" value="0" /></td>
                            <td><input type="text" class="form-control form-control-sm receipt-notes" /></td>
                        </tr>`;
                    $tbody.append(html);
                });

                // Live search for unit selection inside modal.
                $('#receiptItemsTable .receipt-satuan').each(function () {
                    reinitSelect2($(this), { theme: 'bootstrap-5', dropdownParent: $('#receiptModal'), width: '100%', placeholder: 'Cari satuan...' });
                });
            };

            const loadRefs = () => $.when(
                $.getJSON('{{ route('master_project.po.data') }}'),
                $.getJSON('{{ route('master_gudang.data') }}'),
                $.getJSON('{{ route('master_project.rab.data') }}')
            ).done((po, gudang, rab) => {
                poRows = po[0]?.data || [];
                gudangRows = gudang[0]?.data || [];
                rabRows = rab[0]?.data || [];
                rabRows.forEach((row) => { rabMap[Number(row.id)] = row; });
                fillPoSelect();
                fillGudangSelect();
            });

            const loadData = () => $.getJSON('{{ route('master_project.po_deliveries.data') }}')
                .done((resp) => table.clear().rows.add(resp.data || []).draw());

            const resetForm = () => {
                $('#receiptNumber').val('');
                $('#receiptDate').val('');
                $('#receiptSupplierNote').val('');
                $('#receiptProof').val('');
                $('#receiptNotes').val('');
                fillPoSelect();
                fillGudangSelect();
                renderItemRows();
            };

            $('#btnAddReceipt').on('click', function () {
                resetForm();
                modal.show();
            });

            $('#receiptPoId').on('change', renderItemRows);

            $('#receiptForm').on('submit', function (e) {
                e.preventDefault();
                const formData = new FormData();
                formData.append('purchase_order_id', $('#receiptPoId').val() || '');
                formData.append('gudang_id', $('#receiptGudangId').val() || '');
                formData.append('delivery_number', ($('#receiptNumber').val() || '').toString().trim());
                formData.append('supplier_delivery_note_number', ($('#receiptSupplierNote').val() || '').toString().trim());
                formData.append('delivery_date', $('#receiptDate').val() || '');
                formData.append('notes', ($('#receiptNotes').val() || '').toString().trim());
                const proof = $('#receiptProof')[0]?.files?.[0];
                if (proof) formData.append('proof_file', proof);
                let index = 0;
                $('#receiptItemsTable tbody tr').each(function () {
                    const qty = Number($(this).find('.receipt-qty').val() || 0);
                    if (qty <= 0) return;
                    formData.append(`items[${index}][purchase_order_item_id]`, $(this).find('td:first').data('po-item-id'));
                    formData.append(`items[${index}][satuan_id]`, $(this).find('.receipt-satuan').val() || '');
                    formData.append(`items[${index}][qty]`, qty);
                    formData.append(`items[${index}][notes]`, ($(this).find('.receipt-notes').val() || '').toString().trim());
                    index++;
                });
                if (index === 0) {
                    Swal.fire('Validasi', 'Isi minimal satu qty penerimaan.', 'warning');
                    return;
                }
                $.ajax({
                    url: '{{ route('master_project.po_deliveries.store') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                }).done((resp) => {
                    Swal.fire('Success', resp.message || 'Penerimaan tersimpan.', 'success');
                    modal.hide();
                    loadRefs().always(loadData);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan penerimaan.', 'error');
                });
            });

            loadRefs().always(loadData);
        });
    </script>
@endpush