@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto px-6 py-1">
    <h1 class="text-3xl font-bold text-gray-900 mb-6">My Bookings</h1>

    @if(session('success'))
        <div class="mb-6 p-4 bg-green-100 border border-green-300 text-green-700 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    @if($bookings->isEmpty())
        <div class="text-center py-10 text-gray-500">
            <p>No bookings yet. Go find a <a href="{{ route('dewans.index') }}" class="text-indigo-600 font-semibold hover:underline">Dewan</a> to book!</p>
        </div>
    @else
        <div class="overflow-x-auto bg-white shadow rounded-xl border border-gray-200">
            <table class="w-full text-sm border-collapse">
                <thead>
                    <tr class="bg-indigo-100 text-gray-800 text-left">
                        <th class="px-4 py-3 border font-semibold">Dewan</th>
                        <th class="px-4 py-3 border font-semibold">Facility</th>
                        <th class="px-4 py-3 border font-semibold">Date</th>
                        <th class="px-4 py-3 border font-semibold text-center">Time</th>
                        <th class="px-4 py-3 border font-semibold text-center">Amount (RM)</th>
                        <th class="px-4 py-3 border font-semibold text-center">Status</th>
                        <th class="px-4 py-3 border font-semibold text-center">Action</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($bookings as $booking)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 border text-gray-800">{{ $booking->dewan->name ?? '-' }}</td>
                            <td class="px-4 py-3 border text-gray-800">{{ $booking->facility->name ?? '-' }}</td>
                            <td class="px-4 py-3 border text-gray-800">{{ \Carbon\Carbon::parse($booking->date)->format('d M Y') }}</td>
                            <td class="px-4 py-3 border text-center text-gray-800">
                                {{ $booking->time_start }} - {{ $booking->time_end }}
                            </td>
                            <td class="px-4 py-3 border text-center font-medium text-gray-800">
                                {{ number_format($booking->total_amount, 2) }}
                            </td>
                            <td class="px-4 py-3 border text-center">
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-yellow-100 text-yellow-800',
                                        'awaiting_verification' => 'bg-blue-100 text-blue-800',
                                        'approved' => 'bg-green-100 text-green-800',
                                        'rejected' => 'bg-red-100 text-red-800',
                                        'cancelled' => 'bg-gray-200 text-gray-600',
                                    ];
                                @endphp
                                <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $statusColors[$booking->status] ?? 'bg-gray-100 text-gray-700' }}">
                                    {{ ucfirst(str_replace('_', ' ', $booking->status)) }}
                                </span>
                            </td>
                            <td class="px-4 py-3 border text-center space-x-2">
                                @php
                                    $buttonStyles = [
                                        'pay' => 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200',
                                        'cancel' => 'bg-red-100 text-red-800 hover:bg-red-200',
                                        'print' => 'bg-gray-100 text-gray-700 hover:bg-gray-200',
                                    ];
                                @endphp

                                @if($booking->status === 'pending')
                                    {{-- Make Payment --}}
                                    <a href="{{ route('payments.create', $booking->id) }}" 
                                    class="inline-block px-3 py-1 rounded-full text-xs font-semibold {{ $buttonStyles['pay'] }}">
                                        Make Payment
                                    </a>
                                    {{-- Cancel Booking --}}
                                    <form method="POST" action="{{ route('bookings.cancel', $booking->id) }}" class="inline" onsubmit="return confirm('Cancel this booking?');">
                                        @csrf
                                        <button type="submit" class="px-3 py-1 rounded-full text-xs font-semibold {{ $buttonStyles['cancel'] }}">
                                            Cancel
                                        </button>
                                    </form>
                                @elseif($booking->status === 'awaiting_verification')
                                    <form method="POST" action="{{ route('bookings.cancel', $booking->id) }}" class="inline" onsubmit="return confirm('Cancel this booking?');">
                                        @csrf
                                        <button type="submit" class="px-3 py-1 rounded-full text-xs font-semibold {{ $buttonStyles['cancel'] }}">
                                            Cancel
                                        </button>
                                    </form>
                                @elseif($booking->status === 'approved')
                                    {{-- Print Receipt --}}
                                    <a href="{{ route('payments.receipt', $booking->id) }}" 
                                    target="_blank"
                                    class="inline-block px-3 py-1 rounded-full text-xs font-semibold {{ $buttonStyles['print'] }}">
                                        Print Receipt
                                    </a>
                                    <form method="POST" action="{{ route('bookings.cancel', $booking->id) }}" class="inline" onsubmit="return confirm('Cancel this booking?');">
                                        @csrf
                                        <button type="submit" class="px-3 py-1 rounded-full text-xs font-semibold {{ $buttonStyles['cancel'] }}">
                                            Cancel
                                        </button>
                                    </form>
                                @elseif($booking->status === 'cancelled')
                                    <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-500">
                                        Cancelled
                                    </span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection