{{--
    Shared requisition form (create + edit).
    Expects: $requisition, $stations, $units, $items, $action (URL), $method (POST|PUT), $submitLabel
--}}
@php
    $isStationUser = auth()->user()->role === \App\Models\User::ROLE_STATION && auth()->user()->station_id;
    $itemsById = $items->keyBy('id');
    $catalogData = $items->map(fn($i) => [
        'id' => $i->id, 'name' => $i->name, 'sku' => $i->sku,
        'uom' => $i->uom_id, 'cost' => (float) $i->estimated_unit_cost,
    ])->values();
    $initialLines = old('lines', $requisition->exists
        ? $requisition->items->map(fn($l) => [
            'item_id' => $l->item_id, 'description' => $l->description, 'quantity' => $l->quantity,
            'uom_id' => $l->uom_id, 'estimated_unit_cost' => $l->estimated_unit_cost, 'notes' => $l->notes,
        ])->values()->toArray()
        : []);
@endphp

@if($errors->any())
<div class="alert alert-danger">
    <strong>Please fix the following:</strong>
    <ul class="mb-0 mt-1">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
</div>
@endif

@if(session('duplicate_warning'))
<div class="alert alert-warning">
    <h6 class="alert-heading"><i class="ri-file-copy-2-line align-bottom me-1"></i> Possible duplicate request</h6>
    <p class="mb-2 small">A similar requisition from this station was raised in the last {{ \App\Services\DuplicateDetector::WINDOW_DAYS }} days:</p>
    <ul class="mb-2 small">
        @foreach(session('duplicate_warning') as $d)
        <li><strong>{{ $d['reference_no'] }}</strong> — {{ $d['title'] }} <span class="text-muted">({{ $d['status'] }}, {{ $d['when'] }})</span></li>
        @endforeach
    </ul>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="duplicate_ack" value="1" id="duplicate_ack" form="requisition-form">
        <label class="form-check-label" for="duplicate_ack">This is not a duplicate — proceed anyway.</label>
    </div>
</div>
@endif

