@extends('layouts/layoutMaster')

@section('title', 'Permission - Apps')

@section('vendor-style')

@endsection

@section('vendor-script')

@endsection

@section('page-script')
  <script>
    window.onload = function () {
      const queryString = window.location.search;
      const params = new URLSearchParams(queryString);
      const currentTerm = params.get('search') ?? '';
      const currentlength = params.get('length') ?? 10;
      $('#idsearch').val(currentTerm);
      $('#idlength').val(currentlength);
    };
    const input = document.getElementById('idsearch');
    input.addEventListener('keydown', function(event) {
      // Vérifier si la touche appuyée est "Enter"
      if (event.key === 'Enter') {
          loadPage()
      }
    });
    function loadPage(page = 1) {
      const url = "{{ url()->current() }}";
      const term = $('#idsearch').val();
      const length = $('#idlength').val();
      const queryString = '?page=' + page + '&search='+ term + '&length=' + length;
      window.location.href = url + queryString;
    }
  </script>
@endsection

@section('content')
  <section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-11">
              <h4 class="py-1 mb-1">
                <span class="text-muted fw-light"> <a href="/">Accueil</a></span> / <span> <a href="{{route('roles.index')}}">Rôles</a></span> / </span> <span class="breadcrumb-item active"><a href="#">Liste des rôles</a></span>
              </h4>
            </div>
            <div class="col-sm-1">
              <a class="btn btn-primary float-right"
                 href="{{ route('roles.create') }}">
                 <i class="ti ti-plus" title="Ajouter un rôle"></i>
              </a>
          </div>
        </div>
    </div>
  </section>

  <div class="content px-3">

    @include('flash::message')

    <div class="clearfix"></div>

    <!-- Permission Table -->
    <div class="card">
      <div class="card-body table-responsive">
        <div class="row mb-3">
          <div class="col-sm-1">
            <select name="length" class="form-select" id="idlength" onchange="loadPage();">
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="50">50</option>
              <option value="70">70</option>
              <option value="100">100</option>
            </select>
          </div>
          <div class="col-sm-6 offset-sm-5">
            <input type="search" class="form-control" placeholder="Rechercher une permission" name="term" id="idsearch">
          </div>
        </div>
        <table class="table table-sm border-top table-striped table-hover">
          <thead>
            <tr>
              <th>Intitulé</th>
              <th>Description</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            @if ($roles->count() > 0)
              @foreach ($roles as $role)
                <tr>
                  <td>{{ $role->name }}</td>
                  <td>{{ $role->description }}</td>
                  <td>
                    <span class="text-nowrap">
                      <a class="btn btn-sm btn-icon" href="{{ route('roles.show', $role->id) }}"><i class="ti ti-eye"></i></a>
                      <a class="btn btn-sm btn-icon mx-2" href="{{ route('roles.edit', $role->id)}}"><i class="ti ti-edit"></i></a>
                      <button class="btn btn-sm btn-icon btn-danger"><i class="far fa-trash-alt"></i></button>
                    </span>
                  </td>
                </tr>
              @endforeach
            @else
              <tr>
                <td colspan="3" class="text-center">Aucune donnée trouvée.</td>
              </tr>
            @endif
          </tbody>
        </table>
        @if ($roles->count() > 0)
          <nav aria-label="Page navigation" class="mt-3">
            <ul class="pagination justify-content-center">
                {{-- Lien vers la page précédente --}}
                <li class="page-item {{ $page == 1 ? 'disabled' : '' }}">
                    <a class="page-link" href="javascript:void(0);" aria-label="Previous" onclick="loadPage({{ $page - 1 }});">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                {{-- Variables pour la pagination --}}
                @php
                    $start = max($page - 2, 1);
                    $end = min($page + 2, $lastPage);
                @endphp

                {{-- Affichage du lien vers la première page si nécessaire --}}
                @if ($start > 1)
                    <li class="page-item"><a class="page-link" href="javascript:void(0);" onclick="loadPage(1);">1</a></li>
                    @if ($start > 2)
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                    @endif
                @endif

                {{-- Liens vers les pages visibles autour de la page courante --}}
                @for ($i = $start; $i <= $end; $i++)
                    <li class="page-item {{ $i == $page ? 'active' : '' }}">
                        <a class="page-link" href="javascript:void(0);" onclick="loadPage({{ $i }});">{{ $i }}</a>
                    </li>
                @endfor

                {{-- Affichage du lien vers la dernière page si nécessaire --}}
                @if ($end < $lastPage)
                    @if ($end < $lastPage - 1)
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                    @endif
                    <li class="page-item"><a class="page-link" href="javascript:void(0);" onclick="loadPage({{ $lastPage }});">{{ $lastPage }}</a></li>
                @endif

                {{-- Lien vers la page suivante --}}
                <li class="page-item {{ $page == $lastPage ? 'disabled' : '' }}">
                    <a class="page-link" href="javascript:void(0);" aria-label="Next" onclick="loadPage({{ $page + 1 }});">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
          </nav>
        @endif
      </div>
    </div>
    <!--/ Permission Table -->
  </div>
@endsection