@extends('layouts.app')

@section('title', "Correct POS Sale #{$sale->sale_id}")

@php
    $fmt = fn ($n) => rtrim(rtrim(number_format((float) $n, 2), '0'), '.');
    // Rows to show: the sale's own lines (or what was typed, after a validation error).
    $oldQty = old('qty');
    $rows = $sale->items->map(fn ($i) => ['item_id' => $i->item_id, 'name' => $i->item_name, 'price' => (float) $i->unit_price, 'qty' => $oldQty[$i->item_id] ?? (float) $i->quantity, 'original' => true]);
    if (is_array($oldQty)) {
        foreach ($oldQty as $id => $q) {
            if (!$rows->contains('item_id', (int) $id) && ($item = $catalog->firstWhere('item_id', (int) $id))) {
                $rows->push(['item_id' => $item->item_id, 'name' => $item->item_name, 'price' => (float) $item->price, 'qty' => $q, 'original' => false]);
            }
        }
    }
@endphp

@section('content')
<div class="page-header">
    <div>
        <div class="eyebrow"><a href="{{ route('hotel.pos-reconciliation.index', ['start' => $sale->sale_date?->toDateString(), 'end' => $sale->sale_date?->toDateString()]) }}" class="text-reset text-decoration-none"><i class="bi bi-arrow-left me-1"></i>Folio &amp; POS Reconciliation</a></div>
        <h1>Correct POS Sale #{{ $sale->sale_id }}</h1>
        <p>{{ $sale->outlet_name }} · {{ $sale->sale_date?->format('M d, Y') }} · {{ $walkIn ? 'Walk-in, paid by ' . $sale->payment_method : 'Charged to Room ' . ($sale->booking?->room?->room_number ?? '?') . ' — ' . ($sale->booking?->guest_name ?? 'guest') }} · rung up by {{ $sale->created_by ?: '—' }}</p>
    </div>
    <a href="{{ route('hotel.receipts.pos', $sale) }}" class="btn btn-outline-secondary"><i class="bi bi-receipt me-1"></i> Receipt</a>
</div>

@if ($blocker)
    <div class="alert alert-warning"><i class="bi bi-lock me-1"></i>{{ $blocker }}</div>
@else
<form method="POST" action="{{ route('hotel.pos-sales.correct.update', $sale) }}" id="correctForm">
    @csrf
    <div class="row g-4">
        <div class="col-lg-8">
            <section class="panel">
                <div class="panel-header">
                    <div><h2>Items</h2><p>Change quantities, set a quantity to 0 to remove an item, or add one that was missed. Items already on the sale keep the price they were sold at; added items take today's price.</p></div>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead><tr><th>Item</th><th class="text-end" style="width:140px;">Price</th><th style="width:130px;" class="text-end">Quantity</th><th class="text-end" style="width:150px;">Line total</th><th style="width:44px;"></th></tr></thead>
                        <tbody id="lines">
                            @foreach ($rows as $r)
                                <tr data-price="{{ $r['price'] }}">
                                    <td class="fw-semibold">{{ $r['name'] }}@unless ($r['original'])<span class="status-pill pill-reserved ms-2">Added</span>@endunless</td>
                                    <td class="text-end money">₦{{ number_format($r['price'], 2) }}</td>
                                    <td><input type="number" name="qty[{{ $r['item_id'] }}]" class="form-control form-control-sm text-end js-qty" step="1" min="0" value="{{ $fmt($r['qty']) }}" aria-label="Quantity of {{ $r['name'] }}"></td>
                                    <td class="text-end money js-line">₦0.00</td>
                                    <td><button type="button" class="btn btn-sm btn-light border text-danger js-zero" title="Remove" aria-label="Remove {{ $r['name'] }}"><i class="bi bi-x-lg"></i></button></td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5">
                                    <div class="d-flex gap-2 align-items-center">
                                        <label for="addItem" class="visually-hidden">Add an item</label>
                                        <select id="addItem" class="form-select form-select-sm" style="max-width: 360px;">
                                            <option value="">Add an item that was missed…</option>
                                            @foreach ($catalog as $c)<option value="{{ $c->item_id }}" data-price="{{ (float) $c->price }}" data-name="{{ $c->item_name }}">{{ $c->item_name }} — ₦{{ number_format((float) $c->price, 2) }}</option>@endforeach
                                        </select>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" id="addBtn"><i class="bi bi-plus-lg"></i> Add</button>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </section>
        </div>

        <div class="col-lg-4">
            <section class="panel mb-4">
                <div class="panel-header"><h2>Payment</h2></div>
                <div class="panel-body">
                    <div class="d-flex justify-content-between small"><span>Subtotal</span><span class="money" id="subtotal">₦0.00</span></div>
                    @if ($walkIn)
                        <div class="d-flex justify-content-between align-items-center small my-2">
                            <label for="discount" class="mb-0">Discount (₦)</label>
                            <input type="number" id="discount" name="discount_amount" class="form-control form-control-sm text-end" style="width: 130px;" step="0.01" min="0" value="{{ old('discount_amount', (float) $sale->discount_amount) }}">
                        </div>
                    @endif
                    <div class="d-flex justify-content-between fw-bold border-top pt-2 mt-2"><span>New total</span><span class="money" id="total">₦0.00</span></div>
                    <div class="small text-muted">Was ₦{{ number_format((float) $sale->total_amount, 2) }} · VAT inclusive</div>

                    @if ($walkIn)
                        <hr>
                        <label for="method" class="form-label">Paid by</label>
                        <select id="method" name="payment_method" class="form-select mb-3">
                            @foreach (['Cash' => 'Cash', 'Transfer' => 'Bank Transfer / Card', 'Guest Ledger' => 'Guest Ledger'] as $m => $label)<option value="{{ $m }}" @selected(old('payment_method', $sale->payment_method) === $m)>{{ $label }}</option>@endforeach
                        </select>
                        <label for="ext" class="form-label">Statement reference <span class="text-muted fw-normal">(optional)</span></label>
                        <input type="text" id="ext" name="external_reference" class="form-control mb-3" maxlength="100" value="{{ old('external_reference', $statementRef) }}" placeholder="Card terminal / transfer ref">
                        <div class="row g-2">
                            <div class="col-7"><label for="cust" class="form-label small">Customer</label><input type="text" id="cust" name="customer_name" class="form-control form-control-sm" maxlength="150" value="{{ old('customer_name', $sale->customer_name) }}"></div>
                            <div class="col-5"><label for="phone" class="form-label small">Phone</label><input type="text" id="phone" name="customer_phone" class="form-control form-control-sm" maxlength="50" value="{{ old('customer_phone', $sale->customer_phone) }}"></div>
                        </div>
                    @else
                        <div class="alert alert-light border small mt-3 mb-0">Still on the guest's folio: the folio charge is updated to the new total and billed at check-out as usual.</div>
                    @endif
                </div>
            </section>

            <section class="panel">
                <div class="panel-header"><h2>Correction</h2></div>
                <div class="panel-body">
                    <label for="reason" class="form-label">Reason</label>
                    <input type="text" id="reason" name="reason" class="form-control mb-3" maxlength="255" placeholder="e.g. Rang up 3 Chapman, guest had 2" value="{{ old('reason') }}" required>
                    <span class="form-label d-block">Date the correction</span>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="reversal_date" id="rd_original" value="original" @checked(old('reversal_date', 'original') === 'original')>
                        <label class="form-check-label" for="rd_original">On the sale's date ({{ $sale->sale_date?->format('M d, Y') }})</label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="reversal_date" id="rd_today" value="today" @checked(old('reversal_date') === 'today')>
                        <label class="form-check-label" for="rd_today">Today</label>
                    </div>
                    <div class="form-text mb-3">The sale's date keeps that day's takings right; choose today if that day has already been reported.</div>
                    <button type="submit" class="btn btn-primary w-100"><i class="bi bi-wrench-adjustable me-1"></i> Reverse &amp; record correction</button>
                    <p class="small text-muted mt-3 mb-0">The stock the sale used goes back on the shelf and its postings are reversed; the corrected sale is then recorded under the same receipt number. Both stay in the journal.</p>
                </div>
            </section>
        </div>
    </div>
