@extends('layouts.adminlte')

@section('title', 'TRANSFER ANTAR GUDANG')
@section('page_title', 'TRANSFER ANTAR GUDANG')

@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') }}" />
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header">
            <h3 class="card-title m-0">Transfer Barang Antar Gudang</h3>
        </div>
        <div class="card-body">
            @include('masterproject::partials.warehouse_nav', [
                'warehouseActive' => 'transfers',
                'warehouseActionButton' => '<button class="btn btn-primary btn-sm" id="btnAddTransfer"><i class="fas fa-right-left me-1"></i>Buat Transfer</button>',
            ])
            <div class="alert alert-info mb-3">Transfer akan mengurangi stok gudang asal dan menambah stok gudang tujuan dalam satu transaksi. Gudang asal dan tujuan harus berbeda.</div>
            <div class="table-responsive">
                <table id="transferTable" class="table table-striped table-hover align-middle w-100">
                    <thead><tr><th>#</th><th>No Transfer</th><th>Dari Gudang</th><th>Ke Gudang</th><th>Tanggal</th><th>Driver</th><th>Penerima</th><th>Items</th><th>Aksi</th></tr></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="transferModal" 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">Buat Transfer Antar Gudang</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <form id="transferForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-3"><label class="form-label">Gudang Asal</label><select class="form-select" id="transferFromGudangId" required></select></div>
                            <div class="col-md-3"><label class="form-label">Gudang Tujuan</label><select class="form-select" id="transferToGudangId" required></select></div>
                            <div class="col-md-2"><label class="form-label">No Transfer</label><input type="text" class="form-control" id="transferNumber" placeholder="Auto jika kosong" /></div>
                            <div class="col-md-2"><label class="form-label">Tanggal</label><input type="date" class="form-control" id="transferDate" /></div>
                            <div class="col-md-2"><label class="form-label">Driver</label><input type="text" class="form-control" id="transferDriver" /></div>
                            <div class="col-md-6"><label class="form-label">Penerima Gudang Tujuan</label><input type="text" class="form-control" id="transferRecipient" /></div>
                            <div class="col-md-6"><label class="form-label">Notes</label><input type="text" class="form-control" id="transferNotes" /></div>
                        </div>
                        <hr />
                        <div class="d-flex justify-content-between align-items-center mb-2"><h6 class="m-0">Item Transfer</h6><button type="button" class="btn btn-outline-primary btn-sm" id="btnAddTransferItem">Tambah Item</button></div>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle" id="transferItemsTable">
                                <thead><tr><th>Barang</th><th>Stok Asal</th><th>Satuan Transfer</th><th>Qty</th><th>Notes</th><th>#</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 Transfer</button></div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="transferTraceModal" 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">Trace Transfer Gudang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-light border" id="traceHeader">Memuat trace...</div>

                    <div class="row g-3">
                        <div class="col-md-5">
                            <h6 class="m-0">Item Transfer</h6>
                            <div id="traceItems" class="small text-muted mt-2">-</div>
                        </div>
                        <div class="col-md-7">
                            <h6 class="m-0">Stock Movement (IN/OUT)</h6>
                            <div class="table-responsive mt-2">
                                <table class="table table-sm table-bordered align-middle" id="traceMoveTable">
                                    <thead>
                                        <tr>
                                            <th>Tanggal</th>
                                            <th>Waktu</th>
                                            <th>Gudang</th>
                                            <th>Barang</th>
                                            <th>Tipe</th>
                                            <th>Qty</th>
                                            <th>Qty Dasar</th>
                                            <th>Ref</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            <div class="small text-muted">Movement ini bisa dicek juga dari menu `Stok Gudang` lewat tombol `Kartu Stok` (filter gudang+barang).</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </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>
        $(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('transferModal'));
            const traceModal = new bootstrap.Modal(document.getElementById('transferTraceModal'));
            const table = $('#transferTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'transfer_number' },
                    { data: null, render: (r) => `${r.from_gudang_code || ''} - ${r.from_gudang_name || ''}` },
                    { data: null, render: (r) => `${r.to_gudang_code || ''} - ${r.to_gudang_name || ''}` },
                    { data: 'transfer_date', render: (v) => v || '-' },
                    { data: 'driver_name', render: (v) => v || '-' },
                    { data: 'recipient_name', render: (v) => v || '-' },
                    { data: 'items', render: (v) => Number(v?.length || 0) },
                    {
                        data: null,
                        orderable: false,
                        render: (r) => `
                            <a href="{{ url('/master-project/warehouse-transfers') }}/${r.id}/pdf" target="_blank" class="btn btn-sm btn-outline-primary">Print</a>
                            <button type="button" class="btn btn-sm btn-outline-dark btn-trace" data-id="${r.id}">Trace</button>
                        `
                    }
                ]
            });
            let gudangRows = [];
            let barangRows = [];
            let stockRows = [];
            const barangMap = {};
            const formatStock = (gudangId, barangId, baseName = '') => {
                const row = stockRows.find((item) => Number(item.gudang_id) === Number(gudangId) && Number(item.barang_id) === Number(barangId));
                return row ? `${Number(row.qty_base_total || 0).toLocaleString('id-ID')} ${baseName || row.base_satuan_name || ''}` : `0 ${baseName}`;
            };
            const buildBarangOptions = (selectedId = '') => {
                const options = ['<option value="">- Pilih Barang -</option>'];
                barangRows.forEach((row) => {
                    const selected = Number(selectedId || 0) === Number(row.id) ? ' selected' : '';
                    options.push(`<option value="${row.id}"${selected}>${row.code} - ${row.name}</option>`);
                });
                return options.join('');
            };
            const buildUnitOptions = (barangId, selectedId = '') => {
                const row = barangMap[Number(barangId || 0)];
                if (!row) return '<option value="">-</option>';
                const options = [];
                if (row.default_satuan_id) {
                    const selected = Number(selectedId || 0) === Number(row.default_satuan_id) ? ' selected' : '';
                    options.push(`<option value="${row.default_satuan_id}"${selected}>${row.default_satuan_name || 'Satuan Dasar'}</option>`);
                }
                return options.join('');
            };
            const fillGudang = () => {
                const options = gudangRows.map((row) => `<option value="${row.id}">${row.code} - ${row.name}</option>`).join('');
                $('#transferFromGudangId').html(options);
                $('#transferToGudangId').html(options);
            };

            const renderTrace = (payload) => {
                const data = payload?.data || {};
                const t = data.transfer || {};
                const items = data.items || [];
                const moves = data.movements || [];

                $('#traceHeader').html(`
                    <div class="fw-semibold">Transfer: ${t.transfer_number || '-'}</div>
                    <div class="small text-muted">
                        Tanggal: ${t.transfer_date || '-'} |
                        Dari: ${t.from_gudang || '-'} |
                        Ke: ${t.to_gudang || '-'} |
                        Dibuat: ${t.created_at || '-'}
                    </div>
                `);

                $('#traceItems').html(items.length ? items.map((it) => `
                    <div class="mb-1">
                        <strong>${it.barang_code || ''}</strong> - ${it.barang_name || ''} :
                        ${Number(it.qty || 0).toLocaleString('id-ID')} ${it.satuan_name || ''} |
                        ${Number(it.qty_base || 0).toLocaleString('id-ID')} ${it.base_satuan_name || ''}
                    </div>
                `).join('') : '-');

                const rowsHtml = moves.map((m) => `
                    <tr>
                        <td>${m.movement_date || '-'}</td>
                        <td>${(m.created_at || '').split(' ')[1] || '-'}</td>
                        <td>${m.gudang_code || ''} - ${m.gudang_name || ''}</td>
                        <td>${m.barang_code || ''} - ${m.barang_name || ''}</td>
                        <td><span class="badge text-bg-${m.movement_type === 'IN' ? 'success' : 'danger'}">${m.movement_type || '-'}</span></td>
                        <td>${Number(m.qty || 0).toLocaleString('id-ID')} ${m.satuan_name || ''}</td>
                        <td>${Number(m.qty_base || 0).toLocaleString('id-ID')} ${m.base_satuan_name || ''}</td>
                        <td>${m.reference_number || '-'}</td>
                    </tr>
                `).join('');
                $('#traceMoveTable tbody').html(rowsHtml || '<tr><td colspan="8" class="text-center text-muted">Tidak ada movement ditemukan.</td></tr>');
            };
            const syncTransferRowInfo = ($tr) => {
                const barangId = Number($tr.find('.transfer-barang').val() || 0);
                const row = barangMap[barangId];
                const fromGudangId = Number($('#transferFromGudangId').val() || 0);
                if (!row) {
                    $tr.find('.transfer-stock').text('-');
                    $tr.find('.transfer-satuan').html('<option value="">-</option>');
                    return;
                }
                $tr.find('.transfer-stock').text(formatStock(fromGudangId, barangId, row.default_satuan_name || ''));
                $tr.find('.transfer-satuan').html(buildUnitOptions(barangId));
            };
            const addTransferRow = () => {
                const html = `<tr>
                    <td><select class="form-select form-select-sm transfer-barang">${buildBarangOptions()}</select></td>
                    <td class="transfer-stock text-muted">-</td>
                    <td><select class="form-select form-select-sm transfer-satuan"><option value="">-</option></select></td>
                    <td><input type="number" class="form-control form-control-sm transfer-qty" min="0.001" step="0.001" value="1" /></td>
                    <td><input type="text" class="form-control form-control-sm transfer-notes" /></td>
                    <td><button type="button" class="btn btn-sm btn-outline-danger btn-remove-row">Hapus</button></td>
                </tr>`;
                $('#transferItemsTable tbody').append(html);
            };
            const loadRefs = () => $.when(
                $.getJSON('{{ route('master_gudang.data') }}'),
                $.getJSON('{{ route('master_barang.data') }}'),
                $.getJSON('{{ route('master_project.warehouse_stocks.data') }}')
            ).done((gudang, barang, stock) => {
                gudangRows = gudang[0]?.data || [];
                barangRows = (barang[0]?.data || []).map((row) => ({ ...row, default_satuan_name: row.default_satuan_name || row.satuan_name || '' }));
                stockRows = stock[0]?.data || [];
                barangRows.forEach((row) => { barangMap[Number(row.id)] = row; });
                fillGudang();
            });
            const loadData = () => $.getJSON('{{ route('master_project.warehouse_transfers.data') }}').done((resp) => table.clear().rows.add(resp.data || []).draw());

            $('#transferTable').on('click', '.btn-trace', function () {
                const id = Number($(this).data('id') || 0);
                if (!id) return;
                $('#traceHeader').text('Memuat trace...');
                $('#traceItems').text('-');
                $('#traceMoveTable tbody').html('<tr><td colspan="8" class="text-center text-muted">Memuat...</td></tr>');
                traceModal.show();
                $.getJSON(`{{ url('/master-project/warehouse-transfers') }}/${id}/trace`)
                    .done((resp) => renderTrace(resp))
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat trace transfer.', 'error'));
            });
            const resetForm = () => {
                fillGudang();
                $('#transferNumber').val('');
                $('#transferDate').val('');
                $('#transferDriver').val('');
                $('#transferRecipient').val('');
                $('#transferNotes').val('');
                $('#transferItemsTable tbody').empty();
                addTransferRow();
            };
            $('#btnAddTransfer').on('click', function () { resetForm(); modal.show(); });
            $('#btnAddTransferItem').on('click', addTransferRow);
            $('#transferFromGudangId').on('change', function () { $('#transferItemsTable tbody tr').each(function () { syncTransferRowInfo($(this)); }); });
            $('#transferItemsTable').on('change', '.transfer-barang', function () { syncTransferRowInfo($(this).closest('tr')); });
            $('#transferItemsTable').on('click', '.btn-remove-row', function () { $(this).closest('tr').remove(); });
            $('#transferForm').on('submit', function (e) {
                e.preventDefault();
                const payload = {
                    from_gudang_id: $('#transferFromGudangId').val() || '',
                    to_gudang_id: $('#transferToGudangId').val() || '',
                    transfer_number: ($('#transferNumber').val() || '').toString().trim(),
                    transfer_date: $('#transferDate').val() || '',
                    driver_name: ($('#transferDriver').val() || '').toString().trim(),
                    recipient_name: ($('#transferRecipient').val() || '').toString().trim(),
                    notes: ($('#transferNotes').val() || '').toString().trim(),
                    items: []
                };
                $('#transferItemsTable tbody tr').each(function () {
                    const barangId = Number($(this).find('.transfer-barang').val() || 0);
                    const qty = Number($(this).find('.transfer-qty').val() || 0);
                    if (barangId > 0 && qty > 0) {
                        payload.items.push({
                            barang_id: barangId,
                            satuan_id: Number($(this).find('.transfer-satuan').val() || 0),
                            qty,
                            notes: ($(this).find('.transfer-notes').val() || '').toString().trim(),
                        });
                    }
                });
                if (!payload.items.length) {
                    Swal.fire('Validasi', 'Isi minimal satu item transfer.', 'warning');
                    return;
                }
                $.ajax({ url: '{{ route('master_project.warehouse_transfers.store') }}', method: 'POST', contentType: 'application/json', data: JSON.stringify(payload) })
                    .done((resp) => {
                        Swal.fire('Success', resp.message || 'Transfer tersimpan.', 'success');
                        modal.hide();
                        loadRefs().always(loadData);
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan transfer.', 'error');
                    });
            });
            loadRefs().always(loadData);
        });
    </script>
@endpush