@extends('layout') @section('title','Kasir Cafe') @section('heading','Kasir Cafe') @section('content')<div class="row g-3"><div class="col-lg-7"><div class="card p-4"><h5 class="fw-bold mb-3">Produk Tersedia</h5><div class="row g-3">@foreach($products as $p)<div class="col-md-6"><div class="border rounded-3 p-3 h-100"><div class="fw-bold">{{ $p->name }}</div><div class="muted small">{{ $p->category }} · Stok {{ $p->stock }}</div><div class="text-primary fw-bold mt-2">Rp {{ number_format($p->price,0,',','.') }}</div></div></div>@endforeach</div></div></div><div class="col-lg-5"><div class="card p-4"><h5 class="fw-bold">Buat Transaksi</h5><form method="post" action="{{ route('cashier.checkout') }}" id="checkout">@csrf<label class="form-label">Produk</label><select name="product_id" id="product" class="form-select mb-3" required>@foreach($products as $p)<option value="{{ $p->id }}" data-price="{{ $p->price }}">{{ $p->name }} — Rp {{ number_format($p->price,0,',','.') }}</option>@endforeach</select><label class="form-label">Jumlah</label><input type="number" name="qty" id="qty" min="1" value="1" class="form-control mb-3" required><div class="bg-light p-3 rounded mb-3">Total: <strong id="total">Rp 0</strong></div><label class="form-label">Metode pembayaran</label><select name="payment_method" class="form-select mb-3"><option value="tunai">Tunai</option><option value="qris">QRIS</option><option value="transfer">Transfer</option></select><label class="form-label">Dibayar (Rp)</label><input type="number" name="paid_amount" id="paid" min="0" class="form-control mb-3" required><button class="btn btn-primary w-100">Proses Pembayaran</button></form></div></div></div><script>const p=document.getElementById('product'),q=document.getElementById('qty'),t=document.getElementById('total'),paid=document.getElementById('paid');function calc(){let price=Number(p.options[p.selectedIndex]?.dataset.price||0),sum=price*Number(q.value||0);t.textContent='Rp '+sum.toLocaleString('id-ID');if(!paid.dataset.edited)paid.value=sum;}p.addEventListener('change',()=>{delete paid.dataset.edited;calc()});q.addEventListener('input',()=>{delete paid.dataset.edited;calc()});paid.addEventListener('input',()=>paid.dataset.edited='1');calc();</script>@endsection