@extends('layouts.app')

@section('title', __('Booking') . ' #' . $booking->booking_number . ' - ' . __('general.company_name'))

@section('content')
<section style="padding: 2rem 0; min-height: 80vh;">
    <div class="container">
        <!-- Booking Header -->
        <div class="glass-morphism" style="padding: 3rem; margin-bottom: 2rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <h1 style="font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--primary-gold);">
                    {{ __('Booking') }} #{{ $booking->booking_number }}
                </h1>
                
                <!-- Status Badge -->
                <div style="padding: 0.5rem 1.5rem; border-radius: 25px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
                    @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>
            
            <p style="opacity: 0.8; font-size: 1.1rem;">
                {{ __('Booking created on') }} {{ $booking->created_at->format('F j, Y \a\t g:i A') }}
            </p>
        </div>

        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 3rem;">
            <!-- Left Column - Booking Details -->
            <div>
                <!-- Vehicle Information -->
                <div class="glass-card" style="margin-bottom: 2rem;">
                    <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem;">
                        <i class="fas fa-car" style="margin-right: 0.5rem;"></i>
                        {{ __('Vehicle Information') }}
                    </h3>
                    
                    <div style="display: flex; align-items: center; gap: 2rem;">
                        <div style="width: 150px; height: 100px; background: linear-gradient(45deg, #333, #555); border-radius: 10px; 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: 10px;">
                            @else
                                <i class="fas fa-car" style="font-size: 2rem; color: var(--primary-gold);"></i>
                            @endif
                        </div>
                        
                        <div style="flex: 1;">
                            <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem; font-size: 1.3rem;">
                                {{ $booking->vehicle->name }}
                            </h4>
                            <p style="opacity: 0.8; margin-bottom: 0.5rem;">{{ $booking->vehicle->category->name }}</p>
                            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; font-size: 0.9rem;">
                                <div><i class="fas fa-cog" style="color: var(--primary-gold); margin-right: 0.5rem;"></i>{{ ucfirst($booking->vehicle->transmission) }}</div>
                                <div><i class="fas fa-gas-pump" style="color: var(--primary-gold); margin-right: 0.5rem;"></i>{{ ucfirst($booking->vehicle->fuel_type) }}</div>
                                <div><i class="fas fa-users" style="color: var(--primary-gold); margin-right: 0.5rem;"></i>{{ $booking->vehicle->seats }} {{ __('general.seats') }}</div>
                                <div><i class="fas fa-door-open" style="color: var(--primary-gold); margin-right: 0.5rem;"></i>{{ $booking->vehicle->doors }} {{ __('general.doors') }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Rental Period -->
                <div class="glass-card" style="margin-bottom: 2rem;">
                    <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem;">
                        <i class="fas fa-calendar-alt" style="margin-right: 0.5rem;"></i>
                        {{ __('general.rental_period') }}
                    </h3>
                    
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
                        <!-- Pickup -->
                        <div>
                            <h4 style="color: var(--primary-gold); margin-bottom: 1rem;">
                                <i class="fas fa-play" style="margin-right: 0.5rem;"></i>
                                {{ __('Pickup') }}
                            </h4>
                            <div style="background: rgba(255, 215, 0, 0.1); padding: 1rem; border-radius: 10px;">
                                <p style="margin-bottom: 0.5rem;"><strong>{{ __('Date') }}:</strong> {{ $booking->pickup_datetime->format('F j, Y') }}</p>
                                <p style="margin-bottom: 0.5rem;"><strong>{{ __('Time') }}:</strong> {{ $booking->pickup_datetime->format('g:i A') }}</p>
                                <p style="margin-bottom: 0;"><strong>{{ __('Location') }}:</strong> {{ $booking->pickupLocation->name }}</p>
                                <p style="opacity: 0.8; font-size: 0.9rem; margin-top: 0.5rem;">{{ $booking->pickupLocation->address }}</p>
                            </div>
                        </div>
                        
                        <!-- Dropoff -->
                        <div>
                            <h4 style="color: var(--primary-gold); margin-bottom: 1rem;">
                                <i class="fas fa-stop" style="margin-right: 0.5rem;"></i>
                                {{ __('Dropoff') }}
                            </h4>
                            <div style="background: rgba(255, 215, 0, 0.1); padding: 1rem; border-radius: 10px;">
                                <p style="margin-bottom: 0.5rem;"><strong>{{ __('Date') }}:</strong> {{ $booking->dropoff_datetime->format('F j, Y') }}</p>
                                <p style="margin-bottom: 0.5rem;"><strong>{{ __('Time') }}:</strong> {{ $booking->dropoff_datetime->format('g:i A') }}</p>
                                <p style="margin-bottom: 0;"><strong>{{ __('Location') }}:</strong> {{ $booking->dropoffLocation->name }}</p>
                                <p style="opacity: 0.8; font-size: 0.9rem; margin-top: 0.5rem;">{{ $booking->dropoffLocation->address }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div style="text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1);">
                        <span style="font-size: 1.2rem; color: var(--primary-gold); font-weight: 600;">
                            {{ __('Total Duration') }}: {{ $booking->total_days }} {{ $booking->total_days == 1 ? __('day') : __('days') }}
                        </span>
                    </div>
                </div>

                <!-- Special Requests -->
                @if($booking->special_requests)
                <div class="glass-card" style="margin-bottom: 2rem;">
                    <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem;">
                        <i class="fas fa-comment" style="margin-right: 0.5rem;"></i>
                        {{ __('general.special_requests') }}
                    </h3>
                    <p style="opacity: 0.9; line-height: 1.6;">{{ $booking->special_requests }}</p>
                </div>
                @endif

                <!-- Customer Information -->
                <div class="glass-card">
                    <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem;">
                        <i class="fas fa-user" style="margin-right: 0.5rem;"></i>
                        {{ __('Customer Information') }}
                    </h3>
                    
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
                        <div>
                            <strong style="color: var(--primary-gold);">{{ __('general.full_name') }}:</strong>
                            <p>{{ $booking->user->full_name }}</p>
                        </div>
                        <div>
                            <strong style="color: var(--primary-gold);">{{ __('general.email') }}:</strong>
                            <p>{{ $booking->user->email }}</p>
                        </div>
                        @if($booking->user->phone)
                        <div>
                            <strong style="color: var(--primary-gold);">{{ __('general.phone') }}:</strong>
                            <p>{{ $booking->user->phone }}</p>
                        </div>
                        @endif
                        <div>
                            <strong style="color: var(--primary-gold);">{{ __('general.language') }}:</strong>
                            <p>{{ $booking->user->preferred_language === 'ar' ? __('general.arabic') : __('general.english') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Pricing & Actions -->
            <div>
                <!-- Pricing Summary -->
                <div class="glass-card" style="margin-bottom: 2rem;">
                    <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem;">
                        <i class="fas fa-calculator" style="margin-right: 0.5rem;"></i>
                        {{ __('Pricing Summary') }}
                    </h3>
                    
                    <div style="space-y: 1rem;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                            <span>{{ __('Daily Rate') }}:</span>
                            <span style="color: var(--primary-gold);">${{ number_format($booking->daily_rate, 0) }}</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                            <span>{{ __('general.total_days') }}:</span>
                            <span style="color: var(--primary-gold);">{{ $booking->total_days }}</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                            <span>{{ __('general.subtotal') }}:</span>
                            <span style="color: var(--primary-gold);">${{ number_format($booking->subtotal, 0) }}</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                            <span>{{ __('general.tax') }}:</span>
                            <span style="color: var(--primary-gold);">${{ number_format($booking->tax_amount, 0) }}</span>
                        </div>
                        @if($booking->discount_amount > 0)
                        <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; color: #28a745;">
                            <span>{{ __('general.discount') }}:</span>
                            <span>-${{ number_format($booking->discount_amount, 0) }}</span>
                        </div>
                        @endif
                        <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 1.3rem; font-weight: 700;">
                            <span>{{ __('general.total_amount') }}:</span>
                            <span style="color: var(--primary-gold);">${{ number_format($booking->total_amount, 0) }}</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; font-size: 0.9rem; opacity: 0.8;">
                            <span>{{ __('general.security_deposit') }}:</span>
                            <span>${{ number_format($booking->security_deposit, 0) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Payment Status -->
                <div class="glass-card" style="margin-bottom: 2rem;">
                    <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem;">
                        <i class="fas fa-credit-card" style="margin-right: 0.5rem;"></i>
                        {{ __('Payment Status') }}
                    </h3>
                    
                    <div style="text-align: center; padding: 1rem;">
                        <div style="padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; display: inline-block;
                            @if($booking->payment_status === 'paid') background: rgba(40, 167, 69, 0.2); color: #28a745; border: 1px solid #28a745;
                            @elseif($booking->payment_status === 'partial') background: rgba(255, 193, 7, 0.2); color: #ffc107; border: 1px solid #ffc107;
                            @elseif($booking->payment_status === 'pending') background: rgba(255, 193, 7, 0.2); color: #ffc107; border: 1px solid #ffc107;
                            @elseif($booking->payment_status === 'refunded') background: rgba(108, 117, 125, 0.2); color: #6c757d; border: 1px solid #6c757d;
                            @endif">
                            {{ ucfirst($booking->payment_status) }}
                        </div>
                        
                        @if($booking->paid_amount > 0)
                            <p style="margin-top: 1rem; opacity: 0.8;">
                                {{ __('Paid Amount') }}: ${{ number_format($booking->paid_amount, 0) }}
                            </p>
                        @endif
                    </div>
                </div>

                <!-- Actions -->
                <div class="glass-card">
                    <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem;">
                        <i class="fas fa-cogs" style="margin-right: 0.5rem;"></i>
                        {{ __('Actions') }}
                    </h3>
                    
                    <div style="display: flex; flex-direction: column; gap: 1rem;">
                        @if($booking->status === 'pending' && $booking->payment_status === 'pending')
                            <button class="btn-primary" style="width: 100%; padding: 12px;">
                                <i class="fas fa-credit-card" style="margin-right: 0.5rem;"></i>
                                {{ __('Pay Now') }}
                            </button>
                        @endif
                        
                        @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?') }}')">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="btn-secondary" style="width: 100%; padding: 12px; border-color: #dc3545; color: #dc3545;">
                                    <i class="fas fa-times" style="margin-right: 0.5rem;"></i>
                                    {{ __('Cancel Booking') }}
                                </button>
                            </form>
                        @endif
                        
                        <a href="{{ route('bookings.index') }}" class="btn-secondary" style="width: 100%; padding: 12px; text-align: center;">
                            <i class="fas fa-list" style="margin-right: 0.5rem;"></i>
                            {{ __('View All Bookings') }}
                        </a>
                        
                        <button onclick="window.print()" class="btn-secondary" style="width: 100%; padding: 12px;">
                            <i class="fas fa-print" style="margin-right: 0.5rem;"></i>
                            {{ __('Print Booking') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('styles')
<style>
    @media print {
        .navbar, footer, .actions-card {
            display: none !important;
        }
        
        .glass-morphism, .glass-card {
            background: white !important;
            color: black !important;
            border: 1px solid #ddd !important;
        }
    }
    
    @media (max-width: 768px) {
        .booking-details-grid {
            grid-template-columns: 1fr !important;
        }
        
        .rental-period-grid {
            grid-template-columns: 1fr !important;
        }
        
        .customer-info-grid {
            grid-template-columns: 1fr !important;
        }
    }
</style>
@endpush
@endsection