@extends('admin.layouts.app')
@section('title', 'New Sale')
@section('content')
<div class="card" style="max-width:760px;">
    <form method="POST" action="{{ route('admin.sales.store') }}" id="saleForm">
        @csrf
        <div class="grid-2">
            <div class="field"><label>Table (optional)</label>
                <select name="restaurant_table_id">
                    <option value="">Walk-in / No table</option>
                    @foreach($tables as $t)<option value="{{ $t->id }}">{{ $t->table_number }}</option>@endforeach
                </select>
            </div>
            <div class="field"><label>Payment Method</label>
                <select name="payment_method" required>
                    <option value="cash">Cash</option>
                    <option value="card">Card</option>
                    <option value="mobile_banking">Mobile Banking</option>
                    <option value="other">Other</option>
                </select>
            </div>
        </div>
        <div class="field"><label>Promo Code (optional)</label><input type="text" name="promo_code" style="text-transform:uppercase;"></div>

        <div id="itemsWrap">
            <div class="grid-3 item-row" style="margin-bottom:10px;">
                <select name="items[0][product_id]" required>
                    <option value="">Select Product</option>
                    @foreach($products as $p)<option value="{{ $p->id }}">{{ $p->name }} — {{ $siteSettings['currency'] }}{{ $p->finalPrice() }} ({{ $p->stock_quantity }} in stock)</option>@endforeach
                </select>
                <input type="number" name="items[0][quantity]" placeholder="Quantity" min="1" value="1" required>
            </div>
        </div>
        <button type="button" class="btn btn-outline btn-sm" onclick="addRow()">+ Add Item</button>
        <br><br>
        <button class="btn btn-primary" type="submit">Record Sale</button>
    </form>
</div>
@endsection
@push('scripts')
<script>
    let i = 1;
    function addRow() {
        const wrap = document.getElementById('itemsWrap');
        const row = wrap.children[0].cloneNode(true);
        row.querySelectorAll('select,input').forEach(el => {
            el.name = el.name.replace(/\[\d+\]/, `[${i}]`);
            el.value = el.tagName === 'INPUT' ? 1 : '';
        });
        wrap.appendChild(row);
        i++;
    }
</script>
@endpush