@extends('layouts.base2')
@section('title', "Interface ajout d'évènement")

@section('content')
    @section('titlePage')  <h1 class="m-0 color-ico-barreau"><i class="fas fa-calendar-alt"></i> Liste des évènements</h1> @stop
    <div class="container" style="padding-bottom: 2em; padding-top: 1em">

        <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">Liste des évènements</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">
                                        @adminbarreau
                                            <div class="row" style="padding-top:1em">
                                                <div class="col-sm-2">
                                                    <button type="button" style="background-color:  #18528d; color: #fff" class="btn btn-primary" data-toggle="modal" data-target="#modal-default">
                                                        <i class="fa-solid fa-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @endadminbarreau
                                        <br>
                                        <div class="row">
                                            <table class="table table-striped nowrap" id="liste_event">
                                                <thead>
                                                    <tr>
                                                        <th><span class="color-ico-barreau"> N°</span></th>
                                                        <th><i class="fas fa-user color-ico-barreau"></i> NOM</th>
                                                        <th><i class="fas fa-map-marker-alt color-ico-barreau"></i> LIEU</th>
                                                        <th><i class="fas fa-clipboard-list color-ico-barreau"></i> NATURE</th>
                                                        <th><i class="fas fa-calendar-plus color-ico-barreau"></i><span class="color-ico-barreau"> DATE D'AJOUT</span></th>
                                                        <th><i class="fas fa-cogs color-ico-barreau"></i><span class="color-ico-barreau"> ACTIONS</span></th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    {{-- Modal --}}
    <div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modalRoleLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content shadow-lg border-0 rounded-4">
                <!-- Header -->
                <div class="modal-header text-white" style="background-color: #18528d;">
                    <h5 class="modal-title" id="modalRoleLabel">
                        <i class="fas fa-calendar-plus"></i> Ajouter un évènement
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Form -->
                <form method="POST" action="{{ route('evenement.create') }}" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-body px-4 py-3">
                        <!-- Nom de l'évènement -->
                        <div class="mb-3">
                            <label for="nom" class="form-label fw-bold">📅 Nom de l'évènement</label>
                            <input type="text" class="form-control rounded-3" id="nom" name="nom" placeholder="Nom de l'évènement" required>
                        </div>

                        <!-- Lieu -->
                        <div class="mb-3">
                            <label for="lieu" class="form-label fw-bold">📍 Lieu de l'évènement</label>
                            <input type="text" class="form-control rounded-3" id="lieu" name="lieu" placeholder="Lieu de l'évènement" required>
                        </div>

                        <!-- Nature de l'évènement -->
                        <div class="mb-3">
                            <label for="local_international" class="form-label fw-bold">🌍 Nature de l'évènement</label>
                            <select class="form-control rounded-3" id="local_international" name="local_international" required>
                                <option value="0">Local</option>
                                <option value="1">International</option>
                            </select>
                        </div>

                        <!-- Status de l'évènement -->
                        <div class="mb-3">
                            <label for="id_etat_qualificatif" class="form-label fw-bold">🔧 Status de l'évènement</label>
                            <select class="form-control rounded-3" id="id_etat_qualificatif" name="id_etat_qualificatif" required>
                                <option value="9">En cours</option>
                                <option value="1">Terminé</option>
                            </select>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="modal-footer border-0 px-4 pb-4">
                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal">
                            <i class="fa fa-times-circle me-1"></i> Fermer
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fa-solid fa-floppy-disk me-1"></i> Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- /.modal -->
@stop
@section('footer')

    <script>

        $(document).ready(function(){
            if ($.fn.DataTable.isDataTable('#liste_event')) {
                $('#liste_event').DataTable().destroy();
            }
            var oTable = $('#liste_event').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('charger.liste.evenement') !!}",
                columns: [
                    {data: 'numero',name: 'numero'},
                    {data: 'nom', name: 'nom', searchable: true},
                    {data: 'lieu', name: 'lieu', searchable: true},
                    {data: 'nature', name: 'nature', searchable: true},
                    {data: 'dateAjout', name: 'dateAjout', searchable: true},
                    {data: 'action', name: 'action', searchable: false}
                ]
            });
        });

        //Gestion des erreurs
        $(function() {
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3500
            });

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

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

            $(document).ready(function() {

                @error('nom')
                    setTimeout(function() {
                        Toast.fire({
                            icon: 'error',
                            title: '{{ $message }}'
                        });
                    });
                @enderror

                @error('lieu')
                    setTimeout(function() {
                        Toast.fire({
                            icon: 'error',
                            title: '{{ $message }}'
                        });
                    }, 2000);
                @enderror

            });


        });

    </script>

@stop