@extends('layouts.panel')

@section('title', 'Gestión de Gerentes - Piter Professional')

@section('content')
@php
    $user = Auth::guard('admin')->user() ?? Auth::user();
    
    // --- LÓGICA DE TEMA DINÁMICO (Copiada de Navigation para consistencia) ---
    $convertColor = function($color) {
        if (empty($color)) return null;
        if (str_starts_with($color, '#')) return $color;
        if (str_starts_with($color, '0x')) return '#' . substr($color, -6);
        return $color;
    };

    $getContrastColor = function($hex) {
         if(!$hex) return '#ffffff';
         $hex = str_replace('#', '', $hex);
         if(strlen($hex) == 3) $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
         $r = hexdec(substr($hex, 0, 2));
         $g = hexdec(substr($hex, 2, 2));
         $b = hexdec(substr($hex, 4, 2));
         $yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
         return ($yiq >= 128) ? '#0f172a' : '#ffffff';
    };

    // Preferencias del Usuario (Mapping Corregido)
    // color_preferido -> Panel Style (Obsidian/Blue/Red)
    // color_fondo_preferido -> Ambiente (Luminoso/Nocturno)
    $panelColor = $convertColor($user->color_preferido ?? null) ?? '#020617'; 
    $bgColor = $convertColor($user->color_fondo_preferido ?? null);
    
    // Default si no hay ambiente definido
    if (!$bgColor) $bgColor = '#f8fafc'; // Default Light

    // Determinar si el FONDO (Ambiente) es oscuro
    $textColor = $getContrastColor($bgColor);
    $isDark = ($textColor === '#ffffff');

    // Paleta Dinámica
    $bgPage = $bgColor; 

    // Botones y Acentos: SIEMPRE usar el color del panel (Obsidian, Azul, Rojo)
    $accentColor = $panelColor; 
    
    // FIX: Si el panel es Obsidian (Negro), el acento NO puede ser negro (invisible en fondo oscuro).
    // Forzamos Rojo Piter (#ef4444) para lograr estética "Black & Red" Premium.
    if ($panelColor === '#020617' || $panelColor === '#000000') {
        $accentColor = '#ef4444';
    } 

    if ($isDark) {
        // MODO OSCURO (Obsidian Premium)
        // Fondo Tarjeta: Casi negro, muy sutil diferencia con el fondo
        $bgCard = 'color-mix(in srgb, '.$bgColor.', white 2%)'; 
        // Superficie: Un poco más claro
        $bgSurface = 'color-mix(in srgb, '.$bgColor.', white 5%)'; 
        $textMain = '#ffffff';
        $textMuted = '#94a3b8'; 
        // Bordes: Extra sutiles
        $borderColor = 'rgba(255,255,255,0.05)';
        // Sombras: Negras profundas (0 glow blanco)
        $shadowColor = 'rgba(0,0,0,0.8)'; 
        // Switch Inactivo (Dark)
        $switchInactive = 'rgba(255, 255, 255, 0.1)';
        $switchKnob = '#ffffff';
        // Modal Background (Dark - Lighter than body for contrast against overlay)
        $modalBg = '#1e293b'; // Slate 800
    } else {
        // MODO CLARO (Bright)
        $bgCard = 'rgba(255, 255, 255, 0.95)'; 
        $bgSurface = '#f8fafc'; 
        $textMain = '#0f172a'; 
        $textMuted = '#64748b';
        $borderColor = '#e2e8f0'; 
        $shadowColor = 'rgba(148, 163, 184, 0.15)'; 
        // Switch Inactivo (Light)
        $switchInactive = '#e2e8f0'; // Slate 200
        $switchKnob = '#ffffff';
        // Modal Background (Light)
        $modalBg = '#ffffff';
    }
@endphp

