@extends('layouts.app')

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

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

  <div class="card">
    <div class="card-header"><h5>Create User</h5></div>

    <form action="{{ route('users.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">Email</label>
          <input name="email" type="email" value="{{ old('email') }}" required class="form-control" />
        </div>

        <div class="mb-3">
          <label class="form-label">Password</label>
          <input name="password" type="password" required class="form-control" />
        </div>

        <div class="mb-3">
          <label class="form-label">Confirm Password</label>
          <input name="password_confirmation" type="password" required class="form-control" />
        </div>

        <div class="mb-3">
          <label class="form-label">Roles</label>
          <div class="row">
            @foreach($roles as $role)
              <div class="col-12 mb-3">
                <div class="form-check">
                  <input class="form-check-input role-checkbox" type="checkbox" name="roles[]" value="{{ $role->id }}" id="role_{{ $role->id }}" data-role-id="{{ $role->id }}">
                  <label class="form-check-label fw-bold" for="role_{{ $role->id }}">
                    {{ $role->name }} <span class="text-muted fw-normal">(Level {{ $role->level }})</span>
                  </label>
                </div>
                
                {{-- Permissions Container (Hidden by default) --}}
                <div class="permissions-container mt-2 ms-4 p-3 bg-light border rounded" id="permissions_for_role_{{ $role->id }}" style="display: none;">
                  <h6 class="text-muted mb-2">Capabilities granted by this role:</h6>
                  @if($role->permissions->count())
                    @php
                      $groupedPermissions = $role->permissions->groupBy(function($perm) {
                          $parts = explode(' ', $perm->name);
                          return count($parts) > 1 ? end($parts) : 'Other';
                      });
                    @endphp
                    <div class="d-flex flex-column gap-2">
                      @foreach($groupedPermissions as $entity => $perms)
                        <div class="d-flex align-items-start">
                          <strong class="text-capitalize small mt-1" style="width: 80px; flex-shrink: 0;">{{ $entity }}:</strong>
                          <div class="d-flex flex-wrap gap-2">
                            @foreach($perms as $perm)
                              <div class="form-check form-check-inline m-0">
                                <input class="form-check-input" type="checkbox" checked disabled>
                                <label class="form-check-label small text-capitalize opacity-75">
                                  {{ explode(' ', $perm->name)[0] }}
                                </label>
                              </div>
                            @endforeach
                          </div>
                        </div>
                      @endforeach
                    </div>
                  @else
                    <span class="text-muted small italic">No specific permissions assigned to this role.</span>
                  @endif
                </div>
              </div>
            @endforeach
          </div>
        </div>

        <script>
          document.addEventListener('DOMContentLoaded', function() {
            const roleCheckboxes = document.querySelectorAll('.role-checkbox');
            
            roleCheckboxes.forEach(checkbox => {
              // Initial state check
              togglePermissions(checkbox);
              
              // Change listener
              checkbox.addEventListener('change', function() {
                togglePermissions(this);
              });
            });

            function togglePermissions(checkbox) {
              const roleId = checkbox.getAttribute('data-role-id');
              const container = document.getElementById(`permissions_for_role_${roleId}`);
              if (container) {
                container.style.display = checkbox.checked ? 'block' : 'none';
              }
            }
          });
        </script>

      </div>

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