{{-- resources/views/livewire/perfiles/index.blade.php --}}
<div>
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;">
        <div>
            <div class="page-title">🔐 Perfiles de acceso</div>
            <div class="page-sub">Perfiles, permisos granulares y gestión de usuarios</div>
        </div>
        <div style="display:flex;gap:8px;">
            <button wire:click="$set('vista','perfiles')"
                    class="{{ $vista === 'perfiles' ? 'btn-blue' : 'btn-plain' }}"
                    style="font-size:12px;padding:8px 16px;">
                🔐 Perfiles
            </button>
            <button wire:click="$set('vista','usuarios')"
                    class="{{ $vista === 'usuarios' ? 'btn-blue' : 'btn-plain' }}"
                    style="font-size:12px;padding:8px 16px;">
                👤 Usuarios
            </button>
        </div>
    </div>

    @if($mensaje_exito)
    <div class="alert alert-green" x-data x-init="setTimeout(() => $wire.set('mensaje_exito',''), 5000)">
        ✅ {{ $mensaje_exito }}
    </div>
    @endif
    @if($mensaje_error)
    <div class="alert alert-red" x-data x-init="setTimeout(() => $wire.set('mensaje_error',''), 5000)">
        ❌ {{ $mensaje_error }}
    </div>
    @endif

    {{-- ── VISTA PERFILES ──────────────────────── --}}
    @if($vista === 'perfiles')
    <div style="display:grid;grid-template-columns:280px 1fr;gap:16px;">

        {{-- Lista de perfiles --}}
        <div>
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
                <div class="group-label">Perfiles</div>
                <button wire:click="abrirNuevoPerfil"
                        class="btn-plain" style="font-size:11px;padding:5px 10px;">
                    ➕ Nuevo
                </button>
            </div>
            <div style="display:flex;flex-direction:column;gap:8px;">
                @foreach($perfiles as $p)
                <div wire:click="seleccionarPerfil({{ $p->id }})"
                     style="background:{{ $perfil_id == $p->id ? 'white' : 'rgba(255,255,255,.7)' }};
                            border-radius:14px;padding:12px 16px;cursor:pointer;
                            box-shadow:{{ $perfil_id == $p->id ? 'var(--shadow)' : 'var(--shadow-sm)' }};
                            border-left:3px solid {{ $perfil_id == $p->id ? 'var(--blue)' : 'transparent' }};">
                    <div style="font-size:13px;font-weight:600;">{{ $p->nombre }}</div>
                    <div style="font-size:11px;color:var(--label2);margin-top:2px;">
                        {{ $p->usuarios_count }} usuario(s)
                        @if($p->es_sistema) · Sistema @endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Editor de permisos --}}
        <div>
            @if($perfil_activo)
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
                <div class="group-label">Permisos de «{{ $perfil_activo->nombre }}»</div>
                <button wire:click="guardarPermisos" class="btn-blue" style="font-size:12px;padding:8px 16px;">
                    💾 Guardar permisos
                </button>
            </div>

            <div class="inset-card">
                <div style="overflow-x:auto;">
                    <table style="width:100%;border-collapse:collapse;font-size:11px;">
                        <thead>
                            <tr>
                                <th style="padding:10px 14px;text-align:left;color:var(--label2);
                                           font-size:10px;text-transform:uppercase;letter-spacing:.4px;
                                           border-bottom:.5px solid var(--separator);">Módulo</th>
                                @foreach($acciones as $accion)
                                <th style="padding:10px 10px;text-align:center;color:var(--label2);
                                           font-size:10px;text-transform:uppercase;letter-spacing:.4px;
                                           border-bottom:.5px solid var(--separator);">{{ ucfirst($accion) }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($modulos as $modulo => $label)
                            <tr style="border-bottom:.5px solid var(--separator);">
                                <td style="padding:10px 14px;font-weight:500;font-size:12px;">
                                    {{ $label }}
                                </td>
                                @foreach($acciones as $accion)
                                <td style="text-align:center;padding:8px 10px;">
                                    @php $nivel = $permisos[$modulo][$accion] ?? 'denegado'; @endphp
                                    <select wire:model.live="permisos.{{ $modulo }}.{{ $accion }}"
                                            style="font-size:10px;padding:4px 6px;border:none;
                                                   border-radius:6px;cursor:pointer;font-family:'Ubuntu',sans-serif;
                                                   background:{{ $nivel === 'permitido' ? 'rgba(52,199,89,.1)' : ($nivel === 'con_aprobacion' ? 'rgba(255,149,0,.1)' : 'rgba(60,60,67,.06)') }};
                                                   color:{{ $nivel === 'permitido' ? 'var(--green2)' : ($nivel === 'con_aprobacion' ? '#804A00' : 'var(--label2)') }};
                                                   font-weight:600;outline:none;">
                                        <option value="denegado">✕</option>
                                        <option value="permitido">✓</option>
                                        <option value="con_aprobacion">⚠</option>
                                    </select>
                                </td>
                                @endforeach
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div style="padding:12px 16px;font-size:11px;color:var(--label2);
                            border-top:.5px solid var(--separator);">
                    ✓ = Permitido · ✕ = Denegado · ⚠ = Requiere aprobación del gerente
                </div>
            </div>
            @else
            <div style="background:#fff;border-radius:16px;padding:40px;text-align:center;
                        box-shadow:var(--shadow);color:var(--label2);">
                Seleccione un perfil de la lista para editar sus permisos
            </div>
            @endif
        </div>
    </div>
    @endif

    {{-- ── VISTA USUARIOS ──────────────────────── --}}
    @if($vista === 'usuarios')
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <div class="group-label">Usuarios de la empresa ({{ $usuarios->count() }})</div>
        <button wire:click="abrirNuevoUsuario" class="btn-blue" style="font-size:12px;padding:8px 16px;">
            ➕ Nuevo usuario
        </button>
    </div>

    <div class="inset-card">
        <table class="ios-table">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>Perfil</th>
                    <th>Último acceso</th>
                    <th>Estado</th>
                    <th style="text-align:center;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($usuarios as $u)
                <tr wire:key="usr-{{ $u->id }}">
                    <td class="td-bold" style="font-size:12px;">{{ $u->nombre }}</td>
                    <td style="font-size:12px;color:var(--label2);">{{ $u->email }}</td>
                    <td>
                        <span class="chip ch-blue">{{ $u->perfil?->nombre }}</span>
                    </td>
                    <td style="font-size:11px;color:var(--label2);">
                        {{ $u->ultimo_acceso?->diffForHumans() ?? 'Nunca' }}
                    </td>
                    <td>
                        <span class="chip {{ $u->activo ? 'ch-green' : 'ch-red' }}">
                            {{ $u->activo ? '✓ Activo' : '✕ Inactivo' }}
                        </span>
                    </td>
                    <td style="text-align:center;">
                        <div style="display:flex;gap:6px;justify-content:center;">
                            <button wire:click="editarUsuario({{ $u->id }})"
                                    class="btn-plain" style="font-size:11px;padding:5px 10px;">
                                ✏️
                            </button>
                            @if($u->id !== auth()->id())
                            <button wire:click="toggleUsuario({{ $u->id }})"
                                    class="btn-plain" style="font-size:11px;padding:5px 10px;"
                                    title="{{ $u->activo ? 'Desactivar' : 'Activar' }}">
                                {{ $u->activo ? '🔴' : '🟢' }}
                            </button>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif

    {{-- ── MODAL PERFIL ─────────────────────────── --}}
    @if($mostrar_perfil)
    <div style="position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;
                display:flex;align-items:center;justify-content:center;"
         wire:click.self="$set('mostrar_perfil', false)">
        <div style="background:#fff;border-radius:22px;padding:28px;width:380px;
                    box-shadow:0 20px 60px rgba(0,0,0,.2);">
            <div style="font-size:17px;font-weight:700;margin-bottom:20px;">
                {{ $perfil_id ? 'Editar perfil' : 'Nuevo perfil' }}
            </div>
            @if($perfil_error)
            <div class="alert alert-red" style="margin-bottom:14px;">❌ {{ $perfil_error }}</div>
            @endif
            <div class="field" style="margin-bottom:14px;">
                <label>Nombre del perfil *</label>
                <input type="text" wire:model="perfil_nombre" placeholder="Ej: Cajero, Contador…" />
                @error('perfil_nombre')<div style="font-size:11px;color:var(--red);margin-top:3px;">{{ $message }}</div>@enderror
            </div>
            <div class="field" style="margin-bottom:20px;">
                <label>Descripción</label>
                <input type="text" wire:model="perfil_desc" placeholder="Breve descripción del perfil" />
            </div>
            <div style="display:flex;gap:10px;">
                <button wire:click="$set('mostrar_perfil', false)" class="btn-plain" style="flex:1;justify-content:center;">Cancelar</button>
                <button wire:click="guardarPerfil" wire:loading.attr="disabled" class="btn-blue" style="flex:1;justify-content:center;">
                    <span wire:loading.remove>💾 Guardar</span>
                    <span wire:loading>Guardando…</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    {{-- ── MODAL USUARIO ────────────────────────── --}}
    @if($mostrar_usuario)
    <div style="position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;
                display:flex;align-items:center;justify-content:center;"
         wire:click.self="$set('mostrar_usuario', false)">
        <div style="background:#fff;border-radius:22px;padding:28px;width:420px;
                    box-shadow:0 20px 60px rgba(0,0,0,.2);">
            <div style="font-size:17px;font-weight:700;margin-bottom:20px;">
                {{ $usuario_edit_id ? 'Editar usuario' : 'Nuevo usuario' }}
            </div>
            @if($usuario_error)
            <div class="alert alert-red" style="margin-bottom:14px;">❌ {{ $usuario_error }}</div>
            @endif
            <div class="field" style="margin-bottom:12px;">
                <label>Nombre completo *</label>
                <input type="text" wire:model="usuario_nombre" />
                @error('usuario_nombre')<div style="font-size:11px;color:var(--red);margin-top:3px;">{{ $message }}</div>@enderror
            </div>
            <div class="field" style="margin-bottom:12px;">
                <label>Correo electrónico *</label>
                <input type="email" wire:model="usuario_email" />
                @error('usuario_email')<div style="font-size:11px;color:var(--red);margin-top:3px;">{{ $message }}</div>@enderror
            </div>
            <div class="field" style="margin-bottom:12px;">
                <label>Contraseña {{ $usuario_edit_id ? '(dejar vacío para no cambiar)' : '*' }}</label>
                <input type="password" wire:model="usuario_password" placeholder="Mínimo 8 caracteres" />
                @error('usuario_password')<div style="font-size:11px;color:var(--red);margin-top:3px;">{{ $message }}</div>@enderror
            </div>
            <div class="field" style="margin-bottom:12px;">
                <label>Perfil de acceso *</label>
                <select wire:model="usuario_perfil_id">
                    <option value="">Seleccionar…</option>
                    @foreach($perfiles as $p)
                    <option value="{{ $p->id }}">{{ $p->nombre }}</option>
                    @endforeach
                </select>
                @error('usuario_perfil_id')<div style="font-size:11px;color:var(--red);margin-top:3px;">{{ $message }}</div>@enderror
            </div>
            <label style="display:flex;align-items:center;gap:8px;margin-bottom:20px;cursor:pointer;font-size:13px;">
                <input type="checkbox" wire:model="usuario_activo"
                       style="width:16px;height:16px;accent-color:var(--blue);" />
                Usuario activo
            </label>
            <div style="display:flex;gap:10px;">
                <button wire:click="$set('mostrar_usuario', false)" class="btn-plain" style="flex:1;justify-content:center;">Cancelar</button>
                <button wire:click="guardarUsuario" wire:loading.attr="disabled" class="btn-blue" style="flex:1;justify-content:center;">
                    <span wire:loading.remove>💾 Guardar</span>
                    <span wire:loading>Guardando…</span>
                </button>
            </div>
        </div>
    </div>
    @endif

</div>