@extends('layouts.panel-template', ['section' => 'employees'])



@section('main-content')
    <div class="p-8 space-y-8 max-w-7xl mx-auto w-full">
        <!-- Header Section -->
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div class="space-y-1">
                <nav class="flex items-center gap-2 text-label text-xs font-semibold text-on-primary-container">
                    <span>OPERACIONES</span>
                    <span class="material-symbols-outlined text-[10px]">chevron_right</span>
                    <span class="text-primary">EMPLEADOS</span>
                </nav>
                <h2 class="text-4xl font-bold tracking-tight font-headline">Gestión de Personal</h2>
                <p class="text-on-surface-variant max-w-lg">Supervisa el estatus, asignación y asistencia en tiempo real de
                    toda tu fuerza de trabajo operativa.</p>
            </div>
            <div class="flex items-center gap-3">
                <button
                    class="px-5 py-2.5 bg-surface-container-lowest border border-outline-variant/30 rounded-xl font-semibold text-sm flex items-center gap-2 shadow-sm hover:bg-surface-container-low transition-all">
                    <span class="material-symbols-outlined text-lg">file_download</span>
                    Exportar Reporte
                </button>
                <button
                    class="px-5 py-2.5 bg-primary from-primary to-primary-container text-on-primary rounded-xl font-semibold text-sm flex items-center gap-2 shadow-lg shadow-primary/10 hover:opacity-90 transition-all">
                    <span class="material-symbols-outlined text-lg">person_add</span>
                    Alta de Empleado
                </button>
            </div>
        </div>
        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/5">
                <p class="text-xs font-semibold text-on-surface-variant uppercase tracking-wider mb-2">Total Empleados</p>
                <div class="flex items-baseline gap-2">
                    <span class="text-3xl font-bold font-headline">142</span>
                    <span class="text-xs text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full font-medium">+12%</span>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/5">
                <p class="text-xs font-semibold text-on-surface-variant uppercase tracking-wider mb-2">En Obra Hoy</p>
                <div class="flex items-baseline gap-2">
                    <span class="text-3xl font-bold font-headline">128</span>
                    <span
                        class="text-xs text-on-surface-variant bg-surface-container-low px-2 py-0.5 rounded-full font-medium">90%</span>
                </div>
            </div>
            <div class="bg-primary-fixed p-6 rounded-full shadow-sm">
                <p class="text-xs font-semibold text-on-primary-fixed-variant uppercase tracking-wider mb-2">Asistencia
                    Semanal</p>
                <div class="flex items-baseline gap-2">
                    <span class="text-3xl font-bold font-headline">96.4%</span>
                    <span class="material-symbols-outlined text-sm text-on-primary-fixed-variant"
                        style="font-variation-settings: 'FILL' 1;">trending_up</span>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/5">
                <p class="text-xs font-semibold text-on-surface-variant uppercase tracking-wider mb-2">Retrasos</p>
                <div class="flex items-baseline gap-2">
                    <span class="text-3xl font-bold font-headline">04</span>
                    <span class="text-xs text-error bg-error-container/30 px-2 py-0.5 rounded-full font-medium">-2%</span>
                </div>
            </div>
        </div>
        <!-- Filters Bar -->
        <div class="bg-surface-container-low/50 p-4 rounded-xl flex flex-wrap items-center justify-between gap-4">
            <div class="flex flex-wrap items-center gap-3">
                <div class="relative min-w-[200px]">
                    <select
                        class="w-full appearance-none bg-surface-container-lowest border-none px-4 py-2 rounded-lg text-sm font-medium focus:ring-2 focus:ring-primary/10 cursor-pointer pr-10">
                        <option>Todas las Obras</option>
                        <option>Residencial Altavista</option>
                        <option>Torre Lomas</option>
                        <option>Complejo Industrial Norte</option>
                    </select>

                </div>
                <div class="relative min-w-[200px]">
                    <select
                        class="w-full appearance-none bg-surface-container-lowest border-none px-4 py-2 rounded-lg text-sm font-medium focus:ring-2 focus:ring-primary/10 cursor-pointer pr-10">
                        <option>Todos los Puestos</option>
                        <option>Residente</option>
                        <option>Supervisor</option>
                        <option>Oficial de Obra</option>
                        <option>Ingeniero Civil</option>
                    </select>

                </div>
            </div>
            <div class="flex items-center gap-2 text-xs font-medium text-on-surface-variant">
                <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                <span>Mostrando 124 empleados activos</span>
            </div>
        </div>
        <!-- Modern Table Container -->
        <div
            class="bg-surface-container-lowest rounded-full shadow-xl shadow-slate-200/20 overflow-hidden border border-outline-variant/5">
            <div class="overflow-x-auto">
                <table class="w-full border-collapse">
                    <thead>
                        <tr class="bg-surface-container-low/30">
                            <th
                                class="px-8 py-5 text-left text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Empleado</th>
                            <th
                                class="px-6 py-5 text-left text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Puesto</th>
                            <th
                                class="px-6 py-5 text-left text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Obra Asignada</th>
                            <th
                                class="px-6 py-5 text-left text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Estatus</th>
                            <th
                                class="px-6 py-5 text-left text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Última Asistencia</th>
                            <th class="px-8 py-5 text-right"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-outline-variant/10">
                        <!-- Row 1 -->
                        <tr class="hover:bg-surface-container-low/40 transition-colors group">
                            <td class="px-8 py-5">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl overflow-hidden shadow-sm">
                                        <img alt="Marco Rivera" class="w-full h-full object-cover"
                                            data-alt="professional headshot of a middle-aged man with short hair wearing a navy blue polo shirt, clean modern style"
                                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMFxfY5f3KTt_VfxgyOGQBy0noT4wXsU6oKsuKHR-mjjOvxKku4PdfawASozhqb87QEi1KSO4UO7hDDhUQFJg8yy-pcK_jhB3xkfKlcuPwx-6cm5hPlmX8nUbcD-PBel8VCtlKl3yfUl8fseQldIbsi2O-YULHVHKLk-T7nICkJPlqo3i8QCpFnUzcilE6PIXtfVkLIZq3js99e20_NqOD-nEc1wDTE4vtt7LBWmZyW86_7oDzCkjOu5xcjcMtFbkaaR3xhvL31SMZ" />
                                    </div>
                                    <div>
                                        <p class="font-semibold text-sm">Marco Rivera</p>
                                        <p class="text-xs text-on-surface-variant">m.rivera@jyzao.com</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary-fixed text-on-primary-fixed-variant">
                                    Residente
                                </span>
                            </td>
                            <td class="px-6 py-5">
                                <a class="text-sm font-medium text-primary hover:underline underline-offset-4 flex items-center gap-1"
                                    href="#">
                                    Residencial Altavista
                                    <span class="material-symbols-outlined text-[14px]">open_in_new</span>
                                </a>
                            </td>
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                    <span class="text-sm font-medium text-emerald-700">En obra</span>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <div class="space-y-0.5">
                                    <p class="text-sm font-semibold">Hoy 7:55 AM</p>
                                    <p class="text-[10px] text-on-surface-variant uppercase tracking-tighter">Puntual</p>
                                </div>
                            </td>
                            <td class="px-8 py-5 text-right">
                                <button
                                    class="p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-surface-container-high transition-all">
                                    <span class="material-symbols-outlined text-slate-400">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 2 -->
                        <tr class="hover:bg-surface-container-low/40 transition-colors group">
                            <td class="px-8 py-5">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl overflow-hidden shadow-sm">
                                        <img alt="Elena Vasquez" class="w-full h-full object-cover"
                                            data-alt="professional woman wearing a grey blazer, smiling warmly, corporate photography style"
                                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2_S8UDdtAT2ZOIuE3N6Db4If7UExVTHeFyQwvlfpO8DGbLtXUbfX7r-n2ezk97dhGhzYSoBgZYJsbESUlHEwTDo6PHEZtZLrlJx_zYNBtg8XddtnpycxfoX3TrriwNjhYMx2jrcQMfUv3XHDgwez6DO2nJxEGTbjbsBBffp9MAXMI93gSZ0dgfus-cX5-deVMEU2ijUSh4bY4EjtrglD-RPOpB5jyUOyH43WUmfakRZv2hYt51pGC6DSce2leXJpHohedlAFddy0j" />
                                    </div>
                                    <div>
                                        <p class="font-semibold text-sm">Elena Vasquez</p>
                                        <p class="text-xs text-on-surface-variant">e.vasquez@jyzao.com</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-tertiary-fixed text-on-tertiary-fixed-variant">
                                    Ing. Estructural
                                </span>
                            </td>
                            <td class="px-6 py-5">
                                <a class="text-sm font-medium text-primary hover:underline underline-offset-4 flex items-center gap-1"
                                    href="#">
                                    Torre Lomas
                                    <span class="material-symbols-outlined text-[14px]">open_in_new</span>
                                </a>
                            </td>
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                    <span class="text-sm font-medium text-emerald-700">En obra</span>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <div class="space-y-0.5">
                                    <p class="text-sm font-semibold">Hoy 8:12 AM</p>
                                    <p class="text-[10px] text-on-surface-variant uppercase tracking-tighter">Puntual</p>
                                </div>
                            </td>
                            <td class="px-8 py-5 text-right">
                                <button
                                    class="p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-surface-container-high transition-all">
                                    <span class="material-symbols-outlined text-slate-400">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 3 -->
                        <tr class="hover:bg-surface-container-low/40 transition-colors group">
                            <td class="px-8 py-5">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl overflow-hidden shadow-sm">
                                        <img alt="Roberto Salas" class="w-full h-full object-cover"
                                            data-alt="construction worker portrait, wearing a orange high-visibility vest and white hard hat, soft natural lighting"
                                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXxrx1TIKbh6tdfJXoHll7PyUXwQXsNN70eQlLBtNpbc489KuAOdVyT5wb2kxVP3Wqk0jgESJAUT37LNy3Wd5CzAjEO_dzhvDUDc4OdfbXFX1IRjjsQCYV4md34Uzbc0-sAqrdTxdntoRHSNqy3EJGgYp3XnKi9r45wG38T1raJpJfnOSqMK4-QNYtUMhqvAjDfLwIgwJXb5FsXbB46C-h2RI_tUc63KHW1wLTUVmLwkSRiaK4HnU4oX6dZfFxXHpqNXMnztGCUkao" />
                                    </div>
                                    <div>
                                        <p class="font-semibold text-sm">Roberto Salas</p>
                                        <p class="text-xs text-on-surface-variant">r.salas@jyzao.com</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-secondary-fixed text-on-secondary-fixed-variant">
                                    Capataz
                                </span>
                            </td>
                            <td class="px-6 py-5">
                                <a class="text-sm font-medium text-primary hover:underline underline-offset-4 flex items-center gap-1"
                                    href="#">
                                    Residencial Altavista
                                    <span class="material-symbols-outlined text-[14px]">open_in_new</span>
                                </a>
                            </td>
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span>
                                    <span class="text-sm font-medium text-slate-500">Salida</span>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <div class="space-y-0.5">
                                    <p class="text-sm font-semibold">Ayer 6:05 PM</p>
                                    <p class="text-[10px] text-on-surface-variant uppercase tracking-tighter">Fin de
                                        jornada</p>
                                </div>
                            </td>
                            <td class="px-8 py-5 text-right">
                                <button
                                    class="p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-surface-container-high transition-all">
                                    <span class="material-symbols-outlined text-slate-400">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 4 -->
                        <tr class="hover:bg-surface-container-low/40 transition-colors group">
                            <td class="px-8 py-5">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl overflow-hidden shadow-sm">
                                        <img alt="Clara Mendez" class="w-full h-full object-cover"
                                            data-alt="young professional woman, clean aesthetic, blurred office background, soft daylight"
                                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuCndPlFl7OHJec6nrN_D5pD-Mk6eYsRSOSpZrq5HicoJkWbrQ6xSjngnOazgZ2PZruTxNXq1Q_8L2FDX03NGfTYA_yeJbLy0Qr39_hZU7eI0q91N99KOrztRLZ1za5f5FpLsevsWuGW74lpUgPY0KmHLi9wKKBKmgpTOudXcMK-B-nXRJQZE3ttPD0Kzty1hKbV_0f2Fifio5hejt9gsUfT3ok5Sd6TQYb83a0mPJ-CajeEn0pvme5xFxBz6fSodaKkgh4sUPbCp-Wv" />
                                    </div>
                                    <div>
                                        <p class="font-semibold text-sm">Clara Méndez</p>
                                        <p class="text-xs text-on-surface-variant">c.mendez@jyzao.com</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary-fixed text-on-primary-fixed-variant">
                                    Residente
                                </span>
                            </td>
                            <td class="px-6 py-5">
                                <a class="text-sm font-medium text-primary hover:underline underline-offset-4 flex items-center gap-1"
                                    href="#">
                                    Complejo Industrial
                                    <span class="material-symbols-outlined text-[14px]">open_in_new</span>
                                </a>
                            </td>
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-error animate-pulse"></span>
                                    <span class="text-sm font-medium text-error">Retraso</span>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <div class="space-y-0.5">
                                    <p class="text-sm font-semibold">Pendiente</p>
                                    <p class="text-[10px] text-error uppercase tracking-tighter">Sin registro hoy</p>
                                </div>
                            </td>
                            <td class="px-8 py-5 text-right">
                                <button
                                    class="p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-surface-container-high transition-all">
                                    <span class="material-symbols-outlined text-slate-400">more_vert</span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- Pagination -->
            <div
                class="px-8 py-4 bg-surface-container-low/30 flex items-center justify-between border-t border-outline-variant/5">
                <p class="text-xs text-on-surface-variant font-medium">Mostrando 1 a 10 de 142 empleados</p>
                <div class="flex gap-1">
                    <button class="p-2 rounded-lg hover:bg-surface-container-high text-on-surface-variant transition-all">
                        <span class="material-symbols-outlined text-lg">chevron_left</span>
                    </button>
                    <button
                        class="w-8 h-8 rounded-lg bg-primary text-on-primary text-xs font-bold shadow-md shadow-primary/20">1</button>
                    <button
                        class="w-8 h-8 rounded-lg hover:bg-surface-container-high text-xs font-bold transition-all">2</button>
                    <button
                        class="w-8 h-8 rounded-lg hover:bg-surface-container-high text-xs font-bold transition-all">3</button>
                    <button class="p-2 rounded-lg hover:bg-surface-container-high text-on-surface-variant transition-all">
                        <span class="material-symbols-outlined text-lg">chevron_right</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection