@extends('models')
@section('titre-page', 'Gestionnaire d\'évènement')
@section('content-body')
    <!-- Page Header -->
    <div class="d-md-flex d-block mt-4 align-items-center justify-content-between page-header-breadcrumb ">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-2">
                <div class="col-xl-7 col-md-4">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Contrôles</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Gestionnaire d'évènement</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-5 col-md-8">

                    {{-- <button class="btn btn-primary" id="verifycode">check</button> --}}
                </div>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-body">

            <div class="row mb-4">
                <div class="col-xl-3">
                <p class="mb-0 text-muted">Type d'évènement&nbsp;:</p>
                    <select id="type_evenement" class="form-select Pselect2">
                            <option value="">TOUS</option>
                            <option value="1">AUTHENTIFICATION OK</option>
                            <option value="2">PAS HABILITATION</option>
                            <option value="3">HABILITATION OK</option>
                            <option value="4">DIVERS</option>
                    </select> 
                </div>

                <div class="col-xl-3">
                       <p class="mb-0 text-muted">Opérateur&nbsp;:</p>
                       <select id="operateur" class="form-select Pselect2">
                       </select> 
                </div>

                <div class="col-xl-3">
                        <p class="mb-0 text-muted">Période&nbsp;:</p>
                       <input type="text" class="form-control text-center" name="datetimes" id="filtrePeriode" />
                </div>

                <div class="col-xl-3">
                        <button type="button" class="btn btn-primary-light btn-wave d-flex me-2 mt-3" id="filter-event">
                            <i class="ri-search-line  me-1"></i>Recherche
                        </button>
                </div>
            </div>

            <div class="table-responsive mt-1">
                <table class="tablehover table table-striped text-nowrap w-100" id="TableGestionEvenement">
                    <thead class="bg-thead">
                        <tr>
                            <th>Poste</th>
                            <th>Type</th>
                            <th>Opérateur</th>
                            <th>Date</th>
                            <th>Commentaire</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
@endsection

@section('script')
   <script>
   $(document).ready(function(){

        var table = $('#TableGestionEvenement').DataTable();
        // Active les tooltips Bootstrap à chaque draw (changement de page, tri, etc.)
        $('#TableGestionEvenement').on('draw.dt', function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });

        dateRangeInput('input[name="datetimes"]', true, "DD/MM/YYYY")
        // $('input[name="datetimes"]').daterangepicker({
        //     timePicker: true,
        //     // startDate: moment().startOf('day'),
        //     // endDate: moment().endOf('day'),
        //     "locale": {
        //         "format": "DD/MM/YYYY",
        //         "separator": " - ",
        //         "applyLabel": "Appliquer",
        //         "cancelLabel": "Annuler",
        //         "fromLabel": "From",
        //         "toLabel": "To",
        //         "customRangeLabel": "Custom",
        //         "weekLabel": "W",
        //         "daysOfWeek": [
        //             "Dim",
        //             "Lun",
        //             "Mar",
        //             "Mer",
        //             "Jeu",
        //             "Ven",
        //             "Sam"
        //         ],
        //         "firstDay": 2
        //     },
        // });

        var $date = dissocierDate($('#filtrePeriode').val())
        var $dateDeb = $date[0]
        var $dateFin = $date[1]
        var type = $('#type_evenement').val();
        var personnel = $('#operateur').val();
        listingComboPersonnel('#operateur')

        $("#filter-event").on('click',function(){
             var $date = dissocierDate($('#filtrePeriode').val())
            var $dateDeb = $date[0]
            var  $dateFin = $date[1]
            var type = $('#type_evenement').val();
            var personnel = $('#operateur').val();
            recuperation(type,$dateDeb,$dateFin,personnel)
        })

        recuperation(type,$dateDeb,$dateFin,personnel)
   })

   function recuperation($event,$periode_deb,$periode_fin,$operateur){

        $.ajax({
            type: "GET",
            url: "{{route('gestion_evenement.get')}}",
            data:{type_evenement:$event,periode_deb:$periode_deb,periode_fin:$periode_fin,operateur:$operateur},
            dataType: "JSON",
            beforeSend: function() {
                 afficherMessageTemporaire('TableGestionEvenement');
            },
            success: function (resp) {
               var table = $('#TableGestionEvenement').DataTable();
               table.clear();
               var commentaire =""
               var commentaireL =""
               var typeEvent =""
               $.each(resp.data,function(key,value){

                    if(value.CommentaireEvenement !=null){
                        commentaire = value.CommentaireEvenement.substring(0,30)+'...'
                         commentaireL = value.CommentaireEvenement
                    }

                    if(value.TypeEvenement == 1){
                        typeEvent = "AUTHENTIFICATION OK"
                    }else if(value.TypeEvenement == 2){
                        typeEvent = "PAS HABILITATION"
                    }else{
                         typeEvent = "HABILITATION OK"
                    }
                    table.row.add([
                        value.PosteConnexion,
                        typeEvent,
                        value.NomPrenomPersonnel,
                        value.DateEvenement,
                        `<span data-bs-toggle="tooltip" data-bs-placement="top" title="${commentaireL}">
                            ${commentaire}
                        </span>`
                    ]);
               })
               table.draw();
            },
            error: function() {
                afficherMessageTemporaire("TableGestionEvenement", 'error', true, recuperation);
            },
        });
   }

   </script>
@endsection