@extends('layouts.panel')

@section('title', 'Gestión de Staff')

@section('content')

    {{-- Hidden Input for Verified Company ID --}}
    <input type="hidden" id="verifiedEmpresaId">

        // Forzamos Modo Claro (No más negro)
        $panelColor = $convertColor($user->color_preferido ?? null) ?? '#10b981';
        $bgColor = '#f8fafc';
        $isDark = false;

        $bgPage = '#f8fafc';
        $accentColor = $panelColor;
        $bgCard = '#ffffff';
        $bgSurface = '#f0f4f8';
        $textMain = '#0f172a';
        $textMuted = '#64748b';
        $borderColor = '#dae1e7';
        $shadowColor = 'rgba(15, 23, 42, 0.05)';
        $switchInactive = '#e2e8f0';
        $switchKnob = '#ffffff';
        $modalBg = '#ffffff';
        
        $navyDark = '#0f172a'; // Aclarado para no ser negro puro
        $emeraldPrimary = '#10b981';
    @endphp

    <div class="flex flex-col lg:flex-row justify-between items-center mb-10 gap-8 fade-in">
        <div class="flex items-center gap-5">
            <div class="bg-white border border-slate-100 p-4 rounded-2xl shadow-xl shadow-slate-200/50">
                <i data-lucide="users" class="w-8 h-8 text-emerald-500"></i>
            </div>
            <div>
                <h1 class="text-3xl font-black text-slate-900 uppercase tracking-tighter" id="pageTitle">Agenda de Personal</h1>
                <p class="text-[11px] font-bold text-slate-500 uppercase tracking-[0.2em] mt-1 opacity-60">Colaboradores & Accesos</p>
            </div>
        </div>
        
        <div class="flex items-center gap-4 w-full lg:w-auto overflow-x-auto pb-2 lg:pb-0 no-scrollbar">
            <div class="flex bg-slate-100 p-1 rounded-2xl border border-slate-200 shrink-0">
                <button onclick="document.getElementById('roleFilter').value=''; filterStaff(); this.parentElement.querySelectorAll('button').forEach(b=>b.classList.remove('bg-white','shadow-sm','text-slate-900')); this.classList.add('bg-white','shadow-sm','text-slate-900')" class="px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all bg-white shadow-sm text-slate-900">Todos</button>
                <button onclick="document.getElementById('roleFilter').value='MESERO'; filterStaff(); this.parentElement.querySelectorAll('button').forEach(b=>b.classList.remove('bg-white','shadow-sm','text-slate-900')); this.classList.add('bg-white','shadow-sm','text-slate-900')" class="px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all text-slate-400">Meseros</button>
                <button onclick="document.getElementById('roleFilter').value='COCINA'; filterStaff(); this.parentElement.querySelectorAll('button').forEach(b=>b.classList.remove('bg-white','shadow-sm','text-slate-900')); this.classList.add('bg-white','shadow-sm','text-slate-900')" class="px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all text-slate-400">Cocina</button>
            </div>
            
            <button onclick="prepareCreate()" class="bg-emerald-500 hover:bg-emerald-400 text-white px-8 py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest shadow-xl shadow-emerald-500/20 transition-all flex items-center gap-3 shrink-0 active:scale-95">
                <i data-lucide="plus-circle" class="w-4 h-4"></i>
                Nuevo Miembro
            </button>
        </div>
    </div>

    <!-- Buscador Premium (Aclarado) -->
    <div class="mb-10 fade-in" style="animation-delay: 50ms;">
        <div class="relative group">
            <div class="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none">
                <i data-lucide="search" class="w-5 h-5 text-slate-400 group-focus-within:text-emerald-500 transition-colors"></i>
            </div>
            <input type="text" id="searchInput" 
                class="w-full bg-white border border-slate-100 dark:border-white/5 rounded-[2rem] pl-16 pr-8 py-5 text-sm font-bold text-slate-900 dark:text-white placeholder:text-slate-400 placeholder:font-black placeholder:uppercase placeholder:tracking-widest focus:ring-4 focus:ring-emerald-500/5 focus:border-emerald-500/30 transition-all shadow-xl shadow-slate-200/50 dark:shadow-none outline-none" 
                placeholder="Buscar por nombre, DNI o correo...">
            <div class="absolute inset-y-0 right-0 pr-6 flex items-center gap-3">
                <span class="px-3 py-1.5 rounded-xl bg-slate-50 text-[9px] font-black text-slate-400 uppercase tracking-widest border border-slate-100">Filtro Inteligente</span>
                <div class="w-px h-6 bg-slate-200"></div>
                <i data-lucide="sliders-horizontal" class="w-4 h-4 text-slate-400"></i>
            </div>
        </div>
    </div>

    <!-- Stats Superiores (Clean Light / Emerald accents) -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-10 fade-in" style="animation-delay: 100ms;">
        <div class="bg-white p-6 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-200/50 flex flex-col justify-between min-h-[140px] transition-all hover:scale-[1.02] hover:border-emerald-500/30 group">
            <div class="flex justify-between items-start">
                <span class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] group-hover:text-emerald-500 transition-colors">Total Staff</span>
                <i data-lucide="users" class="w-4 h-4 text-slate-200 group-hover:text-emerald-500 transition-colors"></i>
            </div>
            <div class="flex items-baseline gap-3">
                <span id="statTotal" class="text-4xl font-black text-slate-900 tracking-tighter">0</span>
                <span class="px-2 py-0.5 rounded-md bg-emerald-500/10 text-[8px] font-black text-emerald-500 uppercase tracking-widest border border-emerald-500/20">Registrados</span>
            </div>
        </div>
        <div class="bg-white p-6 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-200/50 flex flex-col justify-between min-h-[140px] transition-all hover:scale-[1.02] hover:border-emerald-500/30 group">
            <div class="flex justify-between items-start">
                <span class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] group-hover:text-emerald-500 transition-colors">Activos Ahora</span>
                <div class="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse mt-1"></div>
            </div>
            <div class="flex items-baseline gap-3">
                <span id="statActive" class="text-4xl font-black text-slate-900 tracking-tighter">0</span>
                <span class="text-[9px] font-bold text-emerald-500/60 uppercase tracking-tighter">En Turno</span>
            </div>
        </div>
        <div class="bg-white p-6 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-200/50 flex flex-col justify-between min-h-[140px] col-span-2 relative overflow-hidden group transition-all hover:border-emerald-500/30">
            <div class="absolute -right-10 -top-10 w-40 h-40 bg-emerald-500/5 rounded-full blur-3xl group-hover:bg-emerald-500/10 transition-all duration-700"></div>
            <div class="relative z-10 flex justify-between items-start">
                <span class="text-[10px] font-black text-emerald-500 uppercase tracking-[0.2em] flex items-center gap-2">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping"></span>
                    Gestión Inteligente v2.0
                </span>
                <i data-lucide="zap" class="w-4 h-4 text-emerald-500/20 group-hover:text-emerald-500 transition-colors"></i>
            </div>
            <div class="relative z-10">
                <p class="text-[11px] font-bold text-slate-500 uppercase leading-relaxed opacity-80 max-w-[80%]">Sincronización de personal con comandas, caja diaria y reportes de productividad activada.</p>
            </div>
        </div>
    </div>

    <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4 hidden">
        <select id="roleFilter"><option value=""></option></select>
    </div>

    {{-- Grid de Personal (Pares) --}}
    <div class="flex-1 flex flex-col min-h-0 min-w-0 fade-in" style="animation-delay: 200ms;">
        <div class="flex-1 overflow-y-auto custom-scrollbar pb-10">
            <div id="staffGrid" class="grid grid-cols-1 xl:grid-cols-2 gap-8 px-1">
                {{-- Contenido dinámico cargado vía JS --}}
                <div class="col-span-full py-20 text-center">
                    <div class="inline-flex flex-col items-center gap-4 text-[var(--theme-text-muted)] animate-pulse">
                        <i data-lucide="loader-2" class="w-10 h-10 animate-spin opacity-20"></i>
                        <span class="text-[10px] font-black uppercase tracking-widest">Sincronizando Staff...</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Footer/Paginación Premium --}}
        <div class="mt-8 p-8 rounded-[3rem] bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] flex flex-col sm:flex-row justify-between items-center gap-6 shadow-2xl relative overflow-hidden group/footer">
            <div class="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-transparent via-[var(--theme-accent)]/20 to-transparent"></div>
            <div class="flex flex-col gap-1.5 relative z-10">
                <span id="showingText" class="text-[11px] text-[var(--theme-text-main)] font-[1000] uppercase tracking-[0.2em] leading-none">Cargando Staff...</span>
                <p class="text-[9px] text-[var(--theme-text-muted)] font-black uppercase tracking-widest opacity-40">Gestión de Talento Humano • Piter Pro v2.0</p>
            </div>
            <div class="flex gap-4 relative z-10">
                <button class="px-8 py-4 rounded-2xl border border-[var(--theme-border)] bg-[var(--theme-bg-card)] text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest hover:border-[var(--theme-accent)] hover:text-[var(--theme-accent)] disabled:opacity-20 transition-all active:scale-95" disabled>
                    <i data-lucide="chevron-left" class="w-4 h-4 inline-block mr-2"></i> Anterior
                </button>
                <button class="px-8 py-4 rounded-2xl border border-[var(--theme-border)] bg-[var(--theme-bg-card)] text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest hover:border-[var(--theme-accent)] hover:text-[var(--theme-accent)] disabled:opacity-20 transition-all active:scale-95" disabled>
                    Siguiente <i data-lucide="chevron-right" class="w-4 h-4 inline-block ml-2"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Modal Crear/Editar Usuario -->
    <div id="modalUsuario" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-500/10 backdrop-blur-md hidden fade-in">
        <div class="bg-[var(--theme-bg-card)] w-full max-w-4xl rounded-[2rem] shadow-2xl overflow-hidden max-h-[90vh] flex flex-col border border-[var(--theme-border)]">
            <!-- Header -->
            <div class="px-8 py-7 border-b border-[var(--theme-border)] flex justify-between items-center bg-gradient-to-r from-[var(--theme-bg-surface)] to-[var(--theme-bg-card)] relative overflow-hidden">
                <div class="absolute top-0 right-0 p-8 opacity-5">
                    <i data-lucide="users" class="w-32 h-32 text-[var(--theme-accent)]"></i>
                </div>
                <div class="relative z-10">
                    <h2 id="modalTitle" class="text-2xl font-[1000] text-[var(--theme-text-main)] tracking-tighter uppercase">Nuevo Miembro del Staff</h2>
                    <p class="text-[10px] text-[var(--theme-text-muted)] mt-1 font-black flex items-center gap-2 uppercase tracking-widest">
                        <span class="p-1 bg-[var(--theme-accent)]/10 text-[var(--theme-accent)] rounded">
                            <i data-lucide="info" class="w-3 h-3"></i>
                        </span>
                        Administración Profesional de Colaboradores
                    </p>
                </div>
                <button onclick="closeModal('modalUsuario')" class="relative z-10 p-2.5 hover:bg-rose-500/10 hover:text-rose-500 text-[var(--theme-text-muted)] rounded-xl transition-all active:scale-90">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>

            <!-- Body con Scroll -->
            <div class="p-8 overflow-y-auto custom-scrollbar flex-1 bg-[var(--theme-bg-page)]/30">
                <form id="formStaff" class="space-y-8">
                     
                    <div class="bg-[var(--theme-bg-card)] rounded-3xl border border-[var(--theme-border)] p-8 shadow-sm">
                        <h3 class="text-[10px] font-black text-[var(--theme-accent)] uppercase tracking-[0.2em] mb-8 flex items-center gap-3">
                            <span class="w-8 h-8 rounded-lg bg-[var(--theme-accent)]/10 flex items-center justify-center">
                                <i data-lucide="user" class="w-4 h-4"></i>
                            </span>
                            Información Personal
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="col-span-1 md:col-span-2">
                                <label class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-4 block">Imagen del Colaborador</label>
                                <div class="bg-[var(--theme-bg-surface)] p-8 rounded-[2.5rem] border border-[var(--theme-border)] shadow-inner relative overflow-hidden group/upload">
                                    <div class="flex flex-col md:flex-row items-center gap-10">
                                        <!-- Área de Previsualización Premium -->
                                        <div class="relative">
                                            <div id="photoPreviewContainer" class="w-32 h-40 rounded-[2rem] bg-[var(--theme-bg-card)] border-2 border-dashed border-[var(--theme-border)] flex items-center justify-center overflow-hidden transition-all group-hover/upload:border-[var(--theme-accent)]/50 shadow-2xl relative">
                                                <div id="photoPlaceholder" class="flex flex-col items-center gap-3 opacity-20 group-hover/upload:opacity-40 transition-opacity">
                                                    <div class="w-12 h-12 rounded-full bg-[var(--theme-text-muted)]/10 flex items-center justify-center">
                                                        <i data-lucide="camera" class="w-6 h-6 text-[var(--theme-text-muted)]"></i>
                                                    </div>
                                                    <span class="text-[8px] font-[1000] uppercase tracking-widest text-[var(--theme-text-muted)] text-center">Formato<br>3x4</span>
                                                </div>
                                                <img id="photoPreviewImage" class="w-full h-full object-cover hidden scale-105 group-hover/upload:scale-100 transition-transform duration-500">
                                                
                                                <!-- Overlay de carga (opcional/efecto) -->
                                                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-[.has-image]/upload:opacity-100 transition-opacity"></div>
                                            </div>
                                            
                                            <button type="button" id="btnRemovePhoto" class="absolute -top-3 -right-3 w-10 h-10 rounded-2xl bg-rose-500 text-white shadow-xl shadow-rose-500/20 flex items-center justify-center hover:scale-110 active:scale-95 transition-all opacity-0 pointer-events-none z-20">
                                                <i data-lucide="trash-2" class="w-5 h-5"></i>
                                            </button>
                                        </div>

                                        <!-- Controles y Texto -->
                                        <div class="flex-1 text-center md:text-left space-y-5">
                                            <div>
                                                <h4 class="text-sm font-[1000] text-[var(--theme-text-main)] uppercase tracking-tight">Identidad Visual</h4>
                                                <p class="text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mt-1">Sube una fotografía clara en formato rectangular</p>
                                            </div>
                                            
                                            <div class="flex flex-wrap justify-center md:justify-start gap-4">
                                                <label for="inputFoto" class="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-[var(--theme-accent)] text-white font-black text-[10px] uppercase tracking-widest cursor-pointer shadow-lg shadow-[var(--theme-accent)]/20 hover:shadow-xl hover:shadow-[var(--theme-accent)]/30 transition-all active:scale-95">
                                                    <i data-lucide="upload-cloud" class="w-4 h-4"></i>
                                                    Subir Fotografía
                                                </label>
                                                <input type="file" id="inputFoto" accept="image/*" class="hidden">
                                                
                                                <div id="photoFileName" class="px-4 py-4 rounded-2xl bg-[var(--theme-bg-card)] border border-[var(--theme-border)] text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest flex items-center gap-3 hidden">
                                                    <i data-lucide="file-text" class="w-3.5 h-3.5 opacity-50"></i>
                                                    <span class="truncate max-w-[150px]">name.jpg</span>
                                                </div>
                                            </div>
                                            
                                            <p class="text-[8px] font-black text-[var(--theme-text-muted)]/50 uppercase tracking-[0.2em]">Piter Pro v2.0 • Sistema de Gestión de Identidad</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-1 block">DNI / Documento</label>
                                <div class="relative">
                                    <i data-lucide="fingerprint" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--theme-text-muted)] transition-colors peer-focus:text-[var(--theme-accent)]"></i>
                                    <input type="text" id="inputDNI" maxlength="8" class="peer w-full bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 rounded-2xl pl-12 pr-4 py-3.5 text-sm font-bold text-[var(--theme-text-main)] transition-all outline-none" placeholder="8 dígitos">
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-1 block">Nombres</label>
                                <div class="relative">
                                    <i data-lucide="type" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--theme-text-muted)]"></i>
                                    <input type="text" id="inputNombres" class="w-full bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 rounded-2xl pl-12 pr-4 py-3.5 text-sm font-bold text-[var(--theme-text-main)] transition-all outline-none" placeholder="Juan">
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-1 block">Apellidos</label>
                                <div class="relative">
                                    <i data-lucide="type" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--theme-text-muted)]"></i>
                                    <input type="text" id="inputApellidos" class="w-full bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 rounded-2xl pl-12 pr-4 py-3.5 text-sm font-bold text-[var(--theme-text-main)] transition-all outline-none" placeholder="Pérez García">
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-1 block">Correo Electrónico</label>
                                <div class="relative">
                                    <i data-lucide="mail" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--theme-text-muted)]"></i>
                                    <input type="email" id="inputEmail" class="w-full bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 rounded-2xl pl-12 pr-4 py-3.5 text-sm font-bold text-[var(--theme-text-main)] transition-all outline-none" placeholder="colaborador@piter.com">
                                </div>
                            </div>
                            <div class="space-y-2 col-span-1 md:col-span-2">
                                <label class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-1 block">Teléfono de Contacto</label>
                                <div class="flex gap-4">
                                    <div class="relative">
                                        <select id="inputPais" class="appearance-none w-32 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-2xl px-5 py-3.5 text-[11px] font-black text-[var(--theme-text-main)] cursor-pointer focus:ring-0 focus:border-[var(--theme-accent)]">
                                            <option value="+51">🇵🇪 +51</option>
                                            <option value="+52">🇲🇽 +52</option>
                                            <option value="+57">🇨🇴 +57</option>
                                            <option value="+1">🇺🇸 +1</option>
                                        </select>
                                        <i data-lucide="chevron-down" class="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--theme-text-muted)] pointer-events-none"></i>
                                    </div>
                                    <div class="relative flex-1">
                                        <i data-lucide="phone" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--theme-text-muted)]"></i>
                                        <input type="tel" id="inputTelefono" maxlength="9" class="w-full bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 rounded-2xl pl-12 pr-4 py-3.5 text-sm font-bold text-[var(--theme-text-main)] transition-all outline-none" placeholder="999 999 999">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Espaciador orgánico --}}
                    <div class="h-4"></div>

                    <div class="bg-[var(--theme-bg-card)] rounded-3xl border border-[var(--theme-border)] p-8 shadow-sm">
                        <h3 class="text-[10px] font-black text-[var(--theme-accent)] uppercase tracking-[0.2em] mb-8 flex items-center gap-3">
                            <span class="w-8 h-8 rounded-lg bg-[var(--theme-accent)]/10 flex items-center justify-center">
                                <i data-lucide="briefcase" class="w-4 h-4"></i>
                            </span>
                            Puesto y Compensación
                        </h3>
                        
                        <div class="mb-10">
                            <label class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-6 block text-center">Elegir Rol Profesional</label>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="roleSelector">
                                <button type="button" onclick="selectRole(this, 'MESERO')" class="role-btn group p-6 rounded-[2rem] border border-[var(--theme-border)] bg-[var(--theme-bg-surface)] hover:border-[var(--theme-accent)]/50 hover:bg-[var(--theme-accent)]/[0.02] hover:shadow-xl hover:shadow-[var(--theme-accent)]/5 transition-all flex flex-col items-center gap-4 active:scale-95">
                                    <div class="w-14 h-14 rounded-2xl bg-orange-500/10 text-orange-500 flex items-center justify-center transition-all group-hover:scale-110 group-[.active]:bg-orange-500 group-[.active]:text-white">
                                        <i data-lucide="utensils" class="w-7 h-7"></i>
                                    </div>
                                    <span class="text-[10px] font-black uppercase text-[var(--theme-text-muted)] tracking-[0.1em] group-[.active]:text-[var(--theme-accent)]">Mesero</span>
                                </button>
                                <button type="button" onclick="selectRole(this, 'COCINA')" class="role-btn group p-6 rounded-[2rem] border border-[var(--theme-border)] bg-[var(--theme-bg-surface)] hover:border-[var(--theme-accent)]/50 hover:bg-[var(--theme-accent)]/[0.02] hover:shadow-xl hover:shadow-[var(--theme-accent)]/5 transition-all flex flex-col items-center gap-4 active:scale-95">
                                    <div class="w-14 h-14 rounded-2xl bg-red-500/10 text-red-500 flex items-center justify-center transition-all group-hover:scale-110 group-[.active]:bg-red-500 group-[.active]:text-white">
                                        <i data-lucide="chef-hat" class="w-7 h-7"></i>
                                    </div>
                                    <span class="text-[10px] font-black uppercase text-[var(--theme-text-muted)] tracking-[0.1em] group-[.active]:text-[var(--theme-accent)]">Cocina</span>
                                </button>
                                <button type="button" onclick="selectRole(this, 'BAR')" class="role-btn group p-6 rounded-[2rem] border border-[var(--theme-border)] bg-[var(--theme-bg-surface)] hover:border-[var(--theme-accent)]/50 hover:bg-[var(--theme-accent)]/[0.02] hover:shadow-xl hover:shadow-[var(--theme-accent)]/5 transition-all flex flex-col items-center gap-4 active:scale-95">
                                    <div class="w-14 h-14 rounded-2xl bg-purple-500/10 text-purple-500 flex items-center justify-center transition-all group-hover:scale-110 group-[.active]:bg-purple-500 group-[.active]:text-white">
                                        <i data-lucide="wine" class="w-7 h-7"></i>
                                    </div>
                                    <span class="text-[10px] font-black uppercase text-[var(--theme-text-muted)] tracking-[0.1em] group-[.active]:text-[var(--theme-accent)]">Barra</span>
                                </button>
                                <button type="button" onclick="selectRole(this, 'CAJA')" class="role-btn group p-6 rounded-[2rem] border border-[var(--theme-border)] bg-[var(--theme-bg-surface)] hover:border-[var(--theme-accent)]/50 hover:bg-[var(--theme-accent)]/[0.02] hover:shadow-xl hover:shadow-[var(--theme-accent)]/5 transition-all flex flex-col items-center gap-4 active:scale-95">
                                    <div class="w-14 h-14 rounded-2xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center transition-all group-hover:scale-110 group-[.active]:bg-emerald-500 group-[.active]:text-white">
                                        <i data-lucide="dollar-sign" class="w-7 h-7"></i>
                                    </div>
                                    <span class="text-[10px] font-black uppercase text-[var(--theme-text-muted)] tracking-[0.1em] group-[.active]:text-[var(--theme-accent)]">Caja</span>
                                </button>
                            </div>
                            <input type="hidden" id="inputRol" value="">
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="space-y-2">
                                <label class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-1 block">Sueldo Base (Mensual)</label>
                                <div class="relative">
                                    <span class="absolute left-4 top-1/2 -translate-y-1/2 text-sm font-black text-[var(--theme-text-muted)] opacity-50">S/</span>
                                    <input type="number" id="inputSueldo" class="w-full bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 rounded-2xl pl-12 pr-4 py-3.5 text-sm font-[1000] text-[var(--theme-text-main)] transition-all outline-none" placeholder="0.00">
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest mb-1 block">Firma de Registro</label>
                                <div class="relative">
                                    <i data-lucide="calendar" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--theme-text-muted)]"></i>
                                    <input type="date" id="inputFechaIngreso" class="w-full bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] focus:bg-[var(--theme-bg-card)] focus:border-[var(--theme-accent)] rounded-2xl pl-12 pr-4 py-3.5 text-sm font-bold text-[var(--theme-text-main)] outline-none" value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="bg-[var(--theme-bg-card)] rounded-3xl border border-[var(--theme-border)] p-8 shadow-sm">
                        <div class="flex items-center justify-between mb-8">
                            <div class="flex items-center gap-3">
                                <h3 class="text-[10px] font-black text-[var(--theme-accent)] uppercase tracking-[0.2em] flex items-center gap-3">
                                    <span class="w-8 h-8 rounded-lg bg-[var(--theme-accent)]/10 flex items-center justify-center">
                                        <i data-lucide="clock" class="w-4 h-4"></i>
                                    </span>
                                    Horario Laboral
                                </h3>
                                <div class="h-1 w-1 rounded-full bg-[var(--theme-border)]"></div>
                                <span class="px-3 py-1 bg-emerald-500/10 text-emerald-500 text-[9px] font-black uppercase rounded-lg tracking-widest border border-emerald-500/20">Semana Estándar</span>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 gap-4" id="scheduleContainer">
                            <!-- Generado vía JS -->
                        </div>
                    </div>

                </form>
            </div>

            <!-- Footer -->
            <div class="px-8 py-7 border-t border-[var(--theme-border)] bg-[var(--theme-bg-card)] flex justify-end gap-3 rounded-b-[2rem] shadow-[0_-15px_40px_rgba(0,0,0,0.1)] relative z-10">
                <button onclick="closeModal('modalUsuario')" class="px-8 py-4 rounded-2xl text-[var(--theme-text-muted)] font-black text-[10px] uppercase tracking-widest hover:bg-[var(--theme-bg-surface)] hover:text-[var(--theme-text-main)] transition-all active:scale-95">
                    Cancelar registro
                </button>
                <button id="btnGuardarStaff" class="group relative overflow-hidden px-12 py-4 rounded-2xl bg-[var(--theme-accent)] text-white font-[1000] text-[10px] uppercase tracking-[0.15em] shadow-xl shadow-[var(--theme-accent)]/20 hover:shadow-2xl hover:shadow-[var(--theme-accent)]/30 transition-all flex items-center justify-center gap-3 active:scale-[0.98]">
                    <span class="relative z-10 flex items-center gap-3">
                        <i data-lucide="check-circle-2" class="w-4.5 h-4.5 group-hover:rotate-[360deg] transition-transform duration-500"></i>
                        Confirmar Miembro
                    </span>
                    <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                </button>
            </div>
        </div>


        </div>
    </div>

    <!-- Modal Confirmacion -->
    <div id="modalConfirm" class="fixed inset-0 z-[60] flex items-center justify-center bg-slate-500/10 backdrop-blur-md hidden fade-in">
        <div class="bg-[var(--theme-bg-card)] w-full max-w-sm rounded-[2rem] shadow-2xl p-8 text-center border border-[var(--theme-border)]">
            <div class="w-16 h-16 rounded-[1.5rem] bg-[var(--theme-accent)]/10 text-[var(--theme-accent)] flex items-center justify-center mx-auto mb-6 shadow-inner shadow-[var(--theme-accent)]/5">
                <i data-lucide="alert-circle" class="w-8 h-8"></i>
            </div>
            <h3 id="confirmTitle" class="text-xl font-[1000] text-[var(--theme-text-main)] mb-2 uppercase tracking-tight">¿Estás seguro?</h3>
            <p id="confirmMessage" class="text-[11px] font-black text-[var(--theme-text-muted)] mb-8 uppercase tracking-widest leading-relaxed">Esta acción requiere confirmación</p>
            <div class="flex gap-4 justify-center">
                <button onclick="closeConfirm()" class="flex-1 px-6 py-3.5 rounded-xl text-[var(--theme-text-muted)] font-black text-[10px] uppercase tracking-widest hover:bg-[var(--theme-bg-surface)] transition-colors">Cancelar</button>
                <button id="btnConfirmAction" class="flex-1 px-6 py-3.5 rounded-xl bg-[var(--theme-accent)] text-white font-black text-[10px] uppercase tracking-widest shadow-lg shadow-[var(--theme-accent)]/20 transition-all active:scale-95">Confirmar</button>
            </div>
        </div>
    </div>

