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

@section('header-content')
    <header
        class="fixed top-0 right-0 left-0 z-40 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md flex justify-between items-center h-16 px-8 ml-64 border-b border-slate-200/50 shadow-sm">
        <div class="flex flex-col">
            <nav class="flex items-center gap-2 text-[0.6875rem] text-slate-500 font-medium">
                <span>Dashboard</span>
                <span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
                <span>Asistencia</span>

            </nav>
        </div>

    </header>
@endsection


@section('main-content')
    <!-- Page Header & Actions -->
    <div class="flex justify-between items-end mb-5">
        <div>
            <h2 class="text-3xl font-bold font-headline text-primary">Control de Asistencia</h2>
            <p class="text-on-surface-variant mt-1">Lunes 24 de Mayo, 2024</p>
        </div>
        <div class="flex gap-3">
            <div class="inline-flex p-1 bg-surface-container rounded-full">
                <button
                    class="px-4 py-1.5 rounded-full text-sm font-semibold bg-white shadow-sm text-primary">Diario</button>
                <button
                    class="px-4 py-1.5 rounded-full text-sm font-medium text-on-surface-variant hover:text-primary transition-colors">Semanal</button>
            </div>
            <button
                class="bg-primary text-on-primary px-5 py-2.5 rounded-full flex items-center gap-2 text-sm font-semibold shadow-md active:scale-95 transition-transform">
                <span class="material-symbols-outlined text-[20px]">add_circle</span>
                Registrar Incidencia
            </button>
        </div>
    </div>
    <!-- KPI Bento Grid -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-5">
        <div class="bg-primary-container p-6 rounded-xl flex flex-col justify-between">
            <div class="flex justify-between items-start">
                <span class="material-symbols-outlined text-secondary-fixed text-3xl">badge</span>
                <span class="text-xs font-bold text-on-primary-container/60 tracking-wider">TOTAL</span>
            </div>
            <div class="mt-4">
                <h4 class="text-3xl font-bold text-white font-headline">128</h4>
                <p class="text-sm text-on-primary-container font-medium">Trabajadores Activos</p>
            </div>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-transparent">
            <div class="flex justify-between items-start">
                <span class="material-symbols-outlined text-green-600 text-3xl">check_circle</span>
                <span class="text-[10px] bg-green-50 text-green-700 px-2 py-0.5 rounded-full font-bold">92%</span>
            </div>
            <div class="mt-4">
                <h4 class="text-3xl font-bold text-primary font-headline">118</h4>
                <p class="text-sm text-on-surface-variant">Asistencias Hoy</p>
            </div>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm">
            <div class="flex justify-between items-start">
                <span class="material-symbols-outlined text-error text-3xl">cancel</span>
                <span class="text-xs font-bold text-error/60 tracking-wider">CRÍTICO</span>
            </div>
            <div class="mt-4">
                <h4 class="text-3xl font-bold text-primary font-headline">6</h4>
                <p class="text-sm text-on-surface-variant">Faltas Totales</p>
            </div>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm">
            <div class="flex justify-between items-start">
                <span class="material-symbols-outlined text-amber-500 text-3xl">schedule</span>
                <span class="text-xs font-bold text-amber-600/60 tracking-wider">REVISIÓN</span>
            </div>
            <div class="mt-4">
                <h4 class="text-3xl font-bold text-primary font-headline">4</h4>
                <p class="text-sm text-on-surface-variant">Retardos</p>
            </div>
        </div>
        <div class="bg-tertiary-fixed p-6 rounded-xl shadow-sm">
            <div class="flex justify-between items-start">
                <span class="material-symbols-outlined text-on-tertiary-fixed-variant text-3xl">report_problem</span>
                <div class="w-2 h-2 rounded-full bg-error animate-pulse"></div>
            </div>
            <div class="mt-4">
                <h4 class="text-3xl font-bold text-on-tertiary-fixed font-headline">2</h4>
                <p class="text-sm text-on-tertiary-fixed-variant">Pendientes de Justificar</p>
            </div>
        </div>
    </div>
    <!-- Filters & Controls -->
    <div class="bg-surface-container-low p-4 rounded-xl flex flex-wrap items-center gap-4 mb-5">
        <div class="flex-1 min-w-[200px]">
            <label class="block text-[10px] font-bold text-outline-variant uppercase mb-1 px-1">Obra / Proyecto</label>
            <select class="w-full bg-white border-none rounded-xl text-sm focus:ring-2 focus:ring-primary/10 py-2.5">
                <option>Torre Titanium - Fase 2</option>
                <option>Residencial Los Olivos</option>
                <option>Centro Comercial Oriente</option>
            </select>
        </div>
        <div class="flex-1 min-w-[200px]">
            <label class="block text-[10px] font-bold text-outline-variant uppercase mb-1 px-1">Estatus</label>
            <div class="flex gap-2">
                <button
                    class="bg-white px-3 py-2 rounded-xl text-xs font-semibold shadow-sm border border-transparent hover:border-primary/20 transition-all">Todos</button>
                <button
                    class="bg-white/50 px-3 py-2 rounded-xl text-xs font-medium text-on-surface-variant hover:bg-white transition-all">Presente</button>
                <button
                    class="bg-white/50 px-3 py-2 rounded-xl text-xs font-medium text-on-surface-variant hover:bg-white transition-all">Ausente</button>
                <button
                    class="bg-white/50 px-3 py-2 rounded-xl text-xs font-medium text-on-surface-variant hover:bg-white transition-all">Retardo</button>
            </div>
        </div>
        <div class="flex items-end gap-2 ml-auto">
            <button class="p-2.5 rounded-xl bg-white text-on-surface-variant hover:text-primary transition-colors">
                <span class="material-symbols-outlined">filter_list</span>
            </button>
            <button class="p-2.5 rounded-xl bg-white text-on-surface-variant hover:text-primary transition-colors">
                <span class="material-symbols-outlined">download</span>
            </button>
        </div>
    </div>
    <!-- Main Data Table -->
    <div class="bg-surface-container-lowest rounded-xl shadow-sm overflow-hidden mb-5">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-slate-50/50">
                    <th class="px-6 py-4 text-[11px] font-bold text-outline-variant uppercase tracking-wider">Trabajador
                    </th>
                    <th class="px-6 py-4 text-[11px] font-bold text-outline-variant uppercase tracking-wider">
                        Especialidad / Área</th>
                    <th class="px-6 py-4 text-[11px] font-bold text-outline-variant uppercase tracking-wider">Entrada
                    </th>
                    <th class="px-6 py-4 text-[11px] font-bold text-outline-variant uppercase tracking-wider">Salida
                    </th>
                    <th class="px-6 py-4 text-[11px] font-bold text-outline-variant uppercase tracking-wider text-center">
                        Estatus</th>
                    <th class="px-6 py-4 text-[11px] font-bold text-outline-variant uppercase tracking-wider">Horas</th>
                    <th class="px-6 py-4 text-[11px] font-bold text-outline-variant uppercase tracking-wider">
                        Incidencias</th>
                    <th class="px-6 py-4"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                <!-- Row 1 -->
                <tr class="hover:bg-slate-50/50 transition-colors group">
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <img class="w-10 h-10 rounded-full object-cover"
                                data-alt="professional male construction worker wearing a white hard hat and orange safety vest smiling warmly"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuBAZIpZvaDMPYV1QYtuNBsatjtp6tZmoALq-PkOg7HYVaJtUBFgtin77t-cRdHFp9dAF7HkOOt41Fa4H5u9i82WoA9h_79l2PlvUBVmMvkJIEfYbrAw9X5qYfC5m4EEjT3tsHvRhjKtT3n7c6EhV2XNe7jAzuZ3LTTM2ylSd4p1YqtYEEdvCKjXzgpJjHYTgD-EVEs99lEQvBPhvu8oFANMIi2dco_TC5tkcuM5E2hNvZ0qzTWjXFjCQCJnnFj8-KIgy5w5k9aFue44" />
                            <div>
                                <div class="text-sm font-semibold text-primary">Francisco Javier Mendez</div>
                                <div class="text-[11px] text-on-surface-variant">ID: 0492-JZ</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-secondary font-medium">Albañilería Gral.</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-primary font-medium">07:55 AM</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-outline">--:--</span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <span
                            class="px-3 py-1 rounded-full text-[10px] font-bold bg-green-100 text-green-700 uppercase">Presente</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm font-medium">4.5 hrs</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-xs text-outline italic">Ninguna</span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <button
                            class="p-1 rounded hover:bg-surface text-outline opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="material-symbols-outlined">more_vert</span>
                        </button>
                    </td>
                </tr>
                <!-- Row 2 -->
                <tr class="hover:bg-slate-50/50 transition-colors group">
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <img class="w-10 h-10 rounded-full object-cover"
                                data-alt="close-up of a female engineer with short hair wearing reflective safety gear looking focused"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuDaB3PtVhbELw3roAtyR9NABOHsizT2jD8xWJU59UXDz88ibEsxT3-wbu34c7xn7kIrNsXB_I1Q6gWnlDBVdxSv_t7molVmlvE3f1qCsyZg4wH9vFym5u7pOZFYoPwCiKDrA_8bJAuAhvduzk7BupERVpaXl82DygwKGnHNlAqU-HSNIk24XITkxSKdTO-bC00JRRM_1o8HWr5lefWp6Dm0on0SKTk7qxom6xOhZMwXgl0_XaB3hhhJCDg0etpafkkNBeyJg72RP69S" />
                            <div>
                                <div class="text-sm font-semibold text-primary">Elena Rodriguez</div>
                                <div class="text-[11px] text-on-surface-variant">ID: 1102-JZ</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-secondary font-medium">Inst. Eléctricas</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-amber-600 font-bold">08:15 AM</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-outline">--:--</span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <span
                            class="px-3 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-700 uppercase">Retardo</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm font-medium">4.2 hrs</span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-1 text-xs text-amber-600 font-semibold">
                            <span class="material-symbols-outlined text-sm">warning</span>
                            Transporte
                        </div>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <button
                            class="p-1 rounded hover:bg-surface text-outline opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="material-symbols-outlined">more_vert</span>
                        </button>
                    </td>
                </tr>
                <!-- Row 3 -->
                <tr class="hover:bg-slate-50/50 transition-colors group">
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div
                                class="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-400">
                                <span class="material-symbols-outlined">person</span>
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-primary">Jorge Luis Herrera</div>
                                <div class="text-[11px] text-on-surface-variant">ID: 0834-JZ</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-secondary font-medium">Cimentación</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-outline">--:--</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-outline">--:--</span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <span
                            class="px-3 py-1 rounded-full text-[10px] font-bold bg-error-container text-error uppercase">Ausente</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm font-medium">0.0 hrs</span>
                    </td>
                    <td class="px-6 py-4">
                        <span
                            class="px-2 py-0.5 rounded bg-tertiary-fixed text-[10px] font-bold text-on-tertiary-fixed-variant">Sin
                            Justificar</span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <button
                            class="p-1 rounded hover:bg-surface text-outline opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="material-symbols-outlined">more_vert</span>
                        </button>
                    </td>
                </tr>
                <!-- Row 4 -->
                <tr class="hover:bg-slate-50/50 transition-colors group">
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <img class="w-10 h-10 rounded-full object-cover"
                                data-alt="close up headshot of a mature latin construction supervisor with sun weathered skin looking proud"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFdrkRsP7hqJom-ah8jD-8soSR-PLCm3dkZAu3ktpLiIlgs1bwjBFSCuAyeV4jZnpnj1kx3NAflPxuLdZ5L_3ReTV0qgX-CxsFzYcjgYeZvZHuTaIyat5GERs7XSYq8yfBZpXlnF7GdNfbjmg8rXkbZqr4rEEO_EQKdfH557oL_wIKsAat3UdQ8t2eZk1mlyUpmBzfg0JbfeaHuTBpWA-iueIMfaLgPc_rrFzSzH6L150u5sfaWM4ni7IoHs_XaJoz07PBYeNOZuCO" />
                            <div>
                                <div class="text-sm font-semibold text-primary">Mateo Villanueva</div>
                                <div class="text-[11px] text-on-surface-variant">ID: 1556-JZ</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-secondary font-medium">Supervisión</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-primary font-medium">07:40 AM</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-outline">--:--</span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <span
                            class="px-3 py-1 rounded-full text-[10px] font-bold bg-green-100 text-green-700 uppercase">Presente</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm font-medium">4.8 hrs</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-xs text-outline italic">Ninguna</span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <button
                            class="p-1 rounded hover:bg-surface text-outline opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="material-symbols-outlined">more_vert</span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- Pagination -->
        <div class="px-6 py-4 bg-slate-50/30 flex justify-between items-center">
            <span class="text-xs text-on-surface-variant font-medium">Mostrando 1-10 de 128 registros</span>
            <div class="flex gap-2">
                <button
                    class="p-2 rounded-lg bg-white border border-slate-200 text-on-surface-variant hover:text-primary transition-colors disabled:opacity-50">
                    <span class="material-symbols-outlined text-sm">chevron_left</span>
                </button>
                <button class="w-8 h-8 rounded-lg bg-primary text-white text-xs font-bold">1</button>
                <button
                    class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-xs font-bold hover:bg-slate-50">2</button>
                <button
                    class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-xs font-bold hover:bg-slate-50">3</button>
                <button
                    class="p-2 rounded-lg bg-white border border-slate-200 text-on-surface-variant hover:text-primary transition-colors">
                    <span class="material-symbols-outlined text-sm">chevron_right</span>
                </button>
            </div>
        </div>
    </div>
    <!-- Asymmetric Bottom Panel: Recent Incidents & Weather -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Recent Incidents Feed -->
        <div class="lg:col-span-2 bg-surface-container-low rounded-xl p-6">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-lg font-bold font-headline text-primary">Bitácora de Incidencias</h3>
                <a class="text-sm font-semibold text-blue-700 hover:underline" href="#">Ver todas</a>
            </div>
            <div class="space-y-4">
                <div class="flex gap-4 items-start p-4 bg-white rounded-xl">
                    <div
                        class="w-10 h-10 rounded-full bg-error/10 flex items-center justify-center text-error flex-shrink-0">
                        <span class="material-symbols-outlined">emergency_home</span>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <p class="text-sm font-bold text-primary">Incapacidad Medica - Juan Perez</p>
                            <span class="text-[10px] font-bold text-outline-variant uppercase">Hace 2h</span>
                        </div>
                        <p class="text-xs text-on-surface-variant mt-1">Se reporta ausencia por enfermedad general.
                            Documento pendiente de carga en sistema.</p>
                        <div class="mt-3 flex gap-2">
                            <button
                                class="px-3 py-1 bg-surface-container text-[10px] font-bold rounded-lg text-primary hover:bg-surface-container-high transition-colors">Cargar
                                Certificado</button>
                            <button
                                class="px-3 py-1 bg-primary-container text-[10px] font-bold rounded-lg text-white hover:opacity-90 transition-colors">Validar</button>
                        </div>
                    </div>
                </div>
                <div class="flex gap-4 items-start p-4 bg-white rounded-xl">
                    <div
                        class="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-600 flex-shrink-0">
                        <span class="material-symbols-outlined">directions_bus</span>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <p class="text-sm font-bold text-primary">Retardo Grupal - Cuadrilla A</p>
                            <span class="text-[10px] font-bold text-outline-variant uppercase">Hace 4h</span>
                        </div>
                        <p class="text-xs text-on-surface-variant mt-1">Bloqueo vial en Av. Central afectó el arribo de
                            12 trabajadores de la cuadrilla A.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Contextual Weather/Status Card -->
        <div class="bg-gradient-to-br from-primary to-primary-container rounded-xl p-6 text-white">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-bold text-secondary-fixed/60 uppercase tracking-widest">Condiciones Obra</p>
                    <h3 class="text-2xl font-bold font-headline mt-1">28°C Despejado</h3>
                </div>
                <span class="material-symbols-outlined text-4xl text-amber-400">sunny</span>
            </div>
            <div class="mt-8 space-y-4">
                <div class="p-3 bg-white/10 rounded-lg backdrop-blur-sm">
                    <p class="text-[10px] font-bold text-secondary-fixed/60 uppercase">Estatus Jornada</p>
                    <div class="flex justify-between items-center mt-1">
                        <span class="text-sm font-semibold">Progreso del día</span>
                        <span class="text-sm font-bold">60%</span>
                    </div>
                    <div class="w-full h-1.5 bg-white/20 rounded-full mt-2 overflow-hidden">
                        <div class="h-full bg-secondary-fixed w-[60%]"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3 p-3 bg-white/10 rounded-lg backdrop-blur-sm">
                    <span class="material-symbols-outlined text-secondary-fixed">info</span>
                    <p class="text-xs leading-relaxed">Turno vespertino inicia a las 14:00 hrs. Verifique roles de
                        relevo.</p>
                </div>
            </div>
        </div>
    </div>
@endsection