@extends('layouts.app')

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

@section('content')
<section style="padding: 2rem 0; min-height: 80vh;">
    <div class="container">
        <div class="glass-morphism" style="padding: 3rem; margin-bottom: 2rem;">
            <h1 style="font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 1rem; text-align: center;">
                {{ __('Book Your Vehicle') }}
            </h1>
            <p style="text-align: center; opacity: 0.8; margin-bottom: 2rem;">
                {{ __('Complete the form below to reserve your luxury vehicle') }}
            </p>
        </div>

        @if($errors->any())
            <div class="glass-morphism" style="padding: 2rem; margin-bottom: 2rem; border-color: #dc3545;">
                <ul style="list-style: none; margin: 0; color: #ff6b6b;">
                    @foreach($errors->all() as $error)
                        <li style="margin-bottom: 0.5rem;">
                            <i class="fas fa-exclamation-circle" style="margin-right: 0.5rem;"></i>
                            {{ $error }}
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('bookings.store') }}">
            @csrf
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;">
                <!-- Left Column - Vehicle & Dates -->
                <div>
                    <!-- Vehicle Selection -->
                    <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 Selection') }}
                        </h3>
                        
                        @if($vehicle)
                            <input type="hidden" name="vehicle_id" value="{{ $vehicle->id }}">
                            <div style="display: flex; align-items: center; padding: 1rem; background: rgba(255, 215, 0, 0.1); border-radius: 10px;">
                                <div style="flex: 1;">
                                    <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ $vehicle->name }}</h4>
                                    <p style="opacity: 0.8; margin-bottom: 0.5rem;">{{ $vehicle->category->name }}</p>
                                    <p style="font-size: 1.2rem; font-weight: 600; color: var(--primary-gold);">
                                        ${{ number_format($vehicle->daily_rate, 0) }}/{{ __('general.per_day') }}
                                    </p>
                                </div>
                                <div>
                                    <a href="{{ route('vehicles.index') }}" class="btn-secondary" style="padding: 8px 15px; font-size: 0.9rem;">
                                        {{ __('Change Vehicle') }}
                                    </a>
                                </div>
                            </div>
                        @else
                            <p style="opacity: 0.8; margin-bottom: 1rem;">{{ __('Please select a vehicle first') }}</p>
                            <a href="{{ route('vehicles.index') }}" class="btn-primary">
                                {{ __('Browse Vehicles') }}
                            </a>
                        @endif
                    </div>

                    <!-- Pickup Details -->
                    <div class="glass-card" style="margin-bottom: 2rem;">
                        <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem;">
                            <i class="fas fa-map-marker-alt" style="margin-right: 0.5rem;"></i>
                            {{ __('general.pickup_location') }}
                        </h3>
                        
                        <div style="margin-bottom: 1.5rem;">
                            <label for="pickup_location_id" style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                                {{ __('Location') }}
                            </label>
                            <select name="pickup_location_id" id="pickup_location_id" required 
                                    style="width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light);">
                                <option value="">{{ __('Select pickup location') }}</option>
                                @foreach($locations as $location)
                                    <option value="{{ $location->id }}" {{ old('pickup_location_id') == $location->id ? 'selected' : '' }}>
                                        {{ $location->name }} - {{ $location->city }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                            <div>
                                <label for="pickup_date" style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                                    {{ __('general.pickup_date') }}
                                </label>
                                <input type="date" name="pickup_date" id="pickup_date" value="{{ old('pickup_date') }}" required
                                       min="{{ date('Y-m-d', strtotime('+1 day')) }}"
                                       style="width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light);">
                            </div>
                            <div>
                                <label for="pickup_time" style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                                    {{ __('general.pickup_time') }}
                                </label>
                                <input type="time" name="pickup_time" id="pickup_time" value="{{ old('pickup_time', '10:00') }}" required
                                       style="width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light);">
                            </div>
                        </div>
                    </div>

                    <!-- Dropoff Details -->
                    <div class="glass-card">
                        <h3 style="color: var(--primary-gold); margin-bottom: 1.5rem;">
                            <i class="fas fa-map-marker-alt" style="margin-right: 0.5rem;"></i>
                            {{ __('general.dropoff_location') }}
                        </h3>
                        
                        <div style="margin-bottom: 1.5rem;">
                            <label for="dropoff_location_id" style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                                {{ __('Location') }}
                            </label>
                            <select name="dropoff_location_id" id="dropoff_location_id" required 
                                    style="width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light);">
                                <option value="">{{ __('Select dropoff location') }}</option>
                                @foreach($locations as $location)
                                    <option value="{{ $location->id }}" {{ old('dropoff_location_id') == $location->id ? 'selected' : '' }}>
                                        {{ $location->name }} - {{ $location->city }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                            <div>
                                <label for="dropoff_date" style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                                    {{ __('general.dropoff_date') }}
                                </label>
                                <input type="date" name="dropoff_date" id="dropoff_date" value="{{ old('dropoff_date') }}" required
                                       min="{{ date('Y-m-d', strtotime('+2 days')) }}"
                                       style="width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light);">
                            </div>
                            <div>
                                <label for="dropoff_time" style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                                    {{ __('general.dropoff_time') }}
                                </label>
                                <input type="time" name="dropoff_time" id="dropoff_time" value="{{ old('dropoff_time', '10:00') }}" required
                                       style="width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light);">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column - Summary & Special Requests -->
                <div>
                    <!-- Booking 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>
                            {{ __('Booking Summary') }}
                        </h3>
                        
                        @if($vehicle)
                            <div id="booking-summary">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
                                    <span>{{ __('Vehicle') }}:</span>
                                    <span style="color: var(--primary-gold);">{{ $vehicle->name }}</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                                    <span>{{ __('Daily Rate') }}:</span>
                                    <span style="color: var(--primary-gold);">${{ number_format($vehicle->daily_rate, 0) }}</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                                    <span>{{ __('general.total_days') }}:</span>
                                    <span id="total-days" style="color: var(--primary-gold);">-</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                                    <span>{{ __('general.subtotal') }}:</span>
                                    <span id="subtotal" style="color: var(--primary-gold);">-</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                                    <span>{{ __('general.tax') }} (5%):</span>
                                    <span id="tax-amount" style="color: var(--primary-gold);">-</span>
                                </div>
                                <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.2rem; font-weight: 600;">
                                    <span>{{ __('general.total_amount') }}:</span>
                                    <span id="total-amount" style="color: var(--primary-gold);">-</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($vehicle->security_deposit, 0) }}</span>
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- 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>
                        
                        <textarea name="special_requests" rows="4" placeholder="{{ __('Any special requests or requirements...') }}"
                                  style="width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light); resize: vertical;">{{ old('special_requests') }}</textarea>
                    </div>

                    <!-- Submit Button -->
                    @if($vehicle)
                        <button type="submit" class="btn-primary" style="width: 100%; padding: 15px; font-size: 1.1rem;">
                            <i class="fas fa-check" style="margin-right: 0.5rem;"></i>
                            {{ __('Confirm Booking') }}
                        </button>
                    @endif
                </div>
            </div>
        </form>
    </div>
