@extends('layouts.app')

@section('title', $vehicle->name . ' - ' . __('general.company_name'))

@section('content')
    <!-- Vehicle Page Header -->
    <section class="page-header"
        style="padding: 4rem 1rem 2rem 1rem; background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.03)); position: relative; overflow: hidden;">
        <div class="hero-bg"
            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 70%); opacity: 0.3; pointer-events: none;">
        </div>
        <div class="container text-center" style="position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;">
            <div class="page-header-content" style="max-width: 800px; margin: 0 auto;">
                <div class="page-icon" style="margin-bottom: 1.5rem;">
                    <div
                        style="width: 80px; height: 80px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3);">
                        <i class="fas fa-car-side" style="font-size: 2rem; color: var(--primary-dark);"></i>
                    </div>
                </div>
                <div style="margin-bottom: 1rem;">
                    <span
                        style="background: var(--primary-gold); color: var(--primary-dark); padding: 0.5rem 1.5rem; border-radius: 25px; font-size: 0.9rem; font-weight: 600; display: inline-block;">
                        {{ $vehicle->category->name }}
                    </span>
                </div>
                <h1 class="page-title"
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.8rem; color: var(--primary-gold); margin-bottom: 1rem; font-weight: 700; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); line-height: 1.2;">
                    {{ $vehicle->name }}
                </h1>
                @if($vehicle->description)
                    <p class="page-subtitle"
                        style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.2rem; color: rgba(255, 255, 255, 0.9); max-width: 700px; margin: 0 auto; line-height: 1.6; font-weight: 400;">
                        {{ Str::limit($vehicle->description, 120) }}
                    </p>
                @endif
            </div>
        </div>
    </section>

    <!-- Vehicle Details Section -->
    <section class="vehicle-details" style="padding: 3rem 1rem;">
        <div class="container" style="max-width: 1200px; margin: 0 auto;">
            <div class="glass-morphism"
                style="padding: 3rem; border-radius: 20px; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);">
                <div class="vehicle-hero"
                    style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;">
                    <!-- Vehicle Images -->
                    <div class="vehicle-images">
                        @if($vehicle->images->count() > 0)
                            <div class="image-gallery" style="position: relative;">
                                <div id="mainImage"
                                    style="height: 450px; border-radius: 20px; overflow: hidden; margin-bottom: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); position: relative;">
                                    <img src="{{ $vehicle->images->first()->url }}" alt="{{ $vehicle->name }}"
                                        style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;">
                                    <div class="image-overlay"
                                        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 100%); pointer-events: none;">
                                    </div>
                                </div>

                                <!-- Thumbnail Gallery -->
                                @if($vehicle->images->count() > 1)
                                    <div class="thumbnail-gallery"
                                        style="display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.5rem 0; scrollbar-width: thin;">
                                        @foreach($vehicle->images as $index => $image)
                                            <div class="thumbnail-wrapper" style="flex-shrink: 0;">
                                                <img src="{{ $image->url }}" alt="{{ $vehicle->name }}"
                                                    onclick="changeMainImage('{{ $image->url }}', this)"
                                                    class="thumbnail {{ $index === 0 ? 'active' : '' }}"
                                                    style="width: 90px; height: 70px; object-fit: cover; border-radius: 12px; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);"
                                                    onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 6px 20px rgba(255, 215, 0, 0.3)'"
                                                    onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 4px 15px rgba(0, 0, 0, 0.2)'">
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @else
                            <div class="no-image-placeholder"
                                style="height: 450px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed rgba(255, 215, 0, 0.3);">
                                <i class="fas fa-car"
                                    style="font-size: 4rem; color: var(--primary-gold); margin-bottom: 1rem; opacity: 0.7;"></i>
                                <p style="color: rgba(255, 255, 255, 0.6); font-size: 1.1rem;">
                                    @if(current_locale() === 'ar')
                                        لا توجد صور متاحة
                                    @else
                                        No images available
                                    @endif
                                </p>
                            </div>
                        @endif
                    </div>

                    <!-- Vehicle Details -->
                    <div class="vehicle-info">
                        <!-- Vehicle Specs Quick View -->
                        <div class="quick-specs"
                            style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem;">
                            <div class="spec-item"
                                style="background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 12px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1);">
                                <i class="fas fa-cog"
                                    style="color: var(--primary-gold); font-size: 1.2rem; margin-bottom: 0.5rem;"></i>
                                <div style="font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.25rem;">
                                    @if(current_locale() === 'ar')
                                        ناقل الحركة
                                    @else
                                        Transmission
                                    @endif
                                </div>
                                <div style="color: var(--primary-gold); font-weight: 600;">
                                    {{ ucfirst($vehicle->transmission) }}</div>
                            </div>
                            <div class="spec-item"
                                style="background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 12px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1);">
                                <i class="fas fa-users"
                                    style="color: var(--primary-gold); font-size: 1.2rem; margin-bottom: 0.5rem;"></i>
                                <div style="font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.25rem;">
                                    @if(current_locale() === 'ar')
                                        المقاعد
                                    @else
                                        Seats
                                    @endif
                                </div>
                                <div style="color: var(--primary-gold); font-weight: 600;">{{ $vehicle->seats }}</div>
                            </div>
                            <div class="spec-item"
                                style="background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 12px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1);">
                                <i class="fas fa-gas-pump"
                                    style="color: var(--primary-gold); font-size: 1.2rem; margin-bottom: 0.5rem;"></i>
                                <div style="font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.25rem;">
                                    @if(current_locale() === 'ar')
                                        نوع الوقود
                                    @else
                                        Fuel Type
                                    @endif
                                </div>
                                <div style="color: var(--primary-gold); font-weight: 600;">
                                    {{ ucfirst($vehicle->fuel_type) }}</div>
                            </div>
                            <div class="spec-item"
                                style="background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 12px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1);">
                                <i class="fas fa-calendar"
                                    style="color: var(--primary-gold); font-size: 1.2rem; margin-bottom: 0.5rem;"></i>
                                <div style="font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.25rem;">
                                    @if(current_locale() === 'ar')
                                        السنة
                                    @else
                                        Year
                                    @endif
                                </div>
                                <div style="color: var(--primary-gold); font-weight: 600;">{{ $vehicle->year }}</div>
                            </div>
                        </div>

                        @if($vehicle->description)
                            <div class="vehicle-description"
                                style="background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 15px; margin-bottom: 2rem; border: 1px solid rgba(255, 255, 255, 0.1);">
                                <h3
                                    style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.2rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    @if(current_locale() === 'ar')
                                        وصف المركبة
                                    @else
                                        Vehicle Description
                                    @endif
                                </h3>
                                <p
                                    style="color: rgba(255, 255, 255, 0.9); line-height: 1.7; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    {{ $vehicle->description }}
                                </p>
                            </div>
                        @endif

                        <!-- Pricing Card -->
                        <div class="pricing-card" style="background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1)); padding: 2rem; border-radius: 20px; margin-bottom: 2rem; border: 1px solid rgba(255, 215, 0, 0.2); box-shadow: 0 8px 25px rgba(255, 215, 0, 0.1);">
                            <div class="pricing-header" style="text-align: center; margin-bottom: 1.5rem;">
                                <div style="display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem;">
                                    <span style="font-size: 2.5rem; font-weight: 800; color: var(--primary-gold); font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                        ${{ number_format($vehicle->daily_rate, 0) }}
                                    </span>
                                    <span style="font-size: 1rem; color: rgba(255, 255, 255, 0.8); font-weight: 500;">
                                        @if(current_locale() === 'ar')
                                            / في اليوم
                                        @else
                                            / per day
                                        @endif
                                    </span>
                                </div>
                            </div>

                            <div class="pricing-details">
                                @if($vehicle->weekly_rate)
                                    <div class="pricing-row" style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
                                        <span style="color: rgba(255, 255, 255, 0.9); font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                            @if(current_locale() === 'ar')
                                                السعر الأسبوعي:
                                            @else
                                                Weekly Rate:
                                            @endif
                                        </span>
                                        <span style="color: var(--primary-gold); font-weight: 700; font-size: 1.1rem;">${{ number_format($vehicle->weekly_rate, 0) }}</span>
                                    </div>
                                @endif

                                @if($vehicle->monthly_rate)
                                    <div class="pricing-row" style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
                                        <span style="color: rgba(255, 255, 255, 0.9); font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                            @if(current_locale() === 'ar')
                                                السعر الشهري:
                                            @else
                                                Monthly Rate:
                                            @endif
                                        </span>
                                        <span style="color: var(--primary-gold); font-weight: 700; font-size: 1.1rem;">${{ number_format($vehicle->monthly_rate, 0) }}</span>
                                    </div>
                                @endif

                                <div class="pricing-row" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-top: 2px solid rgba(255, 215, 0, 0.3); margin-top: 1rem;">
                                    <span style="color: rgba(255, 255, 255, 0.9); font-weight: 600; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                        @if(current_locale() === 'ar')
                                            التأمين:
                                        @else
                                            Security Deposit:
                                        @endif
                                    </span>
                                    <span style="color: var(--primary-gold); font-weight: 700; font-size: 1.2rem;">${{ number_format($vehicle->security_deposit, 0) }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Availability Status -->
                        <div class="availability-status" style="text-align: center; margin-bottom: 2rem;">
                            @if($vehicle->isAvailable())
                                <div style="background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.3); padding: 1rem; border-radius: 12px;">
                                    <i class="fas fa-check-circle" style="color: #28a745; font-size: 1.5rem; margin-bottom: 0.5rem;"></i>
                                    <div style="color: #28a745; font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem;">
                                        @if(current_locale() === 'ar')
                                            متاحة للحجز
                                        @else
                                            Available for Booking
                                        @endif
                                    </div>
                                </div>
                            @else
                                <div style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); padding: 1rem; border-radius: 12px;">
                                    <i class="fas fa-times-circle" style="color: #dc3545; font-size: 1.5rem; margin-bottom: 0.5rem;"></i>
                                    <div style="color: #dc3545; font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem;">
                                        @if(current_locale() === 'ar')
                                            غير متاحة حالياً
                                        @else
                                            Currently Unavailable
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Action Buttons -->
                        <div class="action-buttons" style="display: flex; flex-direction: column; gap: 1rem;">
                            @if($vehicle->isAvailable())
                                <a href="{{ route('bookings.create', ['vehicle_id' => $vehicle->id]) }}"
                                   class="btn-primary book-now-btn"
                                   style="width: 100%; text-align: center; padding: 18px 24px; font-size: 1.2rem; font-weight: 700; border-radius: 15px; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 0.75rem; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3); transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;"
                                   onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(255, 215, 0, 0.4)'"
                                   onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 6px 20px rgba(255, 215, 0, 0.3)'">
                                    <i class="fas fa-calendar-check"></i>
                                    @if(current_locale() === 'ar')
                                        احجز الآن
                                    @else
                                        Book Now
                                    @endif
                                </a>
                            @else
                                <button disabled
                                        class="btn-disabled"
                                        style="width: 100%; text-align: center; padding: 18px 24px; font-size: 1.2rem; font-weight: 700; border-radius: 15px; border: none; background: rgba(108, 117, 125, 0.3); color: rgba(255, 255, 255, 0.5); cursor: not-allowed; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    <i class="fas fa-ban" style="margin-{{ current_locale() === 'ar' ? 'left' : 'right' }}: 0.5rem;"></i>
                                    @if(current_locale() === 'ar')
                                        غير متاحة للحجز
                                    @else
                                        Not Available
                                    @endif
                                </button>
                            @endif

                            <a href="{{ route('contact') }}"
                               class="btn-secondary contact-btn"
                               style="width: 100%; text-align: center; padding: 15px 20px; font-size: 1rem; font-weight: 600; border-radius: 12px; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;"
                               onmouseover="this.style.background='rgba(255, 255, 255, 0.15)'; this.style.borderColor='rgba(255, 255, 255, 0.3)'"
                               onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'; this.style.borderColor='rgba(255, 255, 255, 0.2)'">
                                <i class="fas fa-phone"></i>
                                @if(current_locale() === 'ar')
                                    اتصل بنا للاستفسار
                                @else
                                    Contact for Inquiry
                                @endif
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Vehicle Specifications -->
    <section style="padding: 3rem 0;">
        <div class="container">
            <div class="glass-morphism" style="padding: 3rem;">
                <h2
                    style="font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--primary-gold); margin-bottom: 2rem; text-align: center;">
                    {{ __('general.specifications') }}
                </h2>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;">
                    <div class="glass-card text-center">
                        <i class="fas fa-cog" style="font-size: 2rem; color: var(--primary-gold); margin-bottom: 1rem;"></i>
                        <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ __('general.transmission') }}</h4>
                        <p>{{ ucfirst($vehicle->transmission) }}</p>
                    </div>

                    <div class="glass-card text-center">
                        <i class="fas fa-gas-pump"
                            style="font-size: 2rem; color: var(--primary-gold); margin-bottom: 1rem;"></i>
                        <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ __('general.fuel_type') }}</h4>
                        <p>{{ ucfirst($vehicle->fuel_type) }}</p>
                    </div>

                    <div class="glass-card text-center">
                        <i class="fas fa-users"
                            style="font-size: 2rem; color: var(--primary-gold); margin-bottom: 1rem;"></i>
                        <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ __('general.seats') }}</h4>
                        <p>{{ $vehicle->seats }} {{ __('passengers') }}</p>
                    </div>

                    <div class="glass-card text-center">
                        <i class="fas fa-door-open"
                            style="font-size: 2rem; color: var(--primary-gold); margin-bottom: 1rem;"></i>
                        <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ __('general.doors') }}</h4>
                        <p>{{ $vehicle->doors }} {{ __('general.doors') }}</p>
                    </div>

                    <div class="glass-card text-center">
                        <i class="fas fa-calendar"
                            style="font-size: 2rem; color: var(--primary-gold); margin-bottom: 1rem;"></i>
                        <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ __('general.year') }}</h4>
                        <p>{{ $vehicle->year }}</p>
                    </div>

                    <div class="glass-card text-center">
                        <i class="fas fa-palette"
                            style="font-size: 2rem; color: var(--primary-gold); margin-bottom: 1rem;"></i>
                        <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ __('general.color') }}</h4>
                        <p>{{ $vehicle->color }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    @if($vehicle->features)
        <section style="padding: 3rem 0; background: rgba(255, 255, 255, 0.02);">
            <div class="container">
                <div class="glass-morphism" style="padding: 3rem;">
                    <h2
                        style="font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--primary-gold); margin-bottom: 2rem; text-align: center;">
                        {{ __('general.features') }}
                    </h2>

                    <div style="max-width: 800px; margin: 0 auto;">
                        <div style="white-space: pre-line; line-height: 1.8; opacity: 0.9;">
                            {{ $vehicle->features }}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Related Vehicles -->
    @if($relatedVehicles->count() > 0)
        <section style="padding: 3rem 0;">
            <div class="container">
                <h2
                    style="font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--primary-gold); margin-bottom: 2rem; text-align: center;">
                    {{ __('Similar Vehicles') }}
                </h2>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
                    @foreach($relatedVehicles as $relatedVehicle)
                        <div class="glass-card">
                            <div
                                style="height: 180px; background: linear-gradient(45deg, #333, #555); border-radius: 10px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center;">
                                @if($relatedVehicle->primaryImage)
                                    <img src="{{ $relatedVehicle->primaryImage->url }}" alt="{{ $relatedVehicle->name }}"
                                        style="width: 100%; height: 100%; object-fit: cover; border-radius: 10px;">
                                @else
                                    <i class="fas fa-car" style="font-size: 2.5rem; color: var(--primary-gold);"></i>
                                @endif
                            </div>

                            <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ $relatedVehicle->name }}</h4>
                            <p style="opacity: 0.7; font-size: 0.9rem; margin-bottom: 1rem;">{{ $relatedVehicle->category->name }}
                            </p>

                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <span style="font-size: 1.2rem; font-weight: 600; color: var(--primary-gold);">
                                    ${{ number_format($relatedVehicle->daily_rate, 0) }}/{{ __('day') }}
                                </span>
                                <a href="{{ route('vehicles.show', $relatedVehicle) }}" class="btn-secondary"
                                    style="padding: 6px 15px; font-size: 0.8rem;">
                                    {{ __('general.view_details') }}
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @push('scripts')
        <script>
            function changeMainImage(imageUrl, thumbnail) {
                // Update main image
                const mainImg = document.querySelector('#mainImage img');
                mainImg.src = imageUrl;

                // Update thumbnail active state
                document.querySelectorAll('.thumbnail').forEach(thumb => {
                    thumb.classList.remove('active');
                    thumb.style.borderColor = 'transparent';
                });

                if (thumbnail) {
                    thumbnail.classList.add('active');
                    thumbnail.style.borderColor = 'var(--primary-gold)';
                }

                // Add loading effect
                mainImg.style.opacity = '0.7';
                setTimeout(() => {
                    mainImg.style.opacity = '1';
                }, 200);
            }

            // Initialize first thumbnail as active
            document.addEventListener('DOMContentLoaded', function() {
                const firstThumbnail = document.querySelector('.thumbnail');
                if (firstThumbnail) {
                    firstThumbnail.style.borderColor = 'var(--primary-gold)';
                }

                // Add smooth scrolling to thumbnail gallery
                const thumbnailGallery = document.querySelector('.thumbnail-gallery');
                if (thumbnailGallery) {
                    thumbnailGallery.style.scrollBehavior = 'smooth';
                }
            });
        </script>
    @endpush

    @push('styles')
        <style>
            /* Vehicle Show Page Styles */
            .vehicle-hero {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 3rem;
                align-items: start;
            }

            .thumbnail-gallery {
                scrollbar-width: thin;
                scrollbar-color: var(--primary-gold) rgba(255, 255, 255, 0.1);
            }

            .thumbnail-gallery::-webkit-scrollbar {
                height: 6px;
            }

            .thumbnail-gallery::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 3px;
            }

            .thumbnail-gallery::-webkit-scrollbar-thumb {
                background: var(--primary-gold);
                border-radius: 3px;
            }

            .thumbnail.active {
                border-color: var(--primary-gold) !important;
                box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4) !important;
            }

            /* Responsive Design */
            @media (max-width: 1024px) {
                .vehicle-hero {
                    gap: 2.5rem;
                }

                .quick-specs {
                    grid-template-columns: repeat(2, 1fr) !important;
                }
            }

            @media (max-width: 768px) {
                .vehicle-hero {
                    grid-template-columns: 1fr !important;
                    gap: 2rem !important;
                }

                .quick-specs {
                    grid-template-columns: 1fr !important;
                    gap: 0.75rem !important;
                }

                .spec-item {
                    padding: 0.75rem !important;
                }

                #mainImage {
                    height: 300px !important;
                }

                .thumbnail-wrapper img {
                    width: 70px !important;
                    height: 55px !important;
                }

                .pricing-card {
                    padding: 1.5rem !important;
                }

                .page-title {
                    font-size: 2.2rem !important;
                }

                .page-subtitle {
                    font-size: 1.1rem !important;
                }
            }

            @media (max-width: 576px) {
                .vehicle-details {
                    padding: 2.5rem 1rem !important;
                }

                .vehicle-specs-grid {
                    grid-template-columns: 1fr !important;
                    gap: 1.5rem !important;
                }

                .similar-vehicles-grid {
                    grid-template-columns: 1fr !important;
                    gap: 1.5rem !important;
                }

                .glass-morphism {
                    padding: 2rem 1.5rem !important;
                }

                .vehicle-image {
                    height: 250px !important;
                }

                .vehicle-title {
                    font-size: 2rem !important;
                }

                .vehicle-price {
                    font-size: 1.8rem !important;
                }
            }

            @media (max-width: 480px) {
                .vehicle-details {
                    padding: 2rem 0.5rem !important;
                }

                .glass-morphism {
                    padding: 2rem 1.5rem !important;
                }

                #mainImage {
                    height: 250px !important;
                }

                .thumbnail-wrapper img {
                    width: 60px !important;
                    height: 45px !important;
                }

                .pricing-card {
                    padding: 1.25rem !important;
                }

                .pricing-header span:first-child {
                    font-size: 2rem !important;
                }

                .book-now-btn {
                    padding: 15px 20px !important;
                    font-size: 1.1rem !important;
                }

                .contact-btn {
                    padding: 12px 16px !important;
                    font-size: 0.9rem !important;
                }

                .page-title {
                    font-size: 1.8rem !important;
                }

                .page-subtitle {
                    font-size: 1rem !important;
                }

                .page-icon div {
                    width: 60px !important;
                    height: 60px !important;
                }
            }

            /* Animation Enhancements */
            .vehicle-images img {
                transition: all 0.3s ease;
            }

            .spec-item {
                transition: all 0.3s ease;
            }

            .spec-item:hover {
                background: rgba(255, 255, 255, 0.08) !important;
                transform: translateY(-2px);
            }

            .pricing-card {
                transition: all 0.3s ease;
            }

            .pricing-card:hover {
                transform: translateY(-3px);
                box-shadow: 0 12px 35px rgba(255, 215, 0, 0.15) !important;
            }
        </style>
    @endpush
@endsection