@extends('layouts.user.app')
{{-- @include('layouts.user.header') --}}

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <div class="bg-white rounded-lg shadow-lg p-8">
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
                    <i class="fas fa-check text-3xl text-green-500"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-800 mb-2">Reservasi Berhasil!</h2>
                <p class="text-gray-600">Terima kasih telah melakukan reservasi di restoran kami.</p>
            </div>

            <!-- Detail Reservasi -->
            <div class="border-b pb-6 mb-6">
                <h3 class="text-lg font-bold text-[#8B0000] mb-4">Detail Reservasi</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-gray-600">Nomor Reservasi:</p>
                        <p class="font-bold">#{{ str_pad($reservasi->id, 5, '0', STR_PAD_LEFT) }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Status:</p>
                        <p class="font-bold text-green-600">{{ ucfirst($reservasi->status) }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Tanggal:</p>
                        <p class="font-bold">{{ \Carbon\Carbon::parse($reservasi->tanggal)->format('d M Y') }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Waktu:</p>
                        <p class="font-bold">{{ $reservasi->jam }} ({{ $reservasi->durasi }} jam)</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Nomor Meja:</p>
                        <p class="font-bold">Meja {{ $reservasi->meja->nomor_meja }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Jumlah Orang:</p>
                        <p class="font-bold">{{ $reservasi->jumlah_orang }} Orang</p>
                    </div>
                </div>
            </div>

            <!-- Detail Pesanan -->
            <div class="border-b pb-6 mb-6">
                <h3 class="text-lg font-bold text-[#8B0000] mb-4">Detail Pesanan</h3>
                <div class="space-y-3">
                    @foreach($reservasi->items as $item)
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="font-medium">{{ $item->menu->nama }}</p>
                            <p class="text-sm text-gray-600">{{ $item->quantity }}x @ Rp {{ number_format($item->price, 0, ',', '.') }}</p>
                        </div>
                        <p class="font-bold">Rp {{ number_format($item->quantity * $item->price, 0, ',', '.') }}</p>
                    </div>
                    @endforeach
                    <div class="border-t pt-3 mt-3">
                        <div class="flex justify-between items-center font-bold">
                            <p>Total Pembayaran</p>
                            <p>Rp {{ number_format($reservasi->transaksi->total_amount, 0, ',', '.') }}</p>
                        </div>
                        <div class="flex justify-between items-center text-sm text-gray-600 mt-1">
                            <p>Metode Pembayaran</p>
                            <p>{{ ucfirst(str_replace('_', ' ', $reservasi->transaksi->payment_method)) }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Buttons -->
            <div class="flex justify-center space-x-4">
                <a href="{{ route('menu.index') }}" class="bg-gray-100 text-gray-800 px-6 py-2 rounded-lg hover:bg-gray-200 transition">
                    <i class="fas fa-home mr-2"></i> Kembali ke Menu
                </a>
                <button onclick="window.print()" class="bg-[#8B0000] text-white px-6 py-2 rounded-lg hover:bg-[#660000] transition">
                    <i class="fas fa-print mr-2"></i> Cetak Bukti Reservasi
                </button>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
@media print {
    .header, .footer, button {
        display: none !important;
    }
    body {
        background: white;
    }
    .container {
        max-width: none;
        padding: 0;
    }
    .shadow-lg {
        box-shadow: none;
    }
}
</style>
@endpush
@endsection