@extends('layouts/layoutMaster')

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

@section('vendor-style')
{{-- @vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
  'resources/assets/vendor/libs/@form-validation/form-validation.scss',
]) --}}
@endsection

@section('vendor-script')
{{-- @vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/@form-validation/popular.js',
  'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
  'resources/assets/vendor/libs/@form-validation/auto-focus.js',
  ]) --}}
@endsection

@section('page-script')
{{-- @vite([
  'resources/assets/js/app-access-permission.js',
  'resources/assets/js/modal-add-permission.js',
  'resources/assets/js/modal-edit-permission.js',
  ]) --}}
  <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;
    }

    function showItem(target) {
      const permission = JSON.parse(target.dataset.p_obj);
      console.log("Called with [" + permission.name + "]");
      // const editModal = new bootstrap.Modal(document.getElementById('editPermissionModal'), {backdrop: 'static', keyboard: false});
      const showModal = new bootstrap.Modal(document.getElementById('showPermissionModal'), {backdrop: 'static', keyboard: false});
      document.getElementById('permissiontd').textContent = ': ' + permission.name;
      document.getElementById('dctd').textContent = ': ' + permission.description_court;
      document.getElementById('dltd').textContent = ': ' + permission.description_long;
      document.getElementById('gntd').textContent = ': ' + permission.guard_name;
      showModal.show();
    }

    function editItem(target) {
      const permission = JSON.parse(target.dataset.p_obj);
      const form = document.getElementById('editPermissionForm');
      form.action = "{{ route('permissions.update', ':id')}}".replace(':id', permission.id);
      console.log("Called with [" + permission.name + "]");
      const editModal = new bootstrap.Modal(document.getElementById('editPermissionModal'), {backdrop: 'static', keyboard: false});
      document.getElementById('descriptionCourt').value = permission.description_court;
      document.getElementById('descriptionLongue').value = permission.description_long;
      editModal.show();
    }
  </script>
@endsection

@section('content')
  <section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
              <h4 class="py-1 mb-1">
                <span class="text-muted fw-light"> <a href="/">Accueil</a></span> / <span> <a href="{{route('permissions.index')}}">Permissions</a></span> / </span> <span class="breadcrumb-item active"><a href="#">Liste des permissions</a></span>
              </h4>
            </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>Ressource</th>
              <th>Permission</th>
              <th>Description courte</th>
              <th>Description longue</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            @if($permissions->count() > 0)
              @foreach ($permissions as $permission)
                <tr>
                  <td>{{ $permission->ressource->nom }}</td>
                  <td>{{ $permission->name }}</td>
                  <td>{{ $permission->description_court }}</td>
                  <td>{{ $permission->description_long }}</td>
                  <td>
                    <span class="text-nowrap">
                      <button class="btn btn-sm btn-icon me-2" data-p_obj="{{ $permission }}" onclick="showItem(this)"><i class="ti ti-eye"></i></button>
                      <button class="btn btn-sm btn-icon" data-p_obj="{{ $permission }}" onclick="editItem(this)"><i class="ti ti-edit"></i></button>
                    </span>
                  </td>
                </tr>
              @endforeach
            @else
              <tr>
                <td class="text-center" colspan="4">Aucune donnée trouvée.</td>
              </tr>
            @endif
          </tbody>
        </table>
        @if ($permissions->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>

<!-- Modal -->
@include('security.permissions.modal-show-permission')
@include('security.permissions.modal-edit-permission')
<!-- /Modal -->
@endsection