@extends('layouts.app')

@section('content')
<div class="max-w-5xl mx-auto">
  <!-- Page header -->
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-semibold text-gray-800">Create Role</h1>
    <a href="{{ route('admin.roles.index') }}"
      class="inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">
      ← Back to roles
    </a>
  </div>

  <!-- Validation errors -->
  @if($errors->any())
  <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
    <div class="font-medium">Please fix the following:</div>
    <ul class="mt-2 list-inside list-disc space-y-1">
      @foreach($errors->all() as $e)
      <li>{{ $e }}</li>
      @endforeach
    </ul>
  </div>
  @endif

  <form method="POST" action="{{ route('admin.roles.store') }}">
    @csrf

    <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-100">
      <!-- Role name -->
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-700">Role name</label>
        <input
          name="name"
          value="{{ old('name') }}"
          class="mt-1 w-full rounded-lg border-gray-300 text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
          placeholder="e.g. Manager"
          required>
      </div>

      <!-- Permissions -->
      <div
        x-data="{
          q: '',
          toggleAll(e){ document.querySelectorAll('.perm-chk').forEach(c => c.checked = e.target.checked) }
        }"
        class="space-y-3">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <label class="block text-sm font-medium text-gray-700">Permissions</label>

          <!-- Search + Select all -->
          <div class="flex items-center gap-3 sm:ml-auto">
            <div class="relative">
              <input x-model="q" type="text" placeholder="Search permissions…"
                class="w-64 rounded-lg border-gray-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
              <svg class="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z" />
              </svg>
            </div>

            <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-gray-700">
              <input type="checkbox" @change="toggleAll" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
              <span>Select all</span>
            </label>
          </div>
        </div>

        <!-- Grid of permissions -->
        <div class="max-h-80 overflow-auto rounded-lg border p-3">
          <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
            @php $oldPerms = old('permissions', []); @endphp
            @foreach($permissions as $p)
            @php $name = (string) $p->name; @endphp
            <label
              class="flex items-center gap-2 rounded-md p-2 text-sm hover:bg-gray-50"
              x-show="'{{ strtolower($name) }}'.includes(q.toLowerCase())">
              <input
                type="checkbox"
                name="permissions[]"
                value="{{ $name }}"
                class="perm-chk rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                {{ in_array($name, $oldPerms) ? 'checked' : '' }}>
              <span class="text-gray-800">{{ $name }}</span>
            </label>
            @endforeach
          </div>
        </div>
      </div>

      <!-- Actions -->
      <div class="mt-6 flex items-center justify-end gap-3">
        <a href="{{ route('admin.roles.index') }}"
          class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
          Cancel
        </a>
        <button type="submit"
          class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1">
          Save Role
        </button>
      </div>
    </div>
  </form>
</div>
@endsection