document.addEventListener('DOMContentLoaded', function() {
    let slides = document.querySelectorAll('.slider .slide');
    let currentSlide = 0;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.style.display = (i === index) ? 'block' : 'none';
        });
    }

    showSlide(currentSlide);

    setInterval(function() {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
    }, 5000); // Change slide every 5 seconds
});


var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    loop: true,
    autoplay: {
        delay: 5000, // 5 secondes
        disableOnInteraction: false,
    }
});


// Initialiser AOS pour les animations de défilement
AOS.init({
    duration: 1000, // Durée de l'animation
    easing: 'ease-in-out', // Effet de transition
    once: true // L'animation se déclenche une seule fois
});

// Données des voitures (à compléter avec les vraies images et informations)
const cars = [
    { id: 1, category: 'economy', model: 'Hyundai i10', price: 200, image: 'images/voiture_economique_1.jpg' },
    { id: 2, category: 'economy', model: 'Toyota Aygo', price: 180, image: 'images/voiture_economique_2.jpg' },
    { id: 3, category: 'economy', model: 'Renault Clio', price: 220, image: 'images/voiture_economique_3.jpg' },
    { id: 4, category: 'suv', model: 'Nissan X-Trail', price: 450, image: 'images/suv_1.jpg' },
    { id: 5, category: 'suv', model: 'Toyota RAV4', price: 500, image: 'images/suv_2.jpg' },
    { id: 6, category: 'suv', model: 'BMW X5', price: 700, image: 'images/suv_3.jpg' },
    { id: 7, category: 'luxury', model: 'Audi A6', price: 1000, image: 'images/voiture_luxe_1.jpg' },
    { id: 8, category: 'luxury', model: 'Mercedes-Benz S-Class', price: 1200, image: 'images/voiture_luxe_2.jpg' },
    { id: 9, category: 'luxury', model: 'BMW 7 Series', price: 1300, image: 'images/voiture_luxe_3.jpg' }
];

// Fonction pour générer la galerie de voitures
function displayCars(cars) {
    // Vider les catégories avant d'ajouter de nouveaux éléments
    document.getElementById('economy-cars').innerHTML = '';
    document.getElementById('suv-cars').innerHTML = '';
    document.getElementById('luxury-cars').innerHTML = '';

    // Ajouter chaque voiture dans la catégorie correspondante
    cars.forEach(car => {
        const carItem = `
            <div class="car-item">
                <img src="${car.image}" alt="${car.model}">
                <div class="car-info">
                    <h4>Modèle : ${car.model}</h4>
                    <p>Boîte automatique | Climatisation | 5 places</p>
                    <p class="price">Prix : ${car.price} MAD/jour</p>
                    <button class="reserve-btn">Réserver maintenant</button>
                </div>
            </div>
        `;
        document.getElementById(`${car.category}-cars`).innerHTML += carItem;
    });
}

// Filtrer les voitures en fonction de la catégorie
function filterCars() {
    const category = document.getElementById('category').value;
    const filteredCars = category === 'all' ? cars : cars.filter(car => car.category === category);
    displayCars(filteredCars);
}

// Trier les voitures en fonction de l'option sélectionnée
function sortCars() {
    const sortOption = document.getElementById('sort').value;
    let sortedCars;

    if (sortOption === 'price-asc') {
        sortedCars = cars.sort((a, b) => a.price - b.price);
    } else if (sortOption === 'price-desc') {
        sortedCars = cars.sort((a, b) => b.price - a.price);
    } else if (sortOption === 'model') {
        sortedCars = cars.sort((a, b) => a.model.localeCompare(b.model));
    }

    displayCars(sortedCars);
}

// Initialisation des galeries au chargement de la page
window.onload = function() {
    displayCars(cars);
};


// Fonction pour ouvrir la modale de réservation et pré-remplir le véhicule sélectionné
function openModal(carModel) {
    // Pré-remplir le modèle de voiture dans le formulaire
    document.getElementById('car').value = carModel;

    // Afficher la modale
    document.getElementById('reservation-modal').style.display = "block";
}

// Fonction pour fermer la modale de réservation
function closeModal() {
    document.getElementById('reservation-modal').style.display = "none";
}

// Ajouter des écouteurs d'événements sur les boutons "Réserver maintenant"
const reserveButtons = document.querySelectorAll('.reserve-btn');
reserveButtons.forEach(button => {
    button.addEventListener('click', (event) => {
        const carModel = event.target.getAttribute('data-car-model'); // Récupère le modèle du véhicule
        openModal(carModel);
    });
});

// Fermer la modale si l'utilisateur clique en dehors de la modale
window.onclick = function(event) {
    if (event.target == document.getElementById('reservation-modal')) {
        closeModal();
    }
};


// Ouvrir la modale avec le véhicule sélectionné
function openModal(carModel) {
    document.getElementById('car').value = carModel; // Remplit le champ véhicule
    document.getElementById('reservation-modal').style.display = "block";
}

// Fermer la modale
function closeModal() {
    document.getElementById('reservation-modal').style.display = "none";
}

// Fermer la modale lorsqu'on clique en dehors de celle-ci
window.onclick = function(event) {
    if (event.target == document.getElementById('reservation-modal')) {
        closeModal();
    }
};


// Afficher un message de confirmation après soumission
document.getElementById('reservation-form').addEventListener('submit', function (e) {
    e.preventDefault(); // Empêche le rechargement par défaut
    const form = e.target;

    // Soumettre via Formspree
    fetch(form.action, {
        method: 'POST',
        body: new FormData(form),
        headers: { 'Accept': 'application/json' },
    })
    .then(response => {
        if (response.ok) {
            document.getElementById('reservation-modal').style.display = "none";
            document.getElementById('success-message').style.display = "block";
            form.reset();
        } else {
            alert("Une erreur est survenue. Merci d'essayer à nouveau.");
        }
    })
    .catch(error => console.log("Erreur : ", error));
});


AOS.init();