@extends('guest.layouts.auth')

@section('title', 'My Bookings & Stays | Kevron Suites & Apartments')

@section('dashboard_content')
<div class="space-y-6">
    <div class="border-b border-slate-200 dark:border-slate-800 pb-4">
        <h1 class="text-slate-900 dark:text-white text-lg font-serif uppercase tracking-wider">My Bookings & Stays</h1>
        <p class="text-xs text-slate-400 font-semibold mt-0.5">Explore your visual history, upcoming itineraries, and checked-in suites.</p>
    </div>

    @if($bookings->isEmpty())
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-12 text-center shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
            <div class="w-12 h-12 bg-slate-100 dark:bg-slate-800 text-slate-400 rounded-full flex items-center justify-center mx-auto">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider font-serif">No Stays Linked</h3>
            <p class="text-xs text-slate-400 max-w-xs mx-auto font-semibold">
                You do not have any active or confirmed stays linked to this account. You can link one using the stay linking form on your dashboard overview!
            </p>
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            @foreach($bookings as $booking)
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:-translate-y-0.5 transition-transform duration-300 flex flex-col justify-between space-y-6">
                    
                    <div class="space-y-4">
                        <div class="flex justify-between items-start border-b border-slate-100 dark:border-slate-800 pb-3">
                            <div>
                                <span class="text-[9px] text-slate-400 font-mono tracking-wider font-bold">REF: {{ $booking->booking_reference }}</span>
                                <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider font-serif mt-0.5">
                                    {{ $booking->apartmentType->name }}
                                </h3>
                            </div>
                            
                            <!-- Badges -->
                            @php
                                $badgeClass = 'bg-slate-50 border-slate-200 text-slate-850';
                                if($booking->status === 'checked_in') $badgeClass = 'bg-emerald-50 border-emerald-200 text-emerald-800';
                                elseif($booking->status === 'confirmed') $badgeClass = 'bg-blue-50 border-blue-200 text-blue-800';
                                elseif($booking->status === 'completed') $badgeClass = 'bg-slate-100 border-slate-300 text-slate-800';
                                elseif($booking->status === 'cancelled') $badgeClass = 'bg-red-50 border-red-200 text-red-800';
                            @endphp
                            <span class="border {{ $badgeClass }} text-[9px] uppercase px-2.5 py-0.5 rounded-full font-bold tracking-wider">
                                {{ str_replace('_', ' ', $booking->status) }}
                            </span>
                        </div>

                        <div class="grid grid-cols-2 gap-4 text-xs font-semibold">
                            <div>
                                <span class="text-slate-400 block uppercase tracking-wider text-[9px] mb-0.5">Check-In</span>
                                <span class="text-slate-800 dark:text-slate-200 font-bold">{{ Carbon\Carbon::parse($booking->check_in_date)->format('M d, Y') }}</span>
                            </div>
                            <div>
                                <span class="text-slate-400 block uppercase tracking-wider text-[9px] mb-0.5">Check-Out</span>
                                <span class="text-slate-800 dark:text-slate-200 font-bold">{{ Carbon\Carbon::parse($booking->check_out_date)->format('M d, Y') }}</span>
                            </div>
                            <div>
                                <span class="text-slate-400 block uppercase tracking-wider text-[9px] mb-0.5">Guests</span>
                                <span class="text-slate-800 dark:text-slate-200 font-bold">{{ $booking->guests_count }} Guests</span>
                            </div>
                            <div>
                                <span class="text-slate-400 block uppercase tracking-wider text-[9px] mb-0.5">Price Nightly</span>
                                <span class="text-[#D6A84F] font-bold">₦{{ number_format($booking->apartmentType->base_price_nightly, 0) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-slate-100 dark:border-slate-800 pt-4 flex items-center justify-between">
                        <div>
                            <span class="text-[9px] text-slate-400 block uppercase tracking-wider">Total Charge</span>
                            <span class="text-xs font-bold text-slate-900 dark:text-white">₦{{ number_format($booking->total_price, 2) }}</span>
                        </div>
                        
                        <a href="{{ route('guest.bookings.show', $booking->booking_reference) }}" 
                           class="btn-pill btn-primary text-[10px] px-5 py-2 hover:shadow-md">
                            View stay details
                        </a>
                    </div>

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