@extends('layouts.app')

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

@section('content')
    <!-- Hero Section -->
    <section class="page-header"
        style="padding: 4rem 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" style="font-size: 2rem; color: var(--primary-dark);"></i>
                    </div>
                </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: 1.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); line-height: 1.2;">
                    {{ __('general.vehicles') }}
                </h1>
                <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.3rem; color: rgba(255, 255, 255, 0.9); max-width: 700px; margin: 0 auto; line-height: 1.6; font-weight: 400;">
                    @if(current_locale() === 'ar')
                        اكتشف مجموعتنا المميزة من المركبات الفاخرة
                    @else
                        Discover our premium collection of luxury vehicles
                    @endif
                </p>
            </div>
        </div>
    </section>

    <!-- Filters Section -->
    <section style="padding: 2rem 0; background: rgba(255, 255, 255, 0.02);">
        <div class="container">
            <div class="glass-morphism" style="padding: 2rem;">
                <form method="GET" action="{{ route('vehicles.index') }}"
                    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: end;">

                    <!-- Category Filter -->
                    <div>
                        <label style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                            {{ __('general.vehicle_categories') }}
                        </label>
                        <select name="category"
                            style="width: 100%; padding: 10px 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="">
                                @if(current_locale() === 'ar')
                                    جميع الفئات
                                @else
                                    {{ __('All Categories') }}
                                @endif
                            </option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Price Range -->
                    <div>
                        <label style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                            @if(current_locale() === 'ar')
                                أقل سعر
                            @else
                                {{ __('Min Price') }}
                            @endif
                        </label>
                        <input type="number" name="min_price" value="{{ request('min_price') }}" placeholder="0"
                            style="width: 100%; padding: 10px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light); direction: {{ current_locale() === 'ar' ? 'rtl' : 'ltr' }};">
                    </div>

                    <div>
                        <label style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                            @if(current_locale() === 'ar')
                                أعلى سعر
                            @else
                                {{ __('Max Price') }}
                            @endif
                        </label>
                        <input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="1000"
                            style="width: 100%; padding: 10px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light); direction: {{ current_locale() === 'ar' ? 'rtl' : 'ltr' }};">
                    </div>

                    <!-- Search -->
                    <div>
                        <label style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                            @if(current_locale() === 'ar')
                                البحث
                            @else
                                {{ __('general.search') }}
                            @endif
                        </label>
                        <input type="text" name="search" value="{{ request('search') }}"
                            placeholder="{{ current_locale() === 'ar' ? 'الماركة أو الموديل' : __('Make or Model') }}"
                            style="width: 100%; padding: 10px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light); direction: {{ current_locale() === 'ar' ? 'rtl' : 'ltr' }};">
                    </div>

                    <!-- Sort -->
                    <div>
                        <label style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                            @if(current_locale() === 'ar')
                                ترتيب حسب
                            @else
                                {{ __('Sort By') }}
                            @endif
                        </label>
                        <select name="sort"
                            style="width: 100%; padding: 10px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light); direction: {{ current_locale() === 'ar' ? 'rtl' : 'ltr' }};">
                            <option value="daily_rate" {{ request('sort') == 'daily_rate' ? 'selected' : '' }}>
                                @if(current_locale() === 'ar')
                                    السعر
                                @else
                                    {{ __('Price') }}
                                @endif
                            </option>
                            <option value="year" {{ request('sort') == 'year' ? 'selected' : '' }}>
                                @if(current_locale() === 'ar')
                                    السنة
                                @else
                                    {{ __('general.year') }}
                                @endif
                            </option>
                            <option value="make" {{ request('sort') == 'make' ? 'selected' : '' }}>
                                @if(current_locale() === 'ar')
                                    الماركة
                                @else
                                    {{ __('general.make') }}
                                @endif
                            </option>
                        </select>
                    </div>

                    <!-- Filter Button -->
                    <div>
                        <button type="submit" class="btn-primary" style="width: 100%; padding: 10px;">
                            {{ __('general.filter') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- Vehicles Grid -->
    <section style="padding: 3rem 0;">
        <div class="container">
            @if($vehicles->count() > 0)
                <div class="vehicles-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem;">
                    @foreach($vehicles as $vehicle)
                        <div class="vehicle-card glass-card animate-on-scroll"
                            style="position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);">
                            <!-- Premium Badge -->
                            @if($vehicle->is_premium ?? false)
                                <div class="premium-badge"
                                    style="position: absolute; top: 1rem; right: 1rem; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; z-index: 2; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);">
                                    {{ current_locale() === 'ar' ? 'مميز' : 'Premium' }}
                                </div>
                            @endif

                            <!-- Vehicle Image Carousel -->
                            <div class="vehicle-image-container"
                                style="height: 260px; border-radius: 15px; margin-bottom: 1.5rem; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));">
                                @if($vehicle->images && $vehicle->images->count() > 0)
                                    <div class="image-carousel" data-vehicle-id="{{ $vehicle->id }}">
                                        @foreach($vehicle->images->take(5) as $index => $image)
                                            <img src="{{ $image->url }}" alt="{{ $vehicle->name }}"
                                                class="carousel-image {{ $index === 0 ? 'active' : '' }}"
                                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; opacity: {{ $index === 0 ? '1' : '0' }}; cursor: pointer;"
                                                onclick="openImageGallery({{ $vehicle->id }}, {{ $index }})">
                                        @endforeach

                                        <!-- Navigation Dots -->
                                        @if($vehicle->images->count() > 1)
                                            <div class="carousel-dots"
                                                style="position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 2;">
                                                @foreach($vehicle->images->take(5) as $index => $image)
                                                    <button class="carousel-dot {{ $index === 0 ? 'active' : '' }}"
                                                        onclick="changeCarouselImage({{ $vehicle->id }}, {{ $index }})"
                                                        style="width: 8px; height: 8px; border-radius: 50%; border: none; background: {{ $index === 0 ? 'var(--primary-gold)' : 'rgba(255, 255, 255, 0.5)' }}; cursor: pointer; transition: all 0.3s ease;">
                                                    </button>
                                                @endforeach
                                            </div>
                                        @endif

                                        <!-- Image Counter -->
                                        @if($vehicle->images->count() > 1)
                                            <div class="image-counter"
                                                style="position: absolute; top: 1rem; left: 1rem; background: rgba(0, 0, 0, 0.7); color: white; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; backdrop-filter: blur(10px);">
                                                <span class="current-image">1</span> / {{ $vehicle->images->count() }}
                                            </div>
                                        @endif
                                    </div>
                                @else
                                    <!-- Placeholder with luxury styling -->
                                    <div class="image-placeholder"
                                        style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border: 2px dashed rgba(255, 215, 0, 0.3);">
                                        <i class="fas fa-car"
                                            style="font-size: 3.5rem; color: var(--primary-gold); margin-bottom: 1rem; opacity: 0.7; filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3));"></i>
                                        <p style="color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; text-align: center;">
                                            {{ current_locale() === 'ar' ? 'صور قريباً' : 'Images Coming Soon' }}
                                        </p>
                                    </div>
                                @endif
                            </div>

                            <!-- Vehicle Info Header -->
                            <div class="vehicle-header" style="margin-bottom: 1.2rem;">
                                <div
                                    style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem;">
                                    <h3 class="vehicle-name"
                                        style="color: var(--primary-gold); font-size: 1.4rem; font-weight: 700; margin: 0; line-height: 1.3; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif;">
                                        {{ $vehicle->name }}
                                    </h3>
                                    <div class="vehicle-year"
                                        style="background: rgba(255, 215, 0, 0.1); color: var(--primary-gold); padding: 0.2rem 0.8rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600;">
                                        {{ $vehicle->year ?? '2024' }}
                                    </div>
                                </div>
                                <p class="vehicle-category"
                                    style="color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; margin: 0; font-weight: 500;">
                                    {{ $vehicle->category->name }}
                                </p>
                            </div>

                            <!-- Vehicle Specifications -->
                            <div class="vehicle-specs"
                                style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-bottom: 1.5rem;">
                                <div class="spec-item"
                                    style="display: flex; align-items: center; padding: 0.6rem; background: rgba(255, 255, 255, 0.03); border-radius: 10px; border: 1px solid rgba(255, 215, 0, 0.1);">
                                    <div class="spec-icon"
                                        style="width: 32px; height: 32px; background: rgba(255, 215, 0, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-{{ current_locale() === 'ar' ? 'left' : 'right' }}: 0.8rem; flex-shrink: 0;">
                                        <i class="fas fa-cog" style="color: var(--primary-gold); font-size: 0.9rem;"></i>
                                    </div>
                                    <div class="spec-text" style="flex: 1; min-width: 0;">
                                        <span
                                            style="font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                            {{ ucfirst($vehicle->transmission ?? 'Automatic') }}
                                        </span>
                                    </div>
                                </div>

                                <div class="spec-item"
                                    style="display: flex; align-items: center; padding: 0.6rem; background: rgba(255, 255, 255, 0.03); border-radius: 10px; border: 1px solid rgba(255, 215, 0, 0.1);">
                                    <div class="spec-icon"
                                        style="width: 32px; height: 32px; background: rgba(255, 215, 0, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-{{ current_locale() === 'ar' ? 'left' : 'right' }}: 0.8rem; flex-shrink: 0;">
                                        <i class="fas fa-gas-pump" style="color: var(--primary-gold); font-size: 0.9rem;"></i>
                                    </div>
                                    <div class="spec-text" style="flex: 1; min-width: 0;">
                                        <span
                                            style="font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                            {{ ucfirst($vehicle->fuel_type ?? 'Petrol') }}
                                        </span>
                                    </div>
                                </div>

                                <div class="spec-item"
                                    style="display: flex; align-items: center; padding: 0.6rem; background: rgba(255, 255, 255, 0.03); border-radius: 10px; border: 1px solid rgba(255, 215, 0, 0.1);">
                                    <div class="spec-icon"
                                        style="width: 32px; height: 32px; background: rgba(255, 215, 0, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-{{ current_locale() === 'ar' ? 'left' : 'right' }}: 0.8rem; flex-shrink: 0;">
                                        <i class="fas fa-users" style="color: var(--primary-gold); font-size: 0.9rem;"></i>
                                    </div>
                                    <div class="spec-text" style="flex: 1; min-width: 0;">
                                        <span
                                            style="font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                            {{ $vehicle->seats ?? '5' }} {{ __('general.seats') }}
                                        </span>
                                    </div>
                                </div>

                                <div class="spec-item"
                                    style="display: flex; align-items: center; padding: 0.6rem; background: rgba(255, 255, 255, 0.03); border-radius: 10px; border: 1px solid rgba(255, 215, 0, 0.1);">
                                    <div class="spec-icon"
                                        style="width: 32px; height: 32px; background: rgba(255, 215, 0, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-{{ current_locale() === 'ar' ? 'left' : 'right' }}: 0.8rem; flex-shrink: 0;">
                                        <i class="fas fa-door-open" style="color: var(--primary-gold); font-size: 0.9rem;"></i>
                                    </div>
                                    <div class="spec-text" style="flex: 1; min-width: 0;">
                                        <span
                                            style="font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                            {{ $vehicle->doors ?? '4' }} {{ __('general.doors') }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Price and Action Section -->
                            <div class="vehicle-footer"
                                style="display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid rgba(255, 215, 0, 0.1);">
                                <div class="price-section">
                                    <div class="price-main" style="display: flex; align-items: baseline; gap: 0.3rem;">
                                        <span class="currency"
                                            style="font-size: 1rem; color: var(--primary-gold); font-weight: 600;">$</span>
                                        <span class="price"
                                            style="font-size: 1.6rem; font-weight: 700; color: var(--primary-gold); line-height: 1;">
                                            {{ number_format($vehicle->daily_rate ?? 150, 0) }}
                                        </span>
                                    </div>
                                    <span class="price-period"
                                        style="color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; font-weight: 500;">
                                        {{ __('general.per_day') }}
                                    </span>
                                </div>

                                <a href="{{ route('vehicles.show', $vehicle) }}" class="btn-view-details"
                                    style="background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); padding: 0.7rem 1.5rem; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2); display: flex; align-items: center; gap: 0.5rem;"
                                    onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(255, 215, 0, 0.3)'"
                                    onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(255, 215, 0, 0.2)'">
                                    {{ __('general.view_details') }}
                                    <i class="fas fa-arrow-{{ current_locale() === 'ar' ? 'left' : 'right' }}"
                                        style="font-size: 0.8rem;"></i>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div style="margin-top: 3rem; text-align: center;">
                    {{ $vehicles->appends(request()->query())->links() }}
                </div>
            @else
                <div class="glass-morphism" style="padding: 4rem; text-center;">
                    <i class="fas fa-car"
                        style="font-size: 4rem; color: var(--primary-gold); opacity: 0.5; margin-bottom: 2rem;"></i>
                    <h3 style="color: var(--primary-gold); margin-bottom: 1rem;">{{ __('general.no_results') }}</h3>
                    <p style="opacity: 0.8; margin-bottom: 2rem;">{{ __('No vehicles match your search criteria') }}</p>
                    <a href="{{ route('vehicles.index') }}" class="btn-secondary">{{ __('general.reset') }}
                        {{ __('general.filter') }}</a>
                </div>
            @endif
        </div>
    </section>

    <!-- Image Gallery Modal -->
    <div id="imageGalleryModal" class="gallery-modal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 9999; backdrop-filter: blur(10px);">
        <div class="gallery-container"
            style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
            <!-- Close Button -->
            <button class="gallery-close" onclick="closeImageGallery()"
                style="position: absolute; top: 2rem; right: 2rem; background: rgba(255, 255, 255, 0.1); border: none; color: white; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; z-index: 10; backdrop-filter: blur(10px); transition: all 0.3s ease;">
                <i class="fas fa-times"></i>
            </button>

            <!-- Main Gallery Image -->
            <div class="gallery-main" style="max-width: 90%; max-height: 80%; position: relative;">
                <img id="galleryMainImage" src="" alt=""
                    style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 15px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);">

                <!-- Navigation Arrows -->
                <button class="gallery-nav gallery-prev" onclick="navigateGallery(-1)"
                    style="position: absolute; left: -60px; top: 50%; transform: translateY(-50%); background: rgba(255, 215, 0, 0.2); border: none; color: var(--primary-gold); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; backdrop-filter: blur(10px); transition: all 0.3s ease;">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="gallery-nav gallery-next" onclick="navigateGallery(1)"
                    style="position: absolute; right: -60px; top: 50%; transform: translateY(-50%); background: rgba(255, 215, 0, 0.2); border: none; color: var(--primary-gold); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; backdrop-filter: blur(10px); transition: all 0.3s ease;">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>

            <!-- Gallery Thumbnails -->
            <div class="gallery-thumbnails"
                style="position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; max-width: 90%; overflow-x: auto; padding: 1rem; background: rgba(0, 0, 0, 0.3); border-radius: 15px; backdrop-filter: blur(10px);">
                <!-- Thumbnails will be populated by JavaScript -->
            </div>
        </div>
    </div>

    @push('styles')
        <style>
            select option {
                background: var(--primary-dark);
                color: var(--text-light);
            }

            input:focus,
            select:focus {
                outline: none;
                border-color: var(--primary-gold) !important;
                box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
            }

            input::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            /* Vehicle Card Hover Effects */
            .vehicle-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(255, 215, 0, 0.15);
            }

            /* Carousel Dots Animation */
            .carousel-dot:hover {
                background: var(--primary-gold) !important;
                transform: scale(1.2);
            }

            /* Gallery Modal Animations */
            .gallery-modal.show {
                display: flex !important;
                animation: fadeIn 0.3s ease;
            }

            .gallery-close:hover,
            .gallery-nav:hover {
                background: rgba(255, 215, 0, 0.3) !important;
                transform: scale(1.1);
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }

                to {
                    opacity: 1;
                }
            }

            /* Responsive Design */
            @media (max-width: 992px) and (min-width: 769px) {
                .vehicles-grid {
                    grid-template-columns: repeat(2, 1fr) !important;
                    gap: 2.5rem !important;
                }
            }

            @media (max-width: 768px) {
                .filters-grid {
                    grid-template-columns: 1fr !important;
                }

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

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

                .vehicle-footer {
                    flex-direction: column !important;
                    gap: 1rem !important;
                    align-items: stretch !important;
                }

                .btn-view-details {
                    justify-content: center !important;
                }

                .gallery-nav {
                    position: relative !important;
                    left: auto !important;
                    right: auto !important;
                    top: auto !important;
                    transform: none !important;
                    margin: 1rem 0.5rem !important;
                }

                .gallery-thumbnails {
                    position: relative !important;
                    bottom: auto !important;
                    left: auto !important;
                    transform: none !important;
                    margin-top: 2rem !important;
                }
            }

            @media (max-width: 575px) {
                .vehicles-grid {
                    display: grid !important;
                    grid-template-columns: 1fr !important;
                    gap: 1.8rem !important;
                    width: 100% !important;
                }

                .vehicle-card {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    margin: 0 auto !important;
                    max-width: 100% !important;
                    width: 100% !important;
                    min-width: auto !important;
                }

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

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

                .vehicle-footer {
                    flex-direction: column !important;
                    gap: 1rem !important;
                    align-items: stretch !important;
                }

                .btn-view-details {
                    justify-content: center !important;
                    width: 100% !important;
                }

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

                .vehicle-name {
                    font-size: 1.3rem !important;
                }

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

            @media (max-width: 480px) {
                .vehicles-grid {
                    grid-template-columns: 1fr !important;
                    gap: 1.5rem !important;
                }

                .vehicle-card {
                    margin: 0 0.5rem !important;
                    max-width: calc(100% - 1rem) !important;
                }

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

                .vehicle-name {
                    font-size: 1.2rem !important;
                }

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

                .spec-item {
                    padding: 0.4rem !important;
                    font-size: 0.85rem !important;
                }

                .spec-icon {
                    width: 28px !important;
                    height: 28px !important;
                }

                .vehicle-specs {
                    gap: 0.5rem !important;
                }

                .premium-badge {
                    font-size: 0.7rem !important;
                    padding: 0.3rem 0.8rem !important;
                }
            }

            @media (max-width: 320px) {
                .vehicles-grid {
                    gap: 1rem !important;
                }

                .vehicle-card {
                    margin: 0 0.25rem !important;
                    max-width: calc(100% - 0.5rem) !important;
                }

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

                .vehicle-name {
                    font-size: 1.1rem !important;
                }

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

                .spec-item {
                    padding: 0.3rem !important;
                    font-size: 0.8rem !important;
                }
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            let currentGalleryImages = [];
            let currentGalleryIndex = 0;

            // Change carousel image
            function changeCarouselImage(vehicleId, imageIndex) {
                const carousel = document.querySelector(`[data-vehicle-id="${vehicleId}"]`);
                const images = carousel.querySelectorAll('.carousel-image');
                const dots = carousel.querySelectorAll('.carousel-dot');
                const counter = carousel.querySelector('.current-image');

                // Hide all images
                images.forEach(img => img.style.opacity = '0');

                // Show selected image
                if (images[imageIndex]) {
                    images[imageIndex].style.opacity = '1';
                }

                // Update dots
                dots.forEach(dot => dot.style.background = 'rgba(255, 255, 255, 0.5)');
                if (dots[imageIndex]) {
                    dots[imageIndex].style.background = 'var(--primary-gold)';
                }

                // Update counter
                if (counter) {
                    counter.textContent = imageIndex + 1;
                }
            }

            // Open image gallery
            function openImageGallery(vehicleId, startIndex = 0) {
                const carousel = document.querySelector(`[data-vehicle-id="${vehicleId}"]`);
                const images = carousel.querySelectorAll('.carousel-image');

                currentGalleryImages = Array.from(images).map(img => ({
                    src: img.src,
                    alt: img.alt
                }));

                currentGalleryIndex = startIndex;

                const modal = document.getElementById('imageGalleryModal');
                const mainImage = document.getElementById('galleryMainImage');
                const thumbnailsContainer = modal.querySelector('.gallery-thumbnails');

                // Set main image
                mainImage.src = currentGalleryImages[currentGalleryIndex].src;
                mainImage.alt = currentGalleryImages[currentGalleryIndex].alt;

                // Create thumbnails
                thumbnailsContainer.innerHTML = '';
                currentGalleryImages.forEach((image, index) => {
                    const thumb = document.createElement('img');
                    thumb.src = image.src;
                    thumb.alt = image.alt;
                    thumb.style.cssText = `
                                                                                                                        width: 60px;
                                                                                                                        height: 45px;
                                                                                                                        object-fit: cover;
                                                                                                                        border-radius: 8px;
                                                                                                                        cursor: pointer;
                                                                                                                        border: 2px solid ${index === currentGalleryIndex ? 'var(--primary-gold)' : 'transparent'};
                                                                                                                        transition: all 0.3s ease;
                                                                                                                    `;
                    thumb.onclick = () => setGalleryImage(index);
                    thumbnailsContainer.appendChild(thumb);
                });

                modal.classList.add('show');
                document.body.style.overflow = 'hidden';
            }

            // Close image gallery
            function closeImageGallery() {
                const modal = document.getElementById('imageGalleryModal');
                modal.classList.remove('show');
                document.body.style.overflow = 'auto';
            }

            // Navigate gallery
            function navigateGallery(direction) {
                currentGalleryIndex += direction;

                if (currentGalleryIndex < 0) {
                    currentGalleryIndex = currentGalleryImages.length - 1;
                } else if (currentGalleryIndex >= currentGalleryImages.length) {
                    currentGalleryIndex = 0;
                }

                setGalleryImage(currentGalleryIndex);
            }

            // Set gallery image
            function setGalleryImage(index) {
                currentGalleryIndex = index;
                const mainImage = document.getElementById('galleryMainImage');
                const thumbnails = document.querySelectorAll('.gallery-thumbnails img');

                mainImage.src = currentGalleryImages[index].src;
                mainImage.alt = currentGalleryImages[index].alt;

                // Update thumbnail borders
                thumbnails.forEach((thumb, i) => {
                    thumb.style.border = i === index ? '2px solid var(--primary-gold)' : '2px solid transparent';
                });
            }

            // Auto-rotate carousel images
            document.addEventListener('DOMContentLoaded', function () {
                const carousels = document.querySelectorAll('.image-carousel');

                carousels.forEach(carousel => {
                    const vehicleId = carousel.dataset.vehicleId;
                    const images = carousel.querySelectorAll('.carousel-image');

                    if (images.length > 1) {
                        let currentIndex = 0;

                        setInterval(() => {
                            currentIndex = (currentIndex + 1) % images.length;
                            changeCarouselImage(vehicleId, currentIndex);
                        }, 4000); // Change image every 4 seconds
                    }
                });

                // Close gallery on escape key
                document.addEventListener('keydown', function (e) {
                    if (e.key === 'Escape') {
                        closeImageGallery();
                    }
                });

                // Close gallery on background click
                document.getElementById('imageGalleryModal').addEventListener('click', function (e) {
                    if (e.target === this) {
                        closeImageGallery();
                    }
                });
            });
        </script>
    @endpush
@endsection