@extends('layouts.app')
@section('title', 'Buat Purchase Order')

@section('content')
<h4 class="mb-4">Buat Purchase Order</h4>

<form method="POST" action="{{ route('purchase-orders.store') }}">
    @csrf
    <div class="card mb-3">
        <div class="card-body row g-3">
            <div class="col-12">
                <label class="form-label d-block">Asal Purchase Order</label>
                <div class="btn-group" role="group" aria-label="Asal PO">
                    <input type="radio" class="btn-check" name="asal_po" id="asalPr" value="pr" autocomplete="off"
                        {{ old('asal_po', $mode) == 'pr' ? 'checked' : '' }} @disabled($purchaseRequest)>
                    <label class="btn btn-outline-primary" for="asalPr">Dari Purchase Request (PR)</label>

                    <input type="radio" class="btn-check" name="asal_po" id="asalLangsung" value="langsung" autocomplete="off"
                        {{ old('asal_po', $mode) == 'langsung' ? 'checked' : '' }} @disabled($purchaseRequest)>
                    <label class="btn btn-outline-primary" for="asalLangsung">Langsung (Tanpa PR)</label>
                </div>
                <div class="form-text">
                    "Langsung (Tanpa PR)" dipakai untuk mengisi ulang stok gudang secara umum (bukan pesanan dek/kapal tertentu).
                    Barang akan otomatis masuk ke <strong>Draft</strong> di halaman Laporan begitu diterima gudang.
                </div>
                @if($purchaseRequest)
                    <input type="hidden" name="asal_po" value="pr">
                @endif
            </div>
            <div class="col-md-6" id="prField" style="{{ $mode == 'langsung' ? 'display:none' : '' }}">
                <label class="form-label">Purchase Request</label>
                <select name="purchase_request_id" class="form-select" id="prSelect" @disabled($purchaseRequest)>
                    <option value="">-- Pilih PR --</option>
                    @foreach($purchaseRequests as $pr)
                        <option value="{{ $pr->id }}" @selected(old('purchase_request_id', $purchaseRequest?->id) == $pr->id)>{{ $pr->kode }} - {{ $pr->kapal }}</option>
                    @endforeach
                    @if($purchaseRequest && !$purchaseRequests->contains('id', $purchaseRequest->id))
                        <option value="{{ $purchaseRequest->id }}" selected>{{ $purchaseRequest->kode }} - {{ $purchaseRequest->kapal }}</option>
                    @endif
                </select>
                @if($purchaseRequest)
                    <input type="hidden" name="purchase_request_id" value="{{ $purchaseRequest->id }}">
                @endif
            </div>
            <div class="col-md-12">
                <label class="form-label">Catatan (opsional)</label>
                <textarea name="catatan" class="form-control" rows="2">{{ old('catatan') }}</textarea>
                <div class="form-text">
                    Vendor diisi per baris barang di bawah (satu PO bisa berisi barang dari beberapa vendor berbeda).
                    Boleh ketik nama vendor baru langsung kalau belum ada di daftar, atau <strong>dikosongkan dulu</strong>
                    kalau vendornya belum ditentukan (barang akan berstatus <em>Pending Vendor</em> dan bisa dilengkapi belakangan,
                    sementara barang lain yang sudah ada vendornya tetap bisa diproses duluan).
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
            <span class="fw-semibold">Item Barang (vendor dipilih per barang)</span>
            <div class="d-flex gap-2">
                <button type="button" id="undoRowBtn" class="btn btn-sm btn-outline-warning d-none" onclick="undoDeleteRow()">
                    <i class="bi bi-arrow-counterclockwise"></i> Undo Hapus Baris
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="addRow()"><i class="bi bi-plus"></i> Tambah Barang</button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table mb-0 align-middle">
                <thead class="table-light">
                    <tr><th style="width:18%">Nama Barang</th><th style="width:12%">Part Number</th><th style="width:9%">Qty</th><th style="width:9%">Satuan</th><th style="width:14%">Harga Satuan</th><th style="width:18%">Vendor (opsional)</th><th style="width:40px"></th></tr>
                </thead>
                <tbody id="itemBody"></tbody>
            </table>
        </div>
    </div>

    <div class="mt-3">
        <button class="btn btn-primary"><i class="bi bi-send"></i> Buat & Kirim PO ke Vendor</button>
        <a href="{{ route('purchase-requests.index') }}" class="btn btn-outline-secondary">Batal</a>
    </div>
</form>

<template id="rowTemplate">
    <tr>
        <td>
            <div class="barang-search-wrap item-nama-wrap">
                <input type="text" class="form-control barang-search-input" autocomplete="off" placeholder="Ketik untuk mencari barang..." required>
                <input type="hidden" name="items[__i__][nama_barang]" class="barang-search-hidden" required>
                <div class="barang-search-menu"></div>
            </div>
        </td>
        <td><input type="text" name="items[__i__][part_number]" class="form-control item-pn" placeholder="PN-00123"></td>
        <td><input type="number" name="items[__i__][qty]" class="form-control" min="1" value="1" required></td>
        <td><input type="text" name="items[__i__][satuan]" class="form-control item-satuan" value="pcs" required></td>
        <td><input type="number" step="0.01" name="items[__i__][harga_satuan]" class="form-control" value="0"></td>
        <td>
            <input type="text" name="items[__i__][vendor]" class="form-control" list="vendorOptions" placeholder="Ketik nama vendor / kosongkan = pending">
        </td>
        <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteRow(this)"><i class="bi bi-trash"></i></button></td>
    </tr>
</template>

<datalist id="vendorOptions">
    @foreach($vendors as $vendor)
        <option value="{{ $vendor->nama }}">
    @endforeach
