@extends('layouts.website')

@section('title', 'Checkout')

@section('content')
<div class="page-card" style="max-width:760px;margin:auto;">
    <h1 style="margin-bottom:.35rem;">Checkout</h1>
    <p class="muted" style="margin-top:0;margin-bottom:1rem;">Confirm your details and place your order.</p>

    <form id="order-form">
        @csrf
        <input type="hidden" name="branch_id" value="{{ $branchId }}">

        <div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr));">
            <div>
                <label>Name *</label>
                <input type="text" name="customer_name" required style="width:100%;padding:.72rem;border:1px solid #d1d5db;border-radius:10px;margin-top:.25rem;">
            </div>
            <div>
                <label>Phone</label>
                <input type="text" name="customer_phone" style="width:100%;padding:.72rem;border:1px solid #d1d5db;border-radius:10px;margin-top:.25rem;">
            </div>
            <div>
                <label>Email</label>
                <input type="email" name="customer_email" style="width:100%;padding:.72rem;border:1px solid #d1d5db;border-radius:10px;margin-top:.25rem;">
            </div>
            <div>
                <label>Order Type</label>
                <select name="type" style="width:100%;padding:.72rem;border:1px solid #d1d5db;border-radius:10px;margin-top:.25rem;">
                    <option value="takeaway">Takeaway</option>
                    <option value="dine_in">Dine In</option>
                    <option value="delivery">Delivery</option>
                </select>
            </div>
        </div>

        <div style="margin-top:1rem;">
            <label>Notes</label>
            <textarea name="notes" style="width:100%;padding:.72rem;border:1px solid #d1d5db;border-radius:10px;margin-top:.25rem;"></textarea>
        </div>
        <div style="margin-top:1rem;">
            <label>Coupon</label>
            <input type="text" name="coupon_code" style="width:100%;padding:.72rem;border:1px solid #d1d5db;border-radius:10px;margin-top:.25rem;">
        </div>

        <div id="order-summary" style="margin:1rem 0;padding:1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;"></div>
        <button type="submit" class="btn">Place Order (Pay on Pickup)</button>
    </form>
</div>
@endsection

@section('scripts')
<script>
const branchId = {{ $branchId }};
let cart = JSON.parse(sessionStorage.getItem('checkout_cart') || '[]');
if (!cart.length) { window.location = '{{ route("website.cart") }}'; }

document.getElementById('order-summary').innerHTML = `
    <p style="margin:.1rem 0;">Items: ${cart.reduce((s,i) => s + i.qty, 0)}</p>
    <p style="margin:.35rem 0 0;"><strong>Total: Rs ${cart.reduce((s,i) => s + i.price * i.qty, 0).toFixed(0)}</strong></p>
`;

document.getElementById('order-form').addEventListener('submit', async e => {
    e.preventDefault();
    const form = e.target;
    const items = cart.map(i => ({ product_id: i.product_id, qty: i.qty }));
    const data = {
        branch_id: branchId,
        items,
        customer_name: form.customer_name.value,
        customer_phone: form.customer_phone.value || null,
        customer_email: form.customer_email.value || null,
        type: form.type.value,
        notes: form.notes.value || null,
        coupon_code: form.coupon_code.value || null,
        _token: form._token.value
    };
    const r = await fetch('{{ route("website.orders.store") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': form._token.value },
        body: JSON.stringify(data)
    });
    const res = await r.json();
    if (res.success) {
        localStorage.removeItem('cart');
        sessionStorage.removeItem('checkout_cart');
        window.location = res.redirect;
    } else {
        alert(res.message || 'Order failed');
    }
});
</script>
@endsection