@extends('layouts.panel')

@section('title', 'Perfil de Empleado')

@section('content')
<div class="max-w-7xl mx-auto fade-in pb-12">
    
    {{-- Header Navigation --}}
    <div class="flex items-center justify-between mb-8">
        <div class="flex items-center gap-4">
            <a href="{{ route('manager.staff') }}" class="p-2 -ml-2 hover:bg-slate-100 rounded-full transition-colors text-slate-600">
                <i data-lucide="arrow-left" class="w-6 h-6"></i>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-slate-900">Perfil de Empleado</h1>
                <p class="text-sm text-slate-500 font-medium">Panel de Gestión Gerencial</p>
            </div>
        </div>
        <div class="flex gap-3">
            <button onclick="openEditModal()" id="btnEditProfile" class="h-10 px-4 rounded-xl bg-slate-900 text-white hover:bg-slate-800 flex items-center gap-2 transition-colors font-bold text-sm shadow-lg shadow-slate-100">
                <i data-lucide="pencil" class="w-4 h-4"></i>
                Editar Perfil
            </button>
        </div>
    </div>

    {{-- Loading State --}}
    <div id="loadingState" class="text-center py-20">
        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900 mx-auto"></div>
        <p class="mt-4 text-slate-500 font-medium">Cargando información del colaborador...</p>
    </div>

    {{-- 2-Column Responsive Layout --}}
    <div id="profileContent" class="hidden grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        {{-- SIDEBAR: Información de Perfil --}}
        <div class="lg:col-span-4 space-y-6">
            <div class="bg-white rounded-3xl p-8 shadow-sm border border-slate-100 text-center relative overflow-hidden group">
                {{-- Decorative Gradient --}}
                <div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500"></div>

                <div class="relative inline-block mb-6 pt-4">
                    <img id="profileImage" src="https://ui-avatars.com/api/?name=User&background=cbd5e1&color=64748b" 
                         class="w-36 h-36 rounded-full border-4 border-slate-50 shadow-xl object-cover bg-slate-200 group-hover:scale-105 transition-transform duration-500">
                    <div class="absolute bottom-2 right-2 w-9 h-9 bg-emerald-500 border-4 border-white rounded-full flex items-center justify-center text-white shadow-lg shadow-emerald-200">
                        <i data-lucide="check" class="w-5 h-5 stroke-[4]"></i>
                    </div>
                </div>
                
                <h2 id="profileName" class="text-2xl font-black text-slate-900 leading-tight px-2 uppercase mb-2">
                    CARGANDO...
                </h2>
                
                <div class="flex flex-col items-center gap-2 mb-6">
                    <span class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-red-50 text-red-600 text-[11px] font-black uppercase tracking-widest border border-red-100 shadow-sm" id="profileRole">
                        CARGANDO ROL
                    </span>
                </div>

                <div class="space-y-4 pt-4 border-t border-slate-50">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-slate-400 font-medium">Estado Laboral</span>
                        <span id="profileStatusBadge" class="font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded tracking-tight">ACTIVO</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-slate-400 font-medium">ID Usuario</span>
                        <span class="font-bold text-slate-700" id="displayId">#0000</span>
                    </div>
                </div>
            </div>

            {{-- Datos de Contacto Rápido --}}
            <div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
                <h3 class="font-bold text-slate-800 mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
                    <i data-lucide="contact" class="w-4 h-4 text-indigo-500"></i>
                    Contacto Directo
                </h3>
                <div class="space-y-4">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center shrink-0">
                            <i data-lucide="mail" class="w-4 h-4"></i>
                        </div>
                        <div class="overflow-hidden">
                            <p class="text-[10px] text-slate-400 font-bold uppercase">Email</p>
                            <p id="profileEmail" class="text-xs font-bold text-slate-700 truncate">usuario@piter.com</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
                            <i data-lucide="phone" class="w-4 h-4"></i>
                        </div>
                        <div>
                            <p class="text-[10px] text-slate-400 font-bold uppercase">Celular</p>
                            <p id="profilePhone" class="text-xs font-bold text-slate-700">+-- --- --- ---</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- MAIN CONTENT: Dashboard & Detalles --}}
        <div class="lg:col-span-8 space-y-8">
            
            {{-- Stats Dashboard --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {{-- Ventas --}}
                <div class="bg-indigo-900 rounded-3xl p-6 shadow-lg shadow-indigo-100 text-white relative overflow-hidden group">
                    <div class="absolute -right-4 -bottom-4 opacity-10 group-hover:scale-110 transition-transform duration-500">
                        <i data-lucide="trending-up" class="w-24 h-24"></i>
                    </div>
                    <p class="text-indigo-300 text-[11px] font-bold uppercase tracking-widest mb-1">Ventas Mensuales</p>
                    <p class="text-3xl font-black mb-2">S/ 0.00</p>
                    <div class="flex items-center gap-1.5 text-[10px] font-bold text-indigo-300">
                        <span class="bg-white/10 px-2 py-0.5 rounded">+0%</span>
                        <span>vs mes anterior</span>
                    </div>
                </div>

                {{-- Eficiencia --}}
                <div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 group">
                    <p class="text-slate-400 text-[11px] font-bold uppercase tracking-widest mb-1">Puntaje Eficiencia</p>
                    <p class="text-3xl font-black text-slate-900 mb-2">100%</p>
                    <div class="flex items-center gap-1.5 text-[10px] font-bold text-emerald-600">
                        <span class="bg-emerald-50 px-2 py-0.5 rounded flex items-center gap-0.5">
                            <i data-lucide="star" class="w-3 h-3 fill-current"></i> Excelente
                        </span>
                    </div>
                </div>

                {{-- T. Promedio --}}
                <div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 group">
                    <p class="text-slate-400 text-[11px] font-bold uppercase tracking-widest mb-1">Atención Prom.</p>
                    <p class="text-3xl font-black text-slate-900 mb-2">0m</p>
                    <div class="flex items-center gap-1.5 text-[10px] font-bold text-slate-500">
                        <span class="bg-slate-50 px-2 py-0.5 rounded">Tiempo promedio x mesa</span>
                    </div>
                </div>
            </div>

            {{-- Información Detallada --}}
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
                <div class="px-6 py-4 border-b border-slate-50 bg-slate-50/50 flex items-center gap-2 font-bold text-slate-800">
                    <i data-lucide="fingerprint" class="w-5 h-5 text-slate-400"></i>
                    Información Documentaria y Laboral
                </div>
                <div class="p-8">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <div class="space-y-1">
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Documento Nacional (DNI)</p>
                            <p id="profileDni" class="text-sm font-black text-slate-700">-- --- ---</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Fecha de Registro</p>
                            <p id="profileRegister" class="text-sm font-black text-slate-700">--/--/----</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Sueldo Asignado</p>
                            <p id="profileSalary" class="text-sm font-black text-emerald-600">S/ 0.00</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">País / Origen</p>
                            <p id="profileCountry" class="text-sm font-black text-slate-700 uppercase">PE</p>
                        </div>
                        <div class="space-y-2 lg:col-span-2">
                             <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Empresa y Sede</p>
                             <div class="flex items-center gap-2">
                                 <span class="bg-slate-900 text-white text-[10px] font-black px-3 py-1 rounded-lg uppercase tracking-tight">LOQUEANDO CITY</span>
                                 <span class="text-xs font-bold text-slate-400">#PITER001</span>
                             </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Acciones de Gestión --}}
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
                <div class="px-6 py-4 border-b border-slate-50 bg-slate-50/50 flex items-center gap-2 font-bold text-slate-800">
                    <i data-lucide="shield-alert" class="w-5 h-5 text-red-400"></i>
                    Panel de Acciones Directas
                </div>
                <div class="p-6">
                    <div class="flex flex-wrap gap-4">
                        <a id="btnWhatsApp" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-2xl flex items-center gap-2 transition-all shadow-lg shadow-blue-100 group opacity-50 pointer-events-none">
                            <i data-lucide="phone-call" class="w-4 h-4 group-hover:shake"></i>
                            Contactar por WhatsApp
                        </a>
                        <button onclick="goToPayment()" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-6 rounded-2xl flex items-center gap-2 transition-all shadow-lg shadow-emerald-100 group">
                            <i data-lucide="banknote" class="w-4 h-4"></i>
                            Gestionar Pagos
                        </button>
                        <button onclick="despedirColaborador()" class="bg-red-50 hover:bg-red-100 text-red-600 font-bold py-3 px-6 rounded-2xl flex items-center gap-2 transition-all border border-red-200">
                            <i data-lucide="user-minus" class="w-4 h-4"></i>
                            Despedir Colaborador
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    </div> {{-- Close max-w-7xl --}}

    {{-- Modal Editar Perfil (MOVIDO AFUERA DEL CONTENEDOR RESTRINGIDO) --}}
    <div id="modalEditProfile" class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/60 backdrop-blur-md hidden fade-in p-4 overflow-y-auto">
        <div class="user-profile-card w-full max-w-2xl rounded-[3.5rem] shadow-2xl overflow-hidden flex flex-col my-auto relative border-none">
            <div class="px-10 py-8 border-b border-[var(--user-card-border)] flex justify-between items-center bg-[var(--user-accent-bg)]/50">
                <div>
                    <h3 class="text-2xl font-black dynamic-title tracking-tight">Gestión Integral de Perfil</h3>
                    <p class="text-sm dynamic-subtitle font-medium">Información sincronizada con Seguridad_Usuarios</p>
                </div>
                <button onclick="closeEditModal()" class="p-3 dynamic-btn rounded-2xl">
                    <i data-lucide="x" class="w-6 h-6 opacity-40"></i>
                </button>
            </div>

            <form id="formEditProfile" class="p-10 overflow-auto custom-scrollbar flex-1 space-y-8 max-h-[70vh]">
                <input type="hidden" id="editStaffId" name="id_usuario">
                <input type="hidden" name="empresa_id" value="{{ Auth::guard('admin')->user()->empresa_id ?? Auth::user()->empresa_id ?? '' }}">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {{-- Sección Foto --}}
                    <div class="md:col-span-2 flex flex-col items-center mb-6">
                        <div class="relative group">
                            <div class="absolute inset-0 bg-[var(--user-dock-bg)] rounded-full blur-xl opacity-0 group-hover:opacity-20 transition-opacity"></div>
                            <img id="editImagePreview" src="https://ui-avatars.com/api/?name=User" class="w-36 h-36 rounded-full border-8 border-[var(--user-card-bg)] object-cover shadow-2xl relative z-10 user-avatar-border">
                            <label for="editImageInput" class="absolute bottom-2 right-2 z-20 w-10 h-10 accent-btn rounded-xl flex items-center justify-center shadow-lg hover:scale-110 active:scale-95 transition-all cursor-pointer border-none">
                                <i data-lucide="camera" class="w-5 h-5"></i>
                            </label>
                            <input type="file" id="editImageInput" name="imagen" class="hidden" accept="image/*" onchange="previewEditImage(this)">
                        </div>
                        <p class="text-[10px] dynamic-subtitle font-black mt-4 uppercase tracking-[0.2em]">Avatar del Colaborador</p>
                    </div>

                    {{-- Nombres --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Nombres</label>
                        <div class="relative group">
                            <i data-lucide="user" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-emerald-400"></i>
                            <input type="text" id="editFirstName" readonly class="w-full h-14 bg-emerald-50/50 border-2 border-emerald-100 border-dashed rounded-[1.25rem] pl-12 pr-4 text-sm font-bold text-emerald-700 cursor-not-allowed outline-none select-none italic">
                            <div class="absolute right-4 top-1/2 -translate-y-1/2">
                                <i data-lucide="lock" class="w-3.5 h-3.5 text-emerald-300"></i>
                            </div>
                        </div>
                    </div>

                    {{-- Apellidos --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Apellidos</label>
                        <div class="relative group">
                            <i data-lucide="users" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-emerald-400"></i>
                            <input type="text" id="editLastName" readonly class="w-full h-14 bg-emerald-50/50 border-2 border-emerald-100 border-dashed rounded-[1.25rem] pl-12 pr-4 text-sm font-bold text-emerald-700 cursor-not-allowed outline-none select-none italic">
                            <div class="absolute right-4 top-1/2 -translate-y-1/2">
                                <i data-lucide="lock" class="w-3.5 h-3.5 text-emerald-300"></i>
                            </div>
                        </div>
                    </div>

                    {{-- DNI --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">DNI / Documento</label>
                        <div class="relative group">
                            <i data-lucide="credit-card" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-emerald-400"></i>
                            <input type="text" name="dni" id="editDni" readonly class="w-full h-14 bg-emerald-50/50 border-2 border-emerald-100 border-dashed rounded-[1.25rem] pl-12 pr-4 text-sm font-bold text-emerald-700 cursor-not-allowed outline-none select-none italic">
                            <div class="absolute right-4 top-1/2 -translate-y-1/2">
                                <i data-lucide="lock" class="w-3.5 h-3.5 text-emerald-300"></i>
                            </div>
                        </div>
                    </div>

                    {{-- Email --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Correo Electrónico</label>
                        <div class="relative group">
                            <i data-lucide="mail" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-indigo-500 transition-colors"></i>
                            <input type="email" name="email" id="editEmail" class="w-full h-14 bg-slate-50 border-2 border-transparent rounded-[1.25rem] pl-12 pr-4 text-sm font-bold text-slate-700 focus:bg-white focus:border-indigo-500/20 focus:ring-4 focus:ring-indigo-500/5 transition-all outline-none">
                        </div>
                    </div>

                    {{-- Teléfono --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Teléfono Móvil</label>
                        <div class="relative group">
                            <i data-lucide="smartphone" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-indigo-500 transition-colors"></i>
                            <input type="text" name="telefono" id="editPhone" class="w-full h-14 bg-slate-50 border-2 border-transparent rounded-[1.25rem] pl-12 pr-4 text-sm font-bold text-slate-700 focus:bg-white focus:border-indigo-500/20 focus:ring-4 focus:ring-indigo-500/5 transition-all outline-none">
                        </div>
                    </div>

                    {{-- Sucursal --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Sucursal Asignada</label>
                        <div class="relative group">
                            <i data-lucide="map-pin" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-indigo-500 transition-colors pointer-events-none z-10"></i>
                            <select name="sucursal_id" id="editSucursal" class="w-full h-14 bg-slate-50 border-2 border-transparent rounded-[1.25rem] pl-12 pr-4 text-sm font-bold text-slate-700 focus:bg-white focus:border-indigo-500/20 focus:ring-4 focus:ring-indigo-500/5 transition-all outline-none appearance-none">
                                <option value="">Cargando sucursales...</option>
                            </select>
                            <i data-lucide="chevron-down" class="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                        </div>
                    </div>

                    {{-- Rol --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Rol / Puesto</label>
                        <div class="relative group">
                            <i data-lucide="briefcase" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-indigo-500 transition-colors z-10 pointer-events-none"></i>
                            <select name="rol" id="editRole" class="w-full h-14 bg-slate-50 border-2 border-transparent rounded-[1.25rem] pl-12 pr-4 text-sm font-bold text-slate-700 focus:bg-white focus:border-indigo-500/20 focus:ring-4 focus:ring-indigo-500/5 transition-all outline-none appearance-none">
                                <option value="MESERO">MESERO</option>
                                <option value="COCINA">COCINA</option>
                                <option value="BARRA">BARRA</option>
                                <option value="ADMINISTRATIVO">ADMINISTRATIVO</option>
                                <option value="CAJERO">CAJERO</option>
                                <option value="LIMPIEZA">LIMPIEZA</option>
                                <option value="OTRO">OTRO</option>
                            </select>
                            <i data-lucide="chevron-down" class="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                        </div>
                    </div>

                    {{-- Sueldo --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Sueldo Base (S/)</label>
                        <div class="relative group">
                            <i data-lucide="banknote" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-emerald-500 transition-colors"></i>
                            <input type="number" step="0.01" name="sueldo" id="editSalary" class="w-full h-14 bg-slate-50 border-2 border-transparent rounded-[1.25rem] pl-12 pr-4 text-sm font-black text-emerald-600 focus:bg-white focus:border-emerald-500/20 focus:ring-4 focus:ring-emerald-500/5 transition-all outline-none">
                        </div>
                    </div>

                    {{-- Fecha Ingreso --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Fecha de Ingreso</label>
                        <div class="relative group">
                            <i data-lucide="calendar" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-indigo-500 transition-colors"></i>
                            <input type="date" name="fecha_ingreso" id="editJoinDate" class="w-full h-14 bg-slate-50 border-2 border-transparent rounded-[1.25rem] pl-12 pr-4 text-sm font-bold text-slate-700 focus:bg-white focus:border-indigo-500/20 focus:ring-4 focus:ring-indigo-500/5 transition-all outline-none">
                        </div>
                    </div>

                    {{-- Horario Detallado (7 Días) --}}
                    <div class="md:col-span-2 space-y-4">
                        <div class="flex items-center justify-between border-b border-slate-100 pb-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1 flex items-center gap-2">
                                <i data-lucide="clock" class="w-3 h-3"></i>
                                Horarios de Trabajo (L-D)
                            </label>
                            <span class="text-[9px] font-bold text-slate-300 italic">* Turnos definidos por día</span>
                        </div>
                        <div id="scheduleContainer" class="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
                            <!-- Inyectado por JS -->
                        </div>
                    </div>

                    {{-- Horario Desc (Oculto o secundario) --}}
                    <input type="hidden" name="horario" id="editHorario">

                    {{-- Estado --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Estatus Laboral</label>
                        <div class="relative group">
                            <i data-lucide="activity" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-amber-500 transition-colors z-10 pointer-events-none"></i>
                            <select name="estado" id="editStatus" class="w-full h-14 bg-slate-50 border-2 border-transparent rounded-[1.25rem] pl-12 pr-4 text-sm font-bold text-slate-700 focus:bg-white focus:border-amber-500/20 focus:ring-4 focus:ring-amber-500/5 transition-all outline-none appearance-none">
                                <option value="ACTIVO">ACTIVO</option>
                                <option value="INACTIVO">INACTIVO</option>
                            </select>
                            <i data-lucide="chevron-down" class="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                        </div>
                    </div>
                </div>
            </form>

            <div class="px-10 py-8 bg-[var(--user-accent-bg)]/50 border-t border-[var(--user-card-border)] flex justify-end gap-4">
                <button onclick="closeEditModal()" class="h-14 px-8 rounded-2xl dynamic-btn font-bold text-sm bg-[var(--user-card-bg)] active:scale-95">
                    Descartar
                </button>
                <button onclick="saveProfileChanges()" id="btnSaveProfile" class="h-14 px-10 rounded-2xl accent-btn font-black text-sm silver-effect flex items-center gap-3">
                    <i data-lucide="save" class="w-4 h-4"></i>
                    Sincronizar Perfil
                </button>
            </div>
        </div>
    </div>
</div> {{-- Close main section padding/container --}}

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
    .swal2-popup {
        border-radius: 2rem !important;
        padding: 2rem !important;
        font-family: inherit !important;
    }
    .swal2-styled.swal2-confirm {
        background-color: #ef4444 !important;
        border-radius: 1rem !important;
        font-weight: 700 !important;
        padding: 1rem 2rem !important;
    }
    .swal2-styled.swal2-cancel {
        border-radius: 1rem !important;
        font-weight: 700 !important;
        padding: 1rem 2rem !important;
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', async () => {
        const urlParams = new URLSearchParams(window.location.search);
        const staffId = urlParams.get('id');
        const API_URL = "{{ url('/api/Security') }}"; 
        
        // Blade Injection for Auth Context
        const empresaId = "{{ Auth::guard('admin')->user()->empresa_id ?? Auth::user()->empresa_id ?? '' }}" || localStorage.getItem('empresa_id');

        if(!staffId) {
            window.location.href = "{{ route('manager.staff') }}";
            return;
        }

        try {
             // Fetch member data
             const response = await fetch(`${API_URL}/Staff?empresa_id=${empresaId}`);
             const result = await response.json();
             
             if(result.success && result.data) {
                 const member = result.data.find(m => m.id_usuario == staffId || m.id == staffId);
                 if(member) {
                     renderProfile(member);
                     window.currentStaffId = member.id || member.id_usuario;
                 } else {
                     alert('Miembro no encontrado');
                     window.location.href = "{{ route('manager.staff') }}";
                 }
             }
        } catch (e) {
            console.error(e);
            alert('Error cargando datos');
        }
    });

    function renderProfile(member) {
        window.lastMemberData = member;
        document.getElementById('loadingState').classList.add('hidden');
        document.getElementById('profileContent').classList.remove('hidden');

        // Text data
        document.getElementById('profileName').innerText = (member.nombre_completo || 'Usuario').toUpperCase();
        document.getElementById('profileRole').innerText = (member.rol || 'STAFF').toUpperCase();
        document.getElementById('displayId').innerText = `#000${member.id_usuario || member.id}`;
        document.getElementById('profileEmail').innerText = member.email || 'Sin correo registrado';
        document.getElementById('profilePhone').innerText = member.telefono || 'Sin teléfono';
        document.getElementById('profileDni').innerText = member.dni || '-- --- ---';
        document.getElementById('profileSalary').innerText = `S/ ${parseFloat(member.sueldo || 0).toFixed(2)}`;
        
        // Status Badge Logic
        const statusBadge = document.getElementById('profileStatusBadge');
        const estado = (member.estado || 'ACTIVO').toUpperCase();
        statusBadge.innerText = estado;
        
        // Reset classes
        statusBadge.className = "font-bold px-2 py-0.5 rounded tracking-tight ";
        if(estado === 'ACTIVO') {
            statusBadge.classList.add('text-emerald-600', 'bg-emerald-50');
        } else if(estado === 'INACTIVO') {
            statusBadge.classList.add('text-rose-600', 'bg-rose-50');
        } else if(estado === 'VACACIONES') {
            statusBadge.classList.add('text-amber-600', 'bg-amber-50');
        } else {
            statusBadge.classList.add('text-slate-600', 'bg-slate-50');
        }
        
        // WhatsApp Logic
        const btnWa = document.getElementById('btnWhatsApp');
        if(member.telefono && member.telefono.trim().length >= 7) {
            const cleanPhone = member.telefono.replace(/\D/g, ''); // Solo números
            // Asumir código de país 51 (Perú) si tiene 9 dígitos y no empieza con código
            let finalPhone = cleanPhone;
            if(cleanPhone.length === 9 && !cleanPhone.startsWith('51')) {
                finalPhone = '51' + cleanPhone;
            }
            btnWa.href = `https://wa.me/${finalPhone}`;
            btnWa.classList.remove('opacity-50', 'pointer-events-none');
        }
        
        if(member.fecha_ingreso) {
             const d = new Date(member.fecha_ingreso);
             document.getElementById('profileRegister').innerText = d.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' });
        }

        // Avatar Logic
        if(member.foto_url && member.foto_url !== 'null') {
             let cleanFoto = member.foto_url.replace(/\\/g, '/').replace('uploads / ', '').replace('uploads/', '').trim();
             if(cleanFoto.startsWith('/')) cleanFoto = cleanFoto.substring(1);
             
             let finalUrl = cleanFoto;
             if (!cleanFoto.startsWith('http')) {
                  finalUrl = `{{ url('/api/Security/uploads') }}/${cleanFoto}?t=${new Date().getTime()}`;
             }
             document.getElementById('profileImage').src = finalUrl;
        }

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

    // --- Edit Profile Logic ---
    window.lastMemberData = null;

    // --- Edit Profile Logic ---
    window.lastMemberData = null;

    async function openEditModal() {
        const modal = document.getElementById('modalEditProfile');
        if(!modal || !window.lastMemberData) return;

        const m = window.lastMemberData;
        document.getElementById('editStaffId').value = m.id_usuario || m.id;
        
        // Split name into First and Last
        const fullName = m.nombre_completo || m.nombre || '';
        const nameParts = fullName.trim().split(/\s+/);
        
        if(nameParts.length >= 3) {
            // Últimas 2 palabras son apellidos
            document.getElementById('editFirstName').value = nameParts.slice(0, -2).join(' ');
            document.getElementById('editLastName').value = nameParts.slice(-2).join(' ');
        } else if(nameParts.length === 2) {
            // Si solo hay 2, nombre y apellido
            document.getElementById('editFirstName').value = nameParts[0];
            document.getElementById('editLastName').value = nameParts[1];
        } else {
            document.getElementById('editFirstName').value = fullName;
            document.getElementById('editLastName').value = '';
        }

        document.getElementById('editEmail').value = m.email || '';
        document.getElementById('editPhone').value = m.telefono || '';
        document.getElementById('editDni').value = m.dni || '';
        document.getElementById('editSalary').value = m.sueldo || 0;
        document.getElementById('editRole').value = (m.rol || 'MESERO').toUpperCase();
        document.getElementById('editStatus').value = (m.estado || 'ACTIVO').toUpperCase();
        document.getElementById('editHorario').value = m.horario || '';

        // Initialize Schedule Grid
        generateScheduleGrid(m.turnos || []);

        // Salary Confirmation Setup
        const salaryInput = document.getElementById('editSalary');
        salaryInput.dataset.initial = m.sueldo || 0;
        salaryInput.onblur = async function() {
            const currentVal = parseFloat(this.value) || 0;
            const initialVal = parseFloat(this.dataset.initial) || 0;
            
            if (currentVal !== initialVal) {
                const confirm = await Swal.fire({
                    title: '¿Confirmar Cambio de Sueldo?',
                    text: `Estás cambiando el sueldo de S/ ${initialVal.toFixed(2)} a S/ ${currentVal.toFixed(2)}.`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'SÍ, CONFIRMAR',
                    cancelButtonText: 'REVERTIR',
                    reverseButtons: true
                });

                if (!confirm.isConfirmed) {
                    this.value = initialVal;
                } else {
                    this.dataset.initial = currentVal;
                }
            }
        };

        // Format date for <input type="date"> (YYYY-MM-DD)
        if(m.fecha_ingreso) {
            const d = new Date(m.fecha_ingreso);
            if(!isNaN(d.getTime())) {
                document.getElementById('editJoinDate').value = d.toISOString().split('T')[0];
            }
        }

        // Preview image
        const imgPreview = document.getElementById('editImagePreview');
        if(m.foto_url && m.foto_url !== 'null') {
             imgPreview.src = document.getElementById('profileImage').src;
        } else {
             imgPreview.src = "https://ui-avatars.com/api/?name=" + (m.nombre || 'User');
        }

        modal.classList.remove('hidden');

        // Load branches
        try {
            const selectSuc = document.getElementById('editSucursal');
            const res = await fetch("{{ url('/api/Security/Sucursales') }}");
            const data = await res.json();
            
            if(data.success && data.data) {
                selectSuc.innerHTML = '';
                data.data.forEach(s => {
                    const opt = document.createElement('option');
                    opt.value = s.id;
                    opt.innerText = s.nombre;
                    if(s.id === m.sucursal_asignada_id) opt.selected = true;
                    selectSuc.appendChild(opt);
                });
                if(window.lucide) lucide.createIcons();
            }
        } catch(e) {
            console.error("Error loading branches:", e);
        }
    }

    function closeEditModal() {
        document.getElementById('modalEditProfile').classList.add('hidden');
    }

    function generateScheduleGrid(existingTurnos = []) {
        const container = document.getElementById('scheduleContainer');
        const days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
        const dayShorts = ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'];
        container.innerHTML = '';
        
        // Si no hay turnos estructurados, intentar parsear de la descripción (horario_desc)
        if (existingTurnos.length === 0 && window.lastMemberData && window.lastMemberData.horario_desc) {
            const desc = window.lastMemberData.horario_desc;
            const parts = desc.split(' | ');
            parts.forEach(p => {
                const inner = p.split(': ');
                if (inner.length === 2) {
                    const dShort = inner[0];
                    const times = inner[1].split('-');
                    if (times.length === 2) {
                        const dIndex = dayShorts.indexOf(dShort) + 1;
                        if (dIndex > 0) {
                            existingTurnos.push({ dia: dIndex, entrada: times[0], salida: times[1] });
                        }
                    }
                }
            });
        }

        days.forEach((day, index) => {
            const dId = index + 1;
            // Buscar si ya tiene turno guardado
            const turno = existingTurnos.find(t => t.dia_semana == dId) || existingTurnos.find(t => t.dia == dId);
            const isActive = !!turno;
            
            const row = document.createElement('div');
            row.className = 'flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100 transition-all hover:bg-white hover:shadow-sm';
            row.innerHTML = `
                <div class="flex items-center gap-3 w-32">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" class="sr-only peer schedule-toggle" data-day="${dId}" ${isActive ? 'checked' : ''} onchange="toggleDay(this)">
                        <div class="w-10 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
                    </label>
                    <span class="text-xs font-black text-slate-700 uppercase tracking-tight">${day}</span>
                </div>
                <div class="flex items-center gap-2 flex-1 justify-end schedule-inputs transition-opacity ${isActive ? '' : 'hidden'}" id="inputs-day-${dId}">
                    <input type="time" class="border-0 bg-transparent text-xs font-black text-slate-600 focus:ring-0 w-16" value="${turno ? turno.hora_entrada || turno.entrada : '09:00'}" id="start-${dId}">
                    <span class="text-slate-300 font-bold">-</span>
                    <input type="time" class="border-0 bg-transparent text-xs font-black text-slate-600 focus:ring-0 w-16" value="${turno ? turno.hora_salida || turno.salida : '18:00'}" id="end-${dId}">
                </div>
                <div class="${isActive ? 'hidden' : ''} text-[10px] font-bold text-slate-400 italic px-4" id="msg-day-${dId}">Día Libre</div>
            `;
            container.appendChild(row);
        });
        if(window.lucide) lucide.createIcons();
    }

    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('hidden');
             msg.classList.add('hidden');
         } else {
             inputs.classList.add('hidden');
             msg.classList.remove('hidden');
         }
    };

    function previewEditImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('editImagePreview').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    async function saveProfileChanges() {
        const btn = document.getElementById('btnSaveProfile');
        const form = document.getElementById('formEditProfile');
        const formData = new FormData(form);
        const API_URL = "{{ url('/api/Security') }}";

        // Collect schedule data
        const turnos = [];
        const toggles = document.querySelectorAll('.schedule-toggle');
        let horarioDesc = [];
        const days = ['', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'];

        toggles.forEach(toggle => {
            const dId = toggle.dataset.day;
            if (toggle.checked) {
                const entrada = document.getElementById(`start-${dId}`).value;
                const salida = document.getElementById(`end-${dId}`).value;
                turnos.push({ dia: dId, entrada, salida });
                horarioDesc.push(`${days[dId]}: ${entrada}-${salida}`);
            }
        });

        formData.set('turnos', JSON.stringify(turnos));
        formData.set('horario', horarioDesc.join(' | ') || 'No definido');

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

        try {
            // Send data to Proxy
            const response = await fetch(`${API_URL}/Staff/Editar`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                body: formData
            });

            const result = await response.json();

            if(result.success) {
                const firstName = document.getElementById('editFirstName').value;
                await Swal.fire({
                    title: '¡ACTUALIZADO!',
                    text: `El perfil de ${firstName} ha sido sincronizado correctamente.`,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                });
                location.reload();
            } else {
                Swal.fire('Error', result.message || 'Error al actualizar perfil', 'error');
            }
        } catch (e) {
            console.error(e);
            Swal.fire('Error', 'Error de conexión al servidor', 'error');
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i data-lucide="save" class="w-4 h-4"></i> Sincronizar Perfil';
            if(window.lucide) lucide.createIcons();
        }
    }

    async function despedirColaborador() {
        if(!window.currentStaffId) return;

        const result = await Swal.fire({
            title: '¿DESPEDIR COLABORADOR?',
            text: "Esta acción cambiará su estado a INACTIVO y no podrá acceder al sistema.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'SÍ, DAR DE BAJA',
            cancelButtonText: 'CANCELAR',
            reverseButtons: true,
            customClass: {
                confirmButton: 'btn-confirm-swal',
                cancelButton: 'btn-cancel-swal'
            }
        });

        if(!result.isConfirmed) return;

        Swal.fire({
            title: 'Procesando...',
            didOpen: () => { Swal.showLoading(); }
        });

        const API_URL = "{{ url('/api/Security') }}";
        
        try {
            const response = await fetch(`${API_URL}/Staff/Estado`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    usuario_id: window.currentStaffId,
                    estado: 'INACTIVO'
                })
            });

            const resultApi = await response.json();

            if(resultApi.success) {
                await Swal.fire({
                    title: '¡LOGRADO!',
                    text: 'Colaborador dado de baja con éxito.',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                });
                location.reload();
            } else {
                Swal.fire('ERROR', resultApi.message || 'No se pudo procesar la baja', 'error');
            }
        } catch (e) {
            console.error(e);
            Swal.fire('ERROR', 'Error de conexión al procesar la baja', 'error');
        }
    }

    function goToPayment() {
        if(window.currentStaffId) {
            window.location.href = `/manager/staff/pago?id=${window.currentStaffId}`;
        }
    }
</script>
@endpush