<style>
    /* ANTI-FLASH: Forzar fondo inmediato al body */
    body {
        background-color: {{ $bgPage }} !important;
        transition: background-color 0s !important;
    }

    /* Estilos Dinámicos Scoped (Globalized for Modals) */
    :root {
        --theme-bg-page: {{ $bgPage }};
        --theme-bg-card: {{ $bgCard }};
        --theme-bg-surface: {{ $bgSurface }};
        --theme-text-main: {{ $textMain }};
        --theme-text-muted: {{ $textMuted }};
        --theme-border: {{ $borderColor }};
        --theme-border: {{ $borderColor }};
        --theme-shadow: {{ $shadowColor }};
        --theme-accent: {{ $accentColor }};
        --theme-switch-inactive: {{ $switchInactive }};
        --theme-switch-knob: {{ $switchKnob }};
        --theme-modal-bg: {{ $modalBg ?? '#ffffff' }};
    }

    /* Override de clases Tailwind dentro del wrapper para Tema Dinámico */
    #hr-dynamic-view .bg-white { background-color: var(--theme-bg-card) !important; }
    #hr-dynamic-view .bg-slate-50 { background-color: var(--theme-bg-surface) !important; }
    
    #hr-dynamic-view .text-slate-900 { color: var(--theme-text-main) !important; }
    #hr-dynamic-view .text-slate-700 { color: color-mix(in srgb, var(--theme-text-main), transparent 20%) !important; }
    #hr-dynamic-view .text-slate-600 { color: color-mix(in srgb, var(--theme-text-main), transparent 30%) !important; }
    /* #hr-dynamic-view .text-slate-400 se mantiene como muted, pero podemos forzarlo si queremos más contraste */
    #hr-dynamic-view .text-slate-400 { color: var(--theme-text-muted) !important; }

    #hr-dynamic-view .border-slate-100 { border-color: var(--theme-border) !important; }
    #hr-dynamic-view .border-slate-50 { border-color: var(--theme-border) !important; }

    /* CRITICAL: Shadow Override to Kill White Glow */
    #hr-dynamic-view .shadow-2xl,
    #hr-dynamic-view .shadow-xl,
    #hr-dynamic-view .shadow-lg,
    #hr-dynamic-view .shadow-md,
    #hr-dynamic-view .shadow-sm,
    #hr-dynamic-view .shadow-slate-200\/50,
    #hr-dynamic-view .shadow-slate-200\/40 {
        --tw-shadow-color: var(--theme-shadow) !important;
        box-shadow: 0 25px 50px -12px var(--theme-shadow) !important;
    }
    
    /* Input Fields Adaptation */
    #hr-dynamic-view input, 
    #hr-dynamic-view select {
        background-color: var(--theme-bg-surface) !important;
        color: var(--theme-text-main) !important;
        border-color: var(--theme-border) !important;
    }
    #hr-dynamic-view input:focus, 
    #hr-dynamic-view select:focus {
        background-color: var(--theme-bg-card) !important;
        border-color: var(--theme-accent) !important;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent), transparent 90%) !important;
    }

    /* FIX AUTOFILL DARK MODE (Cauteloso) */
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active {
        -webkit-text-fill-color: {{ $textMain }} !important;
        -webkit-box-shadow: 0 0 0 1000px {{ $bgSurface }} inset !important;
        box-shadow: 0 0 0 1000px {{ $bgSurface }} inset !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    /* READONLY STYLES (Cauteloso) */
    #hr-dynamic-view input[readonly],
    #hr-dynamic-view input:read-only {
        background-color: {{ $isDark ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.05)' }} !important;
        color: {{ $isDark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.4)' }} !important;
        cursor: not-allowed;
        border: 1px dashed var(--theme-border) !important;
        opacity: 0.8 !important;
        box-shadow: none !important;
    }

    /* Modals Adaptation */
    .modal-content {
        background-color: var(--theme-modal-bg, #ffffff) !important;
        border-color: var(--theme-border) !important;
    }
    .modal-content h2 { color: var(--theme-text-main) !important; }
    /* Fix for modal inputs if they are outside scope? No, modalRegisterManager is outside scope in blade structure usually... wait */
    
</style>

<div id="hr-dynamic-view" class="max-w-7xl mx-auto pb-32 px-4 sm:px-6 fade-in" style="min-height: 100vh; background-color: var(--theme-bg-page) !important;">
    
    {{-- Web Header: Maximized Density --}}
    <div class="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-8 mb-12 py-10 border-b border-slate-100">
        <div class="flex items-center gap-8">
            <a href="{{ route('admin.profile') }}" class="p-4 bg-white hover:bg-slate-50 rounded-[1.5rem] text-slate-400 border border-slate-100 shadow-sm transition-all hover:-translate-x-1 active:scale-95">
                <i data-lucide="chevron-left" class="w-6 h-6"></i>
            </a>
            <div class="flex items-center gap-6">
                <div class="w-20 h-20 bg-[var(--theme-accent)] rounded-[2rem] flex items-center justify-center text-white shadow-2xl shadow-[var(--theme-accent)]/30 border-4 border-white">
                    <i data-lucide="users" class="w-10 h-10"></i>
                </div>
                <div>
                    <h1 class="text-4xl font-[1000] text-slate-900 tracking-tighter uppercase leading-none">Gestión de Gerentes</h1>
                    <div class="flex items-center gap-3 mt-3">
                        <span class="px-3 py-1 bg-[var(--theme-accent)]/10 text-[var(--theme-accent)] text-[10px] font-black uppercase tracking-widest rounded-lg border border-[var(--theme-accent)]/20">Administración Central</span>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] transition-opacity">Visualizando {{ count($managers) }} cargos directivos</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-4 w-full xl:w-auto">
            <button onclick="openRegisterModal()" class="flex-1 xl:flex-none h-16 px-10 bg-[var(--theme-accent)] text-white rounded-3xl font-black text-xs uppercase tracking-widest shadow-2xl shadow-[var(--theme-accent)]/30 hover:-translate-y-1 transition-all active:scale-95 flex items-center justify-center gap-4">
                <i data-lucide="user-plus" class="w-5 h-5"></i>
                Nuevo Gerente
            </button>
        </div>
    </div>

    {{-- Advanced Toolbar --}}
    <div class="bg-white rounded-[3rem] p-8 shadow-2xl shadow-slate-200/40 border border-slate-50 mb-10">
        <div class="flex flex-col lg:flex-row gap-8 justify-between items-center">
            
            {{-- Unified Search --}}
            <div class="relative w-full lg:max-w-xl group">
                <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                    <i data-lucide="search" class="w-6 h-6 text-[var(--theme-accent)] group-focus-within:rotate-12 transition-transform"></i>
                </div>
                <input type="text" id="managerSearch" placeholder="Nombre, email, DNI o sede..." 
                       class="w-full h-14 pl-16 pr-8 bg-slate-50 border-2 border-slate-50 rounded-[2rem] text-sm font-bold text-slate-700 placeholder:text-slate-400 focus:bg-white focus:border-[var(--theme-accent)] focus:ring-8 focus:ring-[var(--theme-accent)]/5 transition-all outline-none">
            </div>

            {{-- Status Filters & Views --}}
            <div class="flex items-center gap-2 p-2 bg-slate-50 rounded-3xl border border-slate-100">
                <button onclick="filterStatus('all')" class="status-btn active px-8 py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all">Todos</button>
                <button onclick="filterStatus('active')" class="status-btn px-8 py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-[var(--theme-accent)] transition-all">Activos</button>
                <button onclick="filterStatus('inactive')" class="status-btn px-8 py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-[var(--theme-accent)] transition-all">Inactivos</button>
            </div>
        </div>
    </div>

    {{-- WEB TABLE VIEW: Optimized for High Density --}}
    <div class="bg-white rounded-[3.5rem] shadow-2xl shadow-slate-200/50 border border-slate-50 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse min-w-[1000px]">
                <thead>
                    <tr class="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400 border-b border-slate-100" style="background-color: var(--theme-bg-surface);">
                        <th class="py-8 px-10">Gerente / Identidad</th>
                        <th class="py-8 px-6">DNI</th>
                        <th class="py-8 px-6 text-center">Sede Asignada</th>
                        <th class="py-8 px-6 text-center">Estado</th>
                        <th class="py-8 px-10 text-right">Acciones</th>
                    </tr>
                </thead>
                <tbody id="managersTableBody">
                    @forelse($managers as $manager)
                    <tr class="manager-row group hover:bg-[var(--theme-accent)]/5 transition-all border-b border-slate-50"
                        data-nombre="{{ strtolower($manager->nombre_completo) }}" 
                        data-email="{{ strtolower($manager->email) }}"
                        data-dni="{{ $manager->nro_documento ?? '' }}"
                        data-sede="{{ strtolower($manager->sede_nombre ?? 'sin sede') }}"
                        data-status="{{ strtoupper($manager->estado) === 'ACTIVO' ? 'active' : 'inactive' }}">
                        
                        {{-- Identity Column --}}
                        <td class="py-7 px-10">
                            <div class="flex items-center gap-6">
                                <div class="relative flex-shrink-0">
                                    @php
                                        $managerPhoto = 'https://ui-avatars.com/api/?name=' . urlencode($manager->nombre_completo) . '&background=fef2f2&color=ef4444';
                                        if (!empty($manager->foto_url) && $manager->foto_url !== 'null') {
                                            $cleanPath = str_replace(['uploads / ', 'uploads/', 'uploads\ ', 'uploads\\'], '', $manager->foto_url);
                                            $cleanPath = trim(str_replace('\\', '/', $cleanPath));
                                            if (str_starts_with($cleanPath, '/')) $cleanPath = substr($cleanPath, 1);
                                            $managerPhoto = url('/api/Security/uploads/' . $cleanPath);
                                        }
                                    @endphp
                                    <img src="{{ $managerPhoto }}" 
                                         class="w-14 h-14 rounded-2xl object-cover border-2 border-white shadow-md group-hover:scale-110 transition-transform">
                                    <div class="absolute -top-1 -right-1 w-4 h-4 rounded-full border-2 border-white {{ $manager->estado == 1 ? 'bg-emerald-500' : 'bg-slate-300' }}"></div>
                                </div>
                                <div class="min-w-0">
                                    <h4 class="text-sm font-black text-slate-900 leading-tight uppercase tracking-tight truncate">{{ $manager->nombre_completo }}</h4>
                                    <p class="text-[10px] font-bold text-slate-400 truncate mt-1 lowercase">{{ $manager->email }}</p>
                                </div>
                            </div>
                        </td>

                        {{-- DNI Column --}}
                        <td class="py-7 px-6">
                            <div class="flex items-center gap-2">
                                <i data-lucide="id-card" class="w-4 h-4 text-red-400"></i>
                                <span class="text-xs font-black text-slate-600 tracking-tighter">{{ $manager->nro_documento ?? '7XXXXXXXX' }}</span>
                            </div>
                        </td>

                        {{-- Sede Column --}}
                        <td class="py-7 px-6 text-center">
                            <span class="inline-flex items-center gap-2 px-6 py-2 rounded-2xl bg-slate-50 text-slate-600 text-[10px] font-black uppercase tracking-widest border border-slate-100 group-hover:bg-white transition-colors">
                                <i data-lucide="map-pin" class="w-3 h-3 text-red-500"></i>
                                {{ $manager->sede_nombre ?? 'MIRAFLORES' }}
                            </span>
                        </td>

                        {{-- Status Column --}}
                        <td class="py-7 px-6">
                            <div class="flex flex-col items-center gap-2">
                                <label class="relative inline-flex items-center cursor-pointer group">
                                    <input type="checkbox" 
                                           class="sr-only peer status-toggle" 
                                           data-id="{{ $manager->id_usuario }}"
                                           onchange="toggleManagerStatus(this)"
                                           {{ strtoupper($manager->estado) === 'ACTIVO' ? 'checked' : '' }}>
                                           
                                    <!-- Track -->
                                    <div class="w-11 h-6 rounded-full peer peer-focus:ring-4 peer-focus:ring-[var(--theme-accent)]/20 
                                                transition-all duration-300 ease-in-out shadow-inner border border-transparent
                                                bg-[var(--theme-switch-inactive)] peer-checked:bg-[var(--theme-accent)]"
                                         id="switch-track-{{ $manager->id_usuario }}"
                                         style="background-color: {{ strtoupper($manager->estado) === 'ACTIVO' ? 'var(--theme-accent)' : 'var(--theme-switch-inactive)' }}">
                                    </div>
    
                                    <!-- Knob -->
                                    <div class="absolute left-[2px] top-[2px] bg-[var(--theme-switch-knob)] w-5 h-5 rounded-full shadow-md transition-all duration-300 
                                                peer-checked:translate-x-full"></div>
                                </label>
                                
                                <span class="status-label text-[9px] font-black uppercase tracking-[0.2em] transition-colors duration-300"
                                      id="status-label-{{ $manager->id_usuario }}"
                                      style="color: {{ strtoupper($manager->estado) === 'ACTIVO' ? 'var(--theme-accent)' : 'var(--theme-text-muted)' }}">
                                    {{ strtoupper($manager->estado) === 'ACTIVO' ? 'ACTIVO' : 'INACTIVO' }}
                                </span>
                            </div>
                        </td>

                        {{-- Actions Column --}}
                        <td class="py-7 px-10 text-right">
                            <div class="flex items-center justify-end gap-3 transition-opacity">
                                <button data-manager="{{ json_encode($manager) }}" 
                                        onclick="openEditModal(JSON.parse(this.dataset.manager))" 
                                        class="w-10 h-10 rounded-xl bg-white border border-slate-100 text-slate-400 hover:bg-amber-400 hover:text-white hover:border-amber-400 hover:scale-110 hover:rotate-3 hover:shadow-lg hover:shadow-amber-200 transition-all flex items-center justify-center shadow-sm group/edit">
                                    <i data-lucide="edit-3" class="w-4 h-4 transition-transform duration-300 group-hover/edit:scale-125"></i>
                                </button>
                                <button onclick="deleteManager('{{ $manager->id_usuario }}')" 
                                        class="w-10 h-10 rounded-xl bg-white border border-slate-100 text-slate-400 hover:bg-red-600 hover:text-white hover:border-red-600 hover:scale-110 hover:-rotate-3 hover:shadow-lg hover:shadow-red-200 transition-all flex items-center justify-center shadow-sm group/trash">
                                    <i data-lucide="trash-2" class="w-4 h-4 transition-transform duration-300 group-hover/trash:scale-125"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="py-32 text-center">
                             <div class="w-24 h-24 bg-red-50 rounded-[2.5rem] flex items-center justify-center text-red-500 mx-auto mb-6 shadow-inner">
                                <i data-lucide="users" class="w-12 h-12"></i>
                             </div>
                             <h3 class="text-2xl font-[1000] text-slate-900 uppercase">Sin Cargos Directivos</h3>
                             <p class="text-sm font-bold text-slate-400 uppercase tracking-widest mt-2">No se han registrado gerentes en la empresa aún.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Table Footer Stats --}}
        <div class="px-10 py-8 bg-slate-50/30 border-t border-slate-100 flex flex-col md:flex-row items-center justify-between gap-6">
            <div class="flex items-center gap-6">
                <p class="text-[11px] font-black text-slate-400 uppercase tracking-widest">
                    <span class="text-slate-900">{{ count($managers) }}</span> Registros en Total
                </p>
                <div class="h-4 w-px bg-slate-200"></div>
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                        <span class="text-[10px] font-black text-slate-400">ACTIVOS</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-slate-300"></span>
                        <span class="text-[10px] font-black text-slate-400">INACTIVOS</span>
                    </div>
                </div>
            </div>
            
            <div class="flex gap-2">
                 <button class="w-32 h-12 rounded-2xl bg-white border border-slate-100 text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-all">Anterior</button>
                 <button class="w-32 h-12 rounded-2xl bg-white border border-slate-100 text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-all">Siguiente</button>
            </div>
        </div>
    </div>
    </div>
    {{-- Removed closing div to extend scope to modals --}}

