@extends('layouts.main') 
@section('content') 
<div x-data="{ 
        showModal: false, 
        qrCodeUrl: '',
        venueName: '',
        bookingDate: '',
        bookingTime: '' 
     }"
     x-on:keydown.escape.window="showModal = false; document.body.style.overflow = 'auto';"
     class="min-h-screen bg-gray-100">

    {{-- ======================================================= --}}
    {{-- START: MODAL UNTUK MENAMPILKAN QR CODE                 --}}
    {{-- ======================================================= --}}
    <div x-show="showModal"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 p-4"
         x-cloak>
        
        <div @click.away="showModal = false; document.body.style.overflow = 'auto';" class="bg-white rounded-lg shadow-xl p-6 max-w-sm w-full text-center">
            <h3 class="text-lg font-bold text-gray-800" x-text="venueName"></h3>
            <p class="text-sm text-gray-500 mb-4">
                <span x-text="bookingDate"></span> - <span x-text="bookingTime"></span>
            </p>
            
            <div class="p-4 border rounded-lg bg-white">
                <img :src="qrCodeUrl" alt="Booking QR Code" class="w-full h-auto">
            </div>

            <p class="text-xs text-gray-500 mt-4">Tunjukkan QR Code ini kepada kasir saat Anda tiba di venue.</p>

            <div class="mt-6 flex space-x-4">
                <button @click="showModal = false; document.body.style.overflow = 'auto';" class="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 font-medium">Tutup</button>
                <a :href="qrCodeUrl" download="tiket-carimeja.svg" class="w-full flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium">Download</a>
            </div>
        </div>
    </div>
<div class="min-h-96 mx-4 md:w-3/4 md:mx-auto py-8">
        <h1 class="text-2xl font-bold mb-6">Riwayat Bookingg</h1>

        @if($bookings->isEmpty())
            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <p class="text-gray-500">Anda belum memiliki riwayat booking.</p>
                <a href="{{ url('/') }}" class="mt-4 inline-block bg-blue-500 text-white px-4 py-2 rounded-lg">Cari
                    Venue</a>
            </div>
        @else
            <div class="space-y-4">
                @foreach($bookings as $booking)
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="p-4 border-b {{ $booking->start_time > now() ? 'bg-green-50' : 'bg-gray-50' }}">
                            <div class="flex justify-between items-center">
                                <h3 class="font-semibold text-lg">{{ $booking->table->venue->name }}</h3>
                                <span
                                    class="px-3 py-1 rounded-full text-sm {{ $booking->start_time > now() ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-800' }}">
                                    {{ $booking->start_time > now() ? 'Upcoming' : 'Completed' }}
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-gray-500">Meja</p>
                                    <p class="font-medium">{{ $booking->table->name }} ({{ $booking->table->brand }})</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">Tanggal & Waktu</p>
                                    <p class="font-medium">{{ \Carbon\Carbon::parse($booking->start_time)->format('d M Y') }},
                                        {{ \Carbon\Carbon::parse($booking->start_time)->format('H:i') }} -
                                        {{ \Carbon\Carbon::parse($booking->end_time)->format('H:i') }}
                                    </p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">Durasi</p>
                                    <p class="font-medium">
                                        {{ \Carbon\Carbon::parse($booking->start_time)->diffInHours($booking->end_time) }} Jam
                                    </p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">Total Bayar</p>
                                    <p class="font-medium">Rp {{ number_format($booking->total_amount, 0, ',', '.') }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">Status Pembayaran</p>
                                    <p class="font-medium capitalize">{{ $booking->status }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">Metode Pembayaran</p>
                                    <p class="font-medium capitalize">{{ $booking->payment_method ?? '-' }}</p>
                                </div>
                                @if($booking->has_rescheduled)
                                    <div class="col-span-2">
                                        <p class="text-sm text-gray-500">Informasi Reschedule</p>
                                        <p class="text-sm text-orange-600">
                                            Booking ini telah di-reschedule dari tanggal
                                            {{ \Carbon\Carbon::parse($booking->original_start_time)->format('d M Y') }} jam
                                            {{ \Carbon\Carbon::parse($booking->original_start_time)->format('H:i') }} -
                                            {{ \Carbon\Carbon::parse($booking->original_end_time)->format('H:i') }}
                                        </p>
                                    </div>
                                @endif
                            </div>

                            <div class="border-t mt-4 pt-4 flex justify-end items-center space-x-4">
    <a href="{{ route('venue', $booking->table->venue->name) }}" class="text-sm text-blue-600 hover:underline font-medium">
        Lihat Venue
    </a>

    {{-- Hanya tampilkan tombol jika status lunas --}}
    @if($booking->status == 'paid')

        {{-- Opsi untuk booking yang AKAN DATANG --}}
        @if(now()->lt($booking->start_time))
            {{-- Tombol Reschedule, dengan asumsi ada kolom reschedule_count di tabel bookings --}}
            @if(isset($booking->reschedule_count) && $booking->reschedule_count < 1)
                <a href="{{ route('booking.reschedule.form', $booking) }}" class="text-sm text-orange-600 hover:underline font-medium">
                    Reschedule
                </a>
            @endif
        @endif
        
        {{-- Opsi untuk booking yang SUDAH SELESAI --}}
        @if(now()->gt($booking->end_time))
            @if(!$booking->review)
                <a href="{{ route('reviews.create', $booking) }}" class="text-sm text-green-600 hover:underline font-medium">
                    Beri Ulasan
                </a>
            @else
                <span class="text-sm text-gray-500">Ulasan diberikan</span>
            @endif
        @endif

        {{-- Tombol QR selalu muncul untuk booking lunas yang punya token --}}
        @if($booking->validation_token)
            <button @click="
                        showModal = true;
                        qrCodeUrl = '{{ route('booking.qrcode', $booking) }}';
                        venueName = '{{ addslashes($booking->table->venue->name) }}';
                        bookingDate = '{{ $booking->start_time->format("d M Y") }}';
                        bookingTime = '{{ $booking->start_time->format("H:i") }} - {{ $booking->end_time->format("H:i") }}';
                        document.body.style.overflow = 'hidden';
                    "
                    class="bg-blue-600 text-white text-sm font-bold px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                Lihat Tiket (QR)
            </button>
        @endif

    @endif
</div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-6">
                {{ $bookings->links() }}
            </div>
        @endif
    </div>
@endsection