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

@section('main-content')
    <section class="flex-1 overflow-y-auto p-8 space-y-8">
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
                <p class="text-[11px] uppercase tracking-wider text-on-surface-variant font-bold font-label mb-2">Empleados
                    esperados</p>
                <p class="text-3xl font-bold font-headline text-on-surface">124</p>
                <div class="h-1.5 w-full bg-outline-variant/20 rounded-full mt-4">
                    <div class="h-full bg-primary rounded-full" style="width: 100%"></div>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
                <p class="text-[11px] uppercase tracking-wider text-on-surface-variant font-bold font-label mb-2">Presentes
                </p>
                <p class="text-3xl font-bold font-headline text-green-600">112</p>
                <div class="h-1.5 w-full bg-outline-variant/20 rounded-full mt-4">
                    <div class="h-full bg-green-500 rounded-full" style="width: 90.3%"></div>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
                <p class="text-[11px] uppercase tracking-wider text-on-surface-variant font-bold font-label mb-2">Faltas</p>
                <p class="text-3xl font-bold font-headline text-error">8</p>
                <div class="h-1.5 w-full bg-outline-variant/20 rounded-full mt-4">
                    <div class="h-full bg-error rounded-full" style="width: 6.4%"></div>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
                <p class="text-[11px] uppercase tracking-wider text-on-surface-variant font-bold font-label mb-2">Retardos
                </p>
                <p class="text-3xl font-bold font-headline text-amber-500">4</p>
                <div class="h-1.5 w-full bg-outline-variant/20 rounded-full mt-4">
                    <div class="h-full bg-amber-500 rounded-full" style="width: 3.2%"></div>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
                <p class="text-[11px] uppercase tracking-wider text-on-surface-variant font-bold font-label mb-2">
                    Incidencias</p>
                <p class="text-3xl font-bold font-headline text-on-primary-fixed-variant">3</p>
                <div class="h-1.5 w-full bg-outline-variant/20 rounded-full mt-4">
                    <div class="h-full bg-on-primary-fixed-variant rounded-full" style="width: 2.4%"></div>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <div class="lg:col-span-8 space-y-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-primary p-8 rounded-full text-white relative overflow-hidden">
                        <div class="relative z-10">
                            <h3
                                class="text-[11px] text-on-primary-container font-bold font-label uppercase tracking-widest mb-2">
                                Resumen del Día</h3>
                            <p class="text-2xl font-bold font-headline mb-4">Lunes, 24 de Julio</p>
                            <div class="flex items-center space-x-4 mb-6">
                                <div class="flex -space-x-1">
                                    <div class="w-3 h-3 rounded-full bg-green-500 shadow-[0_0_8px_#22c55e]"></div>
                                    <div class="w-3 h-3 rounded-full bg-gray-500 opacity-30"></div>
                                    <div class="w-3 h-3 rounded-full bg-gray-500 opacity-30"></div>
                                </div>
                                <span class="text-sm font-medium">Operación Óptima</span>
                            </div>
                            <p class="text-sm text-on-primary-container leading-relaxed">
                                El 90% de la plantilla se encuentra en sitio. Las etapas de Cimentación y Estructura
                                reportan asistencia completa.
                            </p>
                        </div>
                        <div class="absolute -right-10 -bottom-10 opacity-10">
                            <span class="material-symbols-outlined text-[180px]">analytics</span>
                        </div>
                    </div>
                    <div class="bg-surface-container-lowest p-8 rounded-full shadow-sm">
                        <div class="flex justify-between items-start mb-6">
                            <h3 class="text-sm font-bold font-headline text-on-surface">Tendencia Semanal</h3>
                            <span class="text-xs text-green-600 font-bold bg-green-50 px-2 py-1 rounded-lg">+2.4%</span>
                        </div>
                        <div class="flex items-end justify-between h-32 pt-4">
                            <div class="flex flex-col items-center space-y-2 group">
                                <div
                                    class="w-8 bg-surface-container-high rounded-t-lg h-[60%] group-hover:bg-primary transition-all">
                                </div>
                                <span class="text-[10px] font-label text-on-surface-variant">Lun</span>
                            </div>
                            <div class="flex flex-col items-center space-y-2 group">
                                <div
                                    class="w-8 bg-surface-container-high rounded-t-lg h-[85%] group-hover:bg-primary transition-all">
                                </div>
                                <span class="text-[10px] font-label text-on-surface-variant">Mar</span>
                            </div>
                            <div class="flex flex-col items-center space-y-2 group">
                                <div
                                    class="w-8 bg-surface-container-high rounded-t-lg h-[70%] group-hover:bg-primary transition-all">
                                </div>
                                <span class="text-[10px] font-label text-on-surface-variant">Mie</span>
                            </div>
                            <div class="flex flex-col items-center space-y-2 group">
                                <div
                                    class="w-8 bg-surface-container-high rounded-t-lg h-[95%] group-hover:bg-primary transition-all">
                                </div>
                                <span class="text-[10px] font-label text-on-surface-variant">Jue</span>
                            </div>
                            <div class="flex flex-col items-center space-y-2 group">
                                <div class="w-8 bg-primary rounded-t-lg h-[100%] shadow-lg"></div>
                                <span class="text-[10px] font-bold text-primary">Vie</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden border border-outline-variant/5">
                    <div class="px-8 py-6 flex justify-between items-center border-b border-outline-variant/10">
                        <h3 class="text-sm font-bold font-headline text-on-surface">Listado de Asistencia</h3>
                        <div class="flex items-center space-x-6">
                            <div class="relative">
                                <span
                                    class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-sm">search</span>
                                <input
                                    class="pl-9 pr-4 py-2 bg-surface border-none rounded-full text-sm w-48 focus:ring-1 focus:ring-primary transition-all"
                                    placeholder="Buscar..." type="text" />
                            </div>
                            <div class="flex items-center space-x-4">
                                <button
                                    class="p-2 bg-surface rounded-full text-on-surface-variant hover:text-primary transition-colors">
                                    <span class="material-symbols-outlined">filter_list</span>
                                </button>
                                <div class="w-px h-6 bg-outline-variant/20"></div>
                                <a class="flex items-center space-x-1.5 text-xs font-bold text-primary hover:opacity-80 transition-all group"
                                    href="#">
                                    <span>Ver listado completo</span>
                                    <span
                                        class="material-symbols-outlined text-[18px] group-hover:translate-x-0.5 transition-transform">arrow_forward</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left">
                            <thead>
                                <tr
                                    class="text-[11px] font-bold font-label uppercase tracking-widest text-on-surface-variant bg-surface-container-low/30">
                                    <th class="px-8 py-4">Empleado</th>
                                    <th class="px-4 py-4">Puesto</th>
                                    <th class="px-4 py-4">Etapa/Frente</th>
                                    <th class="px-4 py-4 text-center">Entrada</th>
                                    <th class="px-4 py-4 text-center">Salida</th>
                                    <th class="px-4 py-4">Origen</th>
                                    <th class="px-4 py-4">Estado</th>
                                    <th class="px-8 py-4 text-right">Incidencia</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-outline-variant/5">
                                <tr class="hover:bg-surface-container-low/50 transition-colors">
                                    <td class="px-8 py-4">
                                        <div class="flex items-center space-x-3">
                                            <img alt="Worker" class="w-8 h-8 rounded-full"
                                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuD8udqCJZpJE8q4yoOQGCGDUHZTjMqj6Z3BQCE3QjiK6P_dwxVPrI-cddxh74QY6BShXsBUtcMxXjFOvd1_rA1HHus_TeSp1E16IPuViKccttYWP8DmBzMdUtjnu-YUtv-c1bjAXQufPpfBUprU1eg7Buc0i0mbioI93uQ7nDxjFF-q_7u2hsLC_2EpqGjymgwmFL71lTnfvcU9Sj8WADaW4ngAsZb6Y2Ow9MgL0lMxs6veXlng4z24ULJUF-Htq7pTYKFEQQWR8j4m" />
                                            <div>
                                                <p class="text-sm font-semibold text-on-surface">Ricardo Mendoza</p>
                                                <p class="text-[10px] text-on-surface-variant">ID: 0284</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4 text-sm text-on-secondary-container">Maestro Albañil</td>
                                    <td class="px-4 py-4 text-sm text-on-secondary-container">Estructura N4</td>
                                    <td class="px-4 py-4 text-center text-sm font-medium">07:52</td>
                                    <td class="px-4 py-4 text-center text-sm text-outline">--:--</td>
                                    <td class="px-4 py-4">
                                        <span
                                            class="inline-flex items-center space-x-1 px-2 py-1 rounded bg-surface text-[10px] font-bold uppercase tracking-tight text-on-surface-variant">
                                            <span class="material-symbols-outlined text-[12px]">smartphone</span>
                                            <span>App</span>
                                        </span>
                                    </td>
                                    <td class="px-4 py-4">
                                        <span
                                            class="px-2 py-1 rounded-lg bg-green-100 text-green-700 text-[10px] font-bold">PRESENTE</span>
                                    </td>
                                    <td class="px-8 py-4 text-right">
                                        <span class="material-symbols-outlined text-outline-variant">info</span>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/50 transition-colors">
                                    <td class="px-8 py-4">
                                        <div class="flex items-center space-x-3">
                                            <img alt="Worker" class="w-8 h-8 rounded-full"
                                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuAI9EvOqhFB0LfIUsSlq1qUyhwEFCTK1qXWMGIy4bZNgEV8zzF751A7tJB2MwPj7SxVxavfzqMbMdl_ptHRygLWZXO9BitFdVt-cUK4WLYbhcicOEbd1QtCYX4osr3WrHHUOSVmCglSJpnOt6afT4_v5V_K5JSO4q1phEmSucrwirAtSsHUWqSminst79JwUNIOsBCFZRcd5R9RiDSvG000S0JFloiEyqD5xt1wvR0dZJEG2tTfaQtldTr0FKs9e-Tu9XS7yRzuJMkD" />
                                            <div>
                                                <p class="text-sm font-semibold text-on-surface">Daniela Rocha</p>
                                                <p class="text-[10px] text-on-surface-variant">ID: 0411</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4 text-sm text-on-secondary-container">Supervisor Obra</td>
                                    <td class="px-4 py-4 text-sm text-on-secondary-container">Instalaciones</td>
                                    <td class="px-4 py-4 text-center text-sm font-medium text-amber-500">08:15</td>
                                    <td class="px-4 py-4 text-center text-sm text-outline">--:--</td>
                                    <td class="px-4 py-4">
                                        <span
                                            class="inline-flex items-center space-x-1 px-2 py-1 rounded bg-surface text-[10px] font-bold uppercase tracking-tight text-on-surface-variant">
                                            <span class="material-symbols-outlined text-[12px]">sensors</span>
                                            <span>Terminal</span>
                                        </span>
                                    </td>
                                    <td class="px-4 py-4">
                                        <span
                                            class="px-2 py-1 rounded-lg bg-amber-100 text-amber-700 text-[10px] font-bold">RETARDO</span>
                                    </td>
                                    <td class="px-8 py-4 text-right">
                                        <span class="material-symbols-outlined text-amber-500"
                                            title="Tráfico zona norte">warning</span>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/50 transition-colors">
                                    <td class="px-8 py-4">
                                        <div class="flex items-center space-x-3">
                                            <div
                                                class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center text-[10px] font-bold">
                                                AL</div>
                                            <div>
                                                <p class="text-sm font-semibold text-on-surface">Arturo Luna</p>
                                                <p class="text-[10px] text-on-surface-variant">ID: 1092</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4 text-sm text-on-secondary-container">Soldador Esp.</td>
                                    <td class="px-4 py-4 text-sm text-on-secondary-container">Estructura N5</td>
                                    <td class="px-4 py-4 text-center text-sm text-outline">--:--</td>
                                    <td class="px-4 py-4 text-center text-sm text-outline">--:--</td>
                                    <td class="px-4 py-4">
                                        <span class="text-[10px] text-outline italic">Sin datos</span>
                                    </td>
                                    <td class="px-4 py-4">
                                        <span
                                            class="px-2 py-1 rounded-lg bg-red-100 text-red-700 text-[10px] font-bold">FALTA</span>
                                    </td>
                                    <td class="px-8 py-4 text-right">
                                        <span class="material-symbols-outlined text-error"
                                            title="Incapacidad médica">medical_services</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="px-8 py-4 bg-surface-container-low/20 flex items-center justify-between">
                        <span class="text-xs text-on-surface-variant font-medium">Mostrando 1-3 de 124 empleados</span>
                        <div class="flex space-x-1">
                            <button
                                class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-surface-container-high transition-colors">
                                <span class="material-symbols-outlined text-sm">chevron_left</span>
                            </button>
                            <button
                                class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white text-xs font-bold">1</button>
                            <button
                                class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-surface-container-high transition-colors text-xs font-bold">2</button>
                            <button
                                class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-surface-container-high transition-colors">
                                <span class="material-symbols-outlined text-sm">chevron_right</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-4 space-y-8">
                <div class="bg-surface-container-lowest p-8 rounded-full shadow-sm">
                    <div class="flex items-center space-x-2 mb-6">
                        <span class="material-symbols-outlined text-error"
                            style="font-variation-settings: 'FILL' 1;">error</span>
                        <h3 class="text-sm font-bold font-headline text-on-surface">Alertas del Día</h3>
                    </div>
                    <div class="space-y-4">
                        <div class="p-4 rounded-xl bg-error-container/30 border-l-4 border-error">
                            <p class="text-xs font-bold text-on-error-container mb-1">Inasistencia Crítica - Soldadores</p>
                            <p class="text-[10px] text-on-error-container/80 leading-relaxed">Faltan 2 especialistas en la
                                etapa Estructura N5. Riesgo de retraso en colado.</p>
                        </div>
                        <div class="p-4 rounded-xl bg-amber-50 border-l-4 border-amber-400">
                            <p class="text-xs font-bold text-amber-800 mb-1">Fallo de Sincronización</p>
                            <p class="text-[10px] text-amber-800/80 leading-relaxed">Terminal B-2 (Caseta Norte) offline
                                desde las 08:30 AM.</p>
                        </div>
                        <div class="p-4 rounded-xl bg-surface-container-low border-l-4 border-primary">
                            <p class="text-xs font-bold text-primary mb-1">Permiso Pendiente</p>
                            <p class="text-[10px] text-on-surface-variant leading-relaxed">Juan Pérez solicita salida
                                anticipada para trámites de INFONAVIT.</p>
                        </div>
                    </div>
                </div>
                <div class="bg-surface-container-lowest p-8 rounded-full shadow-sm">
                    <h3 class="text-sm font-bold font-headline text-on-surface mb-6">Asistencia por Etapa</h3>
                    <div class="space-y-6">
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium text-on-surface-variant">Cimentación</span>
                                <span class="text-xs font-bold text-primary">100%</span>
                            </div>
                            <div class="h-2 w-full bg-surface rounded-full overflow-hidden">
                                <div class="h-full bg-green-500 rounded-full" style="width: 100%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium text-on-surface-variant">Estructura</span>
                                <span class="text-xs font-bold text-primary">88%</span>
                            </div>
                            <div class="h-2 w-full bg-surface rounded-full overflow-hidden">
                                <div class="h-full bg-primary rounded-full" style="width: 88%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium text-on-surface-variant">Instalaciones</span>
                                <span class="text-xs font-bold text-primary">94%</span>
                            </div>
                            <div class="h-2 w-full bg-surface rounded-full overflow-hidden">
                                <div class="h-full bg-primary rounded-full" style="width: 94%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium text-on-surface-variant">Acabados</span>
                                <span class="text-xs font-bold text-primary">75%</span>
                            </div>
                            <div class="h-2 w-full bg-surface rounded-full overflow-hidden">
                                <div class="h-full bg-amber-400 rounded-full" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                    <button
                        class="w-full mt-8 py-3 text-xs font-bold text-primary border border-outline-variant/30 rounded-xl hover:bg-surface transition-all">
                        Ver reporte detallado
                    </button>
                </div>
            </div>
        </div>
    </section>
@endsection