@extends('model')

@section('content')
    <!-- Start::page-header -->
    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
        <div>
            <nav>
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0);">
                            Configuration
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Paramètre</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            
        </div>
    </div>
    <!-- End::page-header -->

  <div class="row">
    <div class="col-xl-12">
        <div class="card custom-card overflow-hidden">
            <div class="card-header d--flex justify-content-between">
                <h6 class="card-title mb-0">Créneaux horaires sélectionnés</h6>

                <button class="btn btn-primary" style="border-radius:50px" data-bs-toggle="modal" data-bs-target="#CreneauHoraireModal">Ajouter</button>
            </div>
            <div class="card-body p-3">
                <!-- <div class="d-flex flex-wrap gap-2">
                    
                    <div class="time-token d-inline-flex align-items-center">
                        <span>11h30 - 12h</span>
                        <button type="button" class="btn-token-remove" aria-label="Supprimer">
                            <i class="bi bi-x"></i> </button>
                    </div>

                    <div class="time-token d-inline-flex align-items-center">
                        <span>12h - 12h30</span>
                        <button type="button" class="btn-token-remove">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>

                    <div class="time-token d-inline-flex align-items-center">
                        <span>12h30 - 13h</span>
                        <button type="button" class="btn-token-remove">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>

                    <div class="time-token d-inline-flex align-items-center">
                        <span>13h - 13h30</span>
                        <button type="button" class="btn-token-remove">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>

                </div> -->

                <div class="d-flex flex-wrap gap-2">
                    <div id="containerJetons">

                    </div>
                </div>

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


 <!-- Modal -->
    <div class="modal fade" id="CreneauHoraireModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Créneaux horaire</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                  
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label text-muted fw-bold small">HEURE DE DÉBUT</label>
                                <input type="time" class="form-control form-control-lg border-2" id="heureDebut" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted fw-bold small">HEURE DE FIN</label>
                                <input type="time" class="form-control form-control-lg border-2" id="heureFin" required>
                            </div>
                        </div>
                        
                        <div class="alert alert-info mt-3 border-0 bg-light-primary text-primary small" style="background-color: #FFF0EB; color: #DC582A !important;">
                            <i class="bi bi-info-circle me-2"></i> Le créneau sera ajouté à la liste sous forme de jeton.
                        </div>
                 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                 
                    <button type="button" onclick="ajouterCreneau()" class="btn btn-primary px-4" style="background-color: #DC582A; border-color: #DC582A;">Ajouter le créneau</button>
                </div>

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

    <!-- Start::row-2 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card overflow-hidden">
                <div class="card-body p-2 px-3">
                    <div class="d-flex justify-content-center w-100 align-items-center">
                        <!-- Le champ de sélection d'images caché -->
                        <input type="file" id="image-principale-input" accept=".jpg, .jpeg, .png"
                            style="display: none;" />
                        <div id="image-principale-container"
                            class="rounded h-100 w-100 d-flex justify-content-center align-items-center position-relative mb-2"
                            style="border: 1px dashed;">

                        </div>
                    </div>
                    <form id="formParametre" class="mb-2">
                      
                        <div class="row">
                            <div class="col-md-3 mb-2">
                                <p class="text-muted mb-0">Raison sociale</p>
                                <input type="text" name="raison_sociale" id="inpraison_sociale" class="form-control text-uppercase">
                            </div>

                             <div class="col-md-3 mb-2">
                                <p class="text-muted mb-0">Numéro whatsapp</p>
                                <input type="text" name="numero_whatsapp" id="numero_whatsapp" class="form-control text-uppercase">
                            </div>

                            <div class="col-md-2 mb-2">
                                <p class="text-muted ellipsis mb-0" title="Valeur point de fidélité">Valeur point de fidélité</p>
                                <input type="text" name="valeur_point_fidelite" id="inpvaleur_point_fidelite" class="form-control text-center">
                            </div>
                            <div class="col-md-2 mb-2">
                                <p class="text-muted mb-0">Taux TVA</p>
                                <input type="text" name="taux_tva" id="inptaux_tva" class="form-control text-center">
                            </div>
                            <div class="col-md-2 mb-2">
                                <p class="text-muted mb-0">Heure limite de cde</p>
                                <input type="time" name="heure_limite_commande" id="inpheure_limite_commande" class="form-control text-center">
                            </div>
                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0">Pied de page</p>
                                <textarea class="form-control" name="etat_pied_page" id="inpetat_pied_page" cols="30" rows="5"></textarea>
                            </div>
                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0">Comment gagner des bouchées ?</p>
                                <textarea class="form-control" name="comment_gagner_bouche" id="inpcomment_gagner_bouche" cols="30" rows="5"></textarea>
                            </div>
                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0">Comment utiliser des bouchées</p>
                                <textarea class="form-control" name="comment_utiliser_bouche" id="inpcomment_utiliser_bouche" cols="30" rows="5"></textarea>
                            </div>
                        </div>
                    </form>
                    <div class="w-100">
                        <button class="btn btn-primary float-end d-flex align-items-center justify-content-center" id="btnValiderParametre">
                            <i class="bx bx-check-circle fs-18 me-1"></i>
                            Valider
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End::row-2 -->