</datalist>
@endsection

@section('scripts')
@include('partials.barang-search-assets')
<script>
    // ==== Item Barang: tambah/hapus baris dengan Undo ====
    // Sama seperti form PR: baris yang terhapus tidak sengaja bisa
    // dikembalikan lewat "Undo Hapus Baris", dan kalau server menolak submit
    // (validasi gagal), item yang sudah diketik dipulihkan dari old('items')
    // supaya tidak perlu diulang dari nol.
    let rowIndex = 0;
    let lastDeletedRow = null;
    let lastDeletedIndex = null;
    const undoBtn = document.getElementById('undoRowBtn');

    @php
        $prItemsForJs = [];
        if ($purchaseRequest) {
            foreach ($purchaseRequest->items as $i) {
                $prItemsForJs[] = [
                    'nama_barang' => $i->nama_barang,
                    'part_number' => $i->part_number,
                    'qty' => $i->qty,
                    'satuan' => $i->satuan,
                ];
            }
        }
    @endphp
    const prItems = @json($prItemsForJs);
    const oldItems = @json(old('items', []));

    function readRowData(row) {
        return {
            nama_barang: row.querySelector('.barang-search-hidden')?.value || '',
            part_number: row.querySelector('.item-pn')?.value || '',
            qty: row.querySelector('[name$="[qty]"]')?.value || 1,
            satuan: row.querySelector('.item-satuan')?.value || 'pcs',
            harga_satuan: row.querySelector('[name$="[harga_satuan]"]')?.value || 0,
            vendor: row.querySelector('[name$="[vendor]"]')?.value || '',
        };
    }

    function addRow(data = null) {
        let tpl = document.getElementById('rowTemplate').innerHTML.replaceAll('__i__', rowIndex);
        document.getElementById('itemBody').insertAdjacentHTML('beforeend', tpl);

        const rows = document.querySelectorAll('#itemBody tr');
        const row = rows[rows.length - 1];
        const namaWrap = row.querySelector('.item-nama-wrap');
        const pnInput = row.querySelector('.item-pn');

        if (data) {
            const namaHidden = row.querySelector('.barang-search-hidden');
            const namaVisible = namaWrap.querySelector('.barang-search-input');
            namaVisible.value = data.nama_barang || '';
            namaHidden.value = data.nama_barang || '';
            pnInput.value = data.part_number || '';
            row.querySelector('[name$="[qty]"]').value = data.qty || 1;
            row.querySelector('.item-satuan').value = data.satuan || 'pcs';
            if (data.harga_satuan !== undefined) row.querySelector('[name$="[harga_satuan]"]').value = data.harga_satuan;
            if (data.vendor !== undefined) row.querySelector('[name$="[vendor]"]').value = data.vendor;
        }

        initBarangSearch(namaWrap, {
            onSelect: function (selected) {
                if (selected.part_number) pnInput.value = selected.part_number;
                const satuanInput = row.querySelector('.item-satuan');
                if (selected.satuan) satuanInput.value = selected.satuan;
            }
        });

        rowIndex++;
        return row;
    }

    // Hapus satu baris tapi simpan datanya dulu supaya bisa di-Undo tanpa
    // mengganggu baris lain yang sudah terisi.
    function deleteRow(btn) {
        const row = btn.closest('tr');
        const rows = document.querySelectorAll('#itemBody tr');
        if (rows.length <= 1) {
            alert('Minimal harus ada 1 baris barang.');
            return;
        }
        lastDeletedRow = readRowData(row);
        lastDeletedIndex = Array.from(rows).indexOf(row);
        // Barang search dropdown for this row lives in <body>, not inside
        // `row` anymore (see barang-search-assets.blade.php) - clean it up
        // too, otherwise it stays orphaned in the DOM after the row is gone.
        row.querySelectorAll('.item-nama-wrap').forEach(function (wrap) {
            if (wrap._barangSearchMenu) wrap._barangSearchMenu.remove();
        });
        row.remove();
        undoBtn.classList.remove('d-none');
    }

    function undoDeleteRow() {
        if (!lastDeletedRow) return;
        const restored = addRow(lastDeletedRow);
        const rows = document.querySelectorAll('#itemBody tr');
        if (lastDeletedIndex !== null && lastDeletedIndex < rows.length - 1) {
            document.getElementById('itemBody').insertBefore(restored, rows[lastDeletedIndex]);
        }
        lastDeletedRow = null;
        lastDeletedIndex = null;
        undoBtn.classList.add('d-none');
    }

    // Prioritas isi baris: old('items') dari validasi gagal > item dari PR > 1 baris kosong.
    if (oldItems && Object.keys(oldItems).length) {
        Object.values(oldItems).forEach(item => addRow(item));
    } else if (prItems.length) {
        prItems.forEach(item => addRow(item));
    } else {
        addRow();
    }

    const prField = document.getElementById('prField');
    const prSelect = document.getElementById('prSelect');
    const asalRadios = document.querySelectorAll('input[name="asal_po"]');
    const isLocked = {{ $purchaseRequest ? 'true' : 'false' }};

    function toggleAsalPo() {
        const asal = document.querySelector('input[name="asal_po"]:checked')?.value;
        if (asal === 'langsung') {
            prField.style.display = 'none';
            if (prSelect) { prSelect.required = false; }
        } else {
            prField.style.display = '';
            if (prSelect) { prSelect.required = true; }
        }
    }

    if (!isLocked) {
        asalRadios.forEach(r => r.addEventListener('change', toggleAsalPo));
    }
    toggleAsalPo();
</script>
@endsection