{{-- MODAL: REGISTRAR GERENTE (DISEÑO PREMIUM SÓLIDO) --}}
{{-- MODAL: REGISTRAR GERENTE (DISEÑO PREMIUM SÓLIDO) --}}
{{-- MODAL: REGISTRAR GERENTE (DISEÑO PREMIUM SÓLIDO) --}}
{{-- MODAL: REGISTRAR GERENTE (DISEÑO PREMIUM SÓLIDO) --}}
<div id="modalRegisterManager" onclick="if(event.target === this) closeModal('modalRegisterManager')" 
     class="fixed inset-0 z-[9999] hidden bg-slate-950/90 flex items-center justify-center p-6 min-h-screen transition-opacity duration-300 backdrop-blur-none">
    <div class="relative w-full max-w-6xl bg-[var(--theme-modal-bg)] rounded-[2.5rem] shadow-2xl border border-[var(--theme-border)] overflow-hidden transform transition-all duration-500 modal-content animate-modal-in">
        
        {{-- Modal Header --}}
        <div class="px-10 pt-4 pb-2 flex items-center justify-between border-b border-[var(--theme-border)]">
            <div class="flex items-center gap-4">
                <div class="w-2 h-6 bg-[var(--theme-accent)] rounded-full"></div>
                <h2 class="text-xl font-[1000] text-[var(--theme-text-main)] uppercase tracking-tighter">Registro de Nuevo Gerente</h2>
            </div>
            <button onclick="closeModal('modalRegisterManager')" class="w-10 h-10 rounded-xl bg-[var(--theme-bg-surface)] text-[var(--theme-text-muted)] hover:bg-[var(--theme-accent)]/10 hover:text-[var(--theme-accent)] transition-all flex items-center justify-center group border border-[var(--theme-border)]">
                <i data-lucide="x" class="w-5 h-5 group-hover:rotate-90 transition-transform"></i>
            </button>
        </div>

        <form id="formRegisterManager" onsubmit="submitRegisterManager(event)" class="p-8">
            @csrf
            <div class="flex flex-col md:flex-row gap-12">
                
                {{-- Left Side: Photo & Identity --}}
                <div class="w-full md:w-1/3 flex flex-col items-center gap-6 border-r border-[var(--theme-border)] pr-6">
                    <div class="relative group">
                        <div class="w-44 h-44 rounded-full border-2 border-dashed border-slate-300 dark:border-slate-600 p-1 bg-[var(--theme-bg-surface)] hover:bg-[var(--theme-bg-card)] hover:border-[#ef4444] transition-all duration-300 cursor-pointer overflow-hidden relative flex items-center justify-center" onclick="document.getElementById('managerPhotoInput').click()" id="photoContainer">
                            
                            {{-- Placeholder Icon (Default) --}}
                            <div id="photoPlaceholder" class="flex flex-col items-center justify-center text-slate-400 group-hover:text-[var(--theme-accent)] transition-colors">
                                <i data-lucide="user" class="w-10 h-10 mb-2 opacity-80"></i>
                                <span class="text-[9px] font-black uppercase tracking-widest text-center px-4">Subir Foto</span>
                            </div>

                            {{-- Preview Image (Hidden by default) --}}
                            <img id="photoPreview" class="absolute inset-0 w-full h-full rounded-full object-cover hidden" src="">
                            
                            {{-- Overlay on Hover (Only when image is present) --}}
                            <div id="photoOverlay" class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 transition-opacity duration-300 hidden">
                                <i data-lucide="refresh-cw" class="w-8 h-8 text-white"></i>
                            </div>
                        </div>
                        
                        {{-- Decorative Badge (Dynamic Camera) --}}
                        <div class="absolute -bottom-2 -right-2 w-12 h-12 rounded-2xl shadow-xl flex items-center justify-center overflow-hidden border-2 border-[var(--theme-modal-bg)] group-hover:scale-110 transition-transform duration-300">
                            {{-- Dynamic Gradient Background via Style --}}
                            <div class="absolute inset-0 transition-all duration-500" 
                                 style="background: linear-gradient(135deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent), black 20%));">
                            </div>
                            <div class="absolute inset-0 bg-white/20 animate-pulse"></div>
                            <i data-lucide="camera" class="w-5 h-5 text-white relative z-10 drop-shadow-md"></i>
                        </div>
                    </div>
                    <input type="file" id="managerPhotoInput" name="foto" class="hidden" accept="image/*" onchange="previewPhoto(this)">
                    
                    <div class="text-center space-y-2">
                        <p class="text-xs font-black text-[var(--theme-text-main)] uppercase tracking-widest leading-none">Avatar del Perfil</p>
                        <p class="text-[10px] text-[var(--theme-text-muted)] font-bold leading-relaxed px-4 text-pretty">
                            Formatos: JPG, PNG. Máx 2MB.
                        </p>
                    </div>
                </div>

                {{-- Right Side: Form Fields Grid --}}
                <div class="w-full md:w-2/3 space-y-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        
                        {{-- DNI con Búsqueda --}}
                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Documento de Identidad</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                                    <i data-lucide="id-card" class="w-5 h-5 text-[var(--theme-text-muted)] group-focus-within:text-red-500 transition-colors"></i>
                                </div>
                                <input type="text" name="dni" id="managerDni" maxlength="8" placeholder="DNI (8 dígitos)" 
                                       class="w-full h-14 pl-14 pr-16 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-red-500 focus:ring-4 focus:ring-red-500/5 transition-all outline-none" required>
                                <button type="button" onclick="searchDni()" class="absolute right-2 top-2 h-10 px-4 bg-[var(--theme-accent)] text-white rounded-xl flex items-center justify-center shadow-lg shadow-[var(--theme-accent)]/30 hover:scale-105 active:scale-95 transition-all z-10" id="btnSearchDni">
                                    <i data-lucide="search" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>

                        {{-- Nombres --}}
                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Nombres</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                                    <i data-lucide="user" class="w-5 h-5 text-[var(--theme-text-muted)] group-focus-within:text-[var(--theme-accent)] transition-colors"></i>
                                </div>
                                <input type="text" name="nombres" id="managerNames" placeholder="Nombres" 
                                       class="w-full h-14 pl-14 pr-5 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none" required readonly>
                            </div>
                        </div>

                        {{-- Apellidos --}}
                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Apellidos</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                                    <i data-lucide="users" class="w-5 h-5 text-[var(--theme-text-muted)] group-focus-within:text-[var(--theme-accent)] transition-colors"></i>
                                </div>
                                <input type="text" name="apellidos" id="managerSurnames" placeholder="Apellidos" 
                                       class="w-full h-14 pl-14 pr-5 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none" required readonly>
                            </div>
                        </div>

                        {{-- Correo Electrónico --}}
                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Correo Electrónico</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                                    <i data-lucide="mail" class="w-5 h-5 text-[var(--theme-text-muted)] group-focus-within:text-[var(--theme-accent)] transition-colors"></i>
                                </div>
                                <input type="email" name="email" placeholder="ejemplo@piter.com" 
                                       class="w-full h-14 pl-14 pr-5 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none" required>
                            </div>
                        </div>

                        {{-- Contraseña Temporal --}}
                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Contraseña de Acceso</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                                    <i data-lucide="lock" class="w-5 h-5 text-[var(--theme-text-muted)] group-focus-within:text-[var(--theme-accent)] transition-colors"></i>
                                </div>
                                <input type="password" name="password" placeholder="Mínimo 6 caracteres" 
                                       class="w-full h-14 pl-14 pr-5 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none" required>
                            </div>
                        </div>

                        {{-- Selector de Sucursal --}}
                        <div class="relative group col-span-2">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Asignar Sede Principal (Opcional)</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                                    <i data-lucide="map-pin" class="w-5 h-5 text-[var(--theme-text-muted)] group-focus-within:text-[var(--theme-accent)] transition-colors"></i>
                                </div>
                                <select name="sucursal_asignada_id" id="managerSucursalId" 
                                        class="w-full h-14 pl-14 pr-10 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none appearance-none cursor-pointer">
                                    <option value="">Seleccionar Sede...</option>
                                    @foreach($sucursales as $suc)
                                        <option value="{{ $suc->id_sucursal }}">{{ strtoupper($suc->name ?? $suc->nombre) }}</option>
                                    @endforeach
                                </select>
                                <div class="absolute inset-y-0 right-5 flex items-center pointer-events-none">
                                    <i data-lucide="chevron-down" class="w-4 h-4 text-[var(--theme-text-muted)]"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pt-4 flex items-center gap-4">
                        <button type="submit" id="btnRegisterSubmit" class="flex-1 h-14 bg-[var(--theme-accent)] text-white font-black text-xs uppercase tracking-[0.2em] rounded-2xl shadow-xl shadow-[var(--theme-accent)]/20 hover:brightness-110 hover:-translate-y-1 transition-all active:scale-95 disabled:opacity-50 disabled:bg-slate-300 disabled:shadow-none flex items-center justify-center gap-3">
                            <i data-lucide="check-circle" class="w-5 h-5"></i>
                            Registrar Miembro del Equipo
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-[var(--theme-border)] flex items-center justify-center gap-2 text-[var(--theme-text-muted)]">
                <i data-lucide="shield-check" class="w-4 h-4 text-emerald-500"></i>
                <span class="text-[10px] font-bold uppercase tracking-widest">Seguridad de Datos Piter v2.0</span>
            </div>
        </form>
    </div>
