@include('header')

 <div id="main-wrapper" class="wallet-open active show">

     @include('topbar1')

     @include('chatbox')

     @include('topbar2')

     @include('sidebar')

     <div class="content-body">
@php
  $nomPrenomPersonnel = session()->get('NomPrenomPersonnel');
  $IntituleFonctionPersonnel = session()->get('IntituleFonctionPersonnel');

@endphp
         <div class="container-fluid pt-0">

             <div class="row">
                 <div class="col-xl-12">
                     <div class="payment-bx">
                         <div class="d-flex  justify-content-between flex-wrap">
                             <div class="payment-content">
                                 <h1 class="font-w500 mb-2">Bienvenue, {{ucfirst(strtolower($nomPrenomPersonnel))}} </h1>
                                 <p class="dz-para">Fonction : {{$IntituleFonctionPersonnel}}</p>
                             </div>

                             <div>
                                 <button style="margin-right:10px;" type="button" class="modal-btn" data-bs-toggle="modal" data-bs-target="#FonctionPersonnelModal">
												<span class="dz-wallet icon-box icon-box-lg ms-3 mb-1 d-block">
													<i class="fa fa-list color-info"></i>
												</span>
												<span>Fonction pers.</span>
								</button>

                               
                             </div>
                               
                         </div>
                         <div class="row">
                             <div class="col-xl-4">
                                 <div class="card  dz-wallet overflow-hidden">
                                     <div class="boxs">
                                         <span class="box one"></span>
                                         <span class="box two"></span>
                                         <span class="box three"></span>
                                         <span class="box four"></span>
                                     </div>
                                     <div class="card-header border-0 pb-3 pb-sm-0 pe-4">
                                         <div class="wallet-icon">
                                             <svg width="62" height="39" viewBox="0 0 62 39" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                 <circle cx="42.7722" cy="19.2278" r="19.2278" fill="white"
                                                     fill-opacity="0.2" />
                                                 <circle cx="19.2278" cy="19.2278" r="19.2278" fill="white"
                                                     fill-opacity="0.2" />
                                             </svg>
                                         </div>
                                         <button type="button" class="modal-btn" data-bs-toggle="modal"
                                             data-bs-target="#exampleModal3">
                                             <span class="dz-wallet icon-box icon-box-lg m-auto mb-1 d-block">
                                                 <img src="assets/gif/User.gif" style="width:30px">
                                             </span>

                                         </button>

                                     </div>
                                     <div
                                         class="card-body py-3 pt-1 d-flex align-items-center justify-content-between flex-wrap pe-3">
                                         <div class="wallet-info">
                                             <span class="fs-14 font-w400 d-block">PERSONNELS</span>
                                             <h2 class="font-w600 mb-0" id="nbrePersonnel"></h2>
                                             <span>Logicarte V.1</span>
                                         </div>
                                         {{-- <button type="button" class="modal-btn" data-bs-toggle="modal" data-bs-target="#exampleModal4">
												<span class="dz-wallet icon-box icon-box-lg ms-3 mb-1 d-block">
													 <img src="assets/gif/User.gif" style="width:30px">	
												</span>
												<span>Send Invoices</span>
											</button> --}}


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



                             <div class="col-xl-8">
                                 <div class="card dz-wallet">
                                     <div class="card-header border-0 align-items-start pb-0">
                                         <div>
                                             <span class="fs-18 d-block mb-2">Statistique</span>

                                         </div>
                                         <div class="dropdown send style-1">
                                             <a href="javascript:void(0);"
                                                 class="btn-link btn sharp tp-btn-light btn-primary pill"
                                                 data-bs-toggle="dropdown" aria-expanded="false">
                                                 <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                                                     xmlns="http://www.w3.org/2000/svg">
                                                     <path
                                                         d="M8.47908 4.58333C8.47908 3.19 9.60659 2.0625 10.9999 2.0625C12.3933 2.0625 13.5208 3.19 13.5208 4.58333C13.5208 5.97667 12.3933 7.10417 10.9999 7.10417C9.60658 7.10417 8.47908 5.97667 8.47908 4.58333ZM12.1458 4.58333C12.1458 3.95083 11.6324 3.4375 10.9999 3.4375C10.3674 3.4375 9.85408 3.95083 9.85408 4.58333C9.85408 5.21583 10.3674 5.72917 10.9999 5.72917C11.6324 5.72917 12.1458 5.21583 12.1458 4.58333Z"
                                                         fill="#fff" />
                                                     <path
                                                         d="M8.47908 17.4163C8.47908 16.023 9.60659 14.8955 10.9999 14.8955C12.3933 14.8955 13.5208 16.023 13.5208 17.4163C13.5208 18.8097 12.3933 19.9372 10.9999 19.9372C9.60658 19.9372 8.47908 18.8097 8.47908 17.4163ZM12.1458 17.4163C12.1458 16.7838 11.6324 16.2705 10.9999 16.2705C10.3674 16.2705 9.85408 16.7838 9.85408 17.4163C9.85408 18.0488 10.3674 18.5622 10.9999 18.5622C11.6324 18.5622 12.1458 18.0488 12.1458 17.4163Z"
                                                         fill="#fff" />
                                                     <path
                                                         d="M8.47908 11.0003C8.47908 9.60699 9.60659 8.47949 10.9999 8.47949C12.3933 8.47949 13.5208 9.60699 13.5208 11.0003C13.5208 12.3937 12.3933 13.5212 10.9999 13.5212C9.60658 13.5212 8.47908 12.3937 8.47908 11.0003ZM12.1458 11.0003C12.1458 10.3678 11.6324 9.85449 10.9999 9.85449C10.3674 9.85449 9.85408 10.3678 9.85408 11.0003C9.85408 11.6328 10.3674 12.1462 10.9999 12.1462C11.6324 12.1462 12.1458 11.6328 12.1458 11.0003Z"
                                                         fill="#fff" />
                                                 </svg>
                                             </a>
                                             {{-- <div class="dropdown-menu dropdown-menu-end">
                                                 <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                                 <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                                             </div> --}}
                                         </div>
                                     </div>
                                     <div class="card-body py-4 pt-md-2">
                                         <div class="progress default-progress mb-3">
                                             <div class="progress-bar bg-vigit progress-animated"
                                                 style="width: 80%; height:8px;" role="progressbar">
                                                 <span class="sr-only">90% Complete</span>
                                             </div>
                                         </div>
                                         <div class="row mt-1">
                                             {{-- <div class="value-data col-xl-3 col-md-4 col-6">
													<p class="mb-1">VALID THRU</p>
													<h4 class="mb-0 font-w500 text-white">08/21</h4>
												</div>
												<div class="value-data col-xl-3 col-md-4 col-6">
													<p class="mb-1">CARD HOLDER</p>
													<h4 class="mb-0 text-white font-w500">Adam Jackson</h4>
												</div>
												<div class="value-data col-xl-4 col-md-4 col-12">
													<p class="mb-1">CARD NUMBER</p>
													<h4 class="mb-0 text-white font-w500">**** **** **** 1234</h4>
												</div>
												<div class="col-xl-2">
                                                </div> --}}

                                             {{-- <div class="col-xl-4"
                                                 style="border-right: 1px solid #fff;padding: 0 10px; ">
                                                 <div class="d-flex justify-content-between">
                                                     <div>
                                                         FORFAITS
                                                     </div>
                                                     <div>
                                                         <button type="button" class="modal-btn" data-bs-toggle="modal"
                                                             data-bs-target="#exampleModal4">
                                                             <span
                                                                 class="dz-wallet icon-box icon-box-lg ms-3 mb-1 d-block">
                                                                 <img src="assets/gif/Box.gif" style="width:30px">
                                                             </span>
                                                         </button>
                                                     </div>
                                                 </div>
                                                 <h2 class="fs-28 font-w600 ">2 000</h2>
                                             </div> --}}
                                             <div class="col-xl-6"
                                                 style="border-right: 1px solid #fff;padding: 0 10px; ">

                                                 <div class="d-flex justify-content-between">
                                                     <div>
                                                         PERSONNEL (ACTIF)
                                                     </div>
                                                     <div>
                                                         <button type="button" class="modal-btn" data-bs-toggle="modal"
                                                             data-bs-target="#exampleModal4">
                                                             <span
                                                                 class="dz-wallet icon-box icon-box-lg ms-3 mb-1 d-block">
                                                                 <img src="assets/gif/Building.gif" style="width:30px">
                                                             </span>
                                                         </button>
                                                     </div>
                                                 </div>
                                                 <h2 class="fs-28 font-w600 " id="CountPersonnelActif"></h2>
                                             </div>
                                             <div class="col-xl-6"
                                                 style="border-right: 1px solid #fff;padding: 0 10px; ">

                                                 <div class="d-flex justify-content-between">
                                                     <div>
                                                         PERSONNEL (SUSPENDU)
                                                     </div>
                                                     <div>
                                                         <button type="button" class="modal-btn"
                                                             data-bs-toggle="modal" data-bs-target="#exampleModal4">
                                                             <span
                                                                 class="dz-wallet icon-box icon-box-lg ms-3 mb-1 d-block">
                                                                 <img src="assets/gif/User.gif" style="width:30px">
                                                             </span>
                                                         </button>
                                                     </div>
                                                 </div>

                                                 <h2 class="fs-28 font-w600 " id="CountPersonnelSuspendu"></h2>
                                             </div>
                                         </div>


                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-xl-12">
                             <div class="card crypto-chart h-auto">
                                 <div class="card-header pb-0 border-0 flex-wrap">
                                     <div>
                                         <div class="chart-title mb-3">
                                             <h2 class="heading">Personnel</h2>
                                         </div>
                                         <div class="d-flex align-items-center mb-2">
                                             <div class="round weekly" id="dzOldSeries">
                                             </div>
                                             <div class="round" id="dzNewSeries">

                                             </div>
                                         </div>
                                     </div>
                                     <div class="p-static">

                                         <div class="progress-content">
                                             <div class="d-flex justify-content-between">
                                                 <button type="button" id="CallModalAddClient" data-bs-toggle="modal"
                                                     data-bs-target="#AddPersonnelLogimatiqueModal"
                                                     class="btn btn-rounded btn-outline-primary"><i
                                                         class="fa fa-plus color-info"></i> Personnel</button>
                                             </div>

                                         </div>
                                     </div>
                                 </div>
                                 <div class="card-body pt-2 custome-tooltip pb-0">

                                     <div class="table-responsive">
                                         {{-- <table id="ClientTable" class="display" style="min-width: 845px">
                                             <thead>
                                                 <tr>
                                                     <th>No</th>
                                                     <th>Raison sociale</th>
                                                     <th>Email</th>
                                                     <th>Contact</th>
                                                     <th>Type</th>
                                                     <th>Statut</th>
                                                     <th>Action </th>
                                                 </tr>
                                             </thead>
                                             <tbody>
                                             
                                             </tbody>
                                         </table> --}}

                                        <table id="ListePersonnelLogimatiqueTable" class="display" style="min-width: 845px">
                                            <thead>
                                                <tr>
                                                   
                                                    <th>Nom</th>
                                                    <th>Email</th>
                                                    <th>Téléphone Mobile</th>
                                                    <th>Adresse</th>
                                                    <th>Statut </th>
                                                     <th>Fonction </th>
                                                    <th>Actions </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                        
                                            </tbody>
                                        </table>
                                     </div>

                                 </div>
                             </div>

                         </div>

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

            <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!-- CLIENT MODAL -->
            <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->

             <div class="modal fade" id="AddClientModal" tabindex="-1" aria-hidden="true">
                 <div class="modal-dialog">
                     <div class="modal-content">
                         <div class="modal-header ">
                             <h5 class="modal-title">Client</h5>
                             <button type="button" class="btn-close" data-bs-dismiss="modal"
                                 aria-label="Close"></button>
                         </div>
                         <div class="modal-body">

                             <form class="needs-validation p-0" id="FormAddClient" method="POST" novalidate>

                                 @csrf
                                 <input type="hidden" id="ClientInputHiddenId" name="ClientInputHiddenId"
                                     value="0">
                                 <div class="form-group">
                                     <div class="row">
                                         <div class="col-md-6 col-lg-6 col-xl-6 ">
                                             <label class="form-label">Raison sociale</label>
                                             <input type="text" name="raisonSocial" class="form-control mb-3"
                                                 id="raisonSocial" placeholder="raison sociale" required>
                                             <div class="invalid-feedback">
                                                 Champ obligatoire
                                             </div>
                                         </div>
                                         <div class="col-md-6 col-lg-6 col-xl-6 ">
                                             <label class="form-label">Type</label>
                                             <select class="form-select" id="typeClient" name="typeClient" required>
                                                 <option disabled selected value="">Aucun</option>
                                                 <option value="1">Personne morale</option>
                                                 <option value="2">Personne physique</option>
                                             </select>
                                             <div class="invalid-feedback">
                                                 Champ obligatoire
                                             </div>
                                         </div>
                                     </div>

									 <div id="blockStatut" style="display:none">
									 		 <label class="form-label">Statut</label>
                                     <select id="inputState"
                                         class="form-select wide StatusClient" name="StatusClient"
                                         required>
                                         <option value="1">En cours</option>
                                         <option value="2">Suspendu</option>
                                     </select>
									 </div>
                                    
                                     
                                     <label class="form-label">Email</label>
                                     <input type="email" name="EmailClient" class="form-control mb-3"
                                         id="EmailClient" placeholder="email" required>
                                     <div class="invalid-feedback">
                                         Champ obligatoire
                                     </div>

                                     <label class="form-label">Contact</label>
                                     <input type="number" name="contact" class="form-control mb-3" id="contact"
                                         placeholder="contact">
                                 </div>

                         </div>
                         <div class="modal-footer">
                             <button type="button" class="btn btn-danger light"
                                 data-bs-dismiss="modal">Fermer</button>
                             <button type="submit" class="btn btn-primary">Enregistrer</button>
                         </div>
                         </form>
                     </div>
                 </div>
             </div>

             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!-- FIN CLIENT MODAL -->
             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->

              <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!-- CLIENT MODAL -->
            <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->

            <div class="modal fade" id="PersonnelClientModal" tabindex="-1"  aria-hidden="true">
                <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header ">
                    <h5 class="modal-title">Personnel associé</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                                <div class="table-responsive">
                                        <table id="ClientPersonnelTable" class="display" style="min-width: 845px">
                                            <thead>
                                                <tr>
                                                    <th>No</th>
                                                    <th>Nom</th>
                                                    <th>Email</th>
                                                    <th>Téléphone fixe</th>
                                                    <th>Téléphone Mobile</th>
                                                    <th>Adresse</th>
                                                    <th>Statut </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                        
                                            </tbody>
                                        </table>
                                </div>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Fermer</button>
                    
                    </div>
            
                </div>
                </div>
            </div>

             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!-- CLIENT MODAL -->
            <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->


             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!-- PERSONNEL LOGIMATIQUE MODAL -->
            <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->

             <div class="modal fade" id="AddPersonnelLogimatiqueModal" tabindex="-1" aria-hidden="true">
                 <div class="modal-dialog">
                     <div class="modal-content">
                         <div class="modal-header">
                             <h5 class="modal-title">Personnel</h5>
                             <button type="button" class="btn-close" data-bs-dismiss="modal"
                                 aria-label="Close"></button>
                         </div>
                         <div class="modal-body">

                             <form class="needs-validation p-0" id="FormAddPersonnelLogimatique" method="POST" novalidate>

                                 @csrf
                                 <input type="hidden" id="PersonnelLogiInputHiddenId" name="PersonnelLogiInputHiddenId"
                                     value="0">

                                     <input type="hidden" name="ClientLogimatique"
                                     value="1">
                                 <div class="form-group">

                                            <label class="form-label">Nom</label>
                                             <input type="text" name="NomPersonnelLogi" class="form-control mb-3"
                                                 id="NomPersonnelLogi" placeholder="Nom complet" required>
                                             <div class="invalid-feedback">
                                                 Champ obligatoire
                                             </div>
                                     <div class="row g-3">
                                            
                                         <div class="col-md-6 col-lg-6 col-xl-6 ">
                                              <label class="form-label">Email</label>
                                                <input type="email" name="EmailPersonnelLogi" class="form-control mb-3"
                                                    id="EmailPersonnelLogi" placeholder="email" required>
                                                <div class="invalid-feedback">
                                                    Champ obligatoire
                                                </div>
                                         </div>

                                            <div class="col-md-6 col-lg-6 col-xl-6 ">
                                              <label class="form-label">Téléphone</label>
                                                <input type="number" name="TelephonePersonnelLogi" class="form-control mb-3"
                                                    id="TelephonePersonnelLogi" placeholder="Téléphone" required>
                                                <div class="invalid-feedback">
                                                    Champ obligatoire
                                                </div>
                                            </div>
                                     </div>

                                   <div class="form-group">
                                     <label class="form-label">Fonction</label>
                                     <select class="form-select  FonctionPersonnels" name="FonctionPersonnel"
                                         required>
                                         <option disabled selected value="">Aucun</option>
                                     </select>
                                   </div>

                                    <label class="form-label">Adresse</label>
                                    <input type="text" name="AdressePersonnelLogi" class="form-control mb-3"
                                        id="AdressePersonnelLogi" placeholder="Adresse" required>
                                    <div class="invalid-feedback">
                                        Champ obligatoire
                                    </div>

									 <div id="blockStatutPersonnelLogi" style="display:none">
									 <label class="form-label">Statut</label>
                                     <select  id="inputState"
                                         class="form-select wide StatusPersonnelLogi" name="StatusPersonnelLogi"
                                         required>
                                         <option value="1">Actif</option>
                                         <option value="2">Suspendu</option>
                                     </select>
									 </div>

                                 </div>

                         </div>
                         <div class="modal-footer">
                             <button type="button" class="btn btn-danger light"
                                 data-bs-dismiss="modal">Fermer</button>
                             <button type="submit" class="btn btn-primary">Enregistrer</button>
                         </div>
                         </form>
                     </div>
                 </div>
             </div>

             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!-- FIN PERSONNEL LOGIMATIQUE MODAL -->
             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->


            <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!-- LISTE PERSONNEL LOGIMATIQUE MODAL -->
            <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->

             <div class="modal fade" id="ListePersonnelLogimatiqueModal" tabindex="-1" aria-hidden="true">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content">
                         <div class="modal-header">
                             <h5 class="modal-title">Personnel</h5>
                             <button type="button" class="btn-close" data-bs-dismiss="modal"
                                 aria-label="Close"></button>
                         </div>
                         <div class="modal-body">

                                {{-- <div class="table-responsive">
                                        <table id="ListePersonnelLogimatiqueTable" class="display" style="min-width: 845px">
                                            <thead>
                                                <tr>
                                                   
                                                    <th>Nom</th>
                                                    <th>Email</th>
                                                    <th>Téléphone Mobile</th>
                                                    <th>Adresse</th>
                                                    <th>Statut </th>
                                                     <th>Fonction </th>
                                                    <th>Actions </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                        
                                            </tbody>
                                        </table>
                                </div> --}}
                         </div>
                         <div class="modal-footer">
                             <button type="button" class="btn btn-danger light"
                                 data-bs-dismiss="modal">Fermer</button>
                            
                         </div>
                     </div>
                 </div>
             </div>

             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!-- LISTE FIN PERSONNEL LOGIMATIQUE MODAL -->
             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->


             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!-- FONCTION PERSONNEL MODAL -->
            <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->

             <div class="modal fade" id="FonctionPersonnelModal" tabindex="-1" aria-hidden="true">
                 <div class="modal-dialog">
                     <div class="modal-content">
                         <div class="modal-header">
                             <h5 class="modal-title">Fonction</h5>
                             <button type="button" class="btn-close" data-bs-dismiss="modal"
                                 aria-label="Close"></button>
                         </div>
                         <div class="modal-body">

                                <form  id="FormAddFonction"  class="needs-validation p-0"  method="POST" novalidate>
                                
                                     @csrf
                                <input type="hidden" value="0" name="PersonnelFonctionInputHiddenId" id="PersonnelFonctionInputHiddenId">
                                
                                <input type="hidden" value="1" name="ClientLogimatique">
                                <div class="row">
                               
                                <div class="col-xl-10 col-sm-6  col-md-8 col-lg-10">
                                    <div class="form-group">
                                        <label class="form-label">Intitulé</label>
                                             <input type="text" name="IntituleFonction" class="form-control mb-3"
                                                 id="IntituleFonction" placeholder="Intitulé fonction" required>
                                             <div class="invalid-feedback">
                                                 Champ obligatoire
                                             </div>
                                    </div>

                                </div>

                                <div class="col-xl-2 col-sm-6 col-md-4 col-lg-2">
                                    <button style="margin-top:25px;" type="submit"  class="btn btn-primary"><i class="fa fa-plus"></i></button>
                                </div>
                                
                                </div>
                                    
                                </form>

                                
                                   <div class="table-responsive">
                                        <table id="ListeFonctionPersonnelTable" class="display" style="width: 447px">
                                            <thead>
                                                <tr>
                                                    <th>Intitulé</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                        
                                            </tbody>
                                        </table>
                                </div>
                         </div>
                         <div class="modal-footer">
                             <button type="button" class="btn btn-danger light"
                                 data-bs-dismiss="modal">Fermer</button>
                         </div>
                     </div>
                 </div>
             </div>

             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
                                 <!--  FIN FONCTION PERSONNEL MODAL -->
             <!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
         </div>

     </div>

     @include('primary_footer')


 </div>

 @include('footer')

 <script>
     $(document).ready(function() {

        getListClient();
        getPersonnelLogi();
        getPersonnelFonction();
        PersonnelFonctionSelectBox();

      
        

        $('#FormAddClient').on('submit', function(e) {
            e.preventDefault();
            if (!$(this)[0].checkValidity()) {
                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
            } else {
                e.preventDefault();
                MarequetesAjax("{{ Route('Client.creer') }}", "POST", new FormData(this), false, false,
                    "JSON",
                    function(resp) {

                        if (resp.succes) {

                            $('#AddClientModal').modal('hide')
                            $('#ClientInputHiddenId').val(0)
                            $('#FormAddClient')[0].reset();
                            getListClient();
                            Notification(resp.msg, 'toast-top-right')
                        }
                    })
            }

        })

        $('#FormAddPersonnelLogimatique').on('submit', function(e) {
            e.preventDefault();
           
            if (!$(this)[0].checkValidity()) {
                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
            } else {
                e.preventDefault();
                MarequetesAjax("{{ Route('PersonnelLogi.creer') }}", "POST", new FormData(this), false, false,
                    "JSON",
                    function(resp) {

                        if(resp.checkMailError){
                            NotificationErreur(resp.msg, "toast-top-right")
                            return false;
                        }

                        if (resp.succes) {
                            $('#AddPersonnelLogimatiqueModal').modal('hide')
                            $('#PersonnelLogiInputHiddenId').val(0)
                            $('#FormAddPersonnelLogimatique')[0].reset();
                            getPersonnelLogi();
                           
                            Notification(resp.msg, "toast-top-right")

                        }
                    })
            }

        })

        $('#FormAddFonction').on('submit', function(e) {
            e.preventDefault();
           
            if (!$(this)[0].checkValidity()) {
                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
            } else {
                e.preventDefault();
                MarequetesAjax("{{ Route('PersonnelFonction.creer') }}", "POST", new FormData(this), false, false,
                    "JSON",
                    function(resp) {

                        if (resp.succes) {

                            $('#PersonnelFonctionInputHiddenId').val(0)
                            $('#FormAddFonction')[0].reset();
                            getPersonnelFonction();
                            Notification(resp.msg, "toast-top-right")

                        }
                    })
            }

        })

        $(document).on('click', '#CallModalAddClient', function() {
        $('#blockStatut').css('display','none')
        $('#FormAddClient')[0].reset();
        })

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

            var $clientId = $(this).data('id');
            MarequetesAjax("{{ route('Client.liste') }}", "GET", {
                clientId: $clientId
            }, null, true, "JSON", function(resp) {

                $('#raisonSocial').val(resp.data[0].RaisonSocialeClient)
                $('#typeClient').val(resp.data[0].TypeClient)
                $('#EmailClient').val(resp.data[0].EmailClient)
                $('#contact').val(resp.data[0].Contact)
                $('.StatusClient').val(resp.data[0].EtatClient)
                $('#ClientInputHiddenId').val(resp.data[0].IDClient)
                $('#blockStatut').css('display','block')
                $('#AddClientModal').modal('show')
            })

        })

        $(document).on('click', '#ModifierPersonnelLogi', function() {
            $('#ListePersonnelLogimatiqueModal').modal('hide')
            var $PersonnelId = $(this).data('id');
            MarequetesAjax("{{ route('PersonnelLogi.liste') }}", "GET", {
                PersonnelId: $PersonnelId , ClientLogimatique:1
            }, null, true, "JSON", function(resp) {

                $('#NomPersonnelLogi').val(resp.data[0].NomPrenomPersonnel)
                $('#EmailPersonnelLogi').val(resp.data[0].EmailPersonnel)
                $('#TelephonePersonnelLogi').val(resp.data[0].TelephoneMobilePersonnel)
                $('#AdressePersonnelLogi').val(resp.data[0].AdressePersonnel)
                $('.StatusPersonnelLogi').val(resp.data[0].EtatPersonnel)
                $('.FonctionPersonnels').val(resp.data[0].IDFonctionPersonnel)
                $('#PersonnelLogiInputHiddenId').val(resp.data[0].IDPersonnel)
                $('#blockStatutPersonnelLogi').css('display','block')
                $('#AddPersonnelLogimatiqueModal').modal('show')
            })

        })

        $(document).on('click', '#ModifierFonctionPersonnel', function() {
           
            var $IDFonctionPersonnel = $(this).data('id');
            MarequetesAjax("{{ route('FonctionPersonnel.liste') }}", "GET", {
                IDFonctionPersonnel: $IDFonctionPersonnel,ClientLogimatique:1
            }, null, true, "JSON", function(resp) {

                $('#IntituleFonction').val(resp.data[0].IntituleFonctionPersonnel)
                $('#PersonnelFonctionInputHiddenId').val(resp.data[0].IDFonctionPersonnel)
               
            })

        })

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

            var $clientId = $(this).data('id');

                Swal.fire({
                    title: 'Êtes-vous sûr?',
                    text: "Vous ne pourrez pas revenir en arrière!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Oui, supprimer!',
                    cancelButtonText: 'Annuler'
                }).then((result) => {
                    
                    if (result.isConfirmed) {
                            MarequetesAjax("{{ route('Client.suprimer') }}", "GET", {
                                clientId: $clientId
                            }, null, true, "JSON", function(resp) {
                                getListClient()
                                Notification(resp.msg, "toast-top-right")
                            })
                    
                    }
                })
                

        })

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

            var $PersonnelId = $(this).data('id');
                Swal.fire({
                    title: 'Êtes-vous sûr?',
                    text: "Vous ne pourrez pas revenir en arrière!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Oui, supprimer!',
                    cancelButtonText: 'Annuler'
                }).then((result) => {
                    
                    if (result.isConfirmed) {
                    MarequetesAjax("{{ route('PersonnelLogi.suprimer') }}", "GET", {
                            PersonnelId: $PersonnelId
                        }, null, true, "JSON", function(resp) {
                            getPersonnelLogi()
                            Notification(resp.msg, "toast-top-right")
                        })
                    
                    }
                })
                
        })

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

            var $FonctionPersonnelId = $(this).data('id');
             Swal.fire({
            title: 'Êtes-vous sûr?',
            text: "Vous ne pourrez pas revenir en arrière!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Oui, supprimer!',
            cancelButtonText: 'Annuler'
        }).then((result) => {
            // Si l'utilisateur clique sur le bouton de confirmation
            if (result.isConfirmed) {
               MarequetesAjax("{{ route('PersonnelFonction.suprimer') }}", "GET", {
                    FonctionPersonnelId: $FonctionPersonnelId
                }, null, true, "JSON", function(resp) {
                    getPersonnelFonction()
                    Notification(resp.msg, "toast-top-right")
                })
                Swal.fire(
                    'Supprimé!',
                    'Votre élément a été supprimé.',
                    'success'
                )
            }
        })
                
        })

         $(document).on('click', '#PersonnelAssocie', function() {
             var $clientId = $(this).data('id');
             var tableClientPersonnel = $('#ClientPersonnelTable').DataTable();
             tableClientPersonnel.clear().draw();
             MarequetesAjax("{{ route('ClientPersonnel.liste') }}", "GET", {
                 clientId: $clientId
             }, null, true, "JSON", function(resp) {
						var numero = 0;
                 $.each(resp.data, function(key, value) {
						numero++;

						var EtatPersonnel =
                     '<span class="badge badge-rounded badge-outline-success">En cours</span>';

                 if (value.EtatPersonnel == 2) {
                     EtatPersonnel =
                         '<span class="badge badge-rounded badge-outline-warning">Suspendu</span>';
                 }
                     tableClientPersonnel.row.add([
						 numero,
                         value.NomPrenomPersonnel,
                         value.EmailPersonnel,
                         value.TelephoneMobilePersonnel,
                         value.TelephoneFixePersonnel,
                         value.AdressePersonnel,
                         EtatPersonnel,

                     ])
                 })

				 tableClientPersonnel.draw();

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

         })

     })

     function getListClient() {

         MarequetesAjax("{{ route('Client.liste') }}", "GET", null, null, true, "JSON", function(response) {
             var tableClient = $('#ClientTable').DataTable();
             tableClient.clear().draw();
             var numero = 0;
             $('#CountPersonnelActif').text(response.CountPersonnelActif)
             $('#CountPersonnelSuspendu').text(response.CountPersonnelSuspendu)
             $.each(response.data, function(key, value) {
                 numero++;
                 var TypeClient =
                     '<span class="badge badge-rounded badge-outline-secondary">Personne morale</span>';
                 if (value.TypeClient == 2) {
                     TypeClient =
                         '<span class="badge badge-rounded badge-outline-primary">Personne physique</span>';
                 }

                 var EtatClient =
                     '<span class="badge badge-rounded badge-outline-success">En cours</span>';

                 if (value.EtatClient == 2) {
                     EtatClient =
                         '<span class="badge badge-rounded badge-outline-warning">Suspendu</span>';
                 }
                 tableClient.row.add([
                     numero,
                     value.RaisonSocialeClient,
                     value.EmailClient,
                     value.Contact,
                     TypeClient,
                     EtatClient,
                     '<div class="d-flex">\
                     <a href="#" id="PersonnelAssocie" data-id="' + value.IDClient + '" class="btn btn-warning shadow btn-xs sharp me-1"><i class="fas fa-user-alt"></i></a>\
 					<a href="#" id="ModifierClient" data-id="' + value.IDClient + '" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a>\
 					<a href="#" id="SupprimerClient" data-id="' + value.IDClient + '" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>\
 				</div>'

                 ]);
             })

            

             tableClient.draw();

         })
     }

    function getPersonnelLogi() {

         MarequetesAjax("{{ route('PersonnelLogi.liste') }}", "GET", {ClientLogimatique:1}, null, true, "JSON", function(response) {
             var tablePersonnelLogi = $('#ListePersonnelLogimatiqueTable').DataTable();
             tablePersonnelLogi.clear().draw();
             $('#CountPersonnelActif').text(response.CountPersonnelActif)
             $('#CountPersonnelSuspendu').text(response.CountPersonnelSuspendu)
             numero=0;
             $.each(response.data, function(key, value) {
                numero++;
                 var EtatPersonnel =
                     '<span class="badge badge-rounded badge-outline-success">Actif</span>';

                 if (value.EtatPersonnel == 2) {
                     EtatPersonnel =
                         '<span class="badge badge-rounded badge-outline-warning">Suspendu</span>';
                 }
                 tablePersonnelLogi.row.add([
 
                     value.NomPrenomPersonnel,
                     value.EmailPersonnel,
                     value.TelephoneMobilePersonnel,
                     value.AdressePersonnel,
                     EtatPersonnel,
                     '<span class="badge badge-rounded badge-outline-warning">'+value.IntituleFonctionPersonnel+'</span>',
                     '<div class="d-flex">\
 					<a href="#" id="ModifierPersonnelLogi" data-id="' + value.IDPersonnel + '" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a>\
 					<a href="#" id="SupprimerPersonnelLogi" data-id="' + value.IDPersonnel + '" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>\
 				    </div>'

                 ]);
             })

             tablePersonnelLogi.draw();
              $('#nbrePersonnel').text(numero)

         })
    } 

    function getPersonnelFonction() {

         MarequetesAjax("{{ route('FonctionPersonnel.liste') }}", "GET",{ClientLogimatique : 1}, null, true, "JSON", function(response) {
             var tableFonctionPersonnel = $('#ListeFonctionPersonnelTable').DataTable();
             tableFonctionPersonnel.clear().draw();
             $.each(response.data, function(key, value) {

                 tableFonctionPersonnel.row.add([
 
                     value.IntituleFonctionPersonnel,

                     '<div class="d-flex">\
 					<a href="#" id="ModifierFonctionPersonnel" data-id="' + value.IDFonctionPersonnel + '" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a>\
 					<a href="#" id="SupprimerFonctionPersonnel" data-id="' + value.IDFonctionPersonnel + '" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>\
 				    </div>'

                 ]);
             })

             tableFonctionPersonnel.draw();

         })
    }  

    function PersonnelFonctionSelectBox(){
        MarequetesAjax("{{ route('FonctionPersonnel.liste') }}", "GET", {ClientLogimatique : 1}, null, true, "JSON", function(resp) {
             
            $.each(resp.data, function(key,value) {
              
                $('.FonctionPersonnels').append($('<option>', {
                    value: value.IDFonctionPersonnel ,
                    text: value.IntituleFonctionPersonnel
                }))
            })

        })
    }
 </script>


 </body>

 </html>