@extends('layouts.base2')
@section('title', 'Interface de gestion des juridictions')
@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>
    <style>
        .modal-header {
            border-bottom: none;
            font-weight: bold;
        }

        .modal-content {
            border-radius: 12px;
        }

        .form-group label {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .input-group {
            border-radius: 8px;
            overflow: hidden;
        }

        .btn {
            border-radius: 8px;
            font-weight: 600;
        }

    </style>
@endpush
@section('content')
    @section('titlePage')  <h1 class="m-0">Liste des juridictions</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 des juridictions</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('back.tribunal.tribunal-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

            if ($.fn.DataTable.isDataTable('#liste_tribunal')) {
                $('#liste_tribunal').DataTable().destroy();
            }
            var oTable = $('#liste_tribunal').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('charger.liste.tribunal') }}",
                columns: [
                    { data: 'numero', name: 'numero' },
                    { data: 'ville', name: 'ville', searchable: true },
                    { data: 'nom_tribunal', name: 'nom_tribunal'},
                    { data: 'action', name: 'action', searchable: false }
                ]
            });

            setInterval(function(){
                location.reload();
            }, 300000); //Tous les deux minutes

            // 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 nom_tribunal = button.data('nom_tribunal');
                var ville_id = button.data('ville_id');

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

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

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


    </script>

@stop