@extends('garage.layouts.app')

@section('title', 'Make receipt')

@section('content')
@php
    $custLine = trim(($sale->customer_ledger_code ? $sale->customer_ledger_code.' · ' : '').($sale->customer_ledger_name ?? 'Customer'));
    $vehLine = trim(($sale->vehicle_registration ?? '').' '.trim(($sale->vehicle_make ?? '').' '.($sale->vehicle_model ?? '')).($sale->vehicle_year ? ' '.$sale->vehicle_year : ''));
    $subLine = $subLedger ? trim(($subLedger->sub_code ?? '').' '.($subLedger->title ?? '')) : '';
    $embed = request()->boolean('embed');
    $ps = $paymentSummary ?? [
        'grand_total' => (float) ($sale->grand_total ?? 0),
        'advance_amount' => 0,
        'amount_paid_on_sale' => (float) ($sale->amount_paid ?? 0),
        'balance_due' => (float) ($amount ?? 0),
    ];
    $defaultReceipt = (float) old('receipt_amount', $ps['balance_due'] ?? $amount);
@endphp

<style>
    .sr-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.18rem .55rem; border:1px solid #e5e7eb; border-radius:999px; background:#fff; font-size:.82rem; }
    .sr-chip .k { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#64748b; }
    .sr-chip .v { font-weight:700; color:#0f172a; }
    .sr-lines th, .sr-lines td { padding:.35rem .5rem; }
    .sr-mini { font-size:.82rem; color:#64748b; }
</style>

<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h1 class="h5 mb-1"><i class="bi bi-receipt me-2 text-success"></i>Make receipt</h1>
            <div class="d-flex flex-wrap gap-2">
                <span class="sr-chip"><span class="k">Sale</span><span class="v font-monospace">{{ $sale->sale_number }}</span></span>
                <span class="sr-chip"><span class="k">Date</span><span class="v">{{ $sale->sale_date }}</span></span>
                <span class="sr-chip"><span class="k">Due now</span><span class="v">PKR {{ number_format($amount, 2) }}</span></span>
            </div>
            <div class="sr-mini mt-2 border rounded p-2 bg-light">
                <div><strong>Invoice total:</strong> PKR {{ number_format((float) $ps['grand_total'], 2) }}</div>
                @if((float) ($ps['advance_amount'] ?? 0) > 0)
                <div><strong>Advance (order receipt):</strong> PKR {{ number_format((float) $ps['advance_amount'], 2) }} <span class="text-muted">— already received</span></div>
                @endif
                @if((float) ($ps['amount_paid_on_sale'] ?? 0) > 0)
                <div><strong>Paid on this sale:</strong> PKR {{ number_format((float) $ps['amount_paid_on_sale'], 2) }}</div>
                @endif
                <div class="fw-semibold text-success"><strong>Balance due:</strong> PKR {{ number_format((float) $ps['balance_due'], 2) }}</div>
            </div>
            <div class="sr-mini mt-2">
                <div><strong>Customer:</strong> {{ $custLine }}</div>
                @if($vehLine !== '')
                    <div><strong>Vehicle:</strong> {{ $vehLine }}</div>
                @endif
                @if($subLine !== '')
                    <div><strong>Sub-ledger:</strong> {{ $subLine }}</div>
                @endif
            </div>
        </div>
        @if(!$embed)
            <div class="d-flex gap-2">
                <a href="{{ route('garage.sales.show', $sale->id) }}" class="btn btn-sm btn-outline-secondary">Back</a>
            </div>
        @endif
    </div>

    <form action="{{ route('garage.sales.receipt', $sale->id) }}" method="POST" class="row g-3">
        @csrf

        <div class="col-12 col-md-4">
            <label class="form-label small text-muted mb-1">Receipt amount <span class="text-danger">*</span></label>
            <input type="number" step="0.01" min="0.01" max="{{ number_format((float) $ps['balance_due'], 2, '.', '') }}" name="receipt_amount" id="srReceiptAmount"
                   value="{{ number_format($defaultReceipt, 2, '.', '') }}"
                   class="form-control form-control-sm @error('receipt_amount') is-invalid @enderror">
            <div class="form-text">Partial payment allowed (installments). Max PKR {{ number_format((float) $ps['balance_due'], 2) }}.</div>
            @error('receipt_amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label small text-muted mb-1">Narration (optional)</label>
            @php
                $defaultNarr = 'Receipt against '.$sale->sale_number;
                if ((float) ($ps['advance_amount'] ?? 0) > 0) {
                    $defaultNarr .= ' · PKR '.number_format((float) $ps['advance_amount'], 2).' already received in advance';
                }
            @endphp
            <input type="text" name="narration" value="{{ old('narration', $defaultNarr) }}" class="form-control form-control-sm @error('narration') is-invalid @enderror" placeholder="Short narration…">
            @error('narration')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-3">
            <label class="form-label small text-muted mb-1">Payment mode</label>
            <select name="payment_mode" id="srPaymentMode" class="form-select form-select-sm @error('payment_mode') is-invalid @enderror">
                <option value="cash" @selected(old('payment_mode','cash')==='cash')>Cash</option>
                <option value="bank" @selected(old('payment_mode')==='bank')>Bank</option>
                <option value="online" @selected(old('payment_mode')==='online')>Online</option>
                <option value="credit" @selected(old('payment_mode')==='credit')>Credit</option>
            </select>
            @error('payment_mode')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-3" id="srChequeNoWrap" style="display:none;">
            <label class="form-label small text-muted mb-1">Cheque no.</label>
            <input type="text" name="cheque_no" value="{{ old('cheque_no') }}" class="form-control form-control-sm @error('cheque_no') is-invalid @enderror">
            @error('cheque_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-12 col-md-3" id="srChequeDateWrap" style="display:none;">
            <label class="form-label small text-muted mb-1">Cheque date</label>
            <input type="date" name="cheque_date" value="{{ old('cheque_date') }}" class="form-control form-control-sm @error('cheque_date') is-invalid @enderror">
            @error('cheque_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-12 col-md-3" id="srChequeBankWrap" style="display:none;">
            <label class="form-label small text-muted mb-1">Cheque bank</label>
            <input type="text" name="cheque_bank" value="{{ old('cheque_bank') }}" class="form-control form-control-sm @error('cheque_bank') is-invalid @enderror">
            @error('cheque_bank')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-3" id="srInstrumentWrap" style="display:none;">
            <label class="form-label small text-muted mb-1">Instrument / Ref no.</label>
            <input type="text" name="instrument_no" value="{{ old('instrument_no') }}" class="form-control form-control-sm @error('instrument_no') is-invalid @enderror" placeholder="Txn/Instrument/Cheque ref…">
            @error('instrument_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12">
            <div class="table-responsive border rounded bg-white">
                <table class="table table-sm mb-0 sr-lines align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Ledger</th>
                            <th style="width:90px;">Type</th>
                            <th style="width:170px;" class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="table-light">
                            <td class="fw-semibold">Debit (Payment)</td>
                            <td></td>
                            <td class="text-end small text-muted">Debit total must match receipt amount</td>
                        </tr>
                        <tr>
                            <td>
                                <select name="debit_ledger_id[]" class="form-select form-select-sm sr-debit-ledger">
                                    <option value="">Select payment ledger…</option>
                                    @foreach(($paymentLedgers ?? collect()) as $l)
                                        <option value="{{ $l->id }}"
                                                data-kind="{{ $l->kind ?? 'other' }}"
                                                @selected(old('debit_ledger_id.0') == $l->id)>
                                            {{ $l->name }} @if($l->code) · {{ $l->code }} @endif
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td><span class="badge bg-success-subtle text-success border border-success-subtle">Dr</span></td>
                            <td class="text-end">
                                <input type="number" step="0.01" min="0" name="debit_amount[]" value="{{ old('debit_amount.0', number_format($defaultReceipt, 2, '.', '')) }}" class="form-control form-control-sm text-end sr-debit-amt">
                            </td>
                        </tr>
                        <tr id="srAddRowWrap">
                            <td colspan="3">
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="srAddRowBtn">+ Add another payment entry</button>
                            </td>
                        </tr>
                        <tr class="table-light">
                            <td class="fw-semibold">Credit (Customer)</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="fw-semibold">
                                {{ $custLine }}
                                @if($subLine !== '') <span class="text-muted">/ {{ $subLine }}</span> @endif
                            </td>
                            <td><span class="badge bg-danger-subtle text-danger border border-danger-subtle">Cr</span></td>
                            <td class="text-end fw-semibold text-danger sr-credit-amt">PKR {{ number_format($defaultReceipt, 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="small text-muted mt-2">Posts a receipt voucher (Dr cash/bank, Cr customer). Full payment marks sale paid; partial keeps status as partial until balance is cleared.</div>
        </div>

        <div class="col-12 d-flex gap-2">
            <button type="submit" class="btn btn-sm btn-success">Save receipt</button>
            @if(!$embed)
                <a href="{{ route('garage.sales.show', $sale->id) }}" class="btn btn-sm btn-outline-secondary">Cancel</a>
            @else
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.parent && window.parent.postMessage({type:'close-receipt-modal'}, '*');">Close</button>
            @endif
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        var mode = document.getElementById('srPaymentMode');
        var wChequeNo = document.getElementById('srChequeNoWrap');
        var wChequeDate = document.getElementById('srChequeDateWrap');
        var wChequeBank = document.getElementById('srChequeBankWrap');
        var wInst = document.getElementById('srInstrumentWrap');

        function refreshMode() {
            var m = mode ? mode.value : 'cash';
            var showBank = (m === 'bank');
            var showOnline = (m === 'online');
            if (wChequeNo) wChequeNo.style.display = showBank ? '' : 'none';
            if (wChequeDate) wChequeDate.style.display = showBank ? '' : 'none';
            if (wChequeBank) wChequeBank.style.display = showBank ? '' : 'none';
            if (wInst) wInst.style.display = (showOnline) ? '' : 'none';

            // Filter payment ledgers by mode (cash/bank); credit shows all.
            var want = (m === 'cash') ? 'cash' : ((m === 'bank' || m === 'online') ? 'bank' : null);
            document.querySelectorAll('select.sr-debit-ledger').forEach(function (sel) {
                Array.from(sel.options).forEach(function (opt) {
                    if (!opt.value) return;
                    var k = opt.getAttribute('data-kind') || 'other';
                    opt.hidden = want ? (k !== want && k !== 'other') : false;
                });
            });
        }
        if (mode) {
            mode.addEventListener('change', refreshMode);
            refreshMode();
        }

        var addBtn = document.getElementById('srAddRowBtn');
        var addWrap = document.getElementById('srAddRowWrap');
        if (addBtn && addWrap) {
            addBtn.addEventListener('click', function () {
                var opts = (window.__SR_PAY__ || []).map(function (l) {
                    return `<option value="${l.id}" data-kind="${escapeHtml(l.kind || 'other')}">${escapeHtml(l.name)}${l.code ? ' · '+escapeHtml(l.code) : ''}</option>`;
                }).join('');
                var tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>
                        <select name="debit_ledger_id[]" class="form-select form-select-sm sr-debit-ledger">
                            <option value="">Select payment ledger…</option>
                            ${opts}
                        </select>
                    </td>
                    <td><span class="badge bg-success-subtle text-success border border-success-subtle">Dr</span></td>
                    <td class="text-end"><input type="number" step="0.01" min="0" name="debit_amount[]" value="0.00" class="form-control form-control-sm text-end sr-debit-amt"></td>
                `;
                addWrap.parentNode.insertBefore(tr, addWrap);
                refreshMode();
            });
        }

        function escapeHtml(s) {
            return String(s ?? '').replace(/[&<>"']/g, function (c) {
                return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]);
            });
        }

        var receiptAmt = document.getElementById('srReceiptAmount');
        function syncReceiptAmount() {
            var v = receiptAmt ? (parseFloat(receiptAmt.value) || 0) : 0;
            document.querySelectorAll('.sr-debit-amt').forEach(function (inp, idx) {
                if (idx === 0) inp.value = v.toFixed(2);
            });
            var cr = document.querySelector('.sr-credit-amt');
            if (cr) cr.textContent = 'PKR ' + v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }
        if (receiptAmt) {
            receiptAmt.addEventListener('input', syncReceiptAmount);
            syncReceiptAmount();
        }
    })();
</script>
<script>
    @php
        // Keep @json() argument simple to avoid Blade compilation issues.
        $payLedgersForJs = collect($paymentLedgers ?? [])->map(function ($l) {
            return [
                'id' => (int) ($l->id ?? 0),
                'name' => (string) ($l->name ?? ''),
                'code' => $l->code ?? null,
                'kind' => (string) ($l->kind ?? 'other'),
            ];
        })->values()->all();
    @endphp
    window.__SR_PAY__ = @json($payLedgersForJs);
</script>
@endpush