</div>

{{-- MODAL: EDITAR GERENTE (DISEÑO PREMIUM SÓLIDO) --}}
{{-- MODAL: EDITAR GERENTE (DISEÑO PREMIUM SÓLIDO) --}}
{{-- MODAL: EDITAR GERENTE (DISEÑO PREMIUM SÓLIDO) --}}
<div id="modalEditManager" onclick="if(event.target === this) closeModal('modalEditManager')" 
     class="fixed inset-0 z-[9999] hidden bg-slate-950/90 flex items-center justify-center p-6 min-h-screen transition-opacity duration-300 backdrop-blur-none">
    <div class="relative w-full max-w-6xl bg-[var(--theme-modal-bg)] rounded-[2.5rem] shadow-2xl border border-[var(--theme-border)] overflow-hidden transform transition-all duration-500 modal-content animate-modal-in">
        
        {{-- Modal Header --}}
        <div class="px-10 pt-4 pb-2 flex items-center justify-between border-b border-[var(--theme-border)]">
            <div class="flex items-center gap-4">
                <div class="w-2 h-6 bg-[var(--theme-accent)] rounded-full"></div>
                <h2 class="text-xl font-[1000] text-[var(--theme-text-main)] uppercase tracking-tighter">Editar Perfil del Gerente</h2>
            </div>
            <button onclick="closeModal('modalEditManager')" class="w-10 h-10 rounded-xl bg-[var(--theme-bg-surface)] text-[var(--theme-text-muted)] hover:bg-[var(--theme-accent)]/10 hover:text-[var(--theme-accent)] transition-all flex items-center justify-center group border border-[var(--theme-border)]">
                <i data-lucide="x" class="w-5 h-5 group-hover:rotate-90 transition-transform"></i>
            </button>
        </div>

        <form id="formEditManager" onsubmit="submitEditManager(event)" class="p-8">
            @csrf
            <input type="hidden" name="id_usuario" id="editManagerId">
            <div class="flex flex-col md:flex-row gap-12">
                
                {{-- Left Side: Photo & Identity --}}
                <div class="w-full md:w-1/3 flex flex-col items-center gap-6 border-r border-[var(--theme-border)] pr-6">
                    <div class="relative group">
                        {{-- Photo Container --}}
                        <div class="w-44 h-44 rounded-full border-2 border-dashed border-slate-300 dark:border-slate-600 p-1 bg-[var(--theme-bg-surface)] hover:bg-[var(--theme-bg-card)] hover:border-[#ef4444] transition-all duration-300 cursor-pointer overflow-hidden relative flex items-center justify-center" onclick="document.getElementById('editManagerPhotoInput').click()" id="editPhotoContainer">
                            
                            {{-- Placeholder (Default if no photo) --}}
                            <div id="editPhotoPlaceholder" class="flex flex-col items-center justify-center text-slate-400 group-hover:text-[var(--theme-accent)] transition-colors">
                                <i data-lucide="user" class="w-10 h-10 mb-2 opacity-80"></i>
                                <span class="text-[9px] font-black uppercase tracking-widest text-center px-4">Sin Foto</span>
                            </div>

                            {{-- Preview Image --}}
                            <img id="editPhotoPreview" class="absolute inset-0 w-full h-full rounded-full object-cover hidden" src="">
                            
                            {{-- Overlay --}}
                            <div id="editPhotoOverlay" class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 transition-opacity duration-300 hidden">
                                <i data-lucide="camera" class="w-8 h-8 text-white"></i>
                            </div>
                        </div>
                        {{-- Decorative Badge (Dynamic Camera) --}}
                        <div class="absolute -bottom-2 -right-2 w-12 h-12 rounded-2xl shadow-xl flex items-center justify-center overflow-hidden border-2 border-[var(--theme-modal-bg)] group-hover:scale-110 transition-transform duration-300">
                            {{-- Dynamic Gradient Background via Style --}}
                            <div class="absolute inset-0 transition-all duration-500" 
                                 style="background: linear-gradient(135deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent), black 20%));">
                            </div>
                            <div class="absolute inset-0 bg-white/20 animate-pulse"></div>
                            <i data-lucide="camera" class="w-5 h-5 text-white relative z-10 drop-shadow-md"></i>
                        </div>
                    </div>
                    <input type="file" id="editManagerPhotoInput" name="foto" class="hidden" accept="image/*" onchange="previewEditPhoto(this)">
                    
                    <div class="text-center space-y-2">
                        <p class="text-xs font-black text-[var(--theme-text-main)] uppercase tracking-widest leading-none">Avatar del Perfil</p>
                        <p class="text-[10px] text-[var(--theme-text-muted)] font-bold leading-relaxed px-4 text-pretty">
                            Actualiza la imagen profesional para el equipo.
                        </p>
                    </div>
                </div>

                {{-- Right Side: Form Fields Grid --}}
                <div class="w-full md:w-2/3 space-y-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">DNI</label>
                            <input type="text" name="dni" id="editManagerDni" maxlength="8" placeholder="DNI" 
                                   class="w-full h-14 pl-6 pr-5 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none" required>
                        </div>

                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Nombres</label>
                            <input type="text" name="nombres" id="editManagerNames" placeholder="Nombres" 
                                   class="w-full h-14 pl-6 pr-5 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none" required>
                        </div>

                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Apellidos</label>
                            <input type="text" name="apellidos" id="editManagerSurnames" placeholder="Apellidos" 
                                   class="w-full h-14 pl-6 pr-5 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none" required>
                        </div>

                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Correo Electrónico</label>
                            <input type="email" name="email" id="editManagerEmail" placeholder="ejemplo@piter.com" 
                                   class="w-full h-14 pl-6 pr-5 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none" required>
                        </div>


                        <div class="relative group col-span-1">
                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Sede</label>
                            <select name="sucursal_asignada_id" id="editManagerSucursalId" 
                                    class="w-full h-14 pl-6 pr-10 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all appearance-none cursor-pointer">
                                <option value="">Sin Sede</option>
                                @foreach($sucursales as $suc)
                                    <option value="{{ $suc->id_sucursal }}">{{ strtoupper($suc->name ?? $suc->nombre) }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Password Accordion --}}
                        <div class="col-span-2 mt-4">
                            <div class="border border-[var(--theme-border)] rounded-[2rem] overflow-hidden bg-[var(--theme-bg-surface)]">
                                <button type="button" onclick="togglePasswordAccordion()" class="w-full px-8 py-4 flex items-center justify-between hover:bg-[var(--theme-accent)]/5 transition-colors group">
                                    <div class="flex items-center gap-4">
                                        <div class="w-10 h-10 rounded-xl bg-[var(--theme-bg-card)] flex items-center justify-center text-[var(--theme-text-muted)] group-hover:text-[var(--theme-accent)] transition-colors shadow-sm border border-[var(--theme-border)]">
                                            <i data-lucide="lock" class="w-5 h-5"></i>
                                        </div>
                                        <div class="text-left">
                                            <p class="text-[10px] font-[1000] text-[var(--theme-text-main)] uppercase tracking-widest">Ajustes de Seguridad</p>
                                            <p class="text-[9px] font-bold text-[var(--theme-text-muted)] uppercase">Cambiar contraseña de acceso</p>
                                        </div>
                                    </div>
                                    <i data-lucide="chevron-down" id="passwordAccordionIcon" class="w-5 h-5 text-[var(--theme-text-muted)] transition-transform duration-300"></i>
                                </button>
                                
                                <div id="passwordAccordionContent" class="hidden px-8 pb-8 animate-modal-in">
                                    <div class="pt-4 space-y-4">
                                        <div class="relative group">
                                            <label class="block text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 px-1">Nueva Contraseña (Opcional)</label>
                                            <div class="relative">
                                                <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                                                    <i data-lucide="lock" class="w-5 h-5 text-[var(--theme-text-muted)] group-focus-within:text-[var(--theme-accent)] transition-colors"></i>
                                                </div>
                                                <input type="password" name="password" id="editManagerPassword" placeholder="Dejar en blanco para no cambiar" 
                                                       class="w-full h-14 pl-14 pr-5 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 transition-all outline-none">
                                            </div>
                                        </div>
                                        <p class="text-[9px] font-bold text-amber-500 uppercase px-2">
                                            <i data-lucide="info" class="w-3 h-3 inline-block mr-1"></i>
                                            Sólo completa este campo si deseas cambiar la clave de acceso.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- Full Width Submit Button --}}
            <div class="pt-10 flex items-center justify-center">
                <button type="submit" id="btnEditSubmit" class="w-11/12 max-w-5xl h-18 bg-[var(--theme-accent)] text-white font-black text-sm uppercase tracking-[0.3em] rounded-2xl shadow-2xl shadow-[var(--theme-accent)]/30 hover:brightness-110 hover:-translate-y-1 transition-all active:scale-95 flex items-center justify-center gap-6 group">
                    <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i data-lucide="save" class="w-6 h-6 text-white"></i>
                    </div>
                    <span>Confirmar y Actualizar Perfil del Gerente</span>
                </button>
            </div>
            
            <div class="mt-4 pt-4 border-t border-[var(--theme-border)] flex items-center justify-center gap-2 text-[var(--theme-text-muted)]">
                <i data-lucide="shield-check" class="w-4 h-4 text-emerald-500"></i>
                <span class="text-[10px] font-bold uppercase tracking-widest">Seguridad de Datos Piter v2.0</span>
            </div>
        </form>
    </div>