@endsection

@push('styles')
<style>
    :root {
        /* Forzamos Colores Claros para evitar el 'Negro' que no le gusta al usuario */
        --theme-bg-page: #f8fafc;
        --theme-bg-card: #ffffff;
        --theme-bg-surface: #f1f5f9;
        --theme-text-main: #0f172a;
        --theme-text-muted: #64748b;
        --theme-border: #e2e8f0;
        --theme-shadow: rgba(0,0,0,0.05);
        --theme-accent: {{ $accentColor }};
    }

    body {
        background-color: var(--theme-bg-page) !important;
        color: var(--theme-text-main);
    }

    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: var(--theme-border);
        border-radius: 10px;
    }

    /* Modal Styles */
    #modalUsuario > div, #modalConfirm > div {
        background-color: var(--theme-bg-card) !important;
        color: var(--theme-text-main);
        backdrop-filter: blur(20px);
        border: 1px solid var(--theme-border);
    }

    .role-btn.active {
        border-color: var(--theme-accent) !important;
        background-color: color-mix(in srgb, var(--theme-accent), transparent 90%) !important;
        box-shadow: 0 0 20px color-mix(in srgb, var(--theme-accent), transparent 80%);
    }

    .role-btn.active span {
        color: var(--theme-accent) !important;
    }

    input, select, textarea {
        background-color: var(--theme-bg-surface) !important;
        color: var(--theme-text-main) !important;
        border-color: var(--theme-border) !important;
        transition: all 0.2s ease;
    }

    input:focus, select:focus {
        border-color: var(--theme-accent) !important;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent), transparent 90%) !important;
    }

    .toggle-switch {
        width: 48px;
        height: 24px;
        background-color: {{ $isDark ? 'rgba(255,255,255,0.1)' : '#e2e8f0' }};
        border-radius: 99px;
        position: relative;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-block;
        flex-shrink: 0;
    }

    .toggle-switch::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .toggle-switch.active {
        background-color: var(--theme-accent) !important;
        box-shadow: 0 0 15px color-mix(in srgb, var(--theme-accent), transparent 70%);
    }

    .toggle-switch.active::after {
        transform: translateX(24px);
    }

    .fade-in {
        animation: fadeIn 0.4s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endpush
@push('scripts')
<script>
    // Configuración Global
    const API_URL = "{{ url('/api/Security') }}"; 
    let currentStaff = [];
    let isEditing = false;
    let editingId = null;
    let confirmCallback = null;

    function showConfirmation(title, msg, callback) {
        document.getElementById('confirmTitle').innerText = title;
        document.getElementById('confirmMessage').innerText = msg;
        confirmCallback = callback;
        document.getElementById('modalConfirm').classList.remove('hidden');
    }

    function closeConfirm() {
        document.getElementById('modalConfirm').classList.add('hidden');
        confirmCallback = null;
    }

    document.getElementById('btnConfirmAction').addEventListener('click', () => {
        if(confirmCallback) confirmCallback();
        closeConfirm();
    });



    document.addEventListener('DOMContentLoaded', () => {
        loadStaff();
        generateScheduleConfig();
        setupRoleSelectors();
        setupPhotoPreview();
        
        // Listener de Buscador
        // Listener de Buscador & Filtros
        const searchInput = document.getElementById('searchInput');
        const roleFilter = document.getElementById('roleFilter');

        if(searchInput){
            searchInput.addEventListener('input', () => filterStaff());
        }
        if(roleFilter){
            roleFilter.addEventListener('change', () => filterStaff());
        }

        // Listener DNI (Auto-rellenado)
        const dniInput = document.getElementById('inputDNI');

        if(dniInput){
            dniInput.addEventListener('input', async (e) => {
                const dni = e.target.value;
                const nombresInput = document.getElementById('inputNombres');
                const apellidosInput = document.getElementById('inputApellidos');
                
                // Limpiar si no tiene 8
                if (dni.length < 8) {
                    nombresInput.placeholder = "Buscando...";
                    apellidosInput.placeholder = "Buscando...";
                    return;
                }

                if(dni.length === 8 && !isEditing) { 
                    try {
                        dniInput.classList.add('animate-pulse');
                        nombresInput.disabled = true;
                        apellidosInput.disabled = true;

                        const res = await fetch(`${API_URL}/DNI?dni=${dni}`);
                        const data = await res.json();
                        
                        const resolvedData = data.data || data;
                        const fullName = (resolvedData.nombre || resolvedData.data?.nombre || '').trim();

                        if(fullName) {
                            const words = fullName.split(' ');
                            if (words.length >= 3) {
                                // Los últimos dos son apellidos
                                const apellidos = words.slice(-2).join(' ');
                                const nombres = words.slice(0, -2).join(' ');
                                nombresInput.value = nombres.toUpperCase();
                                apellidosInput.value = apellidos.toUpperCase();
                            } else if (words.length === 2) {
                                nombresInput.value = words[0].toUpperCase();
                                apellidosInput.value = words[1].toUpperCase();
                            } else {
                                nombresInput.value = fullName.toUpperCase();
                                apellidosInput.value = '';
                            }

                            [nombresInput, apellidosInput].forEach(el => {
                                el.classList.remove('border-slate-200');
                                el.classList.add('border-green-500', 'bg-green-50');
                            });
                        }
                    } catch(e) { console.error("Error DNI:", e); }
                    finally {
                        dniInput.classList.remove('animate-pulse');
                        nombresInput.disabled = false;
                        apellidosInput.disabled = false;
                    }
                }
            });
            
            // Limpiar estilos al cambiar DNI
            dniInput.addEventListener('focus', () => {
                document.getElementById('inputNombres').classList.remove('border-green-500', 'bg-green-50');
                document.getElementById('inputApellidos').classList.remove('border-green-500', 'bg-green-50');
            });
        }
    });

    // ----------------------------------------------------
    // CARGA DE STAFF
    // ----------------------------------------------------
    async function loadStaff(search = '') {
        const grid = document.getElementById('staffGrid');
        const showingText = document.getElementById('showingText');
        
        const empresaId = "{{ Auth::guard('admin')->user()->empresa_id ?? Auth::user()->empresa_id ?? '' }}";
        const sucursalId = "{{ Auth::user()->sucursal_asignada_id ?? Auth::user()->sucursal_id ?? '' }}";

        // PERSISTENCIA: Guardar en localStorage y en Hidden Input verificado
        if(empresaId) {
            localStorage.setItem('empresa_id', empresaId);
            const hiddenInput = document.getElementById('verifiedEmpresaId');
            if(hiddenInput) hiddenInput.value = empresaId;
        }
        if(sucursalId) localStorage.setItem('sucursal_id', sucursalId);

        if (!empresaId) {
            grid.innerHTML = '<div class="col-span-full text-center py-20 text-orange-500 font-black uppercase text-[10px] tracking-widest">Sesión expirada. Por favor, reingrese.</div>';
            return; 
        }
        
        // Loader Premium
        grid.innerHTML = `
            <div class="col-span-full py-20 text-center">
                <div class="inline-flex flex-col items-center gap-4 text-[var(--theme-text-muted)] animate-pulse">
                    <i data-lucide="loader-2" class="w-10 h-10 animate-spin opacity-20"></i>
                    <span class="text-[10px] font-black uppercase tracking-widest">Sincronizando Staff...</span>
                </div>
            </div>
        `;
        if(window.lucide) lucide.createIcons();

        let url = `${API_URL}/Staff?empresa_id=${empresaId}`;
        if (sucursalId) url += `&sucursal_id=${sucursalId}`;
        if (search) url += `&search=${search}`;

        try {
            const response = await fetch(url);
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            
            const result = await response.json();

            if (result.success && result.data) {
                currentStaff = result.data; // Guardar referencia global
                renderStaffTable(result.data);
                updateStats(result.data);
            } else {
                grid.innerHTML = `<div class="col-span-full text-center py-20 text-red-500 font-black uppercase text-[10px] tracking-widest">${result.message || 'Sin datos'}</div>`;
            }
        } catch (error) {
            console.error(error);
            grid.innerHTML = `<div class="col-span-full text-center py-20 text-red-500 font-black uppercase text-[10px] tracking-widest">Error de conexión: ${error.message}</div>`;
        }
    }

    function filterStaff() {
        const searchEl = document.getElementById('searchInput');
        const roleEl = document.getElementById('roleFilter');
        
        const searchText = searchEl ? searchEl.value.toLowerCase() : '';
        const roleValue = roleEl ? roleEl.value.toLowerCase() : '';

        if(!currentStaff) return;

        const filtered = currentStaff.filter(member => {
             // 1. Filtro Texto
             const name = (member.nombre_completo || '').toLowerCase();
             const email = (member.email || '').toLowerCase();
             const dni = (member.dni || '').toLowerCase();
             const matchText = name.includes(searchText) || email.includes(searchText) || dni.includes(searchText);

             // 2. Filtro Rol
             const r = String(member.rol || '').toUpperCase();
             let matchRole = true;
             if (roleValue) {
                 matchRole = r.includes(roleValue.toUpperCase());
             }

             // 3. Excluir dueños (Filtro base)
             const isOwner = r.includes('DUEÑO') || r.includes('GERENTE') || r.includes('OWNER') || r.includes('ADMIN');

             return matchText && matchRole && !isOwner;
        });

        renderFilteredTable(filtered);
    }

    function renderStaffTable(staffList) {
        // Al cargar, aplicamos filtros vacíos (o los que estén)
        filterStaff(); 
    }

    function renderFilteredTable(filteredList) {
        const grid = document.getElementById('staffGrid');
        const showingText = document.getElementById('showingText');
        grid.innerHTML = '';

        if (!filteredList || filteredList.length === 0) {
            grid.innerHTML = `
                <div class="col-span-full py-40 text-center rounded-[4rem] border-2 border-dashed border-[var(--theme-border)] bg-[var(--theme-bg-surface)]/30 backdrop-blur-sm flex flex-col items-center gap-8 fade-in">
                    <div class="w-24 h-24 rounded-[2rem] bg-[var(--theme-text-muted)]/5 flex items-center justify-center animate-bounce">
                        <i data-lucide="user-x" class="w-12 h-12 text-[var(--theme-text-muted)] opacity-20"></i>
                    </div>
                    <div class="space-y-2">
                        <p class="text-sm font-[1000] text-[var(--theme-text-main)] uppercase tracking-[0.3em]">Sin Coincidencias</p>
                        <p class="text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest opacity-60">Intente ajustar los términos de búsqueda o filtros</p>
                    </div>
                    <button onclick="document.getElementById('searchInput').value=''; filterStaff();" class="px-8 py-3 rounded-xl bg-[var(--theme-accent)]/10 text-[var(--theme-accent)] text-[10px] font-black uppercase tracking-widest hover:bg-[var(--theme-accent)] hover:text-white transition-all">Limpiar Búsqueda</button>
                </div>
            `;
            if(showingText) showingText.innerText = 'Mostrando 0 miembros';
            if(window.lucide) lucide.createIcons();
            return;
        }

        filteredList.forEach((member, index) => {
            const name = member.nombre_completo || 'Sin Nombre';
            const role = member.rol || 'Staff';
            const userId = member.id_usuario?.toString() || '';
            
            let initials = 'NA';
            if(name){
               const parts = name.match(/\b\w/g) || [];
               initials = (parts.slice(0, 2).join('') || 'NA').toUpperCase();
            }

            let foto = member.foto_url;
            if (foto && foto !== 'null') {
                 let cleanFoto = foto.replace(/\\/g, '/').replace('uploads / ', '').replace('uploads/', '').trim();
                 if (cleanFoto.startsWith('http')) {
                     foto = cleanFoto;
                 } else {
                     if(cleanFoto.startsWith('/')) cleanFoto = cleanFoto.substring(1);
                     const baseUrl = "{{ url('/api/Security/uploads') }}";
                     foto = `${baseUrl}/${cleanFoto}?t=${new Date().getTime()}`;
                 }
            } else {
                foto = null; 
            }

            const isActive = String(member.estado).toUpperCase() === 'ACTIVO' || member.estado == 1;

            const card = document.createElement('div');
            card.className = `group relative bg-white rounded-3xl border border-slate-100 p-6 shadow-sm transition-all duration-500 hover:shadow-xl hover:shadow-slate-200/50 hover:border-emerald-500/30 flex flex-col sm:flex-row items-center gap-6 overflow-hidden fade-in`;
            card.style.animationDelay = `${index * 40}ms`;
            
            card.innerHTML = `
                <!-- Emerald Accent Bar -->
                <div class="absolute left-0 top-0 bottom-0 w-1.5 ${isActive ? 'bg-emerald-500' : 'bg-slate-100'}"></div>

                <!-- Profile Image -->
                <div class="relative shrink-0">
                    <div class="w-20 h-20 rounded-2xl bg-slate-50 overflow-hidden border border-slate-100 group-hover:scale-105 transition-transform duration-500">
                        ${foto 
                            ? `<img src="${foto}" class="w-full h-full object-cover">` 
                            : `<div class="w-full h-full flex items-center justify-center font-black text-slate-200 text-xl">${initials}</div>`
                        }
                    </div>
                    ${isActive ? `<div class="absolute -bottom-1 -right-1 w-5 h-5 bg-emerald-500 border-4 border-white rounded-full"></div>` : ''}
                </div>

                <!-- Info Section -->
                <div class="flex-1 min-w-0 text-center sm:text-left">
                    <div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-1">
                        <h3 class="font-black text-slate-900 text-lg uppercase tracking-tight truncate">${name}</h3>
                        <span class="px-3 py-1 rounded-lg bg-emerald-50 text-[9px] font-black text-emerald-600 uppercase tracking-widest border border-emerald-100 w-fit mx-auto sm:mx-0">
                            ${role}
                        </span>
                    </div>
                    <div class="flex flex-wrap justify-center sm:justify-start gap-x-6 gap-y-2">
                        <div class="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                            <i data-lucide="fingerprint" class="w-3.5 h-3.5"></i>
                            ID: ${userId.substring(0,8)}
                        </div>
                        <div class="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                            <i data-lucide="mail" class="w-3.5 h-3.5"></i>
                            ${member.email || 'N/A'}
                        </div>
                    </div>
                </div>

                <!-- Actions Section -->
                <div class="flex items-center gap-2 shrink-0">
                    <button onclick="prepareEdit('${userId}')" class="p-3 rounded-xl bg-slate-50 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/10 transition-all active:scale-90" title="Editar">
                        <i data-lucide="edit-3" class="w-5 h-5"></i>
                    </button>
                    <button onclick="openPago('${userId}')" class="p-3 rounded-xl bg-slate-50 text-slate-400 hover:text-blue-500 hover:bg-blue-500/10 transition-all active:scale-90" title="Ver Pagos">
                        <i data-lucide="wallet" class="w-5 h-5"></i>
                    </button>
                    <button onclick="openPerfil('${userId}')" class="px-6 py-3 rounded-xl bg-emerald-500 text-white text-[10px] font-black uppercase tracking-widest hover:bg-emerald-400 shadow-lg shadow-emerald-500/10 transition-all active:scale-95">
                        Perfil
                    </button>
                </div>
            `;
            grid.appendChild(card);
        });

        if(showingText) showingText.innerText = `Mostrando ${filteredList.length} miembros del staff`;
        if(window.lucide) lucide.createIcons();
    }

    // Handlers para redirección a nuevas vistas
    window.openPago = function(id) {
        showConfirmation('Ir a Pagos', '¿Deseas ir a la sección de pagos de este miembro?', () => {
             window.location.href = `/manager/staff/pago?id=${id}`;
        });
    };

    window.openPerfil = function(id) {
        showConfirmation('Ver Perfil', '¿Deseas ver el perfil completo?', () => {
            window.location.href = `/manager/staff/perfil?id=${id}`;
        });
    };

    function updateStats(staffList) {
        // Broaden roles to include almost everyone in the staff view stats
        const relevantStaff = staffList.filter(m => {
            const role = String(m.rol || '').toUpperCase();
            const isOwner = role.includes('DUEÑO') || role.includes('GERENTE') || role.includes('OWNER') || role.includes('ADMIN');
            return !isOwner;
        });

        const total = relevantStaff.length;
        const active = relevantStaff.filter(m => String(m.estado).toUpperCase() === 'ACTIVO' || m.estado == 1).length;
        const inactive = total - active;
        
        // Update Actual Cards
        if (document.getElementById('statTotal')) document.getElementById('statTotal').innerText = total;
        if (document.getElementById('statActive')) document.getElementById('statActive').innerText = active;
        if (document.getElementById('statInactive')) document.getElementById('statInactive').innerText = inactive;

        if(window.lucide) lucide.createIcons();
    }

    // ----------------------------------------------------
    // EDIT & CREATE LOGIC
    // ----------------------------------------------------
    
    // Función llamada desde el botón "Editar" de la tabla
    window.prepareEdit = async function(userId) {
        let member = currentStaff.find(m => m.id_usuario == userId || m.id == userId);
        if(!member) return;

        isEditing = true;
        editingId = userId;
        
        // 1. Llenar campos inmediatamente con datos de la lista (Carga Instantánea)
        const fullName = (member.nombre_completo || '').trim();
        const words = fullName.split(' ');
        if (words.length >= 3) {
            document.getElementById('inputApellidos').value = words.slice(-2).join(' ');
            document.getElementById('inputNombres').value = words.slice(0, -2).join(' ');
        } else if (words.length === 2) {
            document.getElementById('inputNombres').value = words[0];
            document.getElementById('inputApellidos').value = words[1];
        } else {
            document.getElementById('inputNombres').value = fullName;
            document.getElementById('inputApellidos').value = '';
        }

        document.getElementById('inputDNI').value = member.dni || '';
        document.getElementById('inputEmail').value = member.email || '';
        document.getElementById('inputPais').value = '+51';
        
        let phone = member.telefono || '';
        if(phone.startsWith('+51 ')) phone = phone.replace('+51 ', '');
        document.getElementById('inputTelefono').value = phone;
        
        document.getElementById('inputRol').value = member.rol || 'STAFF';
        document.getElementById('inputSueldo').value = member.sueldo || '';

        // 1.1 Fecha ingreso (Carga Instantánea)
        if(member.fecha_ingreso || member.fecha) {
            const dateStr = member.fecha_ingreso || member.fecha;
            const d = new Date(dateStr);
            if(!isNaN(d.getTime())) {
                document.getElementById('inputFechaIngreso').value = d.toISOString().split('T')[0];
            }
        }

        // 2. Roles UI
        const targetBtn = document.querySelector(`.role-btn[onclick*="'${member.rol}'"]`) || document.querySelector('.role-btn');
        if(targetBtn) selectRole(targetBtn, member.rol || 'STAFF');

        // 3. Foto de Perfil (Actual)
        const photoPreviewImage = document.getElementById('photoPreviewImage');
        const photoPlaceholder = document.getElementById('photoPlaceholder');
        const btnRemovePhoto = document.getElementById('btnRemovePhoto');
        const baseUrl = "{{ url('/api/Security/uploads') }}";

        if (member.foto_url && member.foto_url !== 'null') {
            let cleanFoto = member.foto_url.replace(/\\/g, '/').replace('uploads / ', '').replace('uploads/', '').trim();
            const finalUrl = cleanFoto.startsWith('http') ? cleanFoto : `${baseUrl}/${cleanFoto}`;
            photoPreviewImage.src = finalUrl;
            photoPreviewImage.classList.remove('hidden');
            photoPlaceholder.classList.add('hidden');
            btnRemovePhoto.classList.remove('opacity-0', 'pointer-events-none');
            document.querySelector('.group\\/upload').classList.add('has-image');
        } else {
            photoPreviewImage.classList.add('hidden');
            photoPlaceholder.classList.remove('hidden');
            btnRemovePhoto.classList.add('opacity-0', 'pointer-events-none');
            document.querySelector('.group\\/upload').classList.remove('has-image');
        }

        // 4. Mostrar el modal de una vez para dar feedback de "Cargando Detalle..." si es necesario
        document.getElementById('modalTitle').innerText = 'Editar Miembro';
        document.getElementById('btnGuardarStaff').innerHTML = '<i data-lucide="save" class="w-4 h-4 mr-2"></i> Actualizar';
        openModal('modalUsuario');

        // 5. Cargar detalles extendidos (Turnos) en segundo plano
        try {
            const res = await fetch(`${API_URL}/Staff/${userId}`);
            const detail = await res.json();
            if(detail.success && (detail.data || detail)) {
                const fullMember = detail.data || detail;
                // Actualizar campos por si el detalle tiene info más fresca
                if(fullMember.sueldo) document.getElementById('inputSueldo').value = fullMember.sueldo;
                
                // Procesar Turnos
                let turnosArray = [];
                if(fullMember.turnos) {
                    try {
                        turnosArray = typeof fullMember.turnos === 'string' ? JSON.parse(fullMember.turnos) : fullMember.turnos;
                    } catch(e) { console.error("Error parsing turnos", e); }
                }
                
                if (!Array.isArray(turnosArray) || turnosArray.length === 0) {
                    const desc = fullMember.horario_desc || fullMember.horario || '';
                    const dayShorts = ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'];
                    if (desc.includes(':') && desc.includes('-')) {
                        const parts = desc.split(' | ');
                        parts.forEach(p => {
                            const inner = p.split(': ');
                            if (inner.length === 2) {
                                const dShort = inner[0].trim();
                                const times = inner[1].split('-');
                                if (times.length === 2) {
                                    const dIndex = dayShorts.indexOf(dShort) + 1;
                                    if (dIndex > 0) turnosArray.push({ dia: dIndex, entrada: times[0].trim(), salida: times[1].trim() });
                                }
                            }
                        });
                    }
                }
                generateScheduleConfig(turnosArray);
            }
        } catch(e) { 
            console.warn("No se pudo obtener detalle extendido, se usará caché local:", e);
            // Si falla el fetch, al menos mostrar los turnos que tenga el objeto local si existen
            let fallbackTurnos = [];
            if(member.turnos) {
                 try {
                     fallbackTurnos = typeof member.turnos === 'string' ? JSON.parse(member.turnos) : member.turnos;
                 } catch(err) {}
            }
            generateScheduleConfig(Array.isArray(fallbackTurnos) ? fallbackTurnos : []);
        }
    };

    // Función llamada para "Nuevo Miembro"
    window.prepareCreate = function() {
        isEditing = false;
        editingId = null;
        document.getElementById('formStaff').reset();
        generateScheduleConfig(); // Reset days
        setupRoleSelectors();
        
        // Reset Foto Preview
        document.getElementById('photoPreviewImage').classList.add('hidden');
        document.getElementById('photoPlaceholder').classList.remove('hidden');
        document.getElementById('btnRemovePhoto').classList.add('opacity-0', 'pointer-events-none');
        document.getElementById('photoFileName').classList.add('hidden');
        document.querySelector('.group\\/upload').classList.remove('has-image');
        
        document.getElementById('modalTitle').innerText = 'Nuevo Miembro';
        document.getElementById('btnGuardarStaff').innerHTML = '<i data-lucide="save" class="w-4 h-4 mr-2"></i> Guardar';
        
        openModal('modalUsuario');
    };

    // Listener del Botón Guardar (Refactorizado con Confirmación)
    const submitStaffForm = async () => {
        const btn = document.getElementById('btnGuardarStaff');
        const originalText = btn.innerHTML;
        
        // Recolectar
        const nombres = document.getElementById('inputNombres').value.trim();
        const apellidos = document.getElementById('inputApellidos').value.trim();
        const nombre = (nombres + ' ' + apellidos).trim();
        const dni = document.getElementById('inputDNI').value;
        const email = document.getElementById('inputEmail').value;
        const phoneRaw = document.getElementById('inputTelefono').value;
        const pais = document.getElementById('inputPais').value;
        const telefono = phoneRaw ? `${pais} ${phoneRaw}` : '';
        const rol = document.getElementById('inputRol').value;
        const sueldo = document.getElementById('inputSueldo').value;
        const fecha = document.getElementById('inputFechaIngreso').value;
        
        // Sucursal y Empresa desde Sesión (Blade)
        // El usuario pidió eliminar el selector y usar solo la sesión.
        // Sucursal y Empresa desde Sesión (Blade)
        let sucursalId = "{{ Auth::user()->sucursal_asignada_id ?? Auth::user()->sucursal_id ?? '' }}";
        let empresaId = "{{ Auth::guard('admin')->user()->empresa_id ?? Auth::user()->empresa_id ?? '' }}";

        // SELF-HEALING: Si todo falla, intentar recuperar ID preguntando al backend por mis sucursales
        if (!empresaId) {
            try {
                // Asumimos que la sesión de navegador (cookies) autentica el request
                 const response = await fetch(`${API_URL}/Security/Sucursales`);
                 if(response.ok) {
                     const data = await response.json();
                     // data puede ser array directo o { data: [...] }
                     const list = Array.isArray(data) ? data : (data.data || []);
                     if(list.length > 0 && list[0].empresa_id) {
                         empresaId = list[0].empresa_id;
                         console.log("Recuperado EmpresaID vía API:", empresaId);
                         // Guardar para la proxima
                         localStorage.setItem('empresa_id', empresaId);
                         document.getElementById('verifiedEmpresaId').value = empresaId;
                     }
                 }
            } catch(e) { console.error("Error recuperando empresa_id", e); }
        }

        // Si AUN asi es nulo, no bloqueamos, enviamos '' y que Dios ampare al backend
        if (!empresaId) {
             console.warn('Empresa ID vacío en frontend. Se intentará recuperar en backend.');
        }

        // FALLBACK 2: Lista actual (Datos visibles)
        if ((!empresaId || !sucursalId) && currentStaff.length > 0) {
            const sample = currentStaff.find(s => s.empresa_id) || currentStaff[0];
            if (!empresaId && sample.empresa_id) empresaId = sample.empresa_id;
            if (!sucursalId && sample.sucursal_asignada_id) sucursalId = sample.sucursal_asignada_id;
            if (!sucursalId && sample.sucursal_id) sucursalId = sample.sucursal_id;
        }

        if (!nombre || !dni || !email || !rol) {
            alert('Complete los campos obligatorios.');
            return;
        }

        // Ya no bloqueamos si falta empresaId, dejamos que el Backend intente rescatarlo.
        if (!empresaId) {
             console.warn('Empresa ID vacío en frontend. Se intentará recuperar en backend.');
        }

        // Turnos
        const turnos = [];
        const dayShorts = ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'];
        document.querySelectorAll('.schedule-toggle').forEach(chk => {
            if (chk.checked) {
                const dId = chk.dataset.day;
                turnos.push({
                    dia: parseInt(dId),
                    entrada: document.getElementById(`start-${dId}`).value,
                    salida: document.getElementById(`end-${dId}`).value,
                    activo: true
                });
            }
        });
        const horarioDesc = turnos.map(t => `${dayShorts[t.dia-1]}: ${t.entrada}-${t.salida}`).join(' | ') || 'Sin Horario';

        // Payload (Usar FormData para soportar Archivos)
        const formData = new FormData();
        formData.append('nombre', nombre);
        formData.append('dni', dni);
        formData.append('email', email);
        formData.append('telefono', telefono);
        formData.append('rol', rol);
        formData.append('sueldo', sueldo || 0);
        formData.append('fecha_ingreso', fecha);
        formData.append('sucursal_id', sucursalId || ''); // Enviar vacío si falla, backend tiene fallback
        formData.append('empresa_id', empresaId || '');   // IMPORTANTE: Enviar '' si es null/undefined para activar fallback PHP
        formData.append('horario', horarioDesc);
        formData.append('turnos', JSON.stringify(turnos));
        
        // Agregar Archivo
        const fotoFile = document.getElementById('inputFoto').files[0];
        if (fotoFile) {
            formData.append('imagen', fotoFile);
        }

        if(!isEditing) {
            formData.append('password', 'password123');
        } else {
            formData.append('id_usuario', editingId);
            formData.append('id', editingId);
        }

        btn.disabled = true;
        btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Procesando...';

        try {
            const endpoint = isEditing ? '/Staff/Editar' : '/Staff';
            
            const response = await fetch(`${API_URL}${endpoint}`, {
                method: 'POST',
                // No poner Content-Type manual para que el navegador asigne el boundary de FormData
                body: formData 
            });

            const result = await response.json();

            if (result.success || result.id) {
                alert(isEditing ? '¡Actualizado correctamente!' : '¡Registrado correctamente!');
                closeModal('modalUsuario');
                loadStaff();
            } else {
                throw new Error(result.message || 'Error en operación');
            }

        } catch (error) {
            console.error(error);
            alert('Error: ' + error.message);
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    };
    
    document.getElementById('btnGuardarStaff').addEventListener('click', () => {
        showConfirmation('Guardar Cambios', '¿Estás seguro de guardar la información?', submitStaffForm);
    });

    // Utiles
    function openModal(id) { document.getElementById(id).classList.remove('hidden'); }
    function closeModal(id) { document.getElementById(id).classList.add('hidden'); }
    
    function selectRole(btn, roleValue) {
        if(!btn) return;
        document.querySelectorAll('.role-btn').forEach(b => {
             b.classList.remove('active', 'border-[var(--theme-accent)]', 'bg-[var(--theme-accent)]/[0.05]');
             b.classList.add('border-[var(--theme-border)]');
        });
        btn.classList.remove('border-[var(--theme-border)]');
        btn.classList.add('active', 'border-[var(--theme-accent)]', 'bg-[var(--theme-accent)]/[0.05]');
        document.getElementById('inputRol').value = roleValue;
    }

    function setupRoleSelectors() {
        const defaultBtn = document.querySelector('.role-btn');
        if(defaultBtn && !isEditing) selectRole(defaultBtn, 'STAFF');
    }

    // Toggle Day logic (mantener)
    function generateScheduleConfig(existingTurnos = []) {
        const container = document.getElementById('scheduleContainer');
        const days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
        container.innerHTML = '';
        
        days.forEach((day, index) => {
            const dId = index + 1;
            const row = document.createElement('div');
            
            // Buscar si el día está en los turnos existentes
            const ex = existingTurnos.find(t => t.dia == dId);
            const isChecked = !!ex;
            const startTime = ex ? ex.entrada : "09:00";
            const endTime = ex ? ex.salida : "18:00";

            row.className = 'flex items-center justify-between p-4 bg-[var(--theme-bg-surface)] rounded-2xl border border-[var(--theme-border)] shadow-sm group/row hover:border-[var(--theme-accent)]/30 transition-all';
            row.innerHTML = `
                <div class="flex items-center gap-4 w-40">
                    <div class="toggle-switch ${isChecked ? 'active' : ''} scale-75" 
                         onclick="const chk=this.nextElementSibling; chk.checked=!chk.checked; toggleDay(chk); this.classList.toggle('active')">
                    </div>
                    <input type="checkbox" class="sr-only schedule-toggle" data-day="${dId}" ${isChecked ? 'checked' : ''}>
                    <span class="text-[11px] font-black text-[var(--theme-text-main)] uppercase tracking-widest">${day}</span>
                </div>
                <div class="flex items-center gap-3 flex-1 justify-end schedule-inputs transition-all ${isChecked ? 'opacity-100' : 'opacity-0 pointer-events-none'}" id="inputs-day-${dId}">
                    <div class="relative">
                        <input type="time" class="bg-[var(--theme-bg-card)] border border-[var(--theme-border)] rounded-xl px-4 py-2 text-[10px] font-black text-[var(--theme-text-main)] outline-none focus:border-[var(--theme-accent)] transition-all" value="${startTime}" id="start-${dId}">
                    </div>
                    <span class="text-[var(--theme-text-muted)] opacity-30">—</span>
                    <div class="relative">
                        <input type="time" class="bg-[var(--theme-bg-card)] border border-[var(--theme-border)] rounded-xl px-4 py-2 text-[10px] font-black text-[var(--theme-text-main)] outline-none focus:border-[var(--theme-accent)] transition-all" value="${endTime}" id="end-${dId}">
                    </div>
                </div>
                <div class="${isChecked ? 'hidden' : ''} text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest opacity-40 px-4" id="msg-day-${dId}">Día de Descanso</div>
            `;
            container.appendChild(row);
        });
    }

    window.toggleDay = function(checkbox) {
         const dId = checkbox.dataset.day;
         const inputs = document.getElementById('inputs-day-' + dId);
         const msg = document.getElementById('msg-day-' + dId);
         
         if (checkbox.checked) {
             inputs.classList.remove('opacity-0', 'pointer-events-none');
             inputs.classList.add('opacity-100');
             msg.classList.add('hidden');
         } else {
             inputs.classList.add('opacity-0', 'pointer-events-none');
             inputs.classList.remove('opacity-100');
             msg.classList.remove('hidden');
         }
    };

    function setupPhotoPreview() {
        const input = document.getElementById('inputFoto');
        const preview = document.getElementById('photoPreviewImage');
        const placeholder = document.getElementById('photoPlaceholder');
        const btnRemove = document.getElementById('btnRemovePhoto');
        const fileNameDisp = document.getElementById('photoFileName');
        const container = document.querySelector('.group\\/upload');

        if(!input) return;

        input.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.classList.remove('hidden');
                    placeholder.classList.add('hidden');
                    btnRemove.classList.remove('opacity-0', 'pointer-events-none');
                    container.classList.add('has-image');
                    
                    fileNameDisp.querySelector('span').innerText = file.name;
                    fileNameDisp.classList.remove('hidden');
                }
                reader.readAsDataURL(file);
            }
        });

        btnRemove.addEventListener('click', function(e) {
             e.preventDefault();
             input.value = '';
             preview.src = '';
             preview.classList.add('hidden');
             placeholder.classList.remove('hidden');
             this.classList.add('opacity-0', 'pointer-events-none');
             container.classList.remove('has-image');
             fileNameDisp.classList.add('hidden');
        });
    }
</script>
@endpush