@extends('garage.layouts.app')

@section('title', 'Edit return '.$purchaseReturn->return_number)

@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-pencil-square',
    'title' => 'Edit purchase return',
    'subtitle' => 'Bill '.$purchaseReturn->bill_number.' · '.($purchaseReturn->vendor_name ?? '—'),
])
@endsection

@section('content')
<div class="gpo-page gs-split-form-page gs-vf-page container-fluid py-2 px-2 px-lg-3" id="pretEdit"
     data-lines-url="{{ url('/garage/purchase-returns/invoice/'.$purchaseReturn->garage_purchase_invoice_id.'/lines') }}?add_back_return_id={{ $purchaseReturn->id }}"
     data-return-id="{{ $purchaseReturn->id }}">

    @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.update', $purchaseReturn->id) }}" id="pretForm">
        @csrf
        @method('PUT')
        <input type="hidden" name="garage_purchase_invoice_id" value="{{ $purchaseReturn->garage_purchase_invoice_id }}">

        <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', $purchaseReturn->return_number) }}" required readonly>
                    </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', $purchaseReturn->return_date) }}" 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', $purchaseReturn->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', $purchaseReturn->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', $purchaseReturn->internal_notes) }}</textarea>
                    </div>
                </div>
                @include('garage.partials.warehouse-location-fields', [
                    'fieldPrefix' => 'pretWh',
                    'useBootstrap' => true,
                    'warehouses' => $warehouses,
                    'sectionsByWarehouse' => $sectionsByWarehouse,
                    'defaultWarehouseId' => old('garage_warehouse_id', $purchaseReturn->garage_warehouse_id ?? null),
                    'defaultSectionId' => old('garage_warehouse_section_id', $purchaseReturn->garage_warehouse_section_id ?? null),
                    'applyDefaults' => false,
                ])
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-3" 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="d-flex gap-2 flex-wrap">
            <button type="submit" class="btn btn-danger" id="pretSubmit"><i class="bi bi-check2 me-1"></i>Save changes</button>
            <a href="{{ route('garage.purchase-returns.show', $purchaseReturn->id) }}" class="btn btn-outline-secondary">Cancel</a>
            <a href="{{ route('garage.purchase-returns.vouchers', $purchaseReturn->id) }}" class="btn btn-outline-primary">Journal voucher</a>
        </div>
    </form>

    <form method="POST" action="{{ route('garage.purchase-returns.destroy', $purchaseReturn->id) }}" class="mt-3" onsubmit="return confirm('Delete this return and restore stock?');">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash me-1"></i>Delete return</button>
    </form>
</div>
@endsection

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

    const linesUrl = root.dataset.linesUrl;
    const linesBody = document.getElementById('pretLinesBody');
    const submitBtn = document.getElementById('pretSubmit');
    @php
        $presetQtyJson = $returnItems->pluck('quantity', 'garage_purchase_invoice_item_id')->map(fn ($q) => (int) $q)->all();
    @endphp
    const presetQty = @json($presetQtyJson);

    let lineIndex = 0;

    async function loadLines() {
        linesBody.innerHTML = '<tr><td colspan="4" class="text-muted text-center py-3">Loading…</td></tr>';
        const res = await fetch(linesUrl, { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        if (!data.lines || !data.lines.length) {
            linesBody.innerHTML = '<tr><td colspan="4" class="text-muted text-center py-3">No returnable lines.</td></tr>';
            submitBtn.disabled = true;
            return;
        }
        renderLines(data.lines);
    }

    function renderLines(lines) {
        linesBody.innerHTML = '';
        lineIndex = 0;
        lines.forEach(line => {
            const lineId = line.id;
            const preset = presetQty[lineId] || 0;
            const max = parseInt(line.returnable_qty, 10) || 0;
            const stock = parseInt(line.stock_quantity, 10) || 0;
            const qty = preset > 0 ? preset : 0;
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${line.part_name || '—'} <span class="text-muted small">${line.part_number || ''}</span></td>
                <td class="text-center">${max}</td>
                <td class="text-center">${stock}</td>
                <td>
                    <input type="hidden" name="items[${lineIndex}][garage_purchase_invoice_item_id]" value="${lineId}">
                    <input type="number" name="items[${lineIndex}][quantity]" class="form-control form-control-sm text-center pret-qty"
                        min="0" max="${max}" value="${qty}" data-max="${max}">
                </td>`;
            linesBody.appendChild(tr);
            lineIndex++;
        });
        bindQtyInputs();
        submitBtn.disabled = false;
    }

    function bindQtyInputs() {
        document.querySelectorAll('.pret-qty').forEach(inp => {
            inp.addEventListener('input', () => {
                const max = parseInt(inp.dataset.max, 10);
                if (parseInt(inp.value, 10) > max) inp.value = max;
            });
        });
    }

    loadLines();
})();
</script>
@endpush