@extends('layouts.user.app')
{{-- @include('layouts.user.header') --}}
@section('content')
<div class="container mx-auto px-4">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-2xl font-bold text-[#8B0000] mb-8">Checkout</h1>

        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4">Detail Pesanan</h2>
            
            <div class="space-y-4">
                @foreach($cartItems as $item)
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-medium">{{ $item->menu->name }}</p>
                        <p class="text-gray-600">{{ $item->quantity }}x @ Rp {{ number_format($item->price, 0, ',', '.') }}</p>
                    </div>
                    <p class="font-medium">Rp {{ number_format($item->subtotal, 0, ',', '.') }}</p>
                </div>
                @endforeach
            </div>

            <div class="border-t border-gray-200 mt-6 pt-6 space-y-2">
                <div class="flex justify-between items-center">
                    <p class="text-gray-600">Subtotal</p>
                    <p class="font-medium">Rp {{ number_format($totals['subtotal'], 0, ',', '.') }}</p>
                </div>
                <div class="flex justify-between items-center">
                    <p class="text-gray-600">Pajak (10%)</p>
                    <p class="font-medium">Rp {{ number_format($totals['tax'], 0, ',', '.') }}</p>
                </div>
                <div class="flex justify-between items-center">
                    <p class="text-gray-600">Service Charge (5%)</p>
                    <p class="font-medium">Rp {{ number_format($totals['service'], 0, ',', '.') }}</p>
                </div>
                <div class="flex justify-between items-center text-lg font-bold mt-4">
                    <p>Total</p>
                    <p class="text-[#8B0000]">Rp {{ number_format($totals['final'], 0, ',', '.') }}</p>
                </div>
            </div>
        </div>

        <form action="{{ route('checkout.process') }}" method="POST" class="bg-white rounded-lg shadow-lg p-6">
            @csrf
            <h2 class="text-xl font-semibold mb-4">Informasi Pembayaran</h2>
            
            <div class="space-y-4">
                <div>
                    <label for="payment_method" class="block text-gray-600 mb-2">Metode Pembayaran</label>
                    <select name="payment_method" id="payment_method" required 
                            class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8B0000] focus:border-transparent">
                        <option value="">Pilih metode pembayaran</option>
                        <option value="transfer">Transfer Bank</option>
                        <option value="qris">QRIS</option>
                        <option value="cash">Tunai</option>
                    </select>
                </div>

                <div>
                    <label for="notes" class="block text-gray-600 mb-2">Catatan (opsional)</label>
                    <textarea name="notes" id="notes" rows="3" 
                              class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8B0000] focus:border-transparent"
                              placeholder="Tambahkan catatan untuk pesanan Anda..."></textarea>
                </div>
            </div>

            <div class="mt-6">
                <button type="submit" 
                        class="w-full bg-[#8B0000] text-white py-3 rounded-lg font-bold hover:bg-[#660000] transition transform hover:scale-105">
                    Konfirmasi Pembayaran
                </button>
            </div>
        </form>
    </div>
</div>
@endsection