@extends('layouts.app')

@section('title', __('general.bookings') . ' - ' . __('general.company_name'))

@section('content')
<section style="padding: 2rem 0; min-height: 80vh;">
    <div class="container">
        <!-- Header -->
        <div class="glass-morphism" style="padding: 3rem; margin-bottom: 2rem;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <h1 style="font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 0.5rem;">
                        {{ __('general.bookings') }}
                    </h1>
                    <p style="opacity: 0.8; font-size: 1.1rem;">
                        {{ __('Manage your car rental reservations') }}
                    </p>
                </div>
                <a href="{{ route('bookings.create') }}" class="btn-primary" style="padding: 12px 25px;">
                    <i class="fas fa-plus" style="margin-right: 0.5rem;"></i>
                    {{ __('New Booking') }}
                </a>
            </div>
        </div>

        @if(session('success'))
            <div class="glass-morphism" style="padding: 2rem; margin-bottom: 2rem; border-color: #28a745;">
                <div style="color: #28a745; display: flex; align-items: center;">
                    <i class="fas fa-check-circle" style="margin-right: 0.5rem; font-size: 1.2rem;"></i>
                    {{ session('success') }}
                </div>
            </div>
        @endif

        @if($bookings->count() > 0)
            <!-- Bookings List -->
            <div style="display: flex; flex-direction: column; gap: 1.5rem;">
                @foreach($bookings as $booking)
                    <div class="glass-card" style="transition: all 0.3s ease;">
                        <div style="display: grid; grid-template-columns: auto 1fr auto auto; gap: 2rem; align-items: center;">
                            <!-- Vehicle Image -->
                            <div style="width: 100px; height: 70px; background: linear-gradient(45deg, #333, #555); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                @if($booking->vehicle->primaryImage)
                                    <img src="{{ $booking->vehicle->primaryImage->url }}" alt="{{ $booking->vehicle->name }}" 
                                         style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
                                @else
                                    <i class="fas fa-car" style="font-size: 1.5rem; color: var(--primary-gold);"></i>
                                @endif
                            </div>

                            <!-- Booking Details -->
                            <div>
                                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
                                    <h3 style="color: var(--primary-gold); margin: 0; font-size: 1.2rem;">
                                        {{ $booking->vehicle->name }}
                                    </h3>
                                    <span style="font-size: 0.8rem; opacity: 0.7; background: rgba(255, 255, 255, 0.1); padding: 0.2rem 0.8rem; border-radius: 12px;">
                                        #{{ $booking->booking_number }}
                                    </span>
                                </div>
                                
                                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; font-size: 0.9rem; opacity: 0.9;">
                                    <div>
                                        <i class="fas fa-calendar" style="color: var(--primary-gold); margin-right: 0.5rem;"></i>
                                        {{ $booking->pickup_datetime->format('M j, Y') }} - {{ $booking->dropoff_datetime->format('M j, Y') }}
                                    </div>
                                    <div>
                                        <i class="fas fa-clock" style="color: var(--primary-gold); margin-right: 0.5rem;"></i>
                                        {{ $booking->total_days }} {{ $booking->total_days == 1 ? __('day') : __('days') }}
                                    </div>
                                    <div>
                                        <i class="fas fa-map-marker-alt" style="color: var(--primary-gold); margin-right: 0.5rem;"></i>
                                        {{ $booking->pickupLocation->city }}
                                        @if($booking->pickupLocation->id !== $booking->dropoffLocation->id)
                                            → {{ $booking->dropoffLocation->city }}
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Status & Price -->
                            <div style="text-align: center;">
                                <div style="padding: 0.4rem 1rem; border-radius: 20px; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem;
                                    @if($booking->status === 'confirmed') background: rgba(40, 167, 69, 0.2); color: #28a745; border: 1px solid #28a745;
                                    @elseif($booking->status === 'pending') background: rgba(255, 193, 7, 0.2); color: #ffc107; border: 1px solid #ffc107;
                                    @elseif($booking->status === 'active') background: rgba(0, 123, 255, 0.2); color: #007bff; border: 1px solid #007bff;
                                    @elseif($booking->status === 'completed') background: rgba(40, 167, 69, 0.2); color: #28a745; border: 1px solid #28a745;
                                    @elseif($booking->status === 'cancelled') background: rgba(220, 53, 69, 0.2); color: #dc3545; border: 1px solid #dc3545;
                                    @endif">
                                    {{ ucfirst($booking->status) }}
                                </div>
                                <div style="font-size: 1.1rem; font-weight: 600; color: var(--primary-gold);">
                                    ${{ number_format($booking->total_amount, 0) }}
                                </div>
                            </div>

                            <!-- Actions -->
                            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                                <a href="{{ route('bookings.show', $booking) }}" class="btn-primary" style="padding: 8px 15px; font-size: 0.9rem; text-align: center;">
                                    {{ __('general.view_details') }}
                                </a>
                                
                                @if(in_array($booking->status, ['pending', 'confirmed']))
                                    <form method="POST" action="{{ route('bookings.cancel', $booking) }}" 
                                          onsubmit="return confirm('{{ __('Are you sure you want to cancel this booking?') }}')"
                                          style="margin: 0;">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" class="btn-secondary" style="padding: 6px 15px; font-size: 0.8rem; width: 100%; border-color: #dc3545; color: #dc3545;">
                                            {{ __('general.cancel') }}
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            @if($bookings->hasPages())
                <div style="margin-top: 3rem; text-align: center;">
                    {{ $bookings->links() }}
                </div>
            @endif
        @else
            <!-- Empty State -->
            <div class="glass-morphism" style="padding: 4rem; text-center;">
                <i class="fas fa-calendar-times" style="font-size: 4rem; color: var(--primary-gold); opacity: 0.5; margin-bottom: 2rem;"></i>
                <h3 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.5rem;">
                    {{ __('No Bookings Yet') }}
                </h3>
                <p style="opacity: 0.8; margin-bottom: 2rem; font-size: 1.1rem;">
                    {{ __('You haven\'t made any bookings yet. Start by browsing our luxury vehicle collection.') }}
                </p>
                <div style="display: flex; justify-content: center; gap: 1rem;">
                    <a href="{{ route('vehicles.index') }}" class="btn-primary" style="padding: 12px 25px;">
                        <i class="fas fa-car" style="margin-right: 0.5rem;"></i>
                        {{ __('Browse Vehicles') }}
                    </a>
                    <a href="{{ route('bookings.create') }}" class="btn-secondary" style="padding: 12px 25px;">
                        <i class="fas fa-plus" style="margin-right: 0.5rem;"></i>
                        {{ __('New Booking') }}
                    </a>
                </div>
            </div>
        @endif

        <!-- Quick Stats -->
        @if($bookings->count() > 0)
            <div class="glass-morphism" style="padding: 2rem; margin-top: 3rem;">
                <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem; text-align: center;">
                    {{ __('Booking Statistics') }}
                </h3>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; text-align: center;">
                    <div>
                        <div style="font-size: 2rem; font-weight: 700; color: var(--primary-gold); margin-bottom: 0.5rem;">
                            {{ $bookings->total() }}
                        </div>
                        <div style="opacity: 0.8; font-size: 0.9rem;">{{ __('Total Bookings') }}</div>
                    </div>
                    
                    <div>
                        <div style="font-size: 2rem; font-weight: 700; color: var(--primary-gold); margin-bottom: 0.5rem;">
                            {{ $bookings->where('status', 'confirmed')->count() }}
                        </div>
                        <div style="opacity: 0.8; font-size: 0.9rem;">{{ __('Confirmed') }}</div>
                    </div>
                    
                    <div>
                        <div style="font-size: 2rem; font-weight: 700; color: var(--primary-gold); margin-bottom: 0.5rem;">
                            {{ $bookings->where('status', 'completed')->count() }}
                        </div>
                        <div style="opacity: 0.8; font-size: 0.9rem;">{{ __('Completed') }}</div>
                    </div>
                    
                    <div>
                        <div style="font-size: 2rem; font-weight: 700; color: var(--primary-gold); margin-bottom: 0.5rem;">
                            ${{ number_format($bookings->sum('total_amount'), 0) }}
                        </div>
                        <div style="opacity: 0.8; font-size: 0.9rem;">{{ __('Total Spent') }}</div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</section>

@push('styles')
<style>
    .glass-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 40px rgba(255, 215, 0, 0.15);
    }
    
    @media (max-width: 768px) {
        .booking-grid {
            grid-template-columns: 1fr !important;
            gap: 1rem !important;
        }
        
        .booking-details-grid {
            grid-template-columns: 1fr !important;
        }
        
        .stats-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
        
        .actions-column {
            flex-direction: row !important;
            justify-content: space-between;
        }
    }
    
    @media (max-width: 480px) {
        .stats-grid {
            grid-template-columns: 1fr !important;
        }
    }
</style>
@endpush
@endsection