</section>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const pickupDate = document.getElementById('pickup_date');
        const dropoffDate = document.getElementById('dropoff_date');
        const dailyRate = {{ $vehicle ? $vehicle->daily_rate : 0 }};
        
        function updateSummary() {
            if (!pickupDate.value || !dropoffDate.value || !dailyRate) return;
            
            const pickup = new Date(pickupDate.value);
            const dropoff = new Date(dropoffDate.value);
            const timeDiff = dropoff.getTime() - pickup.getTime();
            const daysDiff = Math.max(1, Math.ceil(timeDiff / (1000 * 3600 * 24)));
            
            const subtotal = dailyRate * daysDiff;
            const tax = subtotal * 0.05;
            const total = subtotal + tax;
            
            document.getElementById('total-days').textContent = daysDiff;
            document.getElementById('subtotal').textContent = '$' + subtotal.toLocaleString();
            document.getElementById('tax-amount').textContent = '$' + tax.toLocaleString();
            document.getElementById('total-amount').textContent = '$' + total.toLocaleString();
        }
        
        pickupDate.addEventListener('change', function() {
            // Update minimum dropoff date
            const minDropoff = new Date(this.value);
            minDropoff.setDate(minDropoff.getDate() + 1);
            dropoffDate.min = minDropoff.toISOString().split('T')[0];
            updateSummary();
        });
        
        dropoffDate.addEventListener('change', updateSummary);
        
        // Initial calculation
        updateSummary();
    });
</script>
@endpush

@push('styles')
<style>
    select option {
        background: var(--primary-dark);
        color: var(--text-light);
    }
    
    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--primary-gold) !important;
        box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
    }
    
    input::placeholder, textarea::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }
    
    @media (max-width: 768px) {
        .booking-grid {
            grid-template-columns: 1fr !important;
        }
        
        .date-time-grid {
            grid-template-columns: 1fr !important;
        }
    }
</style>
@endpush
@endsection