</form>
@endif
@endsection

@if (!$blocker)
@push('scripts')
<script>
(() => {
    const $ = (id) => document.getElementById(id);
    const naira = (n) => '₦' + (Number(n) || 0).toLocaleString('en-NG', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    const body = $('lines');
    const recalc = () => {
        let sub = 0;
        body.querySelectorAll('tr').forEach(r => {
            const line = (parseFloat(r.querySelector('.js-qty').value) || 0) * parseFloat(r.dataset.price);
            r.querySelector('.js-line').textContent = naira(line);
            r.classList.toggle('text-muted', line === 0);
            sub += line;
        });
        const disc = Math.min(sub, parseFloat($('discount')?.value) || 0);
        $('subtotal').textContent = naira(sub);
        $('total').textContent = naira(sub - disc);
    };
    body.addEventListener('input', recalc);
    $('discount')?.addEventListener('input', recalc);
    body.addEventListener('click', (e) => {
        const b = e.target.closest('.js-zero');
        if (b) { b.closest('tr').querySelector('.js-qty').value = 0; recalc(); }
    });
    $('addBtn').addEventListener('click', () => {
        const o = $('addItem').selectedOptions[0];
        if (!o?.value) return;
        const existing = body.querySelector(`[name="qty[${o.value}]"]`);
        if (existing) { existing.value = (parseFloat(existing.value) || 0) + 1; recalc(); return; }
        const tr = document.createElement('tr');
        tr.dataset.price = o.dataset.price;
        tr.innerHTML = `<td class="fw-semibold"></td><td class="text-end money">${naira(o.dataset.price)}</td>
            <td><input type="number" class="form-control form-control-sm text-end js-qty" step="1" min="0" value="1"></td>
            <td class="text-end money js-line"></td><td><button type="button" class="btn btn-sm btn-light border text-danger js-zero" title="Remove"><i class="bi bi-x-lg"></i></button></td>`;
        tr.querySelector('td').textContent = o.dataset.name; // text, not HTML
        tr.querySelector('td').insertAdjacentHTML('beforeend', '<span class="status-pill pill-reserved ms-2">Added</span>');
        tr.querySelector('.js-qty').name = `qty[${o.value}]`;
        body.appendChild(tr);
        $('addItem').value = '';
        recalc();
    });
    recalc();
})();
</script>
@endpush
@endif