@extends('garage.layouts.app')

@section('title', 'New parts issuance')

@push('styles')
@include('shared.garage-parts-issuance-ui-styles')
@endpush

@section('content')
<div class="gpi-page container-fluid px-2 px-lg-3 py-2">
    <div class="gpi-hero mb-2">
        <h1><i class="bi bi-box-arrow-up-right me-2" style="color:#d97706;"></i>New parts issuance</h1>
        <p>Pick parts on the left; only on-hand quantity can be issued. Stock is reduced when you save.</p>
    </div>

    <form method="POST" action="{{ route('garage.parts-issuance.store') }}" id="gpiForm">
        @csrf
        <div class="gpi-split">
            <div class="gpi-panel">
                <div class="gpi-panel-hd">
                    <span><i class="bi bi-box-seam me-1"></i>Parts</span>
                    <span class="badge rounded-pill bg-warning text-dark" id="gpiInvCount">0</span>
                </div>
                <div class="gpi-panel-bd">
                    <input type="search" class="gpi-search" id="gpiInvSearch" placeholder="Search…" autocomplete="off">
                    <div class="gpi-inv-scroll" id="gpiInvList"></div>
                </div>
            </div>
            <div class="gpi-panel">
                <div class="gpi-panel-hd muted">
                    <span><i class="bi bi-clipboard-check me-1"></i>Issue detail</span>
                    <a href="{{ route('garage.parts-issuance.index') }}" class="btn btn-sm btn-outline-secondary py-0 px-2">Back</a>
                </div>
                <div class="gpi-panel-bd">
                    <div class="row g-2 mb-2">
                        <div class="col-md-4">
                            <div class="gpi-lbl">Issuance #</div>
                            <input type="text" class="gpi-inp" name="issuance_number" value="{{ old('issuance_number', $issuanceNumber) }}" required readonly>
                        </div>
                        <div class="col-md-4">
                            <div class="gpi-lbl">Date</div>
                            <input type="date" class="gpi-inp" name="issued_at" value="{{ old('issued_at', date('Y-m-d')) }}" required>
                        </div>
                        <div class="col-md-4">
                            <div class="gpi-lbl">Work order (optional)</div>
                            <select class="gpi-sel" name="work_order_id">
                                <option value="">— None —</option>
                                @foreach($workOrders as $wo)
                                    <option value="{{ $wo->id }}" @selected(old('work_order_id') == $wo->id)>
                                        {{ $wo->work_order_number }} · {{ \Carbon\Carbon::parse($wo->work_order_date)->format('M j') }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-2">
                        <div class="gpi-lbl">Notes</div>
                        <input type="text" class="gpi-inp" name="notes" value="{{ old('notes') }}" placeholder="Bay, technician, reason…">
                    </div>

                    <div class="gpi-lbl mb-1">Lines</div>
                    <div class="gpi-lines-wrap">
                        <table class="gpi-lines">
                            <thead>
                                <tr>
                                    <th>Part</th>
                                    <th>Qty</th>
                                    <th>Max</th>
                                    <th>Unit cost</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="gpiLinesBody"></tbody>
                        </table>
                    </div>
                    <div class="text-center text-muted py-4 small d-none" id="gpiLinesEmpty">Add parts from the list.</div>

                    <div class="gpi-actions">
                        <a href="{{ route('garage.parts-issuance.index') }}" class="gpi-btn-ghost text-decoration-none">Cancel</a>
                        <button type="submit" class="gpi-btn-save"><i class="bi bi-check2-circle me-1"></i>Issue &amp; deduct stock</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
(function () {
    const PARTS = @json($partsForJs);
    let lines = [];

    function renderInventory() {
        const q = (document.getElementById('gpiInvSearch').value || '').toLowerCase().trim();
        const el = document.getElementById('gpiInvList');
        document.getElementById('gpiInvCount').textContent = String(PARTS.length);
        const filtered = PARTS.filter(function (p) {
            if (!q) return true;
            const blob = [p.name, p.inventory_code, p.code, p.additional_barcodes].filter(Boolean).join(' ').toLowerCase();
            return blob.includes(q);
        });
        if (!filtered.length) {
            el.innerHTML = '<div class="text-muted text-center py-3 small">No parts.</div>';
            return;
        }
        el.innerHTML = filtered.map(function (p) {
            if (p.stock_quantity <= 0) {
                return '<div class="gpi-part-row opacity-50"><div><div class="gpi-part-name">' + escapeHtml(p.name) + '</div>' +
                    '<div class="gpi-part-meta">Out of stock</div></div><span class="small text-muted">0</span></div>';
            }
            return '<div class="gpi-part-row" data-pid="' + p.id + '">' +
                '<div><div class="gpi-part-name">' + escapeHtml(p.name) + '</div>' +
                '<div class="gpi-part-meta">' + escapeHtml(p.inventory_code || p.code || '') + ' · Stk ' + p.stock_quantity + '</div></div>' +
                '<div class="d-flex align-items-center gap-1">' +
                '<input type="number" min="1" max="' + p.stock_quantity + '" value="1" class="gpi-qty-inp" data-pid="' + p.id + '">' +
                '<button type="button" class="gpi-btn-add" data-pid="' + p.id + '">+</button></div></div>';
        }).join('');
        el.querySelectorAll('.gpi-btn-add').forEach(function (btn) {
            btn.addEventListener('click', function () { addLine(parseInt(btn.getAttribute('data-pid'), 10)); });
        });
    }

    function escapeHtml(s) {
        if (!s) return '';
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function partById(id) { return PARTS.find(function (x) { return x.id === id; }); }

    function addLine(partId) {
        const p = partById(partId);
        if (!p || p.stock_quantity <= 0) return;
        const inp = document.querySelector('.gpi-qty-inp[data-pid="' + partId + '"]');
        let qty = Math.max(1, parseInt(inp && inp.value, 10) || 1);
        qty = Math.min(qty, p.stock_quantity);
        const existing = lines.findIndex(function (L) { return L.part_id === partId; });
        if (existing >= 0) {
            lines[existing].quantity = Math.min(lines[existing].quantity + qty, p.stock_quantity);
        } else {
            lines.push({
                part_id: partId,
                name: p.name,
                quantity: qty,
                max: p.stock_quantity,
                unit_cost: p.cost_price,
            });
        }
        renderLines();
    }

    function removeLine(i) {
        lines.splice(i, 1);
        renderLines();
    }

    function updateLineFromInput(inp) {
        const tr = inp.closest('tr');
        if (!tr) return;
        const idx = parseInt(tr.getAttribute('data-idx'), 10);
        if (Number.isNaN(idx) || !lines[idx]) return;
        const f = inp.getAttribute('data-f');
        const p = partById(lines[idx].part_id);
        const max = p ? p.stock_quantity : lines[idx].max;
        if (f === 'quantity') {
            lines[idx].quantity = Math.min(max, Math.max(1, parseInt(inp.value, 10) || 1));
            if (String(inp.value) !== String(lines[idx].quantity)) inp.value = String(lines[idx].quantity);
        } else {
            lines[idx].unit_cost = Math.max(0, parseFloat(inp.value) || 0);
        }
    }

    function renderLines() {
        const tb = document.getElementById('gpiLinesBody');
        const empty = document.getElementById('gpiLinesEmpty');
        if (!lines.length) {
            tb.innerHTML = '';
            empty.classList.remove('d-none');
            return;
        }
        empty.classList.add('d-none');
        tb.innerHTML = lines.map(function (L, i) {
            const p = partById(L.part_id);
            const max = p ? p.stock_quantity : L.max;
            return '<tr data-idx="' + i + '">' +
                '<td><div class="fw-semibold small">' + escapeHtml(L.name) + '</div></td>' +
                '<td><input type="number" min="1" max="' + max + '" class="cell-inp gpi-cell" data-f="quantity" value="' + L.quantity + '"></td>' +
                '<td class="small text-muted">' + max + '</td>' +
                '<td><input type="number" step="0.01" min="0" class="cell-inp gpi-cell" style="max-width:6rem" data-f="unit_cost" value="' + L.unit_cost + '"></td>' +
                '<td><button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 gpi-rm" data-i="' + i + '"><i class="bi bi-x-lg"></i></button></td></tr>';
        }).join('');
    }

    const gpiLinesBody = document.getElementById('gpiLinesBody');
    if (gpiLinesBody) {
        gpiLinesBody.addEventListener('input', function (e) {
            const inp = e.target.closest('.gpi-cell');
            if (!inp || !gpiLinesBody.contains(inp)) return;
            updateLineFromInput(inp);
        });
        gpiLinesBody.addEventListener('click', function (e) {
            const btn = e.target.closest('.gpi-rm');
            if (!btn || !gpiLinesBody.contains(btn)) return;
            removeLine(parseInt(btn.getAttribute('data-i'), 10));
        });
    }

    document.getElementById('gpiInvSearch').addEventListener('input', renderInventory);

    document.getElementById('gpiForm').addEventListener('submit', function (e) {
        if (!lines.length) {
            e.preventDefault();
            alert('Add at least one part.');
            return;
        }
        var payload = lines.map(function (L) {
            return { part_id: L.part_id, quantity: L.quantity, unit_cost: L.unit_cost };
        });
        var hid = document.getElementById('gpiItemsPayload');
        if (!hid) {
            hid = document.createElement('input');
            hid.type = 'hidden';
            hid.name = 'items';
            hid.id = 'gpiItemsPayload';
            this.appendChild(hid);
        }
        hid.value = JSON.stringify(payload);
    });

    renderInventory();
})();
</script>
@endpush
@endsection