<div>
    <livewire:components.clean-header title="Editar rol {{ $role->fullname ?? $role->name }}" />

    <div class="w-full px-20 pt-16 pb-4">
        <div class="mx-auto max-w-3xl sm:px-6 lg:px-8">

            @if (session()->has('success'))
                <div class="mb-4 rounded bg-green-100 px-4 py-3 text-green-700">
                    {{ session('success') }}
                </div>
            @endif

            @if (session()->has('error'))
                <div class="mb-4 rounded bg-red-100 px-4 py-3 text-red-700">
                    {{ session('error') }}
                </div>
            @endif

            <div
                class="w-full flex flex-wrap items-center justify-between mt-8 rounded-lg bg-white border border-gray-200 px-8 py-4">
                <div class="w-full flex items-center justify-center flex-col">
                    <h1 class="text-4xl font-bold">Editar rol</h1>
                    <p class="text-gray-500 text-sm text-center">
                        Edita los datos del rol <strong>{{ $role->fullname ?? $role->name }}</strong>.
                    </p>
                </div>
                <form wire:submit="update" class="w-full flex flex-col gap-6 mt-8">
                    {{-- Nombre (Alias) --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Alias</label>
                        <input type="text" wire:model="name"
                            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('name') border-red-500 @enderror"
                            required>
                        @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Nombre completo --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Nombre completo</label>
                        <input type="text" wire:model="fullname"
                            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('fullname') border-red-500 @enderror"
                            required>
                        @error('fullname')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Descripción --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Descripción</label>
                        <textarea wire:model="description" rows="4"
                            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('description') border-red-500 @enderror"></textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Permisos --}}
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <label class="block text-sm font-medium text-gray-700">Permisos asociados</label>
                            <div class="w-1/3">
                                <input type="text"
                                       wire:model.live.debounce.300ms="permissionSearch"
                                       placeholder="Buscar permisos..."
                                       class="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                        </div>

                        <div class="overflow-hidden bg-white w-full border border-gray-300 rounded-lg">
                            <table class="w-full">
                                <thead>
                                    <tr class="bg-gray-50 border-b border-gray-200">
                                        <th class="text-left px-4 py-3 text-xs font-medium text-gray-600 w-12"></th>
                                        <th class="text-left px-4 py-3 text-xs font-medium text-gray-600">Permiso</th>
                                        <th class="text-left px-4 py-3 text-xs font-medium text-gray-600">Descripción</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $permissionsGrouped = $availablePermissions->groupBy('model');
                                    @endphp

                                    @foreach($permissionsGrouped as $model => $group)
                                        {{-- Separador de agrupación --}}
                                        <tr class="bg-gray-100 border-b border-gray-200">
                                            <td colspan="3" class="px-4 py-2">
                                                <span class="text-sm font-semibold text-gray-700">{{ ucfirst($model) }}</span>
                                            </td>
                                        </tr>

                                        {{-- Permisos del grupo --}}
                                        @foreach($group as $perm)
                                            <tr class="hover:bg-gray-50 border-b border-gray-100">
                                                <td class="px-4 py-3">
                                                    <input type="checkbox"
                                                           wire:model="permissions"
                                                           value="{{ $perm->name }}"
                                                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                                </td>
                                                <td class="px-4 py-3">
                                                    <label class="text-sm font-medium text-gray-700 cursor-pointer">
                                                        {{ $perm->name }}
                                                    </label>
                                                </td>
                                                <td class="px-4 py-3">
                                                    <span class="text-sm text-gray-600">
                                                        {{ $perm->description ?? '—' }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Botones --}}
                    <div class="w-full flex items-center justify-end mt-8">
                        <a href="{{ route('configurations.roles.index') }}"
                            class="bg-white hover:bg-gray-100 px-4 py-2">Cancelar</a>
                        <button type="submit" wire:loading.attr="disabled"
                            class="bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg ml-4">
                            <span wire:loading.remove wire:target="update">Actualizar rol</span>
                            <span wire:loading wire:target="update">Guardando...</span>
                        </button>
                </form>
            </div>
    </div>
</div>
