@extends('layouts.app')

@section('title', 'Détails de la réservation - ' . $vehicule->vehicle_name)

@push('styles')
<style>
    :root {
        --primary-color: #020548;
        --secondary-color: #3b5de7;
        --accent-color: #ff6b6b;
        --light-bg: #f8f9fa;
        --dark-text: #2c3e50;
        --success-color: #28a745;
        --danger-color: #dc3545;
    }

    .vehicle-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        color: white;
        padding: 3rem 0;
        margin-bottom: 2rem;
        border-radius: 0 0 25px 25px;
    }

    .vehicle-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(2, 5, 72, 0.15);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .carousel-container {
        height: 400px;
        overflow: hidden;
        position: relative;
    }

    .carousel-image {
        height: 400px;
        object-fit: cover;
        width: 100%;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: rgba(2, 5, 72, 0.8);
        border-radius: 50%;
        padding: 15px;
    }

    .vehicle-info {
        padding: 2.5rem;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .info-section {
        background: var(--light-bg);
        padding: 1.5rem;
        border-radius: 15px;
        border-left: 4px solid var(--primary-color);
    }

    .info-title {
        color: var(--primary-color);
        font-weight: 700;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
    }

    .info-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .info-label {
        font-weight: 600;
        color: var(--dark-text);
        min-width: 180px;
    }

    .info-value {
        color: #6c757d;
        text-align: right;
        font-weight: 500;
    }

    .badge-yes {
        background: var(--success-color);
        color: white;
        padding: 0.4rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .badge-no {
        background: var(--danger-color);
        color: white;
        padding: 0.4rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .price-card {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 1.5rem;
        border-radius: 15px;
        text-align: center;
        transition: transform 0.3s ease;
    }

    .price-card:hover {
        transform: translateY(-5px);
    }

    .price-type {
        font-size: 0.9rem;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .price-amount {
        font-size: 2.2rem;
        font-weight: 700;
        margin: 0.5rem 0;
    }

    .price-period {
        font-size: 0.85rem;
        opacity: 0.8;
    }

    .specs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin: 2rem 0;
    }

    .spec-item {
        background: var(--light-bg);
        padding: 1.5rem;
        border-radius: 12px;
        text-align: center;
        transition: transform 0.3s ease;
    }

    .spec-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .spec-icon {
        font-size: 2rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
    }

    .spec-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .spec-label {
        color: #6c757d;
        font-size: 0.9rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        padding: 2rem;
        background: var(--light-bg);
        border-radius: 15px;
        flex-wrap: wrap;
    }

    .btn-custom {
        background: var(--primary-color);
        border: none;
        padding: 12px 30px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
    }

    .btn-custom:hover {
        background: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(59, 93, 231, 0.3);
    }

    .btn-outline-custom {
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        background: transparent;
        padding: 12px 30px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
    }

    .btn-outline-custom:hover {
        background: var(--primary-color);
        color: white;
        transform: translateY(-2px);
    }

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

        .info-item {
            flex-direction: column;
            gap: 0.5rem;
            text-align: center;
        }

        .info-label {
            min-width: auto;
        }

        .carousel-container {
            height: 300px;
        }

        .carousel-image {
            height: 300px;
        }

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

        .action-buttons {
            flex-direction: column;
        }
    }
</style>
@endpush

@section('content')
<!-- Header avec fond gradient -->
<div class="vehicle-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="display-4 fw-bold mb-3" style="color: white">
                    <i class="fas fa-car me-3"></i>{{ $vehicule->name }}
                </h1>
                <p class="lead mb-0">Détails de la réservation de véhicule</p>
            </div>
            {{-- <div class="col-md-4 text-md-end">
                @if(!$vehicule->is_viewed)
                    <span class="badge bg-warning fs-6">Nouvelle réservation</span>
                @else
                    <span class="badge bg-success fs-6">Réservation consultée</span>
                @endif
            </div> --}}
        </div>
    </div>
</div>

<div class="container">
    <!-- Image du véhicule -->
    @if($vehicule->vehicle_image)
    <div class="vehicle-card">
        <div class="carousel-container">
            <img src="{{ asset('storage/' . $vehicule->images) }}"
                 class="carousel-image"
                 alt="{{ $vehicule->name }}"
                 onerror="this.src='https://images.unsplash.com/photo-1549399812-5e82e1517600?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'">
        </div>
    </div>
    @endif

    <!-- Spécifications en grille -->
    <div class="specs-grid">
        <div class="spec-item">
            <div class="spec-icon">
                <i class="fas fa-suitcase"></i>
            </div>
            <div class="spec-value">{{ $vehicule->bags }}</div>
            <div class="spec-label">Bagages</div>
        </div>

        <div class="spec-item">
            <div class="spec-icon">
                <i class="fas fa-snowflake"></i>
            </div>
            <div class="spec-value">
                <span class="{{ $vehicule->air_conditioning ? 'badge-yes' : 'badge-no' }}">
                    {{ $vehicule->air_conditioning ? 'Oui' : 'Non' }}
                </span>
            </div>
            <div class="spec-label">Climatisation</div>
        </div>

        <div class="spec-item">
            <div class="spec-icon">
                <i class="fas fa-users"></i>
            </div>
            <div class="spec-value">{{ $vehicule->passengers }}</div>
            <div class="spec-label">Passagers</div>
        </div>

        <div class="spec-item">
            <div class="spec-icon">
                <i class="fas fa-tag"></i>
            </div>
            <div class="spec-value">{{ $vehicule->class }}</div>
            <div class="spec-label">Prix</div>
        </div>
    </div>

    <!-- Grille d'informations -->
    <div class="info-grid">
        <!-- Informations générales -->
        <div class="info-section">
            <h4 class="info-title">
                <i class="fas fa-info-circle"></i>Informations Générales
            </h4>
            <div class="info-item">
                <span class="info-label">Nom du véhicule:</span>
                <span class="info-value">{{ $vehicule->name }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Prix éconimique:</span>
                <span class="info-value">{{ $vehicule->price_economy }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Prix Business:</span>
                <span class="info-value">{{ $vehicule->price_business }}</span>
            </div>
            {{-- <div class="info-item">
                <span class="info-label">Statut:</span>
                <span class="info-value">
                    @if(!$vehicule->is_viewed)
                        <span class="badge bg-warning">Nouveau</span>
                    @else
                        <span class="badge bg-success">Consulté</span>
                    @endif
                </span>
            </div> --}}
        </div>

        <!-- Équipements -->
        <div class="info-section">
            <h4 class="info-title">
                <i class="fas fa-cogs"></i>Caractéristiques
            </h4>
            <div class="info-item">
                <span class="info-label">Climatisation:</span>
                <span class="info-value">
                    <span class="{{ $vehicule->air_conditioning ? 'badge-yes' : 'badge-no' }}">
                        {{ $vehicule->air_conditioning ? 'Oui' : 'Non' }}
                    </span>
                </span>
            </div>
            <div class="info-item">
                <span class="info-label">Nombre de bagages:</span>
                <span class="info-value">{{ $vehicule->luggage }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Nombre de passagers:</span>
                <span class="info-value">{{ $vehicule->number_of_seats }}</span>
            </div>
        </div>
    </div>

    <!-- Informations client -->
    {{-- <div class="info-section mb-4">
        <h4 class="info-title">
            <i class="fas fa-user"></i>Informations Client
        </h4>
        <div class="info-item">
            <span class="info-label">Nom du client:</span>
            <span class="info-value">{{ $vehicule->customer_name ?? 'Non spécifié' }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Email:</span>
            <span class="info-value">{{ $vehicule->customer_email ?? 'Non spécifié' }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Téléphone:</span>
            <span class="info-value">{{ $vehicule->customer_phone ?? 'Non spécifié' }}</span>
        </div>
    </div> --}}

    <!-- Boutons d'action -->
    <div class="action-buttons">
        <a href="{{ route('listeVehicule') }}" class="btn btn-custom">
            <i class="fas fa-arrow-left me-2"></i>Retour
        </a>
        {{-- <a href="{{ route('vehicule.pdf', $vehicule->id) }}" target="_blank" class="btn btn-outline-custom">
            <i class="fas fa-file-pdf me-2"></i>PDF
        </a> --}}
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Animation des éléments au scroll
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = 1;
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, { threshold: 0.1 });

        // Appliquer l'animation aux éléments
        document.querySelectorAll('.spec-item, .info-section').forEach(item => {
            item.style.opacity = 0;
            item.style.transform = 'translateY(30px)';
            item.style.transition = 'all 0.6s ease';
            observer.observe(item);
        });
    });
</script>
@endpush
