@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">Modifier l'image de la 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') }}">Détails d'une voiture</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('voiture.updatePic', $voiture->voiture_key) }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="old_cover" value="{{ $voiture->cover }}">


                                    <div class="row">
                                        <input type="hidden" name="v_identifiant" value="{{ $voiture->voiture_key }}">


                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Image du véhicule</label>
                                                <input type="file" accept="image/*" id="cover" name="cover_update"
                                                class="dropify"
                                                data-default-file="{{ $voiture->cover }}">

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

                                    <div class="d-flex justify-content-center">
                                        <button type="submit" class="btn btn-danger" >Modifier</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">&times;</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>
            <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="saveCar()">Oui, confirmer !</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>


    <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 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');

        // Vérifier que les sélections sont valides
        if (marqueSelect.selectedIndex === 0 || modeleSelect.selectedIndex === 0) {
            alert("Veuillez sélectionner une marque et un modèle valides.");
            return;
        }

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

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

        // Afficher le modal (optionnel, tu peux le retirer si non nécessaire)
        $('#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') }}", // Remplace par le nom de ta route
    method: 'POST',
    data: formData,
    headers: {
        'Accept': 'application/json', // Si la réponse attendue est JSON
        'X-Requested-With': 'XMLHttpRequest' // Ajout pour indiquer que c'est une requête AJAX
    },
    processData: false, // Nécessaire pour FormData (ne pas convertir en string)
    contentType: false, // Nécessaire pour FormData (laisser le navigateur gérer le type)
    success: function(response) {


        $('#desactivateCar').modal('hide');
        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