@extends('garage.layouts.app')

@section('title', 'New purchase return')

@push('styles')
@include('shared.garage-purchase-order-ui-styles')
@include('shared.garage-split-form-ui-styles')
@endpush

@section('navbar_lead')
@include('garage.partials.split-form-navbar-lead', [
    'icon' => 'bi-arrow-return-left',
    'title' => 'New purchase return',
    'subtitle' => 'Find a received bill by number, vendor, or part — then enter return quantities.',
])
@endsection

@section('content')
<div class="gpo-page gs-split-form-page gs-vf-page container-fluid py-2 px-2 px-lg-3" id="pretCreate"
     data-lookup-url="{{ route('garage.purchase-returns.lookup-invoice') }}"
     data-lines-url="{{ url('/garage/purchase-returns/invoice') }}"
     data-preselect="{{ $preselectInvoiceId }}">

    @if(session('error'))<div class="alert alert-danger py-2 small">{{ session('error') }}</div>@endif
    @if($errors->any())
    <div class="alert alert-danger py-2 small"><ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
    @endif

    <form method="POST" action="{{ route('garage.purchase-returns.store') }}" id="pretForm">
        @csrf
        <input type="hidden" name="garage_purchase_invoice_id" id="pretInvoiceId" value="{{ old('garage_purchase_invoice_id') }}">

        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white fw-semibold">Find purchase bill</div>
            <div class="card-body">
                <ul class="nav nav-pills mb-3" role="tablist">
                    <li class="nav-item"><button type="button" class="nav-link active" data-pret-tab="bill">Bill number</button></li>
                    <li class="nav-item"><button type="button" class="nav-link" data-pret-tab="vendor">Vendor</button></li>
                    <li class="nav-item"><button type="button" class="nav-link" data-pret-tab="part">Part</button></li>
                </ul>
                <div class="row g-2 align-items-end">
                    <div class="col-md-4 pret-panel" data-pret-panel="bill">
                        <label class="form-label small">Bill number</label>
                        <input type="text" class="form-control form-control-sm" id="pretBillSearch" placeholder="e.g. BILL-2605-0001">
                    </div>
                    <div class="col-md-4 pret-panel d-none" data-pret-panel="vendor">
                        <label class="form-label small">Vendor</label>
                        <input type="search" class="form-control form-control-sm mb-1" id="pretVendorSearch" placeholder="Type 3+ chars…" autocomplete="off">
                        <select class="form-select form-select-sm" id="pretVendorId">
                            <option value="">Select vendor</option>
                            @foreach($vendors as $v)
                            <option value="{{ $v->id }}">{{ \App\Support\GarageLedgerLabel::vendor($v) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 pret-panel d-none" data-pret-panel="part">
                        <label class="form-label small">Part name or number</label>
                        <input type="text" class="form-control form-control-sm" id="pretPartSearch" placeholder="Search part…">
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-sm btn-outline-primary" id="pretSearchBtn"><i class="bi bi-search me-1"></i>Search</button>
                    </div>
                </div>
                <div id="pretInvoicePicker" class="mt-3 d-none">
                    <label class="form-label small">Matching bills</label>
                    <select class="form-select form-select-sm" id="pretInvoiceSelect"></select>
                </div>
                <div id="pretInvoiceSummary" class="mt-3 small text-muted"></div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-3 d-none" id="pretLinesCard">
            <div class="card-header bg-white fw-semibold">Return lines</div>
            <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Part</th>
                            <th class="text-center">Returnable</th>
                            <th class="text-center">In stock</th>
                            <th style="width:7rem;">Return qty</th>
                        </tr>
                    </thead>
                    <tbody id="pretLinesBody"></tbody>
                </table>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white fw-semibold">Return details</div>
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-md-3">
                        <label class="form-label small">Return #</label>
                        <input type="text" name="return_number" class="form-control form-control-sm" value="{{ old('return_number', $returnNumber) }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Return date</label>
                        <input type="date" name="return_date" class="form-control form-control-sm" value="{{ old('return_date', date('Y-m-d')) }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Reference</label>
                        <input type="text" name="reference_number" class="form-control form-control-sm" value="{{ old('reference_number') }}">
                    </div>
                </div>
                <div class="row g-2 mt-1">
                    <div class="col-md-6">
                        <label class="form-label small">Reason</label>
                        <textarea name="reason" class="form-control form-control-sm" rows="2">{{ old('reason') }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small">Internal notes</label>
                        <textarea name="internal_notes" class="form-control form-control-sm" rows="2">{{ old('internal_notes') }}</textarea>
                    </div>
                </div>
                @include('garage.partials.warehouse-location-fields', [
                    'fieldPrefix' => 'pretWh',
                    'useBootstrap' => true,
                    'warehouses' => $warehouses,
                    'sectionsByWarehouse' => $sectionsByWarehouse,
                    'defaultWarehouseId' => $applyDefaults ? ($defaultWarehouseId ?? null) : old('garage_warehouse_id'),
                    'defaultSectionId' => $applyDefaults ? ($defaultSectionId ?? null) : old('garage_warehouse_section_id'),
                    'applyDefaults' => $applyDefaults ?? false,
                ])
            </div>
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-danger" id="pretSubmit" disabled><i class="bi bi-check2 me-1"></i>Post return</button>
            <a href="{{ route('garage.purchase-returns.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const root = document.getElementById('pretCreate');
    if (!root) return;

    const lookupUrl = root.dataset.lookupUrl;
    const linesBase = root.dataset.linesUrl;
    const preselect = parseInt(root.dataset.preselect || '0', 10);

    let activeTab = 'bill';
    let lineIndex = 0;

    const invoiceIdInput = document.getElementById('pretInvoiceId');
    const linesCard = document.getElementById('pretLinesCard');
    const linesBody = document.getElementById('pretLinesBody');
    const submitBtn = document.getElementById('pretSubmit');
    const picker = document.getElementById('pretInvoicePicker');
    const invoiceSelect = document.getElementById('pretInvoiceSelect');
    const summary = document.getElementById('pretInvoiceSummary');

    document.querySelectorAll('[data-pret-tab]').forEach(btn => {
        btn.addEventListener('click', () => {
            activeTab = btn.dataset.pretTab;
            document.querySelectorAll('[data-pret-tab]').forEach(b => b.classList.toggle('active', b === btn));
            document.querySelectorAll('[data-pret-panel]').forEach(p => {
                p.classList.toggle('d-none', p.dataset.pretPanel !== activeTab);
            });
        });
    });

    document.getElementById('pretSearchBtn').addEventListener('click', runSearch);
    invoiceSelect.addEventListener('change', () => {
        const id = parseInt(invoiceSelect.value, 10);
        if (id) loadInvoice(id);
    });

    async function runSearch() {
        const params = new URLSearchParams();
        if (activeTab === 'bill') {
            const q = document.getElementById('pretBillSearch').value.trim();
            if (!q) return alert('Enter a bill number.');
            params.set('bill_number', q);
        } else if (activeTab === 'vendor') {
            const vid = document.getElementById('pretVendorId').value;
            if (!vid) return alert('Select a vendor.');
            params.set('vendor_ledger_id', vid);
        } else {
            const q = document.getElementById('pretPartSearch').value.trim();
            if (!q) return alert('Enter part search.');
            params.set('part_search', q);
        }

        const res = await fetch(lookupUrl + '?' + params.toString(), { headers: { 'Accept': 'application/json' } });
        const data = await res.json();

        if (data.invoice && data.lines) {
            setInvoice(data.invoice);
            renderLines(data.lines);
            picker.classList.add('d-none');
            return;
        }

        const list = data.invoices || [];
        if (!list.length) {
            picker.classList.add('d-none');
            summary.textContent = 'No matching bills found.';
            clearLines();
            return;
        }

        if (list.length === 1) {
            loadInvoice(list[0].id);
            picker.classList.add('d-none');
            return;
        }

        picker.classList.remove('d-none');
        invoiceSelect.innerHTML = list.map(inv =>
            `<option value="${inv.id}">${inv.bill_number} — ${inv.vendor_name || 'Vendor'} (${inv.bill_date})</option>`
        ).join('');
        loadInvoice(parseInt(invoiceSelect.value, 10));
    }

    async function loadInvoice(id) {
        const res = await fetch(linesBase + '/' + id + '/lines', { headers: { 'Accept': 'application/json' } });
        if (!res.ok) {
            summary.textContent = 'Bill not found or not eligible for return.';
            clearLines();
            return;
        }
        const data = await res.json();
        setInvoice(data.invoice);
        renderLines(data.lines);
    }

    function setInvoice(inv) {
        invoiceIdInput.value = inv.id;
        summary.innerHTML = `<strong>${inv.bill_number}</strong> · ${inv.vendor_name || '—'} · ${inv.bill_date} · ${inv.status}`;
        submitBtn.disabled = false;
    }

    function clearLines() {
        linesBody.innerHTML = '';
        linesCard.classList.add('d-none');
        submitBtn.disabled = true;
        invoiceIdInput.value = '';
    }

    function renderLines(lines) {
        linesBody.innerHTML = '';
        lineIndex = 0;
        if (!lines.length) {
            linesCard.classList.remove('d-none');
            linesBody.innerHTML = '<tr><td colspan="4" class="text-muted text-center py-3">No returnable part lines on this bill.</td></tr>';
            return;
        }
        lines.forEach(line => {
            const idx = lineIndex++;
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>
                    <input type="hidden" name="items[${idx}][garage_purchase_invoice_item_id]" value="${line.id}">
                    <span class="fw-semibold">${line.part_name || 'Part'}</span>
                    <span class="text-muted small d-block">${line.part_number || ''}</span>
                </td>
                <td class="text-center">${line.returnable_qty}</td>
                <td class="text-center">${line.stock_quantity ?? 0}</td>
                <td><input type="number" class="form-control form-control-sm" name="items[${idx}][quantity]"
                    min="0" max="${line.returnable_qty}" value="0"></td>`;
            linesBody.appendChild(tr);
        });
        linesCard.classList.remove('d-none');
    }

    document.getElementById('pretForm').addEventListener('submit', function (e) {
        const inputs = linesBody.querySelectorAll('input[type="number"]');
        let any = false;
        inputs.forEach(inp => { if (parseInt(inp.value, 10) > 0) any = true; });
        if (!any) {
            e.preventDefault();
            alert('Enter return quantity for at least one line.');
        }
    });

    if (preselect > 0) {
        loadInvoice(preselect);
    }
})();
</script>
@endpush
@include('garage.partials.ledger-vendor-search-script', [
    'searchId' => 'pretVendorSearch',
    'selectId' => 'pretVendorId',
    'emptyOption' => 'Select vendor',
])