@extends('layouts.app')

@section('content')
@php
  $oldRoles = old('roles', $userRoleNames ?? []);
  $oldPerms = old('permissions', $userPermNames ?? []);
@endphp

<div class="max-w-6xl mx-auto">
  <!-- Header -->
  <div class="mb-6 flex items-center justify-between">
    <h1 class="text-2xl font-semibold text-gray-800">
      Manage: {{ $user->name }} <span class="text-gray-400 text-base">({{ $user->email }})</span>
    </h1>
    <a href="{{ route('admin.users.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 users
    </a>
  </div>

  @include('admin.partials.errors')
  @include('admin.partials.flash')

  <form method="POST" action="{{ route('admin.users.update', $user) }}">
    @csrf @method('PUT')

    <div class="grid grid-cols-1 gap-6">
      <!-- User summary -->
      <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-100">
        <div class="flex items-center gap-4">
          <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-lg font-semibold text-indigo-700">
            {{ strtoupper(mb_substr($user->name, 0, 1)) }}
          </div>
          <div>
            <div class="text-base font-medium text-gray-900">{{ $user->name }}</div>
            <div class="text-sm text-gray-600">{{ $user->email }}</div>
          </div>
        </div>
      </div>

      <!-- Roles -->
      <div
        x-data="{
          q: '',
          toggleAll(e){ $root.querySelectorAll('.role-chk').forEach(c => c.checked = e.target.checked) },
          clearAll(){ $root.querySelectorAll('.role-chk').forEach(c => c.checked = false) },
          selectedCount(){ return Array.from($root.querySelectorAll('.role-chk')).filter(c=>c.checked).length }
        }"
        class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-100"
      >
        <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div class="flex items-center gap-2">
            <span class="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
              Roles
            </span>
            <span class="text-xs text-gray-500" x-text="selectedCount() + ' selected'"></span>
          </div>

          <div class="flex items-center gap-3 sm:ml-auto">
            <div class="relative">
              <input x-model="q" type="text" placeholder="Search roles…"
                     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>
            <button type="button" @click="clearAll"
                    class="text-sm text-gray-600 hover:text-gray-900">Clear</button>
          </div>
        </div>

        <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">
            @forelse($roles as $r)
              @php $name = (string) $r->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="roles[]"
                  value="{{ $name }}"
                  class="role-chk rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                  {{ in_array($name, $oldRoles) ? 'checked' : '' }}
                >
                <span class="text-gray-800">{{ $name }}</span>
              </label>
            @empty
              <div class="col-span-full text-sm text-gray-500">No roles defined.</div>
            @endforelse
          </div>
        </div>
      </div>

      <!-- Direct Permissions -->
      <div
        x-data="{
          q: '',
          toggleAll(e){ $root.querySelectorAll('.perm-chk').forEach(c => c.checked = e.target.checked) },
          clearAll(){ $root.querySelectorAll('.perm-chk').forEach(c => c.checked = false) },
          selectedCount(){ return Array.from($root.querySelectorAll('.perm-chk')).filter(c=>c.checked).length }
        }"
        class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-100"
      >
        <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div class="flex items-center gap-2">
            <span class="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
              Direct Permissions
            </span>
            <span class="text-xs text-gray-500" x-text="selectedCount() + ' selected'"></span>
          </div>

        <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>
          <button type="button" @click="clearAll"
                  class="text-sm text-gray-600 hover:text-gray-900">Clear</button>
        </div>
        </div>

        <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">
            @forelse($perms 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>
            @empty
              <div class="col-span-full text-sm text-gray-500">No permissions defined.</div>
            @endforelse
          </div>
        </div>
      </div>

      <!-- Actions -->
      <div class="flex items-center justify-end gap-3">
        <a href="{{ route('admin.users.index') }}"
           class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
          Back
        </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
        </button>
      </div>
    </div>
  </form>
</div>
@endsection