{{-- resources/views/bookings/my-bookings.blade.php --}}
@extends('layouts.app')
@section('title', 'My Bookings — Tadoba Online')

@push('styles')
<style>
.mb-page { max-width: 1000px; margin: 48px auto; padding: 0 24px; }
.mb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.booking-card { background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); padding: 24px; margin-bottom: 20px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; transition: box-shadow .2s; }
.booking-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.bc-ref { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.bc-title { font-family:'Playfair Display',serif; font-size: 18px; color: var(--text); margin-bottom: 8px; }
.bc-meta { display: flex; gap: 20px; flex-wrap: wrap; }
.bc-meta-item { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.bc-right { text-align: right; }
.bc-amount { font-size: 22px; font-weight: 600; color: var(--primary); margin-bottom: 8px; }
.bc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.empty-state { text-align: center; padding: 80px 24px; }
.empty-icon { font-size: 64px; margin-bottom: 20px; }
</style>
@endpush

@section('content')
<div class="mb-page">
    <div class="mb-header">
        <div>
            <h1 style="font-size:28px;margin-bottom:4px;">My Bookings</h1>
            <p style="color:var(--text-muted);">All your Tadoba safari and accommodation bookings</p>
        </div>
        <a href="{{ route('book.safari') }}" class="btn-gold">+ New Booking</a>
    </div>

    @if($bookings->isEmpty())
        <div class="empty-state">
            <div class="empty-icon">🌿</div>
            <h3 style="font-size:22px;margin-bottom:8px;">No Bookings Yet</h3>
            <p style="color:var(--text-muted);margin-bottom:24px;">You haven't made any bookings yet. Start your Tadoba adventure!</p>
            <a href="{{ route('book.safari') }}" class="btn-primary">Book Safari Now</a>
        </div>
    @else
        @foreach($bookings as $booking)
        <div class="booking-card">
            <div>
                <div class="bc-ref"># {{ $booking->booking_ref }}</div>
                @if($booking->safariBooking)
                    <div class="bc-title">
                        Safari — {{ $booking->safariBooking->slot?->zone?->name }} Zone
                    </div>
                    <div class="bc-meta">
                        <span class="bc-meta-item"><i class="ti ti-calendar"></i> {{ $booking->safariBooking->slot?->safari_date?->format('d M Y') }}</span>
                        <span class="bc-meta-item"><i class="ti ti-clock"></i> {{ ucfirst($booking->safariBooking->slot?->shift) }}</span>
                        <span class="bc-meta-item"><i class="ti ti-users"></i> {{ $booking->safariBooking->total_visitors }} Visitors</span>
                        @if($booking->safariBooking->entry_permit_no)
                            <span class="bc-meta-item"><i class="ti ti-file"></i> {{ $booking->safariBooking->entry_permit_no }}</span>
                        @endif
                    </div>
                @elseif($booking->accommodationBooking)
                    <div class="bc-title">
                        Accommodation — {{ $booking->accommodationBooking->room?->accommodation?->name }}
                    </div>
                    <div class="bc-meta">
                        <span class="bc-meta-item"><i class="ti ti-calendar"></i>
                            {{ $booking->accommodationBooking->check_in?->format('d M') }} –
                            {{ $booking->accommodationBooking->check_out?->format('d M Y') }}
                        </span>
                        <span class="bc-meta-item"><i class="ti ti-moon"></i> {{ $booking->accommodationBooking->total_nights }} Nights</span>
                        <span class="bc-meta-item"><i class="ti ti-users"></i> {{ $booking->accommodationBooking->guests }} Guests</span>
                    </div>
                @endif
                <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;">
                    @php
                        $statusColors = ['pending'=>'amber','confirmed'=>'green','cancelled'=>'red','completed'=>'blue'];
                        $payColors    = ['pending'=>'amber','paid'=>'green','refunded'=>'red'];
                    @endphp
                    <span class="badge-{{ $statusColors[$booking->status] ?? 'amber' }}">{{ ucfirst($booking->status) }}</span>
                    <span class="badge-{{ $payColors[$booking->payment_status] ?? 'amber' }}">{{ ucfirst($booking->payment_status) }}</span>
                </div>
            </div>
            <div class="bc-right">
                <div class="bc-amount">₹{{ number_format($booking->total_amount) }}</div>
                <div class="bc-actions">
                    <a href="{{ route('bookings.show', $booking->booking_ref) }}" class="btn-outline" style="padding:7px 14px;font-size:13px;">View Details</a>
                    @if($booking->safariBooking?->permit_pdf_path)
                        <a href="{{ asset('storage/'.$booking->safariBooking->permit_pdf_path) }}" target="_blank" class="btn-primary" style="padding:7px 14px;font-size:13px;">
                            <i class="ti ti-download"></i> Permit
                        </a>
                    @endif
                </div>
            </div>
        </div>
        @endforeach

        <div style="margin-top:24px;">
            {{ $bookings->links() }}
        </div>
    @endif
</div>
@endsection