@extends('layouts.app')

@section('title', 'Create Role')

@section('content')
<div class="container-fluid">
  @include('partials._flash')

  <div class="card">
    <div class="card-header">
      <h5 class="card-title mb-0">Create Role</h5>
    </div>

    <form action="{{ route('admin.roles.store') }}" method="POST">
      @csrf
      <div class="card-body">
        <div class="mb-3">
          <label class="form-label">Name</label>
          <input name="name" value="{{ old('name') }}" required class="form-control" />
        </div>

        <div class="mb-3">
          <label class="form-label">Priority/Rank</label>
          <input name="level" type="number" min="{{ $minLevelAllowed }}" value="{{ old('level', $minLevelAllowed) }}" required class="form-control" />
          <small class="text-muted d-block">Higher number = Lower priority. Minimum allowed: {{ $minLevelAllowed }}</small>
        </div>

        <div class="mb-3">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <label class="form-label fw-bold mb-0">Permissions</label>
            <div class="form-check">
              <input type="checkbox" id="select-all" class="form-check-input">
              <label class="form-check-label" for="select-all">Select All</label>
            </div>
          </div>

          <div class="table-responsive">
            <table class="table table-sm table-hover align-middle">
              <thead class="table-light">
                <tr>
                  <th style="width: 200px;">Entity</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                @foreach($permissions as $entity => $entityPermissions)
                <tr>
                  <td>
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input group-checkbox" id="group_{{ $entity }}">
                      <label class="form-check-label fw-semibold text-capitalize" for="group_{{ $entity }}">
                        {{ $entity }}
                      </label>
                    </div>
                  </td>
                  <td>
                    <div class="d-flex flex-wrap gap-3">
                      @foreach($entityPermissions as $permission)
                      <div class="form-check">
                        <input
                          type="checkbox"
                          name="permissions[]"
                          value="{{ $permission->id }}"
                          class="form-check-input permission-checkbox"
                          data-entity="{{ $entity }}"
                          id="perm_{{ $permission->id }}" />
                        <label class="form-check-label text-capitalize" for="perm_{{ $permission->id }}">
                          {{ explode(' ', $permission->name)[0] }}
                        </label>
                      </div>
                      @endforeach
                    </div>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>

        <script>
          document.addEventListener('DOMContentLoaded', function() {
            const selectAll = document.getElementById('select-all');
            const groupCheckboxes = document.querySelectorAll('.group-checkbox');
            const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');

            // Select All
            selectAll.addEventListener('change', function() {
              const isChecked = this.checked;
              permissionCheckboxes.forEach(cb => cb.checked = isChecked);
              groupCheckboxes.forEach(cb => cb.checked = isChecked);
            });

            // Group Select
            groupCheckboxes.forEach(groupCb => {
              groupCb.addEventListener('change', function() {
                const entity = this.id.replace('group_', '');
                const isChecked = this.checked;
                document.querySelectorAll(`.permission-checkbox[data-entity="${entity}"]`)
                  .forEach(cb => cb.checked = isChecked);
                updateSelectAll();
              });
            });

            // Individual Permission Select
            permissionCheckboxes.forEach(permCb => {
              permCb.addEventListener('change', function() {
                const entity = this.getAttribute('data-entity');
                updateGroupCheckbox(entity);
                updateSelectAll();
              });
            });

            function updateGroupCheckbox(entity) {
              const groupCb = document.getElementById(`group_${entity}`);
              const entityPerms = document.querySelectorAll(`.permission-checkbox[data-entity="${entity}"]`);
              const checkedEntityPerms = document.querySelectorAll(`.permission-checkbox[data-entity="${entity}"]:checked`);

              groupCb.checked = entityPerms.length === checkedEntityPerms.length;
              groupCb.indeterminate = checkedEntityPerms.length > 0 && checkedEntityPerms.length < entityPerms.length;
            }

            function updateSelectAll() {
              const checkedPerms = document.querySelectorAll('.permission-checkbox:checked');
              selectAll.checked = checkedPerms.length === permissionCheckboxes.length;
              selectAll.indeterminate = checkedPerms.length > 0 && checkedPerms.length < permissionCheckboxes.length;
            }
          });
        </script>

      </div>

      <div class="card-footer text-end">
        <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary">Cancel</a>
        <button class="btn btn-primary">Create</button>
      </div>
    </form>
  </div>
</div>
@endsection