@extends('content.dashboard.dashboards-analytics')

@section('page-script')
  <script>
     // Select All checkbox click
    const selectAll = document.querySelector('#selectAll'),
    checkboxList = document.querySelectorAll('[type="checkbox"]');
    checkboxLabel = document.querySelector('[for="selectAll"]');
    selectAll.addEventListener('change', t => {
      checkboxLabel.innerHTML = t.target.checked ? 'Décocher tout' : 'Cocher tout';
      checkboxList.forEach(e => {
        e.checked = t.target.checked;
      });
    });
  </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('roles.index')}}">Roles</a></span> / </span> <span class="breadcrumb-item active"><a href="#">Créer un rôle</a></span>
            </h4>
          </div>
      </div>
  </div>
</section>
<!-- Role cards -->
<div class="content px-3">
  <!-- Role Table -->
  <div class="card">
    <!-- Add role form -->
    <form action="{{route('roles.store')}}" method="POST">
      @csrf
      <div class="card-body">
        <div class="row">
          <div class="form-floating col-6">
            <input type="text" id="modalRoleName" name="role_name" class="form-control" placeholder="Saisir le nom du rôle :" />
            <label for="modalRoleName">Nom du role</label>
          </div>
          <div class="form-floating col-6">
            <textarea type="text" id="descriptionTextarea" name="role_description" class="form-control" placeholder="Saisir la description du rôle :"></textarea>
            <label for="descriptionTextarea">Description du rôle</label>
          </div>
          <div class="col-12 mt-3">
            <h5>Cocher les permissions du rôle</h5>
            <!-- Permission table -->
            <div class="table-responsive">
              <table class="table table-flush-spacing">
                <tbody>
                  <tr>
                    <td class="text-nowrap fw-medium">Administrateur <i class="ti ti-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Permet un accès à tout le systeme"></i></td>
                    <td>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="selectAll" />
                        <label class="form-check-label" for="selectAll">
                          Cocher tout
                        </label>
                      </div>
                    </td>
                  </tr>
                  @isset($ressources)
                      @foreach ($ressources as $ressource)
                      <tr>
                        <td class="text-nowrap fw-medium">{{ $ressource->nom }}</td>
                        <td>
                          @if (count($ressource->permissions) > 0)
                          <div class="d-flex">
                            @foreach ($ressource->permissions as $permission)
                            <div class="form-check me-3 me-lg-5">
                              <input class="form-check-input" type="checkbox" id="{{'idpermission'. $permission->id}}" name="permission[]" value="{{$permission->name}}" />
                              <label class="form-check-label" for="{{'idpermission'. $permission->id}}">
                                {{ $permission->description_court }}
                              </label>
                            </div>
                            @endforeach
                          </div>
                          @endif
                        </td>
                      </tr>
                      @endforeach
                  @endisset
                </tbody>
              </table>
            </div>
            <!-- Permission table -->
          </div>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-end">
        <i class="btn btn-primary waves-effect waves-light waves-input-wrapper" style="color:rgb(255, 255, 255);background:rgba(0, 0, 0, 0)">
          <input class="waves-button-input" type="submit" value="Save" style="background-color:rgba(0,0,0,0);">
        </i>
        <a href="{{route('roles.index')}}" class="btn btn-default">Cancel</a>
      </div>
    </form>
    <!--/ Add role form -->
  </div>
  <!--/ Role Table -->
</div>
<!--/ Role cards -->
@endsection