@endsection

@section('script')
    <!-- Script excécuté au chargement de la page -->
    <script>

        document.getElementById('numero_whatsapp').addEventListener('input', function (e) {
            // Supprime tout ce qui n'est pas un chiffre
            this.value = this.value.replace(/[^0-9]/g, '');
            
            // Limite à 13 caractères par exemple
            if (this.value.length > 13) {
                this.value = this.value.slice(0, 13);
            }
        });
                
        imageLogo = null

        _('#image-principale-container').innerHTML = '<i class="bx bx-image" style="font-size: 120px;"></i>\
                                                        <button id="changeImageLogo" \
                                                                style="width:20px; height : 20px; border-radius : 50%;line-height : 16px; font-size : 16px; text-align : center; cursor : pointer;"\
                                                                class="btn btn-warning position-absolute top-0 end-0 m-1 p-0"\
                                                                onclick="document.getElementById(\'image-principale-input\').click();">\
                                                            <i class=\'bx bx-transfer\'></i>\
                                                        </button>'

        function infoParametre(){

            return new Promise((resolve, reject) => {

                $.ajax({

                    url: "{{ route('infoParametre') }}",
                    type: 'GET',
                    dataType: 'json',
                    // beforeSend : progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

                            notifDanger(response.msg || 'Échec de l\'opération.')
                            resolve(response)
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error: function(error) {

                        reject()
                        notifDanger('Échec de l\'opération.')
                        // completeHandler()
                    }
                })
            })
        }

        infoParametre()
            .then((response) => {

                if (response.success == 1) {
                    
                    let info = response.data

                    if (info.length == 0) {
                        return 0
                    }

                    remplirLeForm('#formParametre', info)

                    console.log(info.urlDoc);
                    

                    let imageContainer = document.getElementById('image-principale-container');
                    imageContainer.innerHTML = ''; // Vider l'ancien contenu

                    let imageDiv = document.createElement('div');
                    imageDiv.style.margin = '10px';
                    imageDiv.style.width = '100%';
                    imageDiv.style.height = '100%';
                    imageDiv.style.overflow = 'hidden';
                    imageDiv.classList.add('position-relative', 'd-flex', 'justify-content-center',
                        'align-items-center');
                    imageDiv.innerHTML = `
                        <img src="{{ config('app.logi_base_host') }}/${info.urlDoc}" class="img-fluid" alt="Image logo" style="max-width: 100%; height: 120px;objectFit : cover; cursor : pointer; " onclick="openModal('{{ config('app.logi_base_host') }}/${info.urlDoc}')">
                        <button style="width:20px; height : 20px; border-radius : 50%;line-height : 16px; font-size : 16px; text-align : center; cursor : pointer;z-index : 1000;" class="btn btn-warning position-absolute top-0 end-0 m-1 p-0" onclick="document.getElementById('image-principale-input').click();">
                            <i class="bx bx-transfer"></i>
                        </button>
                    `;
                    imageContainer.appendChild(imageDiv);
                }
            })
    </script>

    <!-- Script d'ajout et de modification  -->
    <script>

        function newEditParam(){

            return new Promise((resolve, reject) => {

                let formParametre = new FormData(_('#formParametre'))

                formParametre.append('imageLogo', imageLogo)
                formParametre.append('_token', '{{ csrf_token() }}')

                $.ajax({

                    url: "{{ route('newEditParam') }}",
                    type: 'POST',
                    data: formParametre,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    // beforeSend : progressHandler(),
                    success: function(response) {

                        if (response.success != 2) {

                            notifDanger(response.msg || 'Échec de l\'opération.')
                            resolve(response)
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error: function(error) {

                        reject()
                        notifDanger('Échec de l\'opération.')
                        // completeHandler()
                    }
                })
            })
        }

        _('#btnValiderParametre').addEventListener('click', function(){

            let elmt = this

            loaderIcon(elmt, 'bx bx-check-circle')

            newEditParam()
                .then((response) => {

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès')
                    }
                    loaderIcon(elmt, 'bx bx-check-circle')
                }).catch(() => loaderIcon(elmt, 'bx bx-check-circle'))
        })

        $(document).on('click','#supprimerCreneauHoraire',function(){
            
            $id = $(this).data('id');

            $.ajax({
                type: "DELETE",
                url: "{{route('creneau_horaire.delete')}}",
                data: {
                    id : $id,
                    _token:'{{csrf_token()}}'
                },
                dataType: "JSON",
                success: function (resp) {
                    
                    notifSuccess(resp.msg)
                    recuperationCreneau()
                }
            });
        })

        recuperationCreneau()
        function ajouterCreneau() {
            // 1. Récupération des valeurs
            const debut = document.getElementById('heureDebut').value;
            const fin = document.getElementById('heureFin').value;

            if (!debut || !fin) {
                notifDanger('Veuillez remplir les deux horaires.');
                return;
            }

            $.ajax({
                type: "POST",
                url: "{{route('creneau_horaire.create')}}",
                data: {
                    heure_debut : debut,
                    heure_fin : fin,
                    _token:'{{csrf_token()}}'
                },
                dataType: "JSON",
                success: function (resp) {

                    recuperationCreneau()
                    $('#CreneauHoraireModal').modal('hide')
                    notifSuccess(resp.msg)
                    $('#heureDebut').val('')
                    $('#heureFin').val('')
                  
                }
            });

        }

        function recuperationCreneau(){
            $.ajax({
                type: "GET",
                url: "{{route('creneau_horaire.get')}}",
                dataType: "JSON",
                success: function (resp) {

                    $('#containerJetons').empty()
                    $.each(resp.data,function(key,value){

                            // Formatage propre (ex: 11:30 devient 11h30)
                            const formatDebut = value.heure_debut.replace(':', 'h');
                            const formatFin = value.heure_fin.replace(':', 'h');
                            const texteCreneau = `${formatDebut} - ${formatFin}`;
                            // 2. Création du jeton (Template)
                            const container = document.getElementById('containerJetons'); // Ajoute cet ID à ta div flex-wrap
                            
                            const jeton = document.createElement('div');
                            jeton.className = "time-token d-inline-flex align-items-center me-2 mb-2";
                            jeton.innerHTML = `
                                <span>${texteCreneau}</span>
                                <button type="button" class="btn-token-remove" onclick="this.parentElement.remove()">
                                    <i class="bi bi-x-lg" style="font-size: 12px; margin-left: 8px;" id="supprimerCreneauHoraire" data-id="${value.id_creneau_horaire}"></i>
                                </button>
                            `;
                
                            // 3. Ajout au container et fermeture du modal
                            container.appendChild(jeton);
                    })
                }
            });
        }
    </script>

    <!-- Script de sélection de l'image du logo -->
    <script>
        _('#image-principale-input').addEventListener('change', function(event) {

            let imageContainer = document.querySelector('#image-principale-container');
            let files = event.target.files;

            for (let file of files) {

                imageLogo = file

                let reader = new FileReader();

                reader.onload = function(e) {
                    // Conteneur pour l'image et le bouton
                    let imageWrapper = document.createElement('div');
                    imageWrapper.classList.add('position-relative', 'd-flex', 'justify-content-center',
                        'align-items-center');
                    imageWrapper.style.margin = '10px';
                    imageWrapper.style.width = '100%';
                    imageWrapper.style.height = '100%';
                    imageWrapper.style.overflow = 'hidden';

                    // Création de l'élément image
                    let img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.maxWidth = '100%';
                    img.style.maxHeight = '120px';
                    img.style.objectFit = 'contain';
                    img.style.cursor = 'pointer';
                    img.classList.add('img-fluid');

                    // Ajout d'un bouton de fermeture
                    let btnChangeImg = document.createElement('button');
                    btnChangeImg.innerHTML = '<i class="bx bx-transfer"></i>';
                    btnChangeImg.classList.add('btn', 'btn-warning', 'position-absolute', 'top-0', 'end-0',
                        'm-1', 'p-0');
                    btnChangeImg.style.width = '20px';
                    btnChangeImg.style.height = '20px';
                    btnChangeImg.style.borderRadius = '50%';
                    btnChangeImg.style.lineHeight = '16px';
                    btnChangeImg.style.fontSize = '16px';
                    btnChangeImg.style.textAlign = 'center';
                    btnChangeImg.style.cursor = 'pointer';
                    btnChangeImg.style.zIndex = '10000';

                    // Suppression de l'image au clic sur le bouton
                    btnChangeImg.addEventListener('click', function() {
                        document.getElementById('image-principale-input').click()
                    });

                    // Efface les images précédentes et ajoute la nouvelle image
                    imageContainer.innerHTML = '';
                    imageWrapper.appendChild(img);
                    imageContainer.appendChild(btnChangeImg);
                    imageContainer.appendChild(imageWrapper);
                };

                reader.readAsDataURL(file);
            }
        })
    </script>
@endsection