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

                <div class="col-xl-8 col-md-8">
                    <div class="d-flex justify-content-end">

                        <button type="button" data-bs-toggle="modal" data-bs-target="#GestionFonctionModal"
                            class="btn btn-primary-light btn-wave d-flex me-2" id="">
                            <i class=" ri ri-add-circle-line me-1"></i>Gestion fonction
                        </button>

                        <button type="button" data-bs-toggle="modal" data-bs-target="#GestionProfilModal"
                            class="btn btn-primary-light btn-wave d-flex me-2" id="">
                            <i class=" ri ri-add-circle-line me-1"></i>Gestion profil
                        </button>

                        <button type="button" id="callModalBtn" data-bs-toggle="modal" data-bs-target="#PersonnelModal"
                            class="btn btn-secondary-light btn-wave d-flex me-2" id="">
                            <i class=" ri ri-add-circle-line me-1"></i>Nouveau personnel
                        </button>
                            @php
                                $AdministrateurSysteme = session()->get('AdministrateurSysteme');
                            @endphp

                            @if ($AdministrateurSysteme)
                                <button type="button"  data-bs-toggle="modal" data-bs-target="#AjoutDeDroit"
                                    class="btn btn-secondary-light btn-wave d-flex  me-2">
                                    <i class="ri ri-add-circle-line me-1"></i>Gestion droits
                                </button>
                            @endif

                            <button type="button"  class="btn btn-success-light btn-wave d-flex" id="ExporterPersonnel">
                                    <i class="ri ri-file-excel-line me-1"></i>Exporter
                            </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header"></div>
        <div class="card-body">

            <div class="table-responsive">
                <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="PersonnelTable">
                    <thead class="bg-thead">
                        <tr>
                            <th>Actions</th>
                            <th>Matricule</th>
                            <th>Login</th>
                            <th>Utilisateurs</th>
                            <th>Profil droit</th>
                            <th>Fonction</th>
                            <th>Site de connexion</th>
                            <th>Etat</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>

    <div class="modal modalPersonel fade" id="PersonnelModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel1f">Personnel</h6>
                    <button type="button" class="btn-light btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="needs-validation" id="FormAddEditPersonnel" novalidate="" method="POST">
                        @csrf

                        <input type="hidden" value="0" name="IDpersonnelInput" id="IDpersonnelInput">
                        <div class="row g-2 mb-2">
                            <div class="col-md-12 col-xl-3 col-lg-3">
                                <p for="input-label" class=" mb-0 text-muted">Matricule</p>
                                <input type="text" autocomplete="off" class="form-control" name="matricule" id="matricule" required>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>
                            <div class="col-md-12 col-xl-2 col-lg-2">
                                <p for="input-label" class="mb-0 text-muted">Civilité</p>
                                <select class="form-select " name="civilite" id="civilite" required>
                                    <option value="" disabled selected>Choisir...</option>
                                    <option value="1">M.</option>
                                    <option value="2">MLLE</option>
                                    <option value="3">MME</option>
                                </select>
                                 <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>
                            <div class="col-md-12 col-xl-3 col-lg-3">
                                <p for="input-label" class="mb-0 text-muted">Login</p>
                                <input type="text" autocomplete="off" class="form-control" name="login" id="login" required>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>

                            <div class="col-md-12 col-xl-4 col-lg-4">
                                <p for="input-label" class="mb-0 text-muted ">Nom et prénoms</p>
                                <input type="text" autocomplete="off" class="form-control text-uppercase" name="nomComplet" id="nomComplet" required>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>
                        </div>

                        <div class="row g-2 mb-2">
                            <div class="col-md-12 col-xl-3 col-lg-3">
                                <p for="input-label" class="mb-0 text-muted">Date de naissance</p>
                                <input type="date" class="form-control" name="dateNaissance" id="dateNaissance">
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>

                            <div class="col-md-12 col-xl-3 col-lg-3">

                                <p for="input-label" class="mb-0 text-muted">Téléphone mobile</p>
                                <input type="text" autocomplete="off" class="form-control" name="telephoneMobile" id="telephoneMobile">
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>

                            <div class="col-md-12 col-xl-3 col-lg-3">
                                <p for="input-label" class="mb-0 text-muted">Email de l'utilisateur</p>
                                <input type="email" autocomplete="off" class="form-control" name="emailPersonnel" id="emailPersonnel">
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>

                            <div class="col-md-12 col-xl-3 col-lg-3">
                                <p for="input-label" class="mb-0 text-muted">Mot de passe</p>
                                <input type="password" class="form-control " name="MotDePassePersonnel"
                                    id="MotDePassePersonnel">
                            </div>

                        </div>

                        <div class="row g-2">
                            <div class="col-md-12 col-xl-4 col-lg-4">

                                <p for="input-label" class="mb-0 text-muted">Fonction</p>
                                <select class="form-select" name="fonction" id="fonction">
                                </select>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>

                            </div>

                            <div class="col-md-12 col-xl-3 col-lg-3">

                                <p for="input-label" class="mb-0 text-muted">Site connexion par défaut</p>
                                <select class="siteConnexion form-select" name="siteConnexion" id="siteConnexion"
                                    required>
                                    <option value="" disabled selected>Choisir...</option>

                                </select>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>

                            <div class="col-md-12 col-xl-2 col-lg-2">
                                <p for="input-label" class="mb-0 text-muted">Etat du compte</p>
                                <select class="form-select" name="etatCompte" id="etatCompte" required>
                                    <option value="" disabled selected>Choisir...</option>
                                    <option value="1">ACTIF</option>
                                    <option value="2">DESACTIVER</option>
                                </select>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>

                            <div class="col-md-12 col-xl-3 col-lg-3 mb-2">
                                {{-- <p for="input-label" class="mb-0 text-muted">Code douchette</p>
                                    <input type="text" class="form-control" name="CodeDouchette" id="CodeDouchette" required>
                                    <div class="invalid-feedback">
                                        Champ obligatoire
                                </div> --}}

                                <p for="input-label" class="mb-0 text-muted">Profil</p>
                                <select class="form-select ProfilPersonnel" name="ProfilPersonnel"
                                    id="ProfilPersonnel">
                                </select>
                                <!-- <div class="invalid-feedback">
                                    Champ obligatoire
                                </div> -->
                            </div>

                            <div class="col-md-12 col-xl-3 col-lg-3">
                                <p for="input-label" class="mb-0 text-muted">Compte de paie :</p>
                                <input type="text" autocomplete="off" class="form-control text-uppercase" name="NumeroComptePersonnel" id="inpNumeroComptePersonnel">
                            </div>
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> <i
                            class='bx bxs-x-circle'></i>&nbsp;Fermer</button>
                    <button type="submit" class="btn btn-success addPersonnelBtn"><i class='bx bxs-plus-circle'></i>
                        &nbsp;Ajouter</button>
                    <button type="submit" style="display:none" class="btn btn-success EditPersonnelBtn"><i
                            class='bx bxs-edit'></i> &nbsp;Modifier</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="GestionProfilModal" data-bs-focus="false" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel1">Gestion de profil</h6>
                    <button type="button" class="btn-light btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-xl-12 col-md-12 col-lg-12">

                            <div class="card card-shadow">
                                <div class="card-body">
                                    <form class="needs-validation" id="FormAddProfil" novalidate="" method="POST">
                                        @csrf
                                        <input type="hidden" value="0" name="IDprofilInput" id="IDprofilInput">
                                        <div class="d-flex ">
                                            <div class="me-2 w-100">
                                                <p for="input-label" class="mb-0 text-muted">Libellé profil</p>
                                                <input type="text" class="form-control" name="libelleProfil"
                                                    id="libelleProfil" required>
                                                <div class="invalid-feedback">
                                                    Champ obligatoire
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <button type="submit" class="btn btn-secondary-light btn-wave d-flex">
                                                    <i class="ri ri-add-circle-line"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                    <br>

                                    <div class="table-responsive">

                                        <table class="tablehover table table-striped text-nowrap w-100" id="ProfilTable">
                                            <thead class="bg-thead">
                                                <th>IDprofil</th>
                                                <th>Actions</th>
                                                <th>Libellé profil</th>
                                                <th>Date création</th>
                                                <th>Crée par</th>
                                                <th>Modifié par</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-12 col-md-12 col-lg-12">
                            <div class="card card-shadow">
                                <div class="card-body">

                                    <div class="table-responsive">

                                        <div class="CheckboxToutZone" style="display:none">
                                            <div class="d-flex">

                                                <span style="cursor:pointer; height:30px;font-size:13px"
                                                    id="CochezTousCheckbox"
                                                    class="badge bg-primary  d-flex justify-content-center align-items-center me-2 mt-1">Cocher
                                                    tous</span>
                                                <span style="cursor:pointer; height:30px;font-size:13px"
                                                    id="DecochezTousCheckbox"
                                                    class="badge bg-success d-flex justify-content-center align-items-center me-2 mt-1">Décocher
                                                    tous</span>
                                                <span style="cursor:pointer; height:30px;font-size:13px"
                                                    id="AppliqueDroitCochez"
                                                    class="badge bg-warning d-flex  justify-content-center align-items-center me-2 mt-1">Appliquer
                                                    les modifications</span>
                                            </div>
                                        </div>

                                        <table class="tablehover table table-striped text-nowrap w-100" id="DroitTable">
                                            <thead class="bg-thead">
                                                <th>Droit</th>
                                                <th>Groupe droit</th>
                                                <th>Rang droit</th>
                                                <th>Etat</th>
                                                <th class="text-center">Valeur</th>
                                                <th>Date modification</th>
                                                <th>Modifié par</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> <i
                            class='bx bxs-x-circle'></i>&nbsp;Fermer</button>
                </div>

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

    <div class="modal fade GestionFonctionModal" id="GestionFonctionModal" data-bs-focus="false" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel1">Gestion de fonction</h6>
                    <button type="button" class="btn-light btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-xl-12 col-md-12 col-lg-12">

                            <div class="card card-shadow">
                                <div class="card-body">
                                    <form class="needs-validation" id="FormAddFonctionPersonnel" novalidate="" method="POST">
                                        @csrf
                                        <input type="hidden" value="0" name="IDfonctionPersonnelInput" id="IDfonctionPersonnelInput">
                                        <div class="d-flex ">
                                            <div class="me-2 w-100">
                                                <p for="input-label" class="mb-0 text-muted">Libellé de la fonction</p>
                                                <input type="text" class="form-control" name="libelleFonction" id="libelleFonction" required>
                                                <div class="invalid-feedback">
                                                    Champ obligatoire
                                                </div>
                                            </div>
                                            
                                            <div class="me-2 w-100">
                                                <p for="input-label" class="mb-0 text-muted">Type</p>
                                                <select class="Pselect2TypeFonction" name="TypeFonction" id="TypeFonction" required>
                                                         <option value="" disabled selected>Choisir...</option>
                                                         <option value="1">DIRECTEUR GENERAL</option>
                                                         <option value="2">DIRECTEUR GENERAL ADJOINT</option>
                                                         <option value="3">DIRECTEUR D'AGENCE</option>
                                                         <option value="4">RESPONSABLE ACHAT</option>
                                                         <option value="5">RESPONSABLE D'EXPLOITATION</option>
                                                         <option value="6">INFORMATICIEN</option>
                                                         <option value="7">COMPTABLE</option>
                                                         <option value="8">COMMERCIAL</option>
                                                         <option value="9">TELEMARKETEUR</option>
                                                         <option value="10">SECRETAIRE</option>
                                                         <option value="11">TRANSITAIRE</option>
                                                         <option value="12">MAGASINIER</option>
                                                         <option value="13">CHAUFFEUR-LIVREUR</option>
                                                         <option value="14">AGENT</option>
                                                         <option value="15">STAGIAIRE</option>
                                                         <option value="16">AUTRES</option>
                                                </select>
                                                <div class="invalid-feedback">
                                                    Champ obligatoire
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <button type="submit" class="btn btn-secondary-light btn-wave d-flex">
                                                    <i class="ri ri-add-circle-line"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                    <br>
                                    <div class="table-responsive">
                                        <table class="tablehover table table-striped text-nowrap w-100" id="tabListFonctionPersonnel">
                                            <thead class="bg-thead">
                                                <th>Actions</th>
                                                <th>Fonction</th>
                                                <th>Type</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> <i
                            class='bx bxs-x-circle'></i>&nbsp;Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal droitSpecifiqueModal fade" data-bs-focus="false" id="DroitSpecifiqueModal" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel1">Droit spécifique</h6>
                    <button type="button" class="btn-light btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <input type="hidden" id="currentSelectProfilID" value="0" class="form-control">
                        </div>
                        <div class="col">
                            <input type="hidden" id="currentIDPersonnel" class="form-control">
                        </div>
                    </div>

                    <div class="row g-2">
                        <div class="col-md-12 col-xl-6 col-lg-6 d-flex">
                            <div class="card card-shadow flex-fill">
                                <div class="card-body">
                                    <p for="input-label" class="mb-0 text-muted">Profil d'habilitation</p>
                                    <select class="Pselect2DroitSpecifique ProfilPersonnel"
                                        id="ProfilPersonnelDroitSpecifique">
                                        <option value="" disabled selected>Choisir...</option>
                                    </select>
                                    <div class="table-responsive mt-2">
                                        <table id="tabProfilDroit" class="table table-primary w-100">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Droit</th>
                                                    <th scope="col">Etat</th>
                                                    <th scope="col">Valeur</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 col-xl-6 col-lg-6 d-flex">

                            <div class="card card-shadow flex-fill">
                                <div class="card-body">
                                    <p for="input-label" class="mb-0 text-muted">Habilitation spécifique</p>
                                    <select class="Pselect2DroitSpecifique PersonnelDroitSpecifiqueSelect"
                                        id="PersonnelDroitSpecifiqueSelect">
                                        <option value="" disabled selected>Choisir...</option>
                                    </select>

                                    <div class="table-responsive mt-2">
                                        <table id="tabListDroit" class="table table-primary w-100">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Droit</th>
                                                    <th scope="col">Etat</th>
                                                    <th scope="col">Valeur</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                     <div class="d-flex">

                            <div class="card card-shadow flex-fill">
                                <div class="card-body">
                                    <p for="input-label" class="mb-0 text-muted">Habilitation de profil rétirée</p>
                                    <select class="Pselect2DroitSpecifique retraitDroitSpecifique"
                                        id="retraitDroitSpecifiqueSelect">
                                        <option value="" disabled selected>Choisir...</option>
                                    </select>

                                    <div class="table-responsive">
                                        <table id="tabRetraitDroit" class="table table-primary w-100">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Droit</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> <i
                            class='bx bxs-x-circle'></i>&nbsp;Fermer</button>
                </div>

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

    <div class="modal modalAjoutDeDroit fade" id="AjoutDeDroit" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel1">DROIT</h6>
                    <button type="button" class="btn-light btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="needs-validation" id="FormAddDroit" novalidate="">
                        @csrf
                    <div class="row g-2">
                        <div class="col-xl-3">
                               <p for="input-label" class=" mb-0 text-muted">Libellé</p>
                                <input type="text" class="form-control" name="libelleDroit" id="libelleDroit" autocomplete="off" required>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                        </div>

                        <div class="col-xl-2">
                               <p for="input-label" class=" mb-0 text-muted">Code</p>
                                <input type="text" class="form-control" name="codeDroit" id="codeDroit" autocomplete="off" required>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                        </div>

                        <div class="col-xl-3">
                               <p for="input-label" class=" mb-0 text-muted">Type droit</p>
                                <select name="typeDroit" id="typeDroit" class="form-select">
                                    <option value="1">BOOL</option>
                                    <option value="2">NUMERIQUE</option>
                                </select>
                        </div>

                        <div class="col-xl-2">
                               <p for="input-label" class=" mb-0 text-muted">Groupe</p>
                                <input type="text" class="form-control" name="groupeDroit" id="groupeDroit" autocomplete="off" required>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                        </div>

                        <div class="col-xl-1">
                               <p for="input-label" class=" mb-0 text-muted">Rang</p>
                                <input type="number" class="form-control" name="rangDroit" id="rangDroit" autocomplete="off" required>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                        </div>

                        <input type="hidden" name="hiddenId" id="hiddenId" value="0"/>

                         <div class="col-xl-1 mt-4 text-end">
                            <button type="submit" class="btn btn-secondary-light" id="AddDroitToTable" style="height: 35px"><i class='bx bxs-plus-circle'></i>
                        </button>
                         </div>

                    </div>

                      </form>

                     <div class="table-responsive mt-3">

                        <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="tableAjoutDroit">
                             <thead class="bg-thead">
                                <tr>
                                    <th>Actions</th>
                                    <th>Libellé</th>
                                    <th>Code</th>
                                    <th>Groupe</th>
                                    <th>Type</th>
                                    <th>Rang</th>
                                </tr>
                            </thead>
                        </table>
                     </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> <i
                            class='bx bxs-x-circle'></i>&nbsp;Fermer</button>
                </div>
           </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            var groupColumn = 1;
            var GetProfilID = 0;
            tableauDroit = [];
            tableauDroitEtat = [];
            //tabDroitTousCocheDecocher =[];
            recuperationProfil();
            recuperationFonctionPersonnel();
            fonctionPersonnelSelect();
           
            $("#tabProfilDroit").DataTable({

                bFilter: true,
                searching: true,
                scrollY: "200px",
                paging : false, 
                language: {
                    // dom: 'Bfrtip',
                    processing: false,
                    lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                    info: "_TOTAL_ ligne(s)",
                    // info: "Ligne _START_ à _END_ sur _TOTAL_ Lignes ",
                    infoEmpty: "",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: tableVide,
                    emptyTable: tableVide,

                    paginate: {
                        first: "",
                        previous: "<",
                        next: ">",
                        last: ""
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "Rechercher&nbsp;:",
                },
                 columnDefs:[
                    {
                        targets:[1,2],
                        className:'text-center'
                    },
                      {
                        targets:[0],
                        className:'w-4'
                    }
                ],
                "lengthMenu": [
                    [5, 10, 25, 50, -1],
                    [5, 10, 25, 50, "Tous"]
                ],

                pageLength: 25,
                lengthChange: false,
            })

            let  ParenFilter_ = $("#tabProfilDroit_filter").parent()
            ParenFilter_.removeClass("col-md-6")
            ParenFilter_.addClass("col-md-12")
            // ParenFilter.eq(0).remove()

            $("#tabRetraitDroit").DataTable({

                bFilter: true,
                searching: false,
                scrollY : '100px',
                paging : false,
                language: {
                    // dom: 'Bfrtip',
                    processing: false,
                    lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                    info: "_TOTAL_ ligne(s)",
                    infoEmpty: "",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: tableVide,
                    emptyTable:tableVide,

                    paginate: {
                        first: "",
                        previous: "<",
                        next: ">",
                        last: ""
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "Rechercher&nbsp;:",
                },
                "lengthMenu": [
                    [5, 10, 25, 50, -1],
                    [5, 10, 25, 50, "Tous"]
                ],
                columnDefs: [{
                    target: 1,
                    className: 'w-100'
                }],
                pageLength: 5,
                lengthChange: false,
            })

            $("#tabListDroit").DataTable({
                bFilter: true,
                searching: true,
                scrollY : '200px',
                paging : false,
                language: {
                    // dom: 'Bfrtip',
                    processing: false,
                    lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                    info: "_TOTAL_ ligne(s)",
                    infoEmpty: "",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: tableVide,
                    emptyTable:tableVide,

                    paginate: {
                        first: "",
                        previous: "<",
                        next: ">",
                        last: ""
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "Rechercher&nbsp;:",
                },
                columnDefs:[
                    {
                        targets:[2],
                        className:'text-center'
                    },
                     {
                        targets:[0],
                        className:'w-3'
                    }
                ],
                "lengthMenu": [
                    [5, 10, 25, 50, -1],
                    [5, 10, 25, 50, "Tous"]
                ],
                pageLength: 5,
                lengthChange: false,
            })

             let  ParenFilter = $("#tabListDroit_filter").parent()
            ParenFilter.removeClass("col-md-6")
            ParenFilter.addClass("col-md-12")

          

            {{-- $("#ProfilTable").DataTable({

                bFilter: true,
                searching: false,
                select: true,
                language: {
                    // dom: 'Bfrtip',
                    processing: false,
                    lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                    info: "Ligne _START_ à _END_ sur _TOTAL_",
                    infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: tableVide,
                    emptyTable: tableVide,

                    paginate: {
                        first: "",
                        previous: "Pr&eacute;c&eacute;dent",
                        next: "Suivant",
                        last: ""
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "Rechercher&nbsp;:",
                },
                pageLength: 10,
                lengthChange: false,

            }) --}}

            $("#tableAjoutDroit").DataTable({
                bFilter: true,
                language: {
                    // dom: 'Bfrtip',
                    processing: false,
                    lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                    info: "Ligne _START_ à _END_ sur _TOTAL_",
                    infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: tableVide,
                    emptyTable: tableVide,

                    paginate: {
                        first: "",
                        previous: "Pr&eacute;c&eacute;dent",
                        next: "Suivant",
                        last: ""
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "Rechercher&nbsp;:",
                },
                columnDefs:[
                        {
                            target:[4,5],
                            className:'text-center'
                        }
                ],
                pageLength: 25,
                lengthChange: false,
                
            })

            var tables = $("#DroitTable").DataTable({
                bFilter: true,
                language: {
                    // dom: 'Bfrtip',
                    processing: false,
                    lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                    info: "Ligne _START_ à _END_ sur _TOTAL_",
                    infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: tableVide,
                    emptyTable: tableVide,

                    paginate: {
                        first: "",
                        previous: "Pr&eacute;c&eacute;dent",
                        next: "Suivant",
                        last: ""
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "Rechercher&nbsp;:",
                },
                pageLength: 25,
                lengthChange: false,
                columnDefs: [{
                        visible: false,
                        targets: groupColumn
                    },
                    {
                        visible: false,
                        targets: 2
                    },
                ],
                //paging: false,
                order: [
                    [groupColumn, "asc"],
                    [2, "asc"]
                ],
                displayLength: 25,
                drawCallback: function(settings) {
                    var api = this.api();
                    var rows = api.rows({
                        page: 'current'
                    }).nodes();
                    var last = null;
                    api.column(groupColumn, {
                        page: 'current'
                    }).data().each(function(group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before(
                                '<tr style="background:#E6533C;" class="group"><td colspan="14" style="color:#fff">' +
                                group + '</td></tr>');
                            last = group;
                        }
                    });
                },
            })

            var table = $('#ProfilTable').DataTable();
            var selected = [];

            $('#ProfilTable tbody').on('click', 'tr', function() {

                if ($(event.target).is('i')) {
                    return;
                }
                $('.CheckboxToutZone').css('display', 'block')
                var row = table.row(this);
                var rowDataId = row.data()[0];
                GetProfilID = rowDataId;
                // Désélectionner toutes les lignes précédemment sélectionnées
                table
                    .rows('.selected')
                    .nodes()
                    .to$()
                    .removeClass('selected');
                // Mettre à jour la sélection et basculer la classe
                $(this).addClass('selected')
                MarequetesAjax("{{ route('droitForProfi.get') }}", "GET", {
                    valeur: rowDataId
                }, null, true, "JSON", function(resp) {
                    DroitTable(resp.data)
                })

            });

            $(document).on('click', '#AppliqueDroitCochez', function() {

                if (tableauDroit.length > 0 || tabValeurDroitProfileLigne.length > 0 ) {
                    confirmMdp("{{ csrf_token() }}", () =>{
                        MarequetesAjax("{{ route('droitForProfil.update') }}", "GET", {
                            tab: tableauDroit,
                            tabValeurDroit : tabValeurDroitProfileLigne
                        }, null, true, "JSON", function(resp) {
                            notif('success', 'Succès', resp.msg)
                            tableauDroit.length = 0;
                            tableauDroitEtat.length = 0;
                        })
                    },null)
                } else {
                    notif('danger', 'Erreur', 'Aucune modification détectée !')
                }
            })

            $(document).on('click', '#DroitCheckbox', function() {
            
                var $getId = $(this).data('id');
                var $idprofil = $(this).data('idprofil');
                var value = $(this).prop('checked') ? true : false;
                var existingItemIndexEtat = tableauDroitEtat.findIndex(function(items) {
                    return items.IdDroitProfilLigne === $getId;
                });
                // SI L'ELEMENT AVEC LE MEME ID EXISTE DEJA , LE METTRE A JOUR
                if (existingItemIndexEtat !== -1) {
                    tableauDroit[existingItemIndexEtat].value = tableauDroit[existingItemIndexEtat].value;
                } else {
                    tableauDroitEtat.push({
                        value: value,
                        IdDroitProfilLigne: $getId
                    });
                }
                // VERIFIER SI UN ELEMENT AVEC LE MEME ID EXISTE DEJA DANS LE TABLEAU
                var existingItemIndex = tableauDroit.findIndex(function(item) {
                    return item.IdDroitProfilLigne === $getId;
                });
                // SI L'ELEMENT AVEC LE MEME ID EXISTE DEJA , LE METTRE A JOUR
                if (existingItemIndex !== -1) {
                    tableauDroit[existingItemIndex].value = value;
                } else {

                    // SINON , AJOUTER UN NOUVEL ELEMENT AU TABLEAU
                    tableauDroit.push({
                        value: value,
                        IdDroitProfilLigne: $getId,
                        idprofil: $idprofil
                    });
                }
            })

            tabValeurDroitProfileLigne = [];
            $(document).on('change','#InputValeurDroitProfile-ligne',function(){
              
                val = $(this).val()
                var $getId = $(this).data('id');
                var $idprofil = $(this).data('idprofil');
               var existingItemIndexEtat = tabValeurDroitProfileLigne.findIndex(function(items) {
                    return items.IdDroitProfilLigne === $getId;
                });
                // SI L'ELEMENT AVEC LE MEME ID EXISTE DEJA , LE METTRE A JOUR
                if (existingItemIndexEtat !== -1) {
                    tabValeurDroitProfileLigne[existingItemIndexEtat].value = tabValeurDroitProfileLigne[existingItemIndexEtat].value;
                } else {
                    tabValeurDroitProfileLigne.push({
                        value: val,
                        IdDroitProfilLigne: $getId,
                        idprofil: $idprofil
                    });
                }
                // VERIFIER SI UN ELEMENT AVEC LE MEME ID EXISTE DEJA DANS LE TABLEAU
                var existingItemIndex = tabValeurDroitProfileLigne.findIndex(function(item) {
                    return item.IdDroitProfilLigne === $getId;
                });
                // SI L'ELEMENT AVEC LE MEME ID EXISTE DEJA , LE METTRE A JOUR
                if (existingItemIndex !== -1) {
                    tabValeurDroitProfileLigne[existingItemIndex].value = val;
                } else {

                    // SINON , AJOUTER UN NOUVEL ELEMENT AU TABLEAU
                    tabValeurDroitProfileLigne.push({
                        value: val,
                        IdDroitProfilLigne: $getId,
                        idprofil: $idprofil
                    });
                }
            })
            
            // PLACEMENT DU SELECT AU DESSUS DU DATATABLE
            $('#PersonnelTable_filter').parent().removeClass('col-md-6')
            $('#PersonnelTable_filter').parent().addClass('col-md-9')
            brotDivFilter = $('#PersonnelTable_filter').parent().prev()
            brotDivFilter.removeClass('col-md-6')
            brotDivFilter.addClass('col-md-3')
            brotDivFilter.append('<div class="d-flex">\
                                        <p for="input-label" class="form-label text-muted mt-1">Etat&nbsp;:&nbsp;</p>\
                                        <select class="form-select" id="filtreEtatCompte">\
                                            <option  value="0">TOUS</option>\
                                            <option  value="1">ACTIF</option>\
                                            <option  value="2">DESACTIVE</option>\
                                        </select>\
                                    </div>')

            recuperationListePersonnel()
            recuperationAgence()
            recuperationProfil()
            recuperationTouslesDroits()
            recuperationDroit()

            $('#ExporterPersonnel').on('click',function(){
                var data = remplissage_avec_row_add_DataTable('PersonnelTable')
                const filename = file_name("PERSONNEL");
                download_excel_file('{{route("export_global_excel.export")}}', data, filename);
            })

            // AJOUT ET MODIFICATION DE PERSONNEL
            $('#FormAddEditPersonnel').on('submit', function(e) {
              
                if (!$(this)[0].checkValidity()) {
                    $(this).addClass(
                        'was-validated'
                    ); // Ajoutez la classe 'was-validated' pour activer les styles de validation Bootstrap
                    e.preventDefault(); // Empêchez la soumission normale du formulaire
                    e.stopPropagation();
                     // Arrêtez la propagation de l'événement
                } else {

                    e.preventDefault();
                    MarequetesAjax("{{ Route('personnel.edit') }}", "POST", new FormData(this), false,
                        false, "JSON",
                        function(resp) {
                        
                            $('#PersonnelModal').modal('hide');
                            $('#FormAddEditPersonnel')[0].reset();
                            notif('success', 'Succès', resp.msg)
                            $('#FormAddEditPersonnel').removeClass('was-validated');
                            $('#IDpersonnelInput').val(0)
                            recuperationListePersonnel()
                        },
                        function() {},
                        function() {
                        })
                }
            })

            // AJOUT DE PROFIL
            $('#FormAddProfil').on('submit', function(e) {

                if (!$(this)[0].checkValidity()) {
                    $(this).addClass(
                    'was-validated'); // Ajoutez la classe 'was-validated' pour activer les styles de validation Bootstrap
                    e.preventDefault(); // Empêchez la soumission normale du formulaire
                    e.stopPropagation(); // Arrêtez la propagation de l'événement
                } else {
                    e.preventDefault();
                    MarequetesAjax("{{ Route('profil.create') }}", "POST", new FormData(this), false,
                        false, "JSON",
                        function(resp) {

                            recuperationProfil()
                            $('#IDprofilInput').val(0)
                            $('#FormAddProfil')[0].reset();
                            if (resp.error) {
                                notif('danger', 'Erreur', resp.msg)
                            } else {
                                notif('success', 'Succès', resp.msg)
                            }
                            $('#FormAddProfil').removeClass('was-validated');
                        })
                }
            })

            // AJOUT DE FONCTION
            $('#FormAddFonctionPersonnel').on('submit', function(e) {

                if (!$(this)[0].checkValidity()) {
                    $(this).addClass(
                    'was-validated'); // Ajoutez la classe 'was-validated' pour activer les styles de validation Bootstrap
                    e.preventDefault(); // Empêchez la soumission normale du formulaire
                    e.stopPropagation(); // Arrêtez la propagation de l'événement
                } else {
                    e.preventDefault();
                    MarequetesAjax("{{ Route('fonctionPersonnel.add') }}", "POST", new FormData(this), false,
                        false, "JSON",
                        function(resp) {

                            if(resp.errorLibelleExiste){
                                 notif('danger', 'Erreur', resp.msg)
                                return false
                            }

                            if (resp.error) {
                                notif('danger', 'Erreur', resp.msg)
                                return false
                            }
                            
                            if(resp.succes){
                                 recuperationFonctionPersonnel()
                                 fonctionPersonnelSelect();
                                $('#IDfonctionPersonnelInput').val(0)
                                $('#FormAddFonctionPersonnel')[0].reset();
                                notif('success', 'Succès', resp.msg)
                                $('#FormAddFonctionPersonnel').removeClass('was-validated');
                            }
                        })
                }
            })

            // SUPPRIMER PROFIL
            $(document).on('click', '#SupprimerProfil', function() {
                var IDprofil = $(this).data('id')

                confirmMdp('{{ csrf_token() }}', ()=>{

                         MarequetesAjax("{{ route('profil.delete') }}", "GET", {
                            idProfil: IDprofil
                        }, null, true, "JSON", function(resp) {
                            notif('danger', 'Erreur', resp.msg)
                            recuperationProfil()

                            MarequetesAjax("{{ route('droitForProfi.get') }}", "GET", {
                                valeur: IDprofil
                            }, null, true, "JSON", function(resp) {
                                DroitTable(resp.data)
                            })
                        })
                },null)
            })

            // MODIFICATION DE PROFIL
            $(document).on('click', '#ModifierProfil', function() {

                var IDprofil = $(this).data('id')
                MarequetesAjax("{{ route('profil.get') }}", "GET", {
                    idProfil: IDprofil
                }, null, true, "JSON", function(resp) {
                    $('#libelleProfil').val(resp[0].LibelleDroitProfil)
                    $('#IDprofilInput').val(resp[0].IDDROIT_PROFIL)
                })
            })

            // APPLIQUER TOUS LES DROITS A UN PROFIL BIEN PRECIS
            $(document).on('click', '#CochezTousCheckbox', function() {
                var valueCheckbox = "true"
                var tables = $('#DroitTable').DataTable();
                confirmMdp("{{ csrf_token() }}", () => {
                    MarequetesAjax("{{ route('PlusieurprofilDroit.appliquer') }}", "GET", {
                        valeurCheckbox: valueCheckbox,
                        IDprofil: GetProfilID
                    }, null, true, "JSON", function(resp) {
                        notif('success', 'Succès', resp.msg)
                        DroitTable(resp.data)
                    })
                }, null)
            })

            $(document).on('click', '#DecochezTousCheckbox', function() {
                var valueCheckbox = "false"
                var tables = $('#DroitTable').DataTable();
                confirmMdp("{{ csrf_token() }}", () => {
                    MarequetesAjax("{{ route('PlusieurprofilDroit.appliquer') }}", "GET", {
                        valeurCheckbox: valueCheckbox,
                        IDprofil: GetProfilID
                    }, null, true, "JSON", function(resp) {
                        notif('success', 'Succès', resp.msg)
                        DroitTable(resp.data)
                    })
                },null)
            })

            $(document).on('click', '#callModalBtn', function() {

                $('#matricule').val('').trigger('change')
                $('#civilite').val(1).trigger('change')
                $('#login').val('').trigger('change')
                $('#nomComplet').val('').trigger('change')
                $('#dateNaissance').val('').trigger('change')
                $('#telephoneMobile').val('').trigger('change')
                $('#emailPersonnel').val('').trigger('change')
                $('#MotDePassePersonnel').val('').trigger('change')
                $('#fonction').val('').trigger('change')
                $('#siteConnexion').val('').trigger('change')
                $('#etatCompte').val(1).trigger('change')
                $('#ProfilPersonnel').val('').trigger('change')
                $('.addPersonnelBtn').css('display', 'block')
                $('.EditPersonnelBtn').css('display', 'none')
                $('#PersonnelModal').modal('show')
            })

            // MODIFICATION D'UTILISATEUR
            $(document).on('click', '#ModifierPersonnel', function() {
                var IDpersonnel = $(this).data('id')
                MarequetesAjax("{{ route('personnel.get') }}", "GET", {
                    idPersonnel: IDpersonnel
                }, null, true, "JSON", function(resp) {

                    $('#emailPersonnel').val(resp.Personnel[0].AdresseEMAIL)
                    $('#matricule').val(resp.Personnel[0].MatriculePersonnel)
                    $('#login').val(resp.Personnel[0].LoginPersonnel)
                    $('#civilite').val(resp.Personnel[0].CivilitePersonnel).trigger('change')
                    $('#nomComplet').val(resp.Personnel[0].NomPrenomPersonnel)
                    $('#dateNaissance').val(resp.Personnel[0].DateNaissancePersonnel)
                    $('#telephoneMobile').val(resp.Personnel[0].NumeroSMS)

                    $('#IDpersonnelInput').val(resp.Personnel[0].IDPERSONNEL)
                    $('#fonction').val(resp.Personnel[0].IDFONCTION_PERSONNEL).trigger('change')
                    $('#ProfilPersonnel').val(resp.Personnel[0].IDDROIT_PROFIL).trigger('change')
                    $('#siteConnexion').val(resp.Personnel[0].IDAGENCE).trigger('change')
                    $('#etatCompte').val(resp.Personnel[0].EtatComptePersonnel).trigger('change')
                    $('#CodeDouchette').val(resp.Personnel[0].CodeDouchettePersonnel)
                    $('#inpNumeroComptePersonnel').val(resp.Personnel[0].NumeroComptePersonnel).trigger('change')

                    $('.addPersonnelBtn').css('display', 'none')
                    $('.EditPersonnelBtn').css('display', 'block')
                    $('#PersonnelModal').modal('show')
                })
            })

            // SUPRESSION D'UTILISATEUR
            $(document).on('click', '#SupprimerPersonnel', function() {
                var IDpersonnel = $(this).data('id')
                confirmMdp('{{ csrf_token() }}', ()=>{
                         MarequetesAjax("{{ route('personnel.delete') }}", "GET", {
                            idPersonnel: IDpersonnel
                        }, null, true, "JSON", function(resp) {
                            notif('success', 'Succès', resp.msg)
                            recuperationListePersonnel()
                        })
                },null)
            })

            // SUPPRESSION DE DROIT RETIRE
            $(document).on('click', '#SupprimerDroitRetire', function() {
                $iddroitProfilRetire = $(this).data('id');
                var IDpersonnel = $('#currentIDPersonnel').val();
                  confirmMdp('{{ csrf_token() }}', ()=>{
                         MarequetesAjax("{{ route('SupprimerdroitRetire.delete') }}", "GET", {
                            iddroitProfilRetire: $iddroitProfilRetire
                        }, null, true, "JSON", function(resp) {
                            notif('success', 'Succès', resp.msg)
                            RecuperationDroitretire(IDpersonnel)
                        })
                  },null)
            })

            // FILTRE DE PERSONNEL PAR ETAT DE COMPTE
            $(document).on('change', '#filtreEtatCompte', function() {
                var value = $(this).val();
                MarequetesAjax("{{ route('personnel.filter') }}", "GET", {
                        valeur: value
                    }, null, true, "JSON", function(resp) {
                        completeHandler()
                        personnelTable(resp.Personnel, resp.Profil)
                    }, function() {},
                    function() {
                        progressHandler()
                    })
            })

            $(document).on('change', '#SelectProfilForPersonnel', function() {
             
                var getID = $(this).val();
                var getIDPersonnel = $(this).data('idpersonnel')
                MarequetesAjax("{{ route('personnelProfil.attribue') }}", "GET", {
                    valeurProfil: getID,
                    IDPersonnel: getIDPersonnel
                }, null, true, "JSON", function(resp) {
                   
                    recuperationListePersonnel()
                     notif('success', 'Succès', resp.msg)
                })
            })

            //APPLIQUER LES DROITS SPECIFIQUE
            $(document).on('click', '#DroitPersonnelSpecifique', function() {

                var idpersonnel = $(this).data('id')
                var idprofildroit = $(this).data('idprofildroit')

                $('#currentIDPersonnel').val(idpersonnel)
                RecuperationDroitretire(idpersonnel)
                recuperationDroitPresonnelSpecifique(idpersonnel)

                MarequetesAjax("{{ route('profil.get') }}", "GET", null, true, true, "JSON", function(
                resp) {
                    $('.ProfilPersonnel').html('')
                    $('.ProfilPersonnel').append(
                        '<option value="" disabled selected>Choisir...</option>')
                    $.each(resp, function(key, value) {
                        if (value.IDDROIT_PROFIL == idprofildroit) {
                            $('.ProfilPersonnel').append('<option selected value="' + value
                                .IDDROIT_PROFIL + '">' + value.LibelleDroitProfil +
                                '</option>')
                            $('.ProfilPersonnel').val(value.IDDROIT_PROFIL).trigger(
                                'change')
                        } else {
                            $('.ProfilPersonnel').append('<option value="' + value
                                .IDDROIT_PROFIL + '">' + value.LibelleDroitProfil +
                                '</option>')
                        }
                    })
                })

                $('#DroitSpecifiqueModal').modal('show')
            })

            $(document).on('change', '#ProfilPersonnelDroitSpecifique', function() {

                var getId = $(this).val();
                $('#currentSelectProfilID').val(getId);
                MarequetesAjax("{{ route('recuperationProfilItem.get') }}", "GET", {
                    valeurIDProfil: getId
                }, null, true, "JSON", function(resp) {

                    var table = $("#tabProfilDroit").DataTable()
                    table.clear().draw();
                    $.each(resp.data, function(key, value) {
                        var checkbox =
                            '<div class="form-check form-switch"> <input class="form-check-input" disabled="disabled" data-id="' +
                            value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value
                            .IDDROIT_PROFIL + '" type="checkbox" role="switch" id="DroitCheckbox">\
                                <label class="form-check-label" for="DroitCheckbox"></label></div>';

                        if (value.DroitActif == true) {
                            checkbox =
                                '<div class="form-check form-switch"> <input class="form-check-input" disabled="disabled" data-id="' +
                                value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value
                                .IDDROIT_PROFIL + '" type="checkbox" checked="checked" role="switch" id="DroitCheckbox">\
                                <label class="form-check-label" for="DroitCheckbox"></label></div>';
                        }
                        var droitValeur =   Number(value.DroitValeur).toFixed(2)
                        $input = `<input type="number" class="form-control text-center" 
                                value="${droitValeur}" 
                                readonly 
                                id="InputValeurDroitProfile-ligne" 
                                data-id="${value.IDDROIT_PROFIL_LIGNE}" 
                                data-idprofil="${value.IDDROIT_PROFIL}">`;
                        table.row.add([
                            value.LibelleDroit,
                            checkbox,
                            $input
                        ])
                    });
                    table.draw();
                    ////////////////////////////////////////////////////////////////////
                    recuperationDroitProfilSpecifique(getId)
                })
            })

            $(document).on('change', '#retraitDroitSpecifiqueSelect', function() {
                var selectedOption = $(this).find('option:selected');
                var IdProfilLigne = selectedOption.attr('data-idprofilligne');
                var IdProfil = selectedOption.attr('data-idprofil');
                var IDpersonnel = $('#currentIDPersonnel').val();
                var iddroit = $(this).val()

                $.ajax({

                    type: "POST",
                    url: "{{ route('retraitDroit.add') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'IDProfilLigne': IdProfilLigne,
                        'IDPersonnel': IDpersonnel,
                        'IDDRoit': iddroit,
                        'IdDroitProfil': IdProfil
                    },
                    dataType: "JSON",
                    success: function(data) {
                        RecuperationDroitretire(IDpersonnel)
                    }
                });

            })

            $(document).on('change', '#PersonnelDroitSpecifiqueSelect', function() {

                var getvalue = $(this).val();
                var IDpersonnel = $('#currentIDPersonnel').val();
                var selectedOption = $(this).find('option:selected');
                var IdProfilLigne = selectedOption.attr('data-idprofilligne');
                var IdProfil = selectedOption.attr('data-idprofil');
                $.ajax({

                    type: "POST",
                    url: "{{ route('droitPersonnelSpecifique.add') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'IDPersonnel': IDpersonnel,
                        'IDDRoit': getvalue,
                        'IDProfilLigne': IdProfilLigne,
                        'IdDroitProfil': IdProfil

                    },
                    dataType: "JSON",
                    success: function(data) {

                        if (data.errorRecordExist) {
                            notif('danger', 'Erreur', data.msg)
                        }
                        recuperationDroitPresonnelSpecifique(IDpersonnel)

                        if (data.succes) {
                            notif('success', 'Succès', data.msg)
                        }
                        if (data.error) {
                            notif('danger', 'Erreur', data.msg)
                        }

                    }
                });
            })

            // IMPRESSION DE DROIT DE PERSONNEL
            $(document).on('click', '#ImprimerDroitPersonnel', function() {
                var getIDPersonnel = $(this).data('id')

                var getIDProfil = $(this).data('idprofildroit')
                MarequetesAjax("{{ route('personnelDroit.imprimer') }}", "GET", {
                    IDProfil: getIDProfil,
                    IDPersonnel: getIDPersonnel
                }, null, true, "JSON", function(resp) {
                    var pdfData = "data:application/pdf;base64," + resp.pdf;
                    var newTab = window.open('', '_blank');
                    newTab.document.write('<iframe src="' + pdfData +
                        '" style="width:100%; height:100%;" frameborder="0"></iframe>');
                })
            })

            // ATTRIBUER OU RETIRE UN DROIT A UN PERSONNEL SPECIFIQUE
            $(document).on('click','#PersonnelSpecifiqueDroitCheckbox',function(){

                var GetId = $(this).data('id');
                var Checkboxvalue = 'false';
                var idPersonnel = $('#currentIDPersonnel').val();
                if($(this).prop('checked')){
                    Checkboxvalue ='true';
                }

                MarequetesAjax("{{ route('personnelSpecifiqueDroit.attribue') }}", "GET", {
                    IDprofilLigne: GetId,
                    IDPersonnel: idPersonnel,
                    checkboxvalue : Checkboxvalue
                }, null, true, "JSON", function(resp) {
                   recuperationDroitPresonnelSpecifique(idPersonnel)
                     notif('success', 'Succès', resp.msg)
                })
            })

            // SUPPRESSION DE FONCTION PERSONNEL
            $(document).on('click','#SupprimerFonctionPersonnel',function(){
                var Getid = $(this).data('id')
                
                     confirmMdp('{{ csrf_token() }}', ()=>{
                        MarequetesAjax("{{ route('fonctionPersonnel.delete') }}", "GET", { 
                                 idFonctionpersonnel: Getid,
                        }, null, true, "JSON", function(resp) {
                            
                            if(resp.succes){
                                recuperationFonctionPersonnel()
                                notif('success', 'Succès', resp.msg)
                            }

                            if(resp.error){
                                notif('danger', 'Erreur', resp.msg)
                            }
                        })
                     },null)

        
            })

            // MODIFICATION FONCTION PERSONNEL
            $(document).on('click','#ModifierFonctionPersonnel',function(){

                var Getid = $(this).data('id')
              MarequetesAjax("{{ route('personnelfonction.get') }}", "GET", { 
                    idFonctionpersonnel: Getid,
                }, null, true, "JSON", function(resp) {
                 
                 $('#libelleFonction').val(resp.data[0].LibelleFonction)
                 $('#IDfonctionPersonnelInput').val(resp.data[0].IDPERSONNEL_FONCTION)
                 $('#TypeFonction').val(resp.data[0].TypeFonction).trigger('change')
                    
                })
            })
            
            var tableDroit = []
            // AJOUT DE DROIT DANS LE TABLEAU VARIABLE
            $('#FormAddDroit').on('submit', function(e) {
                e.preventDefault(); // Toujours empêcher le comportement par défaut

                if (!$(this)[0].checkValidity()) {
                    $(this).addClass('was-validated');
                    return;
                }

                $.ajax({
                    type: "POST",
                    url: "{{ route('droit.add') }}",
                    data: new FormData(this),
                    processData: false, 
                    contentType: false, 
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
                    },
                    success: function (resp) {
                        if(resp.succes){
                            notif('success', 'Succès', resp.msg)
                            $('#FormAddDroit')[0].reset()
                            $('#hiddenId').val(0)
                            recuperationDroit()
                        }

                        if(resp.succes ==false){
                            notif('danger', 'Erreur', resp.msg)
                        }
                    },
                    error: function(xhr, status, error) {

                        notif('danger', 'Erreur', xhr.responseText)
                    }
                });
             });


            // MODIFICATION DE DROIT DANS LE TABLEAU VARIABLE
            $(document).on('click','#modifierDroitAjoute',function(){
                let id = $(this).data('id');
                $('#hiddenId').val(id)
                
                recuperationDroit(id)
            })

            // SUPPRESSION DE DROIT DANS LE TABLEAU VARIABLE
            $(document).on('click','#supprimerDroitAjoute',function(){
                var id = $(this).data('id');
                confirmAction(() => {
                        $.ajax({
                            type: "GET",
                            url: "{{route('supprimerDroit.get')}}",
                            data: {iddroit : id},
                            dataType: "JSON",
                            success: function (resp) {

                                if(resp.succes){
                                    notif('success', 'Succès', resp.msg)
                                recuperationDroit()
                                }
                            },
                            error: function(xhr, status, error) {
                                notif('danger', 'Erreur', xhr.responseText)
                            }
                        });
                    },
                    "Voulez-vous supprimer la ligne ?",
                    ""
                )
            })


            $(document).on('change','#InputValeurDroitSpecifique-ligne',function(){

                     var id = $(this).data('id');
                     var val =  $(this).val()
                     var idPersonnel = $('#currentIDPersonnel').val();
                    $.ajax({
                        type: "PUT",
                        url: "{{ route('droit_habilitation_specifique.update') }}",
                        data: {id_droit_profil_ligne : id, valeur:val, _token : '{{csrf_token()}}'},
                        dataType: "JSON",
                        success: function (resp) {
                            if(resp.succes){
                            recuperationDroitPresonnelSpecifique(idPersonnel)
                            notif('success','Succès',resp.msg)
                        }
                        }
                    });
            })

           
        })

        function recuperationListePersonnel() {

            MarequetesAjax("{{ route('personnel.get') }}", "GET", null, true, true, "JSON", function(resp) {
                    completeHandler()
                    personnelTable(resp.Personnel, resp.Profil)
                }, function() { progressHandler()},
                function() {
                    progressHandler()
                })
        }

        function recuperationAgence() {
            MarequetesAjax("{{ route('agence.get') }}", "GET", null, true, true, "JSON", function(resp) {
                $.each(resp.data, function(key, value) {
                    $('.siteConnexion').append($('<option>', {
                        value: value.IDAGENCE,
                        text: value.NomAgence
                    }))
                })
            });
        }

        function recuperationProfil() {
            MarequetesAjax("{{ route('profil.get') }}", "GET", null, true, true, "JSON", function(resp) {
                profilTable(resp);
                $('.ProfilPersonnel').html('')
                $('.ProfilPersonnel').append('<option value="" disabled selected>Choisir...</option>')
                $.each(resp, function(key, value) {
                    $('.ProfilPersonnel').append($('<option>', {
                        value: value.IDDROIT_PROFIL,
                        text: value.LibelleDroitProfil
                    }))
                })
            })
        }

        function profilTable(response) {
            var table = $("#ProfilTable").DataTable();
            table.clear().draw();
            table.column(0).visible(false)
            $.each(response, function(key, value) {

                var heure = value.CreeLe.substr(11, 19)
                table.row.add([
                    value.IDDROIT_PROFIL,
                    '<a class="btn btn-sm btn-icon btn-outline-danger" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Supprimer ce profil"  data-id="' +
                    value.IDDROIT_PROFIL + '" id="SupprimerProfil">\
                                            <i class="bx bxs-trash"style="font-size : 14px;cursor : pointer;"></i>\
                                        </a>\
                                         <a class="btn btn-sm btn-icon btn-outline-warning" data-id="' + value
                    .IDDROIT_PROFIL + '"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Modifier ce profil" id="ModifierProfil">\
                                            <i class="bx bxs-edit" style="font-size : 17px;cursor : pointer;"></i>\
                                        </a>',
                    value.LibelleDroitProfil,
                    formatageDate(new Date(value.CreeLe)) + ' ' + heure,
                    value.NomPrenomPersonnel,
                    value.NomPrenomPersonnel,
                ])
            })

            table.draw();
        }

        function select($tab, $id, $idpersonnel) {
            var output = '<option data-idpersonnel="' + $idpersonnel + '" value="0">AUCUN</option>'
            $.each($tab, function(key, value) {
                output +=
                    `<option data-idpersonnel="${$idpersonnel}" value="${value.IDDROIT_PROFIL}" ${$id==value.IDDROIT_PROFIL ? 'selected': ''}>${value.LibelleDroitProfil}</option>`;
            })
            return '<select data-idpersonnel="' + $idpersonnel +
                '" class="form-select rounded-pill" id="SelectProfilForPersonnel">' + output + '</select>';
        }

        function personnelTable(response, $profil) {
            var table = $("#PersonnelTable").DataTable();
            table.clear().draw();
            $.each(response, function(key, value) {

                var EtatCompte =
                    '<span class="badge bg-success-transparent text-success" style="font-size:.78rem; width:102px;">ACTIF</span>'
                if (value.EtatComptePersonnel == 2) {
                    EtatCompte =
                        '<span class="badge bg-danger-transparent text-danger" style="font-size:.78rem; width:102px;">DESACTIVE</span>'
                }
              
                table.row.add([
                    '<a class="btn btn-sm btn-icon btn-outline-warning" data-id="' + value.IDPERSONNEL +
                    '"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Modifier ce personnel" id="ModifierPersonnel">\
                                        <i class="bx bxs-edit" style="font-size : 17px;cursor : pointer;"></i>\
                                    </a>\
                        <a class="btn btn-sm btn-icon btn-outline-danger" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Supprimer ce personnel"  data-id="' +
                    value.IDPERSONNEL + '" id="SupprimerPersonnel">\
                                        <i class="bx bxs-trash"style="font-size : 14px;cursor : pointer;"></i>\
                                    </a>\
                                        <a class="btn btn-sm btn-icon btn-outline-secondary" data-idprofildroit="' + value
                    .IDDROIT_PROFIL + '" data-id="' + value.IDPERSONNEL + '"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Droit personnel" id="DroitPersonnelSpecifique">\
                                        <i class="bx bxs-key" style="font-size : 17px;cursor : pointer;"></i>\
                                    </a>\
                                     </a>\
                                        <a class="btn btn-sm btn-icon btn-outline-danger" data-idprofildroit="' + value
                    .IDDROIT_PROFIL + '" data-id="' + value.IDPERSONNEL + '"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Impression Droit" id="ImprimerDroitPersonnel">\
                                        <i class="bx bxs-file-pdf" style="font-size : 17px;cursor : pointer;"></i>\
                                    </a>',
                    value.MatriculePersonnel,
                    value.LoginPersonnel,
                    value.NomPrenomPersonnel,
                    select($profil, value.IDDROIT_PROFIL, value.IDPERSONNEL),
                    value.LibelleFonction,
                    value.NomAgence,
                    EtatCompte
                ]);

                $('#SelectProfilForPersonnel' + value.IDPERSONNEL + ' option[value="' + value.IDDROIT_PROFIL + '"]')
                    .attr('selected', 'selected');
            })
            table.draw();
        }

        function DroitTable(response) {
            var tables = $("#DroitTable").DataTable()
            tables.clear().draw();
            $.each(response, function(key, value) {

                var checkbox ='';
                var $input = "";

                if (value.DroitActif == true) {
                     if(value.TypeDroit == 1){
                        checkbox =
                            '<div class="form-check form-switch"> <input class="DroitCheckbox form-check-input" data-id="' +
                            value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL + '"type="checkbox" checked="checked" role="switch" id="DroitCheckbox">\
                                    <label class="form-check-label" for="DroitCheckbox"></label></div>';  
                    }else{
                         checkbox =
                            '<div class="form-check form-switch"> <input class="DroitCheckbox form-check-input" data-id="' +
                            value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL + '"type="checkbox" checked="checked" disabled role="switch" id="DroitCheckbox">\
                                    <label class="form-check-label" for="DroitCheckbox"></label></div>';  
                    }
                }else{
                     if(value.TypeDroit == 1){
                        checkbox =
                            '<div class="form-check form-switch"> <input class="DroitCheckbox form-check-input" data-id="' +
                            value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL + '"type="checkbox" role="switch" id="DroitCheckbox">\
                                    <label class="form-check-label" for="DroitCheckbox"></label></div>';  
                    }else{
                         checkbox =
                            '<div class="form-check form-switch"> <input class="DroitCheckbox form-check-input" data-id="' +
                            value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL + '"type="checkbox" checked="checked" disabled role="switch" id="DroitCheckbox">\
                                    <label class="form-check-label" for="DroitCheckbox"></label></div>';  
                    }
                }

                let droitValeur = Number(value.DroitValeur).toFixed(2);
                if (value.TypeDroit == 2) {
                    $input = `<input type="number" class="form-control text-center" 
                                value="${droitValeur}"  
                                id="InputValeurDroitProfile-ligne" 
                                data-id="${value.IDDROIT_PROFIL_LIGNE}" 
                                data-idprofil="${value.IDDROIT_PROFIL}">`;
                } else {
                    $input = ``;
                }

               
                var ModifieLe = "";
                if (value.ModifieLe != null) {
                    var heure = value.ModifieLe.substr(11, 19)
                    ModifieLe = formatageDate(new Date(value.ModifieLe)) + ' ' + heure
                }

                tables.row.add([
                    value.LibelleDroit,
                    value.GroupeDroit,
                    value.RangDroit,
                    checkbox,
                    $input,
                    ModifieLe,
                    value.NomPrenomPersonnel
                ])
            })
            tables.draw();
        }

        function recuperationDroitProfilSpecifique($id) {
            MarequetesAjax("{{ route('profilDroitCoche.get') }}", "GET", {
                IDProfil: $id
            }, null, true, "JSON", function(response) {
                $('.retraitDroitSpecifique').html('')
                $('.retraitDroitSpecifique').append('<option value="" disabled selected>Choisir...</option>')
                $.each(response.data, function(key, value) {
                    $('.retraitDroitSpecifique').append('<option data-idprofilligne="' + value
                        .IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL +
                        '" value="' + value.IDDROIT + '">' + value.LibelleDroit + '</option>')
                })
            })
        }

        function RecuperationDroitretire($id) {
              var tables = $("#tabRetraitDroit").DataTable()
                tables.clear().draw();
            MarequetesAjax("{{ route('recuperationDroitRetire.get') }}", "GET", {
                idpersonnel: $id
            }, null, true, "JSON", function(resp) {
              
                $.each(resp.data, function(key, value) {
                    tables.row.add([
                        '<a class="btn btn-sm btn-icon btn-outline-danger" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Supprimer ce droit"  data-id="' +
                        value.IDDROIT_PROFIL_RETIRE + '" id="SupprimerDroitRetire">\
                                        <i class="bx bxs-trash"style="font-size : 14px;cursor : pointer;"></i>',
                        value.LibelleDroit
                    ])
                })
                tables.draw();
            })
        }

        function recuperationTouslesDroits() {

            MarequetesAjax("{{ route('Alldroit.get') }}", "GET", null, true, true, "JSON", function(resp) {
                $('.PersonnelDroitSpecifiqueSelect').html('')
                $('.PersonnelDroitSpecifiqueSelect').append(
                    '<option value="" disabled selected>Choisir...</option>')
                $.each(resp.data, function(key, value) {
                    /* $('.PersonnelDroitSpecifiqueSelect').append($('<option>', {
                         value: value.IDDROIT,
                         text: value.LibelleDroit
                     }))*/

                    // $('.PersonnelDroitSpecifiqueSelect').append('<option data-idprofilligne="' + value
                    //     .IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL +
                    //     '" value="' + value.IDDROIT + '">' + value.LibelleDroit + '</option>');

                    $('.PersonnelDroitSpecifiqueSelect').append('<option data-idprofilligne=""  data-idprofil="" value="' + value.IDDROIT + '">' + value.LibelleDroit + '</option>');

                })
            })
        }

        function recuperationDroitPresonnelSpecifique($id) {

            MarequetesAjax("{{ route('droitPersonnelSpecifique.get') }}", "GET", {
                idpersonnel: $id
            }, null, true, "JSON", function(resp) {

                var tables = $("#tabListDroit").DataTable()
                tables.clear().draw();
                $.each(resp.data, function(key, value) {
                    var checkbox ='';

                     if (value.DroitActif == true) {
                     if(value.TypeDroit == 1){
                        checkbox =
                            '<div class="form-check form-switch"> <input class="DroitCheckbox form-check-input" data-id="' +
                            value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL + '"type="checkbox" checked="checked" role="switch" id="PersonnelSpecifiqueDroitCheckbox">\
                                    <label class="form-check-label" for="PersonnelSpecifiqueDroitCheckbox"></label></div>';  
                    }else{
                         checkbox =
                            '<div class="form-check form-switch"> <input class="DroitCheckbox form-check-input" data-id="' +
                            value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL + '"type="checkbox" checked="checked" disabled role="switch" id="PersonnelSpecifiqueDroitCheckbox">\
                                    <label class="form-check-label" for="PersonnelSpecifiqueDroitCheckbox"></label></div>';  
                    }
                }else{
                     if(value.TypeDroit == 1){
                        checkbox =
                            '<div class="form-check form-switch"> <input class="DroitCheckbox form-check-input" data-id="' +
                            value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL + '"type="checkbox" role="switch" id="PersonnelSpecifiqueDroitCheckbox">\
                                    <label class="form-check-label" for="PersonnelSpecifiqueDroitCheckbox"></label></div>';  
                    }else{
                         checkbox =
                            '<div class="form-check form-switch"> <input class="DroitCheckbox form-check-input" data-id="' +
                            value.IDDROIT_PROFIL_LIGNE + '"  data-idprofil="' + value.IDDROIT_PROFIL + '"type="checkbox" checked="checked" disabled role="switch" id="PersonnelSpecifiqueDroitCheckbox">\
                                    <label class="form-check-label" for="PersonnelSpecifiqueDroitCheckbox"></label></div>';  
                    }
                }

                     var droitValeur =   Number(value.DroitValeur).toFixed(2)
                      
                    if (value.TypeDroit == 2) {
                        $input = `<input type="number" class="form-control text-center" 
                                    value="${droitValeur}"  
                                    id="InputValeurDroitSpecifique-ligne" 
                                    data-id="${value.IDDROIT_PROFIL_LIGNE}" 
                                    data-idprofil="${value.IDDROIT_PROFIL}">`;
                    } else {
                        $input = `<input type="number" class="form-control text-center" 
                                    value="${droitValeur}" 
                                    readonly 
                                    id="InputValeurDroitSpecifique-ligne" 
                                    data-id="${value.IDDROIT_PROFIL_LIGNE}" 
                                    data-idprofil="${value.IDDROIT_PROFIL}">`;
                    }
                    tables.row.add([
                        value.LibelleDroit,
                        checkbox,
                        $input
                    ])
                })
                tables.draw();
            })
        }

        function recuperationFonctionPersonnel(){

            MarequetesAjax("{{ route('personnelfonction.get') }}", "GET",null, null, true, "JSON", function(resp) {

                 var tables = $("#tabListFonctionPersonnel").DataTable()
                tables.clear().draw();
                $.each(resp.data, function(key, value) {
                          
                   var typeFonction = "";
                    if(value.TypeFonction == 1){
                        typeFonction = "DIRECTEUR GENERAL";
                    }else if(value.TypeFonction == 2){
                         typeFonction = "DIRECTEUR GENERAL ADJOINT";
                    }else if(value.TypeFonction == 3){
                         typeFonction = "DIRECTEUR D'AGENCE";
                    }else if(value.TypeFonction == 4){
                         typeFonction = "RESPONSABLE ACHAT";
                    }else if(value.TypeFonction == 5){
                        typeFonction = "RESPONSABLE D'EXPLOITATION";
                    }else if(value.TypeFonction == 6){
                        typeFonction = "INFORMATICIEN";
                    }else if(value.TypeFonction == 7){
                        typeFonction = "COMPTABLE";
                    }else if(value.TypeFonction == 8){
                        typeFonction = "COMMERCIAL";
                    }else if(value.TypeFonction == 9){
                        typeFonction = "TELEMARKETEUR";
                    }else if(value.TypeFonction == 10){
                        typeFonction = "SECRETAIRE";
                    }else if(value.TypeFonction == 11){
                        typeFonction = "TRANSITAIRE";
                    }else if(value.TypeFonction == 12){
                        typeFonction = "MAGASINIER";
                    }else if(value.TypeFonction == 13){
                        typeFonction = "CHAUFFEUR-LIVREUR";
                    }else if(value.TypeFonction == 14){
                        typeFonction = "RAGENT";
                    }else if(value.TypeFonction == 15){
                        typeFonction = "STAGIAIRE";
                    }else{
                        typeFonction = "AUTRES";
                    }
                    tables.row.add([
                        '<a class="btn btn-sm btn-icon btn-outline-warning" data-id="' + value.IDPERSONNEL_FONCTION +
                    '"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Modifier ce personnel" id="ModifierFonctionPersonnel">\
                                        <i class="bx bxs-edit" style="font-size : 17px;cursor : pointer;"></i>\
                                    </a>\
                        <a class="btn btn-sm btn-icon btn-outline-danger" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Supprimer ce personnel"  data-id="' +
                    value.IDPERSONNEL_FONCTION + '" id="SupprimerFonctionPersonnel">\
                                        <i class="bx bxs-trash"style="font-size : 14px;cursor : pointer;"></i>\
                                    </a>',
                        value.LibelleFonction,
                        typeFonction
                    ])
                })
                tables.draw();
            })
        }

        function fonctionPersonnelSelect(){

             MarequetesAjax("{{ route('personnelfonction.get') }}", "GET",null, null, true, "JSON", function(resp) {

                    $('#fonction').html('')
                     $('#fonction').append('<option value="" disabled selected>Choisir...</option>')
                   $.each(resp.data,function(key,value){
                        $('#fonction').append('<option value="'+value.IDPERSONNEL_FONCTION+'">'+value.LibelleFonction+'</option>')
                   })
             })
            
        }

        function recuperationDroit($id=null){

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

                    if($id !=null){

                        $('#libelleDroit').val(resp.Droit[0].LibelleDroit);
                        $('#codeDroit').val(resp.Droit[0].CodeDroit);
                        $('#groupeDroit').val(resp.Droit[0].GroupeDroit);
                        $('#rangDroit').val(resp.Droit[0].RangDroit);
                        $('#typeDroit').val(resp.Droit[0].TypeDroit);
                        return false
                    }
                    
                      let table = $('#tableAjoutDroit').DataTable();

                        table.clear();
                        $.each(resp.Droit, function(key, value) {

                                type =  value.TypeDroit == 1 ? 'BOOL' : 'NUMERIQUE';
                                table.row.add([
                                    `<a class="btn btn-sm btn-icon btn-outline-warning" data-id="${value.IDDROIT}" id="modifierDroitAjoute">
                                        <i class="bx bxs-edit" style="font-size : 17px;cursor : pointer;"></i>
                                    </a>
                                    <a class="btn btn-sm btn-icon btn-outline-danger" data-id="${value.IDDROIT}" id="supprimerDroitAjoute">
                                        <i class="bx bxs-trash" style="font-size : 14px;cursor : pointer;"></i>
                                    </a>`,
                                    value.LibelleDroit,
                                    value.CodeDroit,
                                    value.GroupeDroit,
                                    type,
                                    value.RangDroit
                                ]);
                            });
                        table.draw();
                }
            });
        }
    </script>
@endsection