</div>
{{-- End of #hr-dynamic-view scope --}}

<style>
    .status-btn.active {
        background-color: var(--theme-accent);
        color: white !important;
        box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--theme-accent), transparent 60%);
        border: none;
    }
    
    .manager-row {
        animation: rowIn 0.5s ease backwards;
    }
    
    @keyframes rowIn {
        from { opacity: 0; transform: translateX(-10px); }
        to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes modalIn {
        from { opacity: 0; transform: scale(0.9) translateY(20px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }

    .animate-modal-in {
        animation: modalIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* Snappier easing */
    }

    #formRegisterManager input:focus + div i,
    #formRegisterManager input:not(:placeholder-shown) + div i {
        color: #ef4444;
    }

    /* Custom Scrollbar for Dropdown */
    #sucursalDropdown::-webkit-scrollbar {
        width: 6px;
    }

    /* FORZAR SWEETALERT AL FRENTE DE LOS MODALES */
    .swal2-container {
        z-index: 999999 !important;
    }

    .colored-toast.swal2-icon-success {
        background-color: #a5dc86 !important;
    }
    
    #sucursalDropdown::-webkit-scrollbar-track {
        background: #f8fafc;
    }
    #sucursalDropdown::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }
    #sucursalDropdown::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
</style>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    let currentStatusFilter = 'all';

    document.addEventListener('DOMContentLoaded', () => {
        if(typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        // --- Master Search Logic ---
        const searchInput = document.getElementById('managerSearch');
        searchInput.addEventListener('input', applyFilters);
    });

    // --- Master Filter Logic ---
    function filterStatus(status) {
        currentStatusFilter = status;

        // Update Button Styles
        document.querySelectorAll('.status-btn').forEach(btn => {
            btn.classList.remove('active');
            btn.classList.remove('text-white');
            btn.classList.add('text-slate-400');
        });

        // Activate clicked button
        const activeBtn = document.querySelector(`button[onclick="filterStatus('${status}')"]`);
        if(activeBtn) {
            activeBtn.classList.add('active');
            activeBtn.classList.remove('text-slate-400');
        }

        applyFilters();
    }

    function applyFilters() {
        const query = document.getElementById('managerSearch').value.toLowerCase();
        const rows = document.querySelectorAll('.manager-row');

        rows.forEach(row => {
            const nombre = (row.dataset.nombre || '').toLowerCase();
            const email = (row.dataset.email || '').toLowerCase();
            const dni = (row.dataset.dni || '');
            const sede = (row.dataset.sede || '').toLowerCase();
            const status = row.dataset.status || 'active'; // Default to active if missing

            const matchesSearch = nombre.includes(query) || email.includes(query) || dni.includes(query) || sede.includes(query);
            const matchesStatus = currentStatusFilter === 'all' || status === currentStatusFilter;

            if (matchesSearch && matchesStatus) {
                row.classList.remove('hidden');
                // Re-initialize animation to look cool if we want, but simple toggle is faster
                row.style.display = '';
            } else {
                row.classList.add('hidden');
                row.style.display = 'none'; // Ensure it's hidden
            }
        });
    }

    // --- Modal Management ---
    function openRegisterModal() {
        const modal = document.getElementById('modalRegisterManager');
        modal.classList.remove('hidden');
        if(typeof lucide !== 'undefined') lucide.createIcons();
    }

    function closeModal(id) {
        const modal = document.getElementById(id);
        modal.classList.add('hidden');
    }

    // --- Photo Preview ---
    function previewPhoto(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const img = document.getElementById('photoPreview');
                img.src = e.target.result;
                img.classList.remove('hidden');
                
                // Solid border to indicate filled state
                document.getElementById('photoContainer').classList.remove('border-dashed');
                document.getElementById('photoContainer').classList.add('border-solid');
                
                // Show overlay on hover
                document.getElementById('photoOverlay').classList.remove('hidden');
                document.getElementById('photoPlaceholder').classList.add('opacity-0'); // Hide placeholder content
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    // --- DNI Search ---
    async function searchDni() {
        const dni = document.getElementById('managerDni').value;
        const btn = document.getElementById('btnSearchDni');
        const namesInput = document.getElementById('managerNames');
        const surnamesInput = document.getElementById('managerSurnames');

        if (dni.length !== 8) {
            Swal.fire({ 
                icon: 'error', 
                title: 'DNI No Encontrado', 
                text: 'Por favor, ingresa un DNI válido de 8 dígitos para realizar la búsqueda.',
                confirmButtonColor: '#ef4444',
                customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-xl h-10 px-6 font-black uppercase text-[10px]' }
            });
            return;
        }

        try {
            btn.disabled = true;
            btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i>';
            if(typeof lucide !== 'undefined') lucide.createIcons();

            const response = await fetch("{{ route('api.security.dni') }}?dni=" + dni);
            const result = await response.json();

            // Verificar si hay éxito y si el nombre no está vacío
            const fullName = (result.success && result.data && result.data.nombre) ? result.data.nombre.trim() : '';

            if (fullName !== '') {
                let words = fullName.split(/\s+/);
                
                if (words.length >= 3) {
                    surnamesInput.value = words.slice(-2).join(' ');
                    namesInput.value = words.slice(0, -2).join(' ');
                } else if (words.length === 2) {
                    namesInput.value = words[0];
                    surnamesInput.value = words[1];
                } else {
                    namesInput.value = fullName;
                    surnamesInput.value = '';
                }

                // BLOQUEAR EDICIÓN PARA EVITAR ALTERACIONES
                namesInput.readOnly = true;
                surnamesInput.readOnly = true;
                namesInput.classList.add('bg-slate-100', 'cursor-not-allowed');
                surnamesInput.classList.add('bg-slate-100', 'cursor-not-allowed');

                Swal.fire({ 
                    icon: 'success', 
                    title: 'DNI Encontrado', 
                    text: 'Datos cargados correctamente.', 
                    timer: 2000, 
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end',
                    customClass: { popup: 'rounded-2xl' }
                });
            } else {
                Swal.fire({ 
                    icon: 'error', 
                    title: 'No Encontrado', 
                    text: 'DNI No Encontrado',
                    confirmButtonColor: '#ef4444',
                    customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-xl h-10 px-6 font-black uppercase text-[10px]' }
                });
                // Limpiar y desbloquear
                namesInput.value = '';
                surnamesInput.value = '';
                namesInput.readOnly = false;
                surnamesInput.readOnly = false;
                namesInput.classList.remove('bg-slate-100', 'cursor-not-allowed');
                surnamesInput.classList.remove('bg-slate-100', 'cursor-not-allowed');
            }
        } catch (error) {
            console.error('Error DNI:', error);
            Swal.fire({ 
                icon: 'error', 
                title: 'Error de Consulta', 
                text: 'Hubo un problema al consultar el DNI.',
                confirmButtonColor: '{{ $accentColor }}'
            });
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i data-lucide="search" class="w-5 h-5"></i>';
            if(typeof lucide !== 'undefined') lucide.createIcons();
        }
    }


    function filterSucursal() {
        const query = document.getElementById('sucursalSearch').value.toLowerCase();
        const dropdown = document.getElementById('sucursalDropdown');
        
        if (query.length === 0) {
            dropdown.classList.add('hidden');
            return;
        }

        const filtered = allSucursales.filter(s => s.nombre.toLowerCase().includes(query));
        
        if (filtered.length > 0) {
            dropdown.innerHTML = filtered.map(s => `
                <div onclick="selectSucursal('${s.id_sucursal}', '${s.nombre}')" class="px-6 py-4 hover:bg-[var(--theme-accent)]/10 cursor-pointer transition-colors border-b border-slate-50 last:border-0">
                    <p class="text-xs font-black text-slate-700 uppercase tracking-tight">${s.nombre}</p>
                    <p class="text-[9px] text-slate-400 font-bold uppercase">${s.direccion || 'Sin dirección'}</p>
                </div>
            `).join('');
            dropdown.classList.remove('hidden');
        } else {
            dropdown.classList.add('hidden');
        }
    }

    function selectSucursal(id, nombre) {
        document.getElementById('managerSucursalId').value = id;
        document.getElementById('sucursalSearch').value = nombre;
        document.getElementById('sucursalDropdown').classList.add('hidden');
    }

    // --- Submit Form ---
    async function submitRegisterManager(e) {
        e.preventDefault();
        const btn = document.getElementById('btnRegisterSubmit');
        const form = e.target;
        const formData = new FormData(form);

        try {
            btn.disabled = true;
            btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> <span>Procesando Registro...</span>';
            if(typeof lucide !== 'undefined') lucide.createIcons();

            const response = await fetch("{{ route('admin.hr.store') }}", {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });

            const result = await response.json();

            if (result.success) {
                Swal.fire({
                    title: '¡Gerente Registrado!',
                    text: result.message || 'Éxito.',
                    icon: 'success',
                    confirmButtonColor: '{{ $accentColor }}',
                    customClass: { popup: 'rounded-[2rem]' }
                }).then(() => location.reload());
            } else {
                // Manejo detallado de Errores de Validación (422)
                let errorMsg = result.message || 'No se pudo completar el registro.';
                if (response.status === 422 && result.errors) {
                    errorMsg = Object.values(result.errors).flat().join('<br>');
                }

                Swal.fire({
                    title: 'Verifica los datos',
                    html: `<div class="text-sm font-bold text-slate-600">${errorMsg}</div>`,
                    icon: 'warning',
                    confirmButtonColor: '{{ $accentColor }}',
                    customClass: { popup: 'rounded-[2rem]' }
                });
            }
        } catch (error) {
            console.error('Error register:', error);
            Swal.fire({
                title: 'Error de Conexión',
                text: 'Inténtalo de nuevo.',
                icon: 'error',
                confirmButtonColor: '{{ $accentColor }}'
            });
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5"></i> <span>Registrar Miembro del Equipo</span>';
            if(typeof lucide !== 'undefined') lucide.createIcons();
        }
    }

    // --- Lógica de Edición ---

    function previewEditPhoto(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const img = document.getElementById('editPhotoPreview');
                img.src = e.target.result;
                img.classList.remove('hidden');
                
                document.getElementById('editPhotoContainer').classList.remove('border-dashed');
                document.getElementById('editPhotoContainer').classList.add('border-solid');
                
                document.getElementById('editPhotoOverlay').classList.remove('hidden');
                document.getElementById('editPhotoPlaceholder').classList.add('opacity-0');
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    function togglePasswordAccordion() {
        const content = document.getElementById('passwordAccordionContent');
        const icon = document.getElementById('passwordAccordionIcon');
        const isHidden = content.classList.contains('hidden');

        if (isHidden) {
            content.classList.remove('hidden');
            icon.style.transform = 'rotate(180deg)';
        } else {
            content.classList.add('hidden');
            icon.style.transform = 'rotate(0deg)';
        }
    }

    function openEditModal(manager) {
        // Reset Accordion State
        const content = document.getElementById('passwordAccordionContent');
        const icon = document.getElementById('passwordAccordionIcon');
        if (content) content.classList.add('hidden');
        if (icon) icon.style.transform = 'rotate(0deg)';

        // Populate Fields
        document.getElementById('editManagerId').value = manager.id_usuario;
        
        // El DNI viene como nro_documento según el select del controlador
        document.getElementById('editManagerDni').value = manager.nro_documento || manager.dni || '';
        document.getElementById('editManagerEmail').value = manager.email || '';
        
        // Sede: sucursal_asignada_id añadida al select del controlador
        const sucursalId = manager.sucursal_asignada_id || '';
        const sucursalSelect = document.getElementById('editManagerSucursalId');
        if (sucursalSelect) sucursalSelect.value = sucursalId;
        
        const fullName = manager.nombre_completo || '';
        let words = fullName.trim().split(/\s+/);
        if (words.length >= 3) {
            document.getElementById('editManagerSurnames').value = words.slice(-2).join(' ');
            document.getElementById('editManagerNames').value = words.slice(0, -2).join(' ');
        } else if (words.length === 2) {
            document.getElementById('editManagerNames').value = words[0];
            document.getElementById('editManagerSurnames').value = words[1];
        } else {
            document.getElementById('editManagerNames').value = fullName;
            document.getElementById('editManagerSurnames').value = '';
        }

        const imgPreview = document.getElementById('editPhotoPreview');
        const placeholder = document.getElementById('editPhotoPlaceholder');
        const container = document.getElementById('editPhotoContainer');
        const overlay = document.getElementById('editPhotoOverlay');

        if (manager.foto_url && manager.foto_url !== 'null') {
            const cleanPath = manager.foto_url.replace(/^(uploads\/|uploads \/|uploads\\|uploads \\)/, '');
            imgPreview.src = `/api/Security/uploads/${cleanPath}`;
            imgPreview.classList.remove('hidden');
            placeholder.classList.add('opacity-0');
            container.classList.remove('border-dashed');
            container.classList.add('border-solid');
            overlay.classList.remove('hidden');
        } else {
            imgPreview.src = '';
            imgPreview.classList.add('hidden');
            placeholder.classList.remove('opacity-0');
            container.classList.add('border-dashed');
            container.classList.remove('border-solid');
            overlay.classList.add('hidden');
        }
        
        document.getElementById('editManagerPassword').value = '';

        const modal = document.getElementById('modalEditManager');
        modal.classList.remove('hidden');
        
        // Animación suave y scroll al inicio
        const modalContent = modal.querySelector('.modal-content');
        if (modalContent) modalContent.scrollTop = 0;
        
        // RE-RENDER ICONS (Critical for dynamic modal visibility)
        setTimeout(() => {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }, 50);
    }

    async function submitEditManager(e) {
        e.preventDefault();
        const btn = document.getElementById('btnEditSubmit');
        const form = e.target;
        const formData = new FormData(form);

        try {
            btn.disabled = true;
            btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> <span>Guardando Cambios...</span>';
            if(typeof lucide !== 'undefined') lucide.createIcons();

            const response = await fetch("{{ route('admin.hr.update') }}", {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });

            const result = await response.json();

            if (result.success) {
                Swal.fire({
                    title: '¡Actualizado!',
                    text: result.message,
                    icon: 'success',
                    confirmButtonColor: '{{ $accentColor }}',
                    customClass: { popup: 'rounded-[2rem]', confirmButton: 'rounded-xl h-12 px-8 font-black uppercase text-xs tracking-widest' }
                }).then(() => location.reload());
            } else {
                Swal.fire({ title: 'Ops...', text: result.message, icon: 'error', confirmButtonColor: '{{ $accentColor }}' });
            }
        } catch (error) {
            console.error('Error update:', error);
            Swal.fire({ title: 'Error', text: 'No se pudo procesar la actualización.', icon: 'error', confirmButtonColor: '{{ $accentColor }}' });
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i data-lucide="save" class="w-5 h-5"></i> <span>Confirmar y Actualizar Perfil</span>';
            if(typeof lucide !== 'undefined') lucide.createIcons();
        }
    }

    // --- Delete Manager Logic ---
    async function deleteManager(id) {
        const result = await Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción eliminará al gerente permanentemente.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444', 
            cancelButtonColor: '#cbd5e1',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar',
            customClass: {
                popup: 'rounded-[2rem]',
                confirmButton: 'rounded-xl h-12 px-6 font-black uppercase text-xs tracking-widest',
                cancelButton: 'rounded-xl h-12 px-6 font-black uppercase text-xs tracking-widest text-slate-600'
            }
        });

        if (result.isConfirmed) {
            try {
                Swal.fire({
                    title: 'Eliminando...',
                    text: 'Por favor espere',
                    allowOutsideClick: false,
                    didOpen: () => { Swal.showLoading(); }
                });

                const response = await fetch("{{ route('admin.hr.delete') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ id_usuario: id })
                });

                const data = await response.json();

                if (data.success) {
                    Swal.fire({
                        title: 'Eliminado',
                        text: 'El gerente ha sido eliminado correctamente.',
                        icon: 'success',
                        confirmButtonColor: '{{ $accentColor }}',
                        customClass: { popup: 'rounded-[2rem]' }
                    }).then(() => location.reload());
                } else {
                    throw new Error(data.message || 'Error al eliminar');
                }
            } catch (error) {
                console.error(error);
                Swal.fire({
                    title: 'Error',
                    text: 'No se pudo eliminar el registro. Intenta nuevamente.',
                    icon: 'error',
                    confirmButtonColor: '{{ $accentColor }}'
                });
            }
        }
    }

    // --- Switch Logic Implementation ---
    async function toggleManagerStatus(checkbox) {
        const managerId = checkbox.dataset.id;
        const isChecked = checkbox.checked;
        const newState = isChecked ? 'ACTIVO' : 'INACTIVO';
        
        // Optimistic UI Update
        const label = document.getElementById(`status-label-${managerId}`);
        const track = document.getElementById(`switch-track-${managerId}`);
        
        if (label) {
            label.innerText = newState;
            label.style.color = isChecked ? 'var(--theme-accent)' : 'var(--theme-text-muted)';
        }
        if (track) {
            track.style.backgroundColor = isChecked ? 'var(--theme-accent)' : 'var(--theme-switch-inactive)';
        }

        try {
            const response = await fetch("{{ route('admin.hr.updateStatus') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    id_usuario: managerId,
                    estado: newState
                })
            });

            const result = await response.json();

            if (!result.success) {
                throw new Error(result.message || 'Error updating status');
            }
            
            // Subtle Toast
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 2000,
                timerProgressBar: false,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                },
                customClass: {
                    popup: 'colored-toast rounded-2xl'
                }
            });
            
            Toast.fire({
                icon: 'success',
                title: `Estado: ${newState}`
            });

        } catch (error) {
            console.error('Error toggling status:', error);
            
            // Revert UI on error
            checkbox.checked = !isChecked; 
            if (label) {
                label.innerText = !isChecked ? 'ACTIVO' : 'INACTIVO';
                label.style.color = !isChecked ? 'var(--theme-accent)' : 'var(--theme-text-muted)';
            }
            if (track) {
                track.style.backgroundColor = !isChecked ? 'var(--theme-accent)' : 'var(--theme-switch-inactive)';
            }
            
            Swal.fire({
                title: 'Error',
                text: 'No se pudo cambiar el estado.',
                icon: 'error',
                confirmButtonColor: '{{ $accentColor }}'
            });
        }
    }
</script>
@endpush