@extends('layouts.base2')
@section('title', 'Interface de gestion des audiences')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
@endpush
@section('content')
    @section('titlePage')
        <h1 class="m-0">Liste des audiences</h1>
    @stop
    <div class="container" style="padding-bottom: 2em; padding-top: 1em">
        @include('layouts.flash-message')
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="card card-primary card-tabs">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home"
                                        role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Listes de mes audiences</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-one-tabContent">
                                    <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                        @livewire('front.audience.audience-list')
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

@stop
@section('footer')

    <script>

        $(document).ready(function() {
           //GESTION DES ERREURS
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 5000
            });

            $('.swalDefaultWarning').ready(function() {
                @if (session('warning'))
                    Toast.fire({
                        icon: 'warning',
                        title: '{{ session('warning') }}',
                        timer: 10000
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('status'))
                    Toast.fire({
                        icon: 'success',
                        title: '{{ session('status') }}'
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('error'))
                    Toast.fire({
                        icon: 'error',
                        title: "{{ session('error') }}",
                        timer: 10000
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('info'))
                    Toast.fire({
                        icon: 'info',
                        title: "{{ session('info') }}",
                        timer: 10000
                    })
                @endif
            });
            //Fin gestion des Erreur

            console.log('Document is ready');
            // Fonction utilitaire pour trier les options d'un select par ordre alphabétique
            function sortSelectOptions(selectElement) {
                const options = Array.from(selectElement.options);
                options.sort((a, b) => a.text.localeCompare(b.text, 'fr', { sensitivity: 'base' }));
                selectElement.innerHTML = ''; // Vider le select
                options.forEach(option => selectElement.add(option)); // Réinsérer les options triées
            }

            if ($.fn.DataTable.isDataTable('#liste_audience')) {
                $('#liste_audience').DataTable().destroy();
            }

            var oTable = $('#liste_audience').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('charger.liste.audience') !!}",
                columns: [
                    { data: 'numero', name: 'numero' },
                    {
                        data: 'audience',
                        name: 'audience',
                        render: function(data, type, row) {
                            return data.replace(/\n/g, '<br>');
                        }
                    },
                    { data: 'tribunal', name: 'tribunal' },
                    { data: 'ville', name: 'ville' },
                    { data: 'date_conseil', name: 'date_conseil', searchable: true },
                    { data: 'heure_debut', name: 'heure_debut', searchable: true },
                    { data: 'heure_fin', name: 'heure_fin', searchable: true },
                    { data: 'action', name: 'action', searchable: false, orderable: false },
                ],

                destroy: true
            });

            console.log("DataTable initialized");

            $('#liste_audience').DataTable().ajax.reload();

            // Pré-remplir le modal avec les données existantes
            $('#modal-ajout').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var id = button.data('id');
                var audience = button.data('audience');
                var tribunal_id = button.data('tribunal_id');
                var ville_id = button.data('ville_id');
                var date_conseil = button.data('date_conseil');
                var heure_debut = button.data('heure_debut');
                var heure_fin = button.data('heure_fin');

                var modal = $(this);
                if (id) { // Modification
                    modal.find('.modal-title').text('Modifier audience');
                    modal.find('form').attr('action', '/modifier/audience/' + id);
                } else { // Ajout
                    modal.find('.modal-title').text('Nouvelle audience');
                    modal.find('form').attr('action', '{{ route('ajouter.audience') }}');
                }
                modal.find('textarea[name="audience"]').val(audience);
                modal.find('select[name="tribunal_id"]').val(tribunal_id);
                modal.find('select[name="ville_id"]').val(ville_id);
                modal.find('input[name="date_conseil"]').val(date_conseil);
                modal.find('input[name="heure_debut"]').val(heure_debut);
                modal.find('input[name="heure_fin"]').val(heure_fin);
            });

            // Réinitialiser le modal lorsque fermé
            $('#modal-ajout').on('hidden.bs.modal', function () {
                var modal = $(this);
                modal.find('.modal-title').text('Nouvelle audience');
                modal.find('form').attr('action', '{{ route('ajouter.audience') }}');
                modal.find('textarea[name="audience"]').val('');
                modal.find('select[name="tribunal_id"]').val('');
                modal.find('select[name="ville_id"]').val('');
                modal.find('input[name="date_conseil"]').val('');
                modal.find('input[name="heure_debut"]').val('');
                modal.find('input[name="heure_fin"]').val('');
            });

            //reset modal pour suppression
            $('#liste_tribunaux tbody').on('click', 'button[data-toggle="modal"]', function () {
                var target = $(this).data('target');
                $(target).modal('show');
            });

            // TRAITEMENT DU FORMULAIRE
            $('#form-ajout-audience').off('submit').on('submit', function(event) {
                event.preventDefault(); // Empêche la soumission normale du formulaire
                var form = $(this);
                var submitButton = form.find('button[type="submit"]');

                // Empêcher les soumissions multiples
                if (submitButton.prop('disabled')) {
                    return;
                }

                // Désactiver le bouton de soumission pour éviter les soumissions multiples
                submitButton.prop('disabled', true);

                $.ajax({
                    url: form.attr('action'),
                    method: form.attr('method'),
                    data: form.serialize(),
                    success: function(response) {
                        // Si la requête réussit, vous pouvez fermer la modal et rafraîchir la table DataTables
                        $('#modal-ajout').modal('hide');
                        // $('#liste_audience').DataTable().ajax.reload();
                        window.location.reload();
                        // Réactiver le bouton de soumission
                        submitButton.prop('disabled', false);
                        // Afficher un message de succès, si nécessaire
                    },
                    error: function(response) {
                        // Réinitialiser les messages d'erreur
                        $('.text-danger').html('');

                        if(response.status === 422) {
                            var errors = response.responseJSON.errors;
                            for(var key in errors) {
                                $('#' + key + '-error').html(errors[key][0]);
                            }
                        }
                        // Réactiver le bouton de soumission
                        submitButton.prop('disabled', false);
                    }
                });
            });

            // Fermer le modal en réinitialisant les messages d'erreur et le formulaire
            $('#modal-ajout').on('hidden.bs.modal', function () {
                $('.text-danger').html('');
                $('#form-ajout-audience')[0].reset();
            });
        });

        //Traitement de retours des juridictions ou tribunaux
        function changerTPI(){
            var ville_id = document.getElementById("ville_id").value;
            var tribunalSelect = document.getElementById("tribunal_id");

            if(ville_id) {
                // Faire une requête Ajax pour récupérer les juridiction
                fetch(`/charger-juridiction/${ville_id}`)
                    .then(response => response.json())
                    .then(data => {
                        // console.log('Données récupérées:', data);
                        // Vider le select des tribunaux
                        tribunalSelect.innerHTML = '<option value="">Sélectionner une juridiction</option>';

                        // Vérifier si le tableau contient des données
                        if (data.length > 0) {
                            console.log('Tribunaux:', data[0].tribunaux);
                            let tribunaux = data[0].tribunaux.split(', ');  // Séparer les tribunaux par virgule

                            // 2. Trier les tribunaux en fonction de leurs noms
                            tribunaux.sort((a, b) => {
                                let nomA = a.split(':')[1].trim().toLowerCase(); // Extraire le nom et le convertir en minuscule
                                let nomB = b.split(':')[1].trim().toLowerCase(); // Extraire le nom et le convertir en minuscule
                                return nomA.localeCompare(nomB); // Comparer les noms
                            });

                            // Ajouter les tribunaux récupérés dans le select
                            tribunaux.forEach((tribunal) => {
                                let [id, nom] = tribunal.split(':');

                                var option = document.createElement("option");
                                option.value = id.trim();  // Utilisation de l'ID comme valeur
                                option.text = nom.trim();   // Affichage du nom du tribunal
                                tribunalSelect.appendChild(option);
                            });
                        } else {
                            console.warn('Aucun tribunal disponible');
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                    });
            } else {
                // Réinitialiser si aucune ville n'est sélectionnée
                alert('ici');
                tribunalSelect.innerHTML = '<option value="">Sélectionner une juridiction</option>';
            }
        }

        /**date */
        function setMinDate() {
            const dateInput = document.getElementById('date_conseil');
            const today = new Date();
            const year = today.getFullYear();

            // Construire la date minimale au format YYYY-MM-DD
            const minDate = `${year}-01-01`;
            dateInput.setAttribute('min', minDate);
        }

        // Appeler la fonction lors du chargement de la page
        window.onload = setMinDate;
    </script>

@stop