@extends('layouts.app')

@section('title', 'Initiate Customer Return - Pavitram Agroz')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
    <div>
        <h3 class="fw-bold mb-1 text-dark">Initiate Customer Product Return</h3>
        <p class="text-muted mb-0 small">Locate original sales invoice, identify individual physical units, and record return reasons.</p>
    </div>
    <div>
        <a href="{{ route('pos.returns.index') }}" class="btn btn-light border btn-sm">
            &larr; Back to Returns List
        </a>
    </div>
</div>

<!-- Step 1: Search Original Invoice -->
<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white py-3">
        <span class="fw-bold"><i class="bi bi-search me-2 text-success"></i>Step 1: Locate Original Sales Invoice</span>
    </div>
    <div class="card-body p-4">
        <form method="GET" action="{{ route('pos.returns.create') }}" class="row g-3">
            <div class="col-md-5">
                <label class="form-label small fw-semibold">Search by Invoice Number</label>
                <div class="input-group">
                    <span class="input-group-text bg-light"><i class="bi bi-receipt"></i></span>
                    <input type="text" name="invoice_number" class="form-control font-monospace" placeholder="e.g. PA-INV-PA-STR-001-20261105-XXXXX" value="{{ $invoiceNumber }}">
                </div>
            </div>

            <div class="col-md-5">
                <label class="form-label small fw-semibold">Or Scan Physical Unit Serial # / QR Code</label>
                <div class="input-group">
                    <span class="input-group-text bg-light"><i class="bi bi-qr-code-scan"></i></span>
                    <input type="text" name="serial_number" class="form-control font-monospace" placeholder="e.g. PA-P001-000001" value="{{ $serialNumber }}">
                </div>
            </div>

            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-agri w-100 fw-bold">
                    <i class="bi bi-search me-1"></i> Find Sale
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Step 2: Select Items for Return -->
@if($selectedInvoice)
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
            <div>
                <span class="fw-bold"><i class="bi bi-box-seam me-2 text-success"></i>Step 2: Select Units for Return from Invoice: </span>
                <span class="font-monospace fw-bold text-success">{{ $selectedInvoice->invoice_number }}</span>
            </div>
            <div class="small text-muted">
                Billed on {{ $selectedInvoice->invoice_date->format('d M Y, H:i') }} | Store: {{ $selectedInvoice->store->name }}
            </div>
        </div>

        <div class="card-body p-4">
            @php
                $eligibleItems = $selectedInvoice->items->where('is_returned', false);
            @endphp

            @if($eligibleItems->isEmpty())
                <div class="alert alert-warning mb-0">
                    <i class="bi bi-exclamation-triangle me-2"></i> All units on this invoice have already been returned or the invoice is voided.
                </div>
            @else
                <form method="POST" action="{{ route('pos.returns.store') }}">
                    @csrf
                    <input type="hidden" name="invoice_id" value="{{ $selectedInvoice->id }}">

                    <div class="table-responsive mb-4">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 5%;">Select</th>
                                    <th style="width: 25%;">Product & Serial #</th>
                                    <th style="width: 25%;">Return Reason</th>
                                    <th style="width: 25%;">Physical Condition</th>
                                    <th class="text-end" style="width: 20%;">Refund Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($eligibleItems as $i => $item)
                                    <tr>
                                        <td>
                                            <input class="form-check-input item-checkbox" type="checkbox" 
                                                   name="items[{{ $i }}][invoice_item_id]" 
                                                   value="{{ $item->id }}" 
                                                   id="chk_{{ $item->id }}" 
                                                   onchange="toggleItemInputs({{ $i }}, this.checked)">
                                        </td>
                                        <td>
                                            <label class="form-check-label fw-bold d-block" for="chk_{{ $item->id }}">
                                                {{ $item->product_name }}
                                            </label>
                                            <span class="badge bg-light text-dark border font-monospace">{{ $item->serial_number }}</span>
                                        </td>
                                        <td>
                                            <select name="items[{{ $i }}][return_reason]" id="reason_{{ $i }}" class="form-select form-select-sm" disabled required>
                                                <option value="Defective / Quality Issue">Defective / Quality Issue</option>
                                                <option value="Damaged Packaging">Damaged Packaging</option>
                                                <option value="Expired Product">Expired Product</option>
                                                <option value="Customer Choice / Exchange">Customer Choice / Exchange</option>
                                                <option value="Wrong Item Supplied">Wrong Item Supplied</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select name="items[{{ $i }}][condition]" id="condition_{{ $i }}" class="form-select form-select-sm" disabled required>
                                                <option value="Sealed / Intact">Sealed / Intact (Restockable)</option>
                                                <option value="Opened / Used">Opened / Used</option>
                                                <option value="Damaged / Leaking">Damaged / Leaking</option>
                                                <option value="Spoiled">Spoiled / Unusable</option>
                                            </select>
                                        </td>
                                        <td class="text-end font-monospace fw-bold text-dark">
                                            ₹{{ number_format($item->line_total, 2) }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Customer / Return Notes (Optional)</label>
                        <textarea name="inspection_notes" class="form-control" rows="2" placeholder="Record customer remarks or visual defect description..."></textarea>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-warning fw-bold px-4 shadow-sm" id="btnSubmitReturn" disabled>
                            <i class="bi bi-arrow-return-left me-1"></i> Submit Return Request for Inspection
                        </button>
                    </div>
                </form>
            @endif
        </div>
    </div>
@elseif($invoiceNumber || $serialNumber)
    <div class="alert alert-warning shadow-sm">
        <i class="bi bi-exclamation-triangle me-2"></i> No sales invoice found matching "{{ $invoiceNumber ?: $serialNumber }}". Please check the invoice number or scanned serial code.
    </div>
@endif
@endsection

@push('scripts')
<script>
    function toggleItemInputs(index, isChecked) {
        document.getElementById(`reason_${index}`).disabled = !isChecked;
        document.getElementById(`condition_${index}`).disabled = !isChecked;

        const anyChecked = Array.from(document.querySelectorAll('.item-checkbox')).some(c => c.checked);
        document.getElementById('btnSubmitReturn').disabled = !anyChecked;
    }
</script>
@endpush