@extends('backend/include/layout')
<!-- title -->
@section('title') Utilisateurs || {{env('APP_NAME')}} @endsection

@section('fil-arial') 
<div class="pagetitle">
    <h1>Utilisateurs</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#" style="text-decoration: none;">Accueil</a></li>
        <li class="breadcrumb-item"><a href="{{route('admin.parametres')}}" style="text-decoration: none;">Paramètres</a></li>
        <li class="breadcrumb-item active">Utilisateurs </li>
      </ol>
    </nav>
  </div> 
@endsection

@section('contenu') 
<section class="section">
    <div class="row">
      <div class="col-lg-12">
<div class="card">
    <div class="card-body">
      <h5 class="card-title">Liste des utilisateurs <a href="{{route('users.create')}}" title="Ajouter"><button style="font-size: 5px;" type="button" class="btn btn-sm btn-outline-primary"><i class="bi bi-plus-circle" aria-hidden="true" style="font-size: 10px;"></i></button></a></h5>
      <!-- Bordered Table -->
      <div class="table-responsive"> 
      <table class="table table-striped table-hover table-bordered data-tables" id="example">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Utilisateur</th> 
            <th scope="col">Contacts</th>
            <th scope="col">Rôle</th>
            {{-- 
            <th scope="col">Pays</th>
          --}}
            <th scope="col">Statut</th>
            <th scope="col">Date créaton</th> 
            <th scope="col">Dernière connexion</th> 
            <th scope="col">Action</th>
          </tr>
        </thead> 
        <tbody>
          @php
              $i = 1;
          @endphp
          @foreach ($users as $item ) 
          <tr>
              <td class="text-center"><b>{{$i++}}</b></td>
              <td>{{ $item->nom }} {{ $item->prenoms }}</td> 
              <td>
                {{ $item->telephone }} <br>
                {{ $item->email }} <br>
                {{ $item->pays_id ? $item->getPays->nom_pays : '' }}
              </td>
              <td>{{ $item->role_id ? $item->getRole->libelle : '' }}</td>
              {{-- 
              <td></td>
            --}}
              <td class="text-center"> 
                  @if ($item->enable) 
                  <span class="badge badge-danger" style="background-color: rgb(107, 77, 78)">ACTIF</span>
                  @else
                  <span class="badge badge-danger" style="background-color: rgb(233, 29, 29)">INACTIF</span>
                  @endif
              </td>
              <td>{{$item->created_at->format("Y-m-d H:i:s")}}</td> 
              <td>{{$item->last_connexion}}</td>
              <td class="text-center">
                
                @if (auth()->user()->getRole->libelle == 'ADMIN')
                <div class="d-flex justify-content-evenly">
                  <a href="{{ route('users.edit',$item->id)}}" title="Modifier"><button type="button" class="btn btn-sm btn-warning"><i class="bi bi-pencil-square" style="color: white" aria-hidden="true"></i></button></a>
                  @if ($item->enable) 
                  <a href="{{route('admin.update-parametre',[$item->id,'users','desactivation'])}}" class="confirmation-desactivation mr-1 ml-1" title="désactivation"><button type="button" class="btn btn-sm btn-dark"><i class="bi bi-eye-slash" aria-hidden="true"></i></button></a>
                  @else
                  <a href="{{route('admin.update-parametre',[$item->id,'users','activation'])}}" class="confirmation-activation mr-1 ml-1" title="activation"><button type="button" class="btn btn-sm" style="background-color: rgb(107, 77, 78); color:#fff"><i class="bi bi-eye" aria-hidden="true"></i></button></a>
                  @endif 
                  
                  <a href="#" data-bs-toggle="modal" data-bs-target="#myModalDelete_{{ $item->id }}"><button type="button" title="Supprimer" class="btn btn-sm btn-danger"><i class="bi bi-trash" style="color: white" aria-hidden="true"></i></button></a>
                </div>
                @endif
                </td>
          </tr> 


          <!-- modal delete user -->
          <div class="modal" id="myModalDelete_{{ $item->id }}">
            <div class="modal-dialog modal-md modal-dialog-centered">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header text-center">
                        <h4 class="modal-title w-100 text-center">Confirmer l'action <i class="bi bi-trash text-danger" style="color: white" aria-hidden="true"></i></h4>
                        <button type="button" class="btn-close"
                            data-bs-dismiss="modal"></button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="row mt-2 mb-2">
                            <div class="col-md-12 text-center font-weight-bold">
                                Voulez-vous vraiment supprimer cet élément ?
                            </div>
                        </div>
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                      <form action="{{ route('users.destroy', $item->id)}}" method="post">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-sm btn-dark" type="button" class="btn btn-secondary" data-bs-dismiss="modal">NON</button>
                        <button class="btn btn-sm btn-danger" type="submit">OUI</button>
                      </form> 
                    </div>

                </div>
            </div>
        </div>
          <!-- end modal delete user -->

          @endforeach
          
      </tbody>
      </table>  
    </div>
      <!-- End Bordered Table -->
  

    </div>
  </div>
</div>
</div>
</section>
 
  @endsection

<!-- jsScript -->
@section('script-js')
<script>
    $(document).ready(function() {  
   // remove menu active
   $("ul").removeClass('show');
      $("ul li a").removeClass('active');
      // active menu 
      $("#parametres").removeClass('collapsed');
      
 // desactivation
 $('a.confirmation-desactivation').confirm({   
    title: "",
    content:   
    "<div style='border-bottom: 1px solid #ddd;' class='text-center'><img width='100px' src='{{ asset('day/img/logo_nyquist-shannon.jpg') }}' alt='logo'></div> <br> "+
    "<div class='text-center'><p class='text-danger'>Désactivation de l'élément ?</p> <span class='text-center'>Cette action est irréversible.</span> </div>",
    type: 'red',
    typeAnimated: true,
    draggable: true,
    dragWindowBorder: false,
    fermer: function () {
        
        }
});

$('a.confirmation-desactivation').confirm({
    buttons: {
        hey: function(){
            location.href = this.$target.attr('href');
        }
    }
});

// activation
$('a.confirmation-activation').confirm({   
    title: "",
    content:  
    "<div style='border-bottom: 1px solid #ddd;' class='text-center'><img width='100px' src='{{ asset('day/img/logo_nyquist-shannon.jpg') }}' alt='logo'></div> <br> "+
    "<div class='text-center'><p class='text-danger'>Activation de l'élément ?</p> <span class='text-center'>Cette action est irréversible.</span> </div>",
    type: 'red',
    typeAnimated: true,
    draggable: true,
    dragWindowBorder: false,
    fermer: function () {
        
        }
});
$('a.confirmation-activation').confirm({
    buttons: {
        hey: function(){
            location.href = this.$target.attr('href');
        }
    }
}); 
     
} );
</script> 
@endsection