@extends('layouts.main')

@section('contenu')
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0">Ajouter une nouvelle voiture</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('clients.dashboard') }}">Tableau de
                                            bord</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('voiture.index') }}">Liste des
                                            voitures</a></li>
                                    <li class="breadcrumb-item active">Ajouter une voiture</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title"></h4>

                                <form action="{{ route('clients.addVoiture') }}" id="carForm" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf

                                    <div class="row">

                                        <input type="hidden" id="nom" name="nom">

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Marque</label>
                                                <select class="custom-select" name="ma_identifiant" id="marque" onchange="getModele()">
                                                    <option value="">Veuillez choisir une marque</option>
                                                    @foreach ($marques as $marque)
                                                        <option value="{{ $marque->marque_key }}" {{ old('ma_identifiant') == $marque->marque_key ? 'selected' : '' }}>
                                                            {{ $marque->designation }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Modèle</label>
                                                <select class="custom-select" name="mo_identifiant" id="modele">
                                                    <option value="">Veuillez choisir un modèle</option>
                                                    @foreach ($modeles as $modele)
                                                        <option value="{{ $modele->modele_key }}" {{ old('mo_identifiant') == $modele->modele_key ? 'selected' : '' }}>
                                                            {{ $modele->designation }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="example-search-input">Plaque d'immatriculation</label>
                                                <input class="form-control" name="immatriculation" value="{{ old('immatriculation') }}"
                                                    placeholder="Entrez le numéro de la plaque" type="search"
                                                    id="immatriculation">
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="example-search-input">Numéro de châssis</label>
                                                <input class="form-control" name="chassis" value="{{ old('chassis') }}" id="chassis"
                                                    placeholder="Entrez le numéro de châssis " type="search">
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Carburant</label>
                                                <select class="custom-select" name="ca_identifiant" id="carburant">
                                                    <option value="">Veuillez choisir un carburant</option>
                                                    @foreach ($carburants as $carburant)
                                                        <option value="{{ $carburant->carburant_key }}" {{ old('ca_identifiant') == $carburant->carburant_key ? 'selected' : '' }}>
                                                            {{ $carburant->designation }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Transmission</label>
                                                <select class="custom-select" name="tr_identifiant" id="transmission">
                                                    <option value="">Veuillez choisir une transmission</option>
                                                    @foreach ($transmissions as $transmission)
                                                        <option value="{{ $transmission->transmission_key }}" {{ old('tr_identifiant') == $transmission->transmission_key ? 'selected' : '' }}>
                                                            {{ $transmission->designation }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="example-search-input">Année</label>
                                                <input class="form-control" name="annee"
                                                    placeholder="Entrez le numéro de la plaque" value="{{ old('annee') }}" type="search"
                                                    id="annee">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Informations supplémentaires</label>
                                                <textarea class="form-control infos_sup" name="infos_sup" rows="14"
                                                    placeholder="Entrez tout ce qu'il faut savoir sur le véhicule">{{ old('infos_sup') }}</textarea>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Image du véhicule</label>
                                                <input type="file" accept="image/*" id="cover" name="cover"
                                                    class="dropify">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-center">
                                        <button type="button" id="ajouterBtn" class="btn btn-secondary" disabled onclick="remplirNomVoiture()">Ajouter</button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div> <!-- end col -->
            </div>
        </div>
    </div>
    <div id="desactivateCar" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="myModalLabel">Nommer cette voiture</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Nous prenons ce nom comme nom par défaut de la voiture. Vous pourrez modifier si cela ne vous convient pas ou continuer si cela vous convient</p>
                    <input type="text" class="form-control" id="nom_voiture_defaut">
                    <div class="error-message text-danger" id="nom_voiture_defaut-error"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light waves-effect" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-success" onclick="validateAndSaveCar()">Oui, confirmer !</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <style>
        .error-border {
            border: 2px solid red !important;
        }
        .error-message {
            font-size: 0.875rem;
            margin-top: 0.25rem;
            min-height: 1.5rem; /* Réserve l'espace pour éviter les sauts de mise en page */
        }
    </style>

    <script>
     function validateAndSaveCar() {
    // Réinitialiser la bordure et le message d'erreur
    const input = document.getElementById('nom_voiture_defaut');
    const errorDiv = document.getElementById('nom_voiture_defaut-error');
    input.classList.remove('error-border');
    errorDiv.textContent = '';

    // Vérifier le champ
    const nomVoiture = input.value.trim();
    if (!nomVoiture) {
        input.classList.add('error-border');
        errorDiv.textContent = 'Le nom de la voiture est requis.';
        return; // Bloquer l'exécution de saveCar()
    }

    // 👉 ICI : Mettre à jour le champ caché #nom AVANT d'envoyer
    document.getElementById('nom').value = nomVoiture;

    // Envoyer le formulaire
    document.getElementById('carForm').submit();
}

    </script>


    <div class="my-dropzone"></div>




    <script>
        document.addEventListener('DOMContentLoaded', () => {
            ClassicEditor
                .create(document.querySelector('#ckeditor'))
                .catch(error => console.error(error));
        });
        document.addEventListener('DOMContentLoaded', () => {
            ClassicEditor
                .create(document.querySelector('#ckedito'))
                .catch(error => console.error(error));
        });
    </script>

<script>
    function verifierChamps() {
        const marque = document.getElementById('marque').value;
        const modele = document.getElementById('modele').value;
        const immatriculation = document.getElementById('immatriculation').value.trim();
        // const chassis = document.getElementById('chassis').value.trim();
        const carburant = document.getElementById('carburant').value;
        const transmission = document.getElementById('transmission').value;
        const annee = document.getElementById('annee').value.trim();
        // const infos_sup = document.querySelector('.infos_sup').value.trim();

        const bouton = document.getElementById('ajouterBtn');

        if (marque && modele && immatriculation && carburant && transmission && annee) {
            bouton.disabled = false;
            bouton.classList.remove('btn-secondary');
            bouton.classList.add('btn-danger'); // rouge quand prêt
        } else {
            bouton.disabled = true;
            bouton.classList.remove('btn-danger');
            bouton.classList.add('btn-secondary'); // gris sinon
        }
    }

    // Ecouter les changements sur tous les champs
    document.querySelectorAll('#marque, #modele, #immatriculation, #carburant, #transmission, #annee')
        .forEach(input => {
            input.addEventListener('input', verifierChamps);
            input.addEventListener('change', verifierChamps);
        });
</script>


    {{-- <script>
    function remplirNomVoiture() {
        let marqueSelect = document.getElementById('marque');
let modeleSelect = document.getElementById('modele');


let marque = marqueSelect.options[marqueSelect.selectedIndex].text;
let modele = modeleSelect.options[modeleSelect.selectedIndex].text;


    let nomDefaut = marque + " " + modele;
    document.getElementById('nom_voiture_defaut').value = nomDefaut;


        $('#desactivateCar').modal('show');

        $.ajax({
                url: "",
                method: 'POST',
                data: {
                    nom: nomDefaut,
                    : nomDefaut,
                    nom: nomDefaut,
                    nom: nomDefaut,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {

                    console.log(response);
                },
                error: function(xhr, status, error) {
                    alert("Une erreur est survenue");
                }
            });
    }
</script> --}}

<script>



function remplirNomVoiture() {
    let marqueSelect = document.getElementById('marque');
    let modeleSelect = document.getElementById('modele');

    let marque = marqueSelect.options[marqueSelect.selectedIndex].text;
    let modele = modeleSelect.options[modeleSelect.selectedIndex].text;
    let nomDefaut = marque + " " + modele;

    // Mettre à jour le champ "nom" dans le formulaire


    // Mettre à jour aussi le champ texte dans le modal
    document.getElementById('nom_voiture_defaut').value = nomDefaut;

    // Ouvrir le modal
    $('#desactivateCar').modal('show');
}







        function saveCar() {


            // let formData = new FormData();

            // // Ajouter les champs au FormData
            // formData.append('nom', $('#nom_voiture_defaut').val());
            // formData.append('ma_identifiant', $('#marque').val());
            // formData.append('mo_identifiant', $('#modele').val());
            // formData.append('annee', $('#annee').val());
            // formData.append('immatriculation', $('#immatriculation').val());
            // formData.append('chassis', $('#chassis').val());
            // formData.append('infos_sup', $('.infos_sup').val());

            // formData.append('ca_identifiant', $('#carburant').val());
            // formData.append('tr_identifiant', $('#transmission').val());
            // formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
            // let file = $('#cover')[0].files[0];
            // if (file) {
            //     formData.append('cover', file);
            // }

            // $.ajax({
            //     url: "{{ route('clients.addVoiture') }}",
            //     method: 'POST',
            //     data: formData,
            //     headers: {
            //         'Accept': 'application/json',
            //         'X-Requested-With': 'XMLHttpRequest'
            //     },
            //     processData: false,
            //     contentType: false,
            //     success: function(response) {


            //         $('#desactivateCar').modal('hide');

            //         sessionStorage.setItem('success', response.message);
            //         window.location = response.redirect_url;

            //     },
            //     error: function(xhr, status, error) {
            //         console.error(xhr.responseJSON);
            //         alert("Une erreur est survenue : " + (xhr.responseJSON?.message || "Erreur inconnue"));
            //     }
            // });

        }
    </script>
@endsection