@extends('layouts.app')

@section('title', 'Kasir Cafe')

@section('body')
<div class="shell">
    @include('partials.sidebar', ['active' => 'cashier'])
    <main class="main">
        @include('partials.topbar', ['heading' => 'Kasir cafe'])
        <div class="content">
            <div class="page-head"><div><h2>Transaksi cafe</h2><p>Pilih produk, masukkan pembayaran, dan simpan transaksi.</p></div></div>
            @include('partials.flash')
            <div class="two-col">
                <section class="card">
                    <h3 class="card-title">Pesanan baru</h3>
                    @if ($products->isEmpty())<div class="empty"><strong>Produk belum tersedia</strong>Tambahkan produk atau stok melalui menu Produk &amp; Stok.</div>
                    @else
                    <form method="post" action="{{ route('cashier.store') }}" id="sale-form">@csrf
                        <div class="field" style="margin-bottom:15px"><label>Nama pelanggan <span class="muted">(opsional)</span></label><input name="customer_name" value="{{ old('customer_name') }}" placeholder="Pelanggan umum"></div>
                        <div class="grid product-grid">
                            @foreach ($products as $product)
                            <label class="product-line"><span><strong>{{ $product->name }}</strong><small>Rp {{ number_format($product->price, 0, ',', '.') }} · Stok {{ $product->stock }}</small></span><input class="quantity" type="number" name="quantities[{{ $product->id }}]" min="0" max="{{ $product->stock }}" value="{{ old('quantities.'.$product->id, 0) }}" data-price="{{ $product->price }}" aria-label="Jumlah {{ $product->name }}"></label>
                            @endforeach
                        </div>
                        <div class="total-box"><div class="total-row"><span>Total belanja</span><strong id="total-label">Rp 0</strong></div></div>
                        <div class="field"><label>Uang diterima (Rp)</label><input type="number" name="paid_amount" min="0" value="{{ old('paid_amount') }}" required placeholder="Masukkan nominal pembayaran"></div>
                        <div class="form-actions"><button class="btn btn-green" type="submit">Simpan transaksi</button></div>
                    </form>
                    @endif
                </section>
                <section class="card">
                    <h3 class="card-title">Transaksi cafe terakhir</h3>
                    @if ($recentSales->isEmpty())<div class="empty"><strong>Belum ada penjualan cafe</strong>Transaksi baru akan tampil di sini.</div>
                    @else<div class="table-wrap"><table style="min-width:0"><thead><tr><th>Waktu</th><th>Pelanggan</th><th>Total</th></tr></thead><tbody>
                    @foreach ($recentSales as $sale)<tr><td>{{ $sale->occurred_at->format('d/m H:i') }}</td><td>{{ $sale->customer_name ?: 'Pelanggan umum' }}</td><td><strong>Rp {{ number_format($sale->total, 0, ',', '.') }}</strong></td></tr>@endforeach
                    </tbody></table></div>@endif
                </section>
            </div>
        </div>
    </main>
</div>
<script>
    const quantities = document.querySelectorAll('.quantity');
    const totalLabel = document.getElementById('total-label');
    const updateTotal = () => {
        const total = [...quantities].reduce((sum, input) => sum + Number(input.dataset.price) * Math.max(0, Number(input.value)), 0);
        totalLabel.textContent = 'Rp ' + new Intl.NumberFormat('id-ID').format(total);
    };
    quantities.forEach((input) => input.addEventListener('input', updateTotal));
    updateTotal();
</script>
@endsection