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

@section('content')
<h4 class="mb-4">Buat Purchase Request Baru</h4>
<p class="text-muted">Isi Surat Permintaan Barang di bawah ini. PR akan berstatus <strong>Menunggu Diproses</strong> setelah dikirim.</p>

<form method="POST" action="{{ route('purchase-requests.store') }}" id="prForm">
    @csrf
    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Nama Kapal</label>
                    <select id="kapalSelect" class="form-select">
                        <option value="">-- Pilih Kapal --</option>
                        @foreach($kapalList as $k)
                            <option value="{{ $k }}">{{ $k }}</option>
                        @endforeach
                        <option value="__lainnya__">+ Kapal Lainnya (ketik manual)</option>
                    </select>
                    <input type="text" id="kapalManualInput" class="form-control mt-2 d-none" placeholder="Ketik nama kapal baru">
                    <input type="hidden" name="kapal" id="kapalHidden" value="{{ old('kapal', auth()->user()->kapal) }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Departemen</label>
                    <select name="departemen" class="form-select" required>
                        <option value="">-- Pilih Departemen --</option>
                        <option value="dek" @selected(old('departemen') == 'dek')>DEK</option>
                        <option value="mesin" @selected(old('departemen') == 'mesin')>MESIN</option>
                    </select>
                </div>
                <div class="col-md-12">
                    <label class="form-label">Keterangan (opsional)</label>
                    <textarea name="keterangan" class="form-control" rows="2">{{ old('keterangan') }}</textarea>
                </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">Daftar Barang Diminta</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" id="itemTable">
                <thead class="table-light">
                    <tr>
                        <th style="width:24%">Nama Barang</th>
                        <th style="width:13%">Part Number</th>
                        <th style="width:13%">Kode Barang (Dikapal)</th>
                        <th style="width:12%">Qty</th>
                        <th style="width:10%">Satuan</th>
                        <th>Keterangan</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> Kirim Purchase Request</button>
        <a href="{{ route('purchase-requests.index') }}" class="btn btn-outline-secondary">Batal</a>
    </div>
</form>

<!-- Template baris barang. Nama Barang sekarang berupa dropdown search AJAX:
     ketik untuk mencari barang yang sudah pernah diinput sebelumnya (supaya tidak
     ada duplikasi ejaan), atau tetap ketik nama baru kalau barangnya belum pernah
     ada. Memilih barang dari hasil pencarian otomatis mengisi Part Number-nya. -->
<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="text" name="items[__i__][kode_barang_dikapal]" class="form-control item-kbk" placeholder="KDK-001"></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" value="pcs" required></td>
        <td><input type="text" name="items[__i__][keterangan]" class="form-control"></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>
@endsection

@section('scripts')
@include('partials.barang-search-assets')
<script>
    // ==== Item Barang: tambah/hapus baris dengan Undo ====
    // Kalau baris dihapus tidak sengaja, tombol "Undo Hapus Baris" bisa
    // mengembalikannya lagi tanpa mengubah baris lain yang sudah diisi.
    // Data lama (kalau form gagal validasi di server, mis. ada baris yang
    // salah isi) juga dipulihkan dari old('items') supaya baris yang SUDAH
    // benar tidak perlu diketik ulang dari nol.
    let rowIndex = 0;
    let lastDeletedRow = null;
    let lastDeletedIndex = null;
    const undoBtn = document.getElementById('undoRowBtn');

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

    function addRow(data = null) {
        const 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');
        const kbkInput = row.querySelector('.item-kbk');
        const satuanInput = row.querySelector('[name$="[satuan]"]');
        initBarangSearch(namaWrap, {
            onSelect: function (data) {
                if (data.part_number) pnInput.value = data.part_number;
                if (data.kode_barang_dikapal) kbkInput.value = data.kode_barang_dikapal;
                if (data.satuan) satuanInput.value = data.satuan;
            }
        });

        if (data) {
            const namaVisible = namaWrap.querySelector('.barang-search-input');
            const namaHidden = namaWrap.querySelector('.barang-search-hidden');
            namaVisible.value = data.nama_barang_display || data.nama_barang || '';
            namaHidden.value = data.nama_barang || '';
            pnInput.value = data.part_number || '';
            kbkInput.value = data.kode_barang_dikapal || '';
            row.querySelector('[name$="[qty]"]').value = data.qty || 1;
            row.querySelector('[name$="[satuan]"]').value = data.satuan || 'pcs';
            row.querySelector('[name$="[keterangan]"]').value = data.keterangan || '';
        }

        rowIndex++;
        return row;
    }

    // Hapus satu baris, tapi simpan datanya supaya bisa di-Undo (baris lain
    // yang sudah diisi tetap utuh, tidak ikut terhapus).
    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);
        // Kembalikan ke posisi semula (bukan selalu di paling bawah)
        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');
    }

    // Kalau ada input lama dari server (validasi gagal sebelumnya), tampilkan
    // lagi baris-baris yang sudah sempat diisi supaya tidak perlu diulang
    // dari awal. Kalau tidak ada, mulai dengan 1 baris kosong seperti biasa.
    const oldItems = @json(old('items', []));
    if (oldItems && Object.keys(oldItems).length) {
        Object.values(oldItems).forEach(item => addRow(item));
    } else {
        addRow(); // baris pertama otomatis
    }

    // ==== Kapal: dropdown pilihan, dengan opsi "Lainnya" untuk kapal baru ====
    const kapalSelect = document.getElementById('kapalSelect');
    const kapalManualInput = document.getElementById('kapalManualInput');
    const kapalHidden = document.getElementById('kapalHidden');

    function initKapalField() {
        const current = kapalHidden.value;
        if (!current) return;
        const found = Array.from(kapalSelect.options).find(o => o.value === current);
        if (found) {
            kapalSelect.value = current;
        } else {
            kapalSelect.value = '__lainnya__';
            kapalManualInput.classList.remove('d-none');
            kapalManualInput.value = current;
        }
    }
    initKapalField();

    kapalSelect.addEventListener('change', function () {
        if (this.value === '__lainnya__') {
            kapalManualInput.classList.remove('d-none');
            kapalManualInput.value = '';
            kapalHidden.value = '';
            kapalManualInput.focus();
        } else {
            kapalManualInput.classList.add('d-none');
            kapalHidden.value = this.value;
        }
    });
    kapalManualInput.addEventListener('input', function () {
        kapalHidden.value = this.value;
    });

    // Validasi: pastikan nama kapal & setiap nama barang terisi sebelum submit
    document.getElementById('prForm').addEventListener('submit', function (e) {
        if (!kapalHidden.value.trim()) {
            e.preventDefault();
            alert('Silakan pilih atau ketik nama kapal terlebih dahulu.');
            kapalSelect.focus();
            return;
        }

        const rows = document.querySelectorAll('#itemBody tr');
        for (const row of rows) {
            const hidden = row.querySelector('.barang-search-hidden');
            if (!hidden.value.trim()) {
                e.preventDefault();
                alert('Silakan pilih atau ketik nama barang pada setiap baris.');
                row.querySelector('.barang-search-input').focus();
                return;
            }
        }
    });
</script>
@endsection