@extends('layouts.app.app')

@push('styles')

@endpush

@section('content')
    <div class="content">
        {{-- En-tête de la page --}}
        @include('pages.vehicule.partials.header')

        {{-- Liste des véhicules --}}
        <div class="row g-3 list mt-3" id="vehiculesList">
            @include('pages.vehicule.partials.liste')
        </div>
    </div>

    {{-- Modals --}}
    @include('pages.vehicule.partials.add-modal')
    @include('pages.vehicule.partials.edit-modal')
@endsection

@push('scripts')
<script>
    // Gestion de l'ajout d'un véhicule
    document.addEventListener('DOMContentLoaded', function() {
        const addVehiculeForm = document.getElementById('vehiculeForm');
        let isImmatriculationValid = true;

        if (addVehiculeForm) {
            addVehiculeForm.addEventListener('submit', function(e) {
                e.preventDefault();

                // Vérification de l'immatriculation
                if (!isImmatriculationValid) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur de validation',
                        text: 'Cette immatriculation existe déjà',
                        showConfirmButton: true
                    });
                    return;
                }

                // Récupération des données du formulaire
                const formData = new FormData(addVehiculeForm);

                // Envoi de la requête
                fetch('/vehicules', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Fermer le modal
                        const modal = bootstrap.Modal.getInstance(document.getElementById('addVehiculeModal'));
                        modal.hide();

                        // Réinitialiser le formulaire
                        addVehiculeForm.reset();
                        isImmatriculationValid = true;

                        // Notification de succès
                        Swal.fire({
                            icon: 'success',
                            title: 'Succès !',
                            text: 'Le véhicule a été ajouté avec succès',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Erreur de validation',
                            text: Object.values(data.errors).flat().join('\n'),
                            showConfirmButton: true
                        });
                    }
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur !',
                        text: 'Une erreur est survenue lors de l\'ajout du véhicule',
                        showConfirmButton: true
                    });
                });
            });
        }

        // Vérification de l'immatriculation existante
        const immatriculationInput = document.querySelector('input[name="immatriculation"]');
        if (immatriculationInput) {
            let timeoutId;

            immatriculationInput.addEventListener('input', function() {
                isImmatriculationValid = true;
                clearTimeout(timeoutId);

                const immatriculation = this.value.trim();
                if (immatriculation.length > 0) {
                    timeoutId = setTimeout(() => {
                        fetch(`/vehicules/check-immatriculation?immatriculation=${encodeURIComponent(immatriculation)}`)
                            .then(response => response.json())
                            .then(data => {
                                if (!data.available) {
                                    isImmatriculationValid = false;
                                    const feedback = document.getElementById('immatriculation_feedback');
                                    if (feedback) {
                                        feedback.textContent = 'Cette immatriculation existe déjà';
                                        feedback.style.display = 'block';
                                        immatriculationInput.classList.add('is-invalid');
                                    }
                                } else {
                                    isImmatriculationValid = true;
                                    const feedback = document.getElementById('immatriculation_feedback');
                                    if (feedback) {
                                        feedback.style.display = 'none';
                                        immatriculationInput.classList.remove('is-invalid');
                                    }
                                }
                            });
                    }, 500);
                }
            });
        }
    });

    // Gestion de la modification d'un véhicule
    document.addEventListener('DOMContentLoaded', function() {
    const editZoneForm = document.getElementById('editZoneForm');
    let isNameValid = true;
    let currentZoneId = null;
    let originalZoneName = ''; // Stocke le nom original de la zone

    // Fonction pour charger les données de la zone dans le modal
    window.editZone = function(zoneId) {
        currentZoneId = zoneId;

        fetch(`/zones/${zoneId}/edit`)
            .then(response => response.json())
            .then(data => {
                if (!data.data) {
                    console.error('Données invalides reçues');
                    return;
                }

                // Stocker les données originales
                originalZoneName = data.data.nom_zone;

                // Remplir le formulaire
                document.getElementById('edit_zone_id').value = data.data.zone_id;
                document.getElementById('edit_nom_zone').value = data.data.nom_zone;
                document.getElementById('edit_active').checked = data.data.active == 1;

                // Afficher le modal
                const editModal = document.getElementById('editZoneModal');
                const bsModal = new bootstrap.Modal(editModal);
                bsModal.show();
            })
            .catch(error => {
                console.error('Erreur:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Erreur !',
                    text: 'Une erreur est survenue lors du chargement des données'
                });
            });
    };

    // Validation du nom lors de la modification
    const editNomZoneInput = document.getElementById('edit_nom_zone');
    if (editNomZoneInput) {
        let timeoutId;

        editNomZoneInput.addEventListener('input', function() {
            clearTimeout(timeoutId);

            const newNomZone = this.value.trim();
            const feedback = document.getElementById('edit_nom_zone_feedback');

            // Si le nom n'a pas changé, pas besoin de vérification
            if (newNomZone === originalZoneName) {
                isNameValid = true;
                this.classList.remove('is-invalid');
                if (feedback) feedback.style.display = 'none';
                return;
            }

            // Ne vérifier que si le champ n'est pas vide
            if (newNomZone.length > 0) {
                timeoutId = setTimeout(() => {
                    fetch(`/zones/check-name?nom_zone=${encodeURIComponent(newNomZone)}&exclude_id=${currentZoneId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (!data.available) {
                                isNameValid = false;
                                if (feedback) {
                                    feedback.textContent = 'Ce nom de zone existe déjà';
                                    feedback.style.display = 'block';
                                    this.classList.add('is-invalid');
                                }
                            } else {
                                isNameValid = true;
                                this.classList.remove('is-invalid');
                                if (feedback) feedback.style.display = 'none';
                            }
                        })
                        .catch(error => {
                            console.error('Erreur lors de la vérification:', error);
                        });
                }, 500);
            }
        });
    }

    // Gestion de la soumission du formulaire de modification
    if (editZoneForm) {
        editZoneForm.addEventListener('submit', function(e) {
            e.preventDefault();

            // Si le nom n'est pas valide et a été modifié
            if (!isNameValid && editNomZoneInput.value.trim() !== originalZoneName) {
                Swal.fire({
                    icon: 'error',
                    title: 'Erreur de validation',
                    text: 'Ce nom de zone existe déjà. Veuillez en choisir un autre.',
                    showConfirmButton: true
                });
                return;
            }

            const zoneId = document.getElementById('edit_zone_id').value;
            const formData = new FormData(editZoneForm);

            // Ajouter le champ active s'il n'est pas coché
            if (!formData.has('active')) {
                formData.append('active', '0');
            }

            fetch(`/zones/${zoneId}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const editModal = bootstrap.Modal.getInstance(document.getElementById('editZoneModal'));
                    editModal.hide();

                    Swal.fire({
                        icon: 'success',
                        title: 'Succès !',
                        text: 'La zone a été modifiée avec succès',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: data.message || 'Une erreur est survenue'
                    });
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Erreur !',
                    text: 'Une erreur est survenue lors de la modification'
                });
            });
        });
    }

    // Réinitialisation du formulaire à la fermeture du modal
    const editModal = document.getElementById('editZoneModal');
    if (editModal) {
        editModal.addEventListener('hidden.bs.modal', function() {
            editZoneForm.reset();
            isNameValid = true;
            currentZoneId = null;
            originalZoneName = '';
            editZoneForm.classList.remove('was-validated');
            const feedback = document.getElementById('edit_nom_zone_feedback');
            if (feedback) {
                feedback.style.display = 'none';
            }
            document.getElementById('edit_nom_zone').classList.remove('is-invalid');
        });
    }
});

    // Fonction de suppression
    window.deleteVehicule = function(vehiculeId, marqueModele) {
        Swal.fire({
            title: 'Êtes-vous sûr ?',
            text: `Vous êtes sur le point de supprimer le véhicule "${marqueModele}"`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Oui, supprimer!',
            cancelButtonText: 'Annuler',
            reverseButtons: true,
            focusCancel: true
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`/vehicules/${vehiculeId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Supprimé !',
                            text: 'Le véhicule a été supprimé avec succès',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Erreur !',
                            text: data.message || 'Impossible de supprimer ce véhicule',
                            confirmButtonText: 'OK'
                        });
                    }
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur !',
                        text: 'Une erreur est survenue lors de la suppression',
                        confirmButtonText: 'OK'
                    });
                });
            }
        });
    };
</script>
@endpush