@extends('layouts.kiosk')
@section('title', 'Review Your Order')

@section('content')
<div class="h-screen flex flex-col max-w-3xl mx-auto">

    <header class="px-8 py-6 flex items-center gap-4">
        <a href="{{ route('kiosk.menu', $kiosk) }}" class="w-14 h-14 rounded-2xl bg-white border border-orange-100 flex items-center justify-center text-2xl">←</a>
        <h1 class="text-2xl font-bold text-gray-900">Review Your Order</h1>
    </header>

    @if (session('error'))
        <div class="mx-8 mb-4 bg-red-50 text-red-600 px-5 py-4 rounded-2xl text-lg">{{ session('error') }}</div>
    @endif

    <div class="flex-1 overflow-y-auto px-8">
        <div class="bg-white rounded-2xl border border-orange-100 p-6">
            @foreach ($cart as $line)
                <div class="flex justify-between items-center py-3 border-b border-orange-50 last:border-0">
                    <div>
                        <p class="font-semibold text-lg text-gray-900">{{ $line['name'] }}</p>
                        <p class="text-gray-400">₹{{ $line['price'] }} × {{ $line['qty'] }}</p>
                    </div>
                    <p class="font-bold text-lg">₹{{ number_format($line['price'] * $line['qty'], 0) }}</p>
                </div>
            @endforeach
        </div>

        <div class="bg-white rounded-2xl border border-orange-100 p-6 mt-4 text-lg space-y-2">
            <div class="flex justify-between text-gray-500"><span>Subtotal</span><span>₹{{ number_format($summary['subtotal'], 2) }}</span></div>
            @if ($summary['packingCharge'] > 0)
                <div class="flex justify-between text-gray-500"><span>Packing Charge</span><span>₹{{ number_format($summary['packingCharge'], 2) }}</span></div>
            @endif
            <div class="flex justify-between text-gray-500"><span>GST</span><span>₹{{ number_format($summary['gst'], 2) }}</span></div>
            <div class="flex justify-between font-bold text-2xl text-gray-900 pt-2 border-t border-orange-50">
                <span>Total</span><span>₹{{ number_format($summary['grandTotal'], 2) }}</span>
            </div>
        </div>
    </div>

    <div class="px-8 py-6">
        <p class="text-center text-gray-500 mb-4 text-lg">How would you like to pay?</p>
        <div class="grid grid-cols-2 gap-4">
            <form method="POST" action="{{ route('kiosk.pay.cash', $kiosk) }}">
                @csrf
                <button class="w-full bg-white border-2 border-orange-500 text-orange-600 font-bold text-xl py-6 rounded-2xl flex flex-col items-center gap-2">
                    <span class="text-3xl">💵</span> Pay with Cash
                    <span class="text-sm font-normal text-gray-400">Pay at the counter</span>
                </button>
            </form>
            <form method="POST" action="{{ route('kiosk.pay.digital', $kiosk) }}">
                @csrf
                <button class="w-full bg-orange-500 text-white font-bold text-xl py-6 rounded-2xl flex flex-col items-center gap-2">
                    <span class="text-3xl">💳</span> Pay by Card / UPI
                    <span class="text-sm font-normal text-orange-100">Pay now on screen</span>
                </button>
            </form>
        </div>
    </div>
</div>
@endsection