<form method="POST" action="{{ $action }}" id="requisition-form">
    @csrf
    @if(strtoupper($method) !== 'POST') @method($method) @endif
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Requisition Details</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control" value="{{ old('title', $requisition->title) }}" placeholder="e.g. Office supplies for Q3" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="2" placeholder="What is being requested">{{ old('description', $requisition->description) }}</textarea>
                    </div>
                    <div class="mb-0">
                        <label class="form-label">Justification</label>
                        <textarea name="justification" class="form-control" rows="2" placeholder="Why it is needed">{{ old('justification', $requisition->justification) }}</textarea>
                    </div>
                    {{-- Procurement Method & Cost Centre are set later by PAL / Procurement, not the requester. --}}
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h5 class="card-title mb-0 flex-grow-1">Line Items</h5>
                    <button type="button" class="btn btn-sm btn-soft-primary" id="add-line"><i class="ri-add-line align-bottom"></i> Add line</button>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-2"><i class="ri-lightbulb-flash-line align-bottom"></i> Start typing in the <strong>Item</strong> box — matching catalogue products are suggested. Pick one to auto-fill unit &amp; cost, or just type a free-text item.</p>
                    <div class="table-responsive">
                        <table class="table align-middle mb-0" id="lines-table">
                            <thead class="table-light">
                                <tr>
                                    <th style="min-width:260px">Item</th>
                                    <th style="width:110px">Qty</th>
                                    <th style="width:140px">Unit</th>
                                    <th style="width:150px">Unit Cost</th>
                                    <th style="width:140px" class="text-end">Line Total</th>
                                    <th style="width:40px"></th>
                                </tr>
                            </thead>
                            <tbody id="lines-body">
                                @foreach($initialLines as $i => $line)
                                @php
                                    $displayText = ($line['item_id'] ?? null) && isset($itemsById[$line['item_id']])
                                        ? $itemsById[$line['item_id']]->name
                                        : ($line['description'] ?? '');
                                @endphp
                                <tr class="line-row">
                                    <td class="position-relative">
                                        <input type="text" name="lines[{{ $i }}][description]" class="form-control form-control-sm line-desc" autocomplete="off" placeholder="Search or describe item…" value="{{ $displayText }}">
                                        <input type="hidden" name="lines[{{ $i }}][item_id]" class="line-item-id" value="{{ $line['item_id'] ?? '' }}">
                                        <div class="item-suggest list-group position-absolute w-100 shadow-sm" style="z-index:6; display:none; max-height:230px; overflow-y:auto;"></div>
                                    </td>
                                    <td><input type="number" step="0.01" min="0.01" name="lines[{{ $i }}][quantity]" class="form-control form-control-sm line-qty" value="{{ $line['quantity'] ?? 1 }}"></td>
                                    <td>
                                        <select name="lines[{{ $i }}][uom_id]" class="form-select form-select-sm line-uom">
                                            @foreach($units as $u)
                                            <option value="{{ $u->id }}" @selected(($line['uom_id'] ?? null) == $u->id)>{{ $u->name }} ({{ $u->abbreviation }})</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input type="number" step="0.01" min="0" name="lines[{{ $i }}][estimated_unit_cost]" class="form-control form-control-sm line-cost" value="{{ $line['estimated_unit_cost'] ?? 0 }}"></td>
                                    <td class="text-end line-total">0.00</td>
                                    <td><button type="button" class="btn btn-sm btn-soft-danger remove-line"><i class="ri-delete-bin-line"></i></button></td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="4" class="text-end">Estimated Total</th>
                                    <th class="text-end" id="grand-total">0.00</th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Routing</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Formation (Station) <span class="text-danger">*</span></label>
                        <select name="formation_id" id="formation-station-select" class="form-select @error('formation_id') is-invalid @enderror">
                            <option value="">Select station…</option>
                            @foreach(($stationNodes ?? []) as $sn)
                            <option value="{{ $sn->id }}" @selected(old('formation_id', $requisition->formation_id) == $sn->id)>{{ $sn->picker_label }}</option>
                            @endforeach
                        </select>
                        <small class="text-muted">The JCF formation station this request originates from.</small>
                        @error('formation_id')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Priority <span class="text-danger">*</span></label>
                        <select name="priority" class="form-select" required>
                            @foreach(['low','normal','high','urgent'] as $p)
                            <option value="{{ $p }}" @selected(old('priority', $requisition->priority ?? 'normal') === $p)>{{ ucfirst($p) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-0">
                        <label class="form-label">Needed By</label>
                        <input type="date" name="needed_by_date" class="form-control" value="{{ old('needed_by_date', optional($requisition->needed_by_date)->format('Y-m-d')) }}" min="{{ date('Y-m-d') }}">
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body d-grid gap-2">
                    <button type="submit" name="action" value="submit" class="btn btn-primary">
                        <i class="ri-send-plane-line align-bottom me-1"></i> {{ $submitLabel }}
                    </button>
                    <button type="submit" name="action" value="draft" class="btn btn-soft-secondary">Save as Draft</button>
                    <a href="{{ route('requisitions.index') }}" class="btn btn-link text-muted">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</form>

<template id="uom-options">@foreach($units as $u)<option value="{{ $u->id }}">{{ $u->name }} ({{ $u->abbreviation }})</option>@endforeach</template>
<script type="application/json" id="catalog-data">@json($catalogData)</script>

{{-- Quick-add item modal (used when a searched product isn't in the catalogue) --}}
<div class="modal fade" id="addItemModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" id="add-item-form" data-url="{{ route('items.store') }}">
            <div class="modal-header">
                <h5 class="modal-title">Add Item to Catalogue</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger d-none" id="new-item-errors"></div>
                <p class="text-muted small">New items are saved to the catalogue and become available for requisitions and inventory.</p>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Item Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="new-item-name" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Type <span class="text-danger">*</span></label>
                        <select name="type" class="form-select" required>
                            <option value="good">Good</option>
                            <option value="service">Service</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Category</label>
                        <select name="category_id" class="form-select">
                            <option value="">— None —</option>
                            @foreach($categories as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Unit of Measure <span class="text-danger">*</span></label>
                        <select name="uom_id" class="form-select" required>
                            @foreach($units as $u)
                            <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->abbreviation }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Estimated Unit Cost</label>
                        <input type="number" step="0.01" min="0" name="estimated_unit_cost" class="form-control" value="0">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">SKU / Code</label>
                        <input type="text" name="sku" class="form-control" placeholder="optional">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="2" placeholder="Specs / notes for inventory"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save &amp; Select</button>
            </div>
        </form>
    </div>
</div>

@push('form-scripts')
<script>
(function () {
    const body      = document.getElementById('lines-body');
    const uomOpts   = document.getElementById('uom-options').innerHTML;
    const catalog   = JSON.parse(document.getElementById('catalog-data').textContent);
    let idx = {{ count($initialLines) }};

    function rowHtml(i) {
        return `
        <tr class="line-row">
            <td class="position-relative">
                <input type="text" name="lines[${i}][description]" class="form-control form-control-sm line-desc" autocomplete="off" placeholder="Search or describe item…">
                <input type="hidden" name="lines[${i}][item_id]" class="line-item-id" value="">
                <div class="item-suggest list-group position-absolute w-100 shadow-sm" style="z-index:6; display:none; max-height:230px; overflow-y:auto;"></div>
            </td>
            <td><input type="number" step="0.01" min="0.01" name="lines[${i}][quantity]" class="form-control form-control-sm line-qty" value="1"></td>
            <td><select name="lines[${i}][uom_id]" class="form-select form-select-sm line-uom">${uomOpts}</select></td>
            <td><input type="number" step="0.01" min="0" name="lines[${i}][estimated_unit_cost]" class="form-control form-control-sm line-cost" value="0"></td>
            <td class="text-end line-total">0.00</td>
            <td><button type="button" class="btn btn-sm btn-soft-danger remove-line"><i class="ri-delete-bin-line"></i></button></td>
        </tr>`;
    }

    function recalc() {
        let grand = 0;
        body.querySelectorAll('.line-row').forEach(function (row) {
            const qty  = parseFloat(row.querySelector('.line-qty').value) || 0;
            const cost = parseFloat(row.querySelector('.line-cost').value) || 0;
            const total = qty * cost;
            row.querySelector('.line-total').textContent = total.toFixed(2);
            grand += total;
        });
        document.getElementById('grand-total').textContent = grand.toFixed(2);
    }

    function closeAllSuggest(except) {
        body.querySelectorAll('.item-suggest').forEach(function (box) {
            if (box !== except) box.style.display = 'none';
        });
    }

    function esc(s) { return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;'); }

    function renderSuggest(row, query) {
        const box = row.querySelector('.item-suggest');
        const q = query.trim();
        if (!q) { box.style.display = 'none'; return; }
        const ql = q.toLowerCase();

        const matches = catalog.filter(function (it) {
            return it.name.toLowerCase().includes(ql) || (it.sku && it.sku.toLowerCase().includes(ql));
        }).slice(0, 8);

        let html = matches.map(function (it) {
            return `<button type="button" class="list-group-item list-group-item-action py-1 px-2 suggest-item" data-id="${it.id}" data-uom="${it.uom}" data-cost="${it.cost}" data-name="${esc(it.name)}">
                <span class="fw-medium">${esc(it.name)}</span>${it.sku ? ` <small class="text-muted">${esc(it.sku)}</small>` : ''}
                ${it.cost ? `<small class="text-muted float-end">${it.cost.toFixed(2)}</small>` : ''}
            </button>`;
        }).join('');

        // Always offer to add the typed item to the catalogue (for inventory).
        html += `<button type="button" class="list-group-item list-group-item-action py-1 px-2 suggest-add text-primary" data-name="${esc(q)}">
            <i class="ri-add-circle-line align-bottom"></i> Add &ldquo;<span class="fw-medium">${esc(q)}</span>&rdquo; to catalogue</button>`;

        box.innerHTML = html;
        box.style.display = 'block';
    }

    function addRow() {
        body.insertAdjacentHTML('beforeend', rowHtml(idx++));
        recalc();
    }

    // Typeahead: typing filters the catalogue; manual typing clears any prior catalogue selection.
    body.addEventListener('input', function (e) {
        if (e.target.classList.contains('line-desc')) {
            const row = e.target.closest('.line-row');
            row.querySelector('.line-item-id').value = '';
            renderSuggest(row, e.target.value);
        }
        recalc();
    });

    let activeRow = null;

    function selectItemIntoRow(row, data) {
        row.querySelector('.line-desc').value = data.name;
        row.querySelector('.line-item-id').value = data.id;
        if (data.uom) row.querySelector('.line-uom').value = data.uom;
        if (data.cost && parseFloat(data.cost) > 0) row.querySelector('.line-cost').value = parseFloat(data.cost).toFixed(2);
        row.querySelector('.item-suggest').style.display = 'none';
        recalc();
    }

    // Pick a suggestion → fill the row; or open the quick-add modal.
    body.addEventListener('click', function (e) {
        const pick = e.target.closest('.suggest-item');
        if (pick) {
            selectItemIntoRow(pick.closest('.line-row'), {
                name: pick.dataset.name, id: pick.dataset.id, uom: pick.dataset.uom, cost: pick.dataset.cost,
            });
            return;
        }
        const add = e.target.closest('.suggest-add');
        if (add) {
            activeRow = add.closest('.line-row');
            const modal = document.getElementById('addItemModal');
            modal.querySelector('#new-item-name').value = add.dataset.name;
            modal.querySelector('#new-item-errors').classList.add('d-none');
            closeAllSuggest();
            bootstrap.Modal.getOrCreateInstance(modal).show();
            return;
        }
        if (e.target.closest('.remove-line') && body.querySelectorAll('.line-row').length > 1) {
            e.target.closest('.line-row').remove();
            recalc();
        }
    });

    // Quick-add item → POST to catalogue, then select it into the active row.
    const itemForm = document.getElementById('add-item-form');
    itemForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const errBox = document.getElementById('new-item-errors');
        const token = document.querySelector('#requisition-form input[name=_token]').value;
        const payload = Object.fromEntries(new FormData(itemForm).entries());

        fetch(itemForm.dataset.url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token, 'Accept': 'application/json' },
            body: JSON.stringify(payload),
        }).then(function (res) {
            return res.json().then(function (data) { return { ok: res.ok, data: data }; });
        }).then(function (r) {
            if (!r.ok) {
                const msgs = r.data.errors ? Object.values(r.data.errors).flat() : [r.data.message || 'Could not save item.'];
                errBox.innerHTML = msgs.join('<br>');
                errBox.classList.remove('d-none');
                return;
            }
            catalog.push(r.data); // available for the rest of this form too
            if (activeRow) selectItemIntoRow(activeRow, r.data);
            bootstrap.Modal.getOrCreateInstance(document.getElementById('addItemModal')).hide();
            itemForm.reset();
        }).catch(function () {
            errBox.textContent = 'Network error — please try again.';
            errBox.classList.remove('d-none');
        });
    });

    // Close suggestion lists when focusing/clicking elsewhere.
    document.addEventListener('click', function (e) {
        if (!e.target.classList.contains('line-desc') && !e.target.closest('.item-suggest')) closeAllSuggest();
    });
    body.addEventListener('focusin', function (e) {
        if (e.target.classList.contains('line-desc')) {
            closeAllSuggest(e.target.closest('.line-row').querySelector('.item-suggest'));
            if (e.target.value.trim()) renderSuggest(e.target.closest('.line-row'), e.target.value);
        }
    });

    document.getElementById('add-line').addEventListener('click', addRow);

    if (body.querySelectorAll('.line-row').length === 0) addRow();
    recalc();
})();
</script>
@endpush

@push('form-scripts')
{{-- Searchable Formation-station picker (Choices.js) over ~350 stations --}}
<link href="{{ URL::asset('build/libs/choices.js/public/assets/styles/choices.min.css') }}" rel="stylesheet" type="text/css">
<script src="{{ URL::asset('build/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>
<script>
(function () {
    var el = document.getElementById('formation-station-select');
    if (el && window.Choices) {
        try { new Choices(el, { searchEnabled: true, shouldSort: false, itemSelectText: '', searchResultLimit: 20, placeholder: true, allowHTML: true }); } catch (e) {}
    }
})();
</script>
@endpush