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

@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>Empleados</span>

            </nav>
        </div>

    </header>
@endsection


@section('main-content')
    <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 mb-5">
        <div class="space-y-1">

            <h2 class="text-4xl font-headline font-bold text-on-surface tracking-tight">Empleados</h2>
            <p class="text-secondary font-body">Responsables y cuadrillas operativas derivadas de los paquetes de mano de
                obra de {{ $project['name'] }}.</p>
        </div>
        <div class="flex items-center gap-3">
            <button
                class="flex items-center gap-2 px-5 py-2.5 bg-surface-container-lowest text-primary border border-outline-variant/15 rounded-full text-sm font-semibold shadow-sm hover:bg-slate-50 active:scale-95 transition-all">
                <span class="material-symbols-outlined text-lg" data-icon="ios_share">ios_share</span>
                Exportar
            </button>
            <button
                class="flex items-center gap-2 px-6 py-2.5 bg-gradient-to-br from-primary to-primary-container text-white rounded-full text-sm font-semibold shadow-lg shadow-primary/10 hover:shadow-xl active:scale-95 transition-all">
                <span class="material-symbols-outlined text-lg" data-icon="add">add</span>
                Nuevo empleado
            </button>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-5">
        @foreach ($employees['summary'] as $index => $item)
            <div
                class="bg-surface-container-lowest p-6 rounded-full shadow-[0_12px_40px_rgba(5,29,48,0.06)] border border-transparent hover:border-outline-variant/20 transition-all">
                <div class="flex justify-between items-start mb-4">
                    <div
                        class="p-2.5 {{ $index === 0 ? 'bg-primary-fixed' : ($index === 1 ? 'bg-secondary-container' : ($index === 2 ? 'bg-tertiary-fixed' : 'bg-error-container')) }} rounded-xl">
                        <span
                            class="material-symbols-outlined {{ $index === 0 ? 'text-primary' : ($index === 1 ? 'text-secondary' : ($index === 2 ? 'text-on-tertiary-fixed-variant' : 'text-error')) }}"
                            style="font-variation-settings: 'FILL' 1;">
                            {{ $index === 0 ? 'group' : ($index === 1 ? 'check_circle' : ($index === 2 ? 'engineering' : 'assignment_late')) }}
                        </span>
                    </div>
                    @if (isset($item['badge']))
                        <span
                            class="text-xs font-bold {{ $index === 3 ? 'text-error bg-error-container/50' : 'text-on-primary-container bg-surface-container' }} px-2 py-0.5 rounded-full">
                            {{ $item['badge'] }}
                        </span>
                    @endif
                </div>
                <div class="space-y-0.5">
                    <p class="text-5xl font-headline font-bold text-primary">{{ $item['value'] }}</p>
                    <p class="text-xs font-medium text-secondary">{{ $item['label'] }}</p>
                </div>
            </div>
        @endforeach
    </div>

    <div class="grid grid-cols-12 gap-8 items-start">
        <div class="col-span-12 lg:col-span-9 space-y-6">
            <div class="bg-surface-container-low p-3 rounded-full flex flex-wrap items-center gap-3">
                <div class="flex-1 min-w-[200px]">
                    <select
                        class="w-full bg-white border-none rounded-full text-xs font-semibold text-on-surface-variant focus:ring-primary/20 shadow-sm">
                        <option>Especialidad: Todas</option>
                        <option>Obra directa</option>
                        <option>Acabados</option>
                        <option>Instalaciones</option>
                    </select>
                </div>
                <div class="flex-1 min-w-[150px]">
                    <select
                        class="w-full bg-white border-none rounded-full text-xs font-semibold text-on-surface-variant focus:ring-primary/20 shadow-sm">
                        <option>Area: Todas</option>
                        <option>Obra directa</option>
                        <option>Acabados</option>
                        <option>Instalaciones</option>
                    </select>
                </div>
                <div class="flex-1 min-w-[150px]">
                    <select
                        class="w-full bg-white border-none rounded-full text-xs font-semibold text-on-surface-variant focus:ring-primary/20 shadow-sm">
                        <option>Cuadrilla: Todas</option>
                        <option>Frente mayor</option>
                        <option>Cuadrilla base</option>
                        <option>Especialista</option>
                    </select>
                </div>
                <div class="flex-1 min-w-[150px]">
                    <select
                        class="w-full bg-white border-none rounded-full text-xs font-semibold text-on-surface-variant focus:ring-primary/20 shadow-sm">
                        <option>Retencion: Todas</option>
                        <option>Con retencion</option>
                        <option>Sin retencion</option>
                    </select>
                </div>
                <button
                    class="p-2 bg-primary text-white rounded-full active:scale-95 transition-all flex items-center justify-center">
                    <span class="material-symbols-outlined text-lg" data-icon="filter_list">filter_list</span>
                </button>
            </div>
            <div class="bg-surface-container-lowest rounded-full shadow-[0_12px_40px_rgba(5,29,48,0.06)] overflow-hidden">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr
                            class="bg-slate-50/50 text-on-primary-container text-[11px] font-bold uppercase tracking-widest">
                            <th class="px-8 py-5">Responsable</th>
                            <th class="px-6 py-5">Especialidad &amp; Area</th>
                            <th class="px-6 py-5">Frente</th>
                            <th class="px-6 py-5">Cuadrilla</th>
                            <th class="px-6 py-5">Duracion</th>
                            <th class="px-6 py-5">Retencion</th>
                            <th class="px-8 py-5 text-right">Accion</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach ($employees['rows'] as $row)
                            <tr class="group hover:bg-surface-container-low/50 transition-all duration-200">
                                <td class="px-8 py-5">
                                    <div class="flex items-center gap-4">
                                        <div class="w-10 h-10 rounded-full overflow-hidden shadow-sm">
                                            <img class="w-full h-full object-cover" src="{{ $row['avatar'] }}"
                                                alt="{{ $row['name'] }}" />
                                        </div>
                                        <div>
                                            <p class="text-sm font-bold text-primary">{{ $row['name'] }}</p>
                                            <p class="text-[10px] text-on-primary-container font-mono">ID:
                                                {{ $row['id'] }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <p class="text-sm font-semibold text-secondary">{{ $row['role'] }}</p>
                                    <p class="text-[10px] text-on-primary-container font-medium">{{ $row['area'] }}</p>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="px-3 py-1 bg-surface-container text-primary rounded-full text-[10px] font-bold">{{ $row['front'] }}</span>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="flex items-center gap-1.5 text-[10px] font-bold {{ $row['crew_class'] }} px-3 py-1 rounded-full w-fit">
                                        <span class="w-1.5 h-1.5 rounded-full {{ $row['crew_dot_class'] }}"></span>
                                        {{ $row['crew_label'] }}
                                    </span>
                                </td>
                                <td class="px-6 py-5">
                                    <p class="text-xs font-medium">{{ $row['duration'] }}</p>
                                </td>
                                <td class="px-6 py-5">
                                    <p class="text-xs font-bold {{ $row['retention_class'] }}">{{ $row['retention'] }}</p>
                                </td>
                                <td class="px-8 py-5 text-right">
                                    <button
                                        class="p-2 text-on-primary-container hover:text-primary hover:bg-white rounded-full transition-all group-hover:shadow-sm active:scale-90">
                                        <span class="material-symbols-outlined" data-icon="visibility">visibility</span>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="px-8 py-5 bg-slate-50/50 flex justify-between items-center">
                    <p class="text-xs font-medium text-on-primary-container">Mostrando <span
                            class="font-bold text-primary">1-11</span> de 11 responsables</p>
                    <div class="flex items-center gap-2">
                        <button
                            class="p-1.5 bg-white border border-outline-variant/15 rounded-lg text-slate-400 hover:text-primary transition-all active:scale-90 shadow-sm">
                            <span class="material-symbols-outlined" data-icon="chevron_left">chevron_left</span>
                        </button>
                        <button
                            class="w-8 h-8 flex items-center justify-center bg-primary text-white rounded-lg text-xs font-bold shadow-md active:scale-90">1</button>
                        <button
                            class="p-1.5 bg-white border border-outline-variant/15 rounded-lg text-slate-400 hover:text-primary transition-all active:scale-90 shadow-sm">
                            <span class="material-symbols-outlined" data-icon="chevron_right">chevron_right</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-3 space-y-8">
            <section class="bg-surface-container-lowest p-6 rounded-full shadow-[0_12px_40px_rgba(5,29,48,0.06)] space-y-6">
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-bold text-primary">Atencion requerida</h3>
                    <span class="bg-error/10 text-error text-[10px] font-bold px-2 py-0.5 rounded-full">
                        {{ count($employees['alerts']) }} Alertas
                    </span>
                </div>
                <div class="space-y-4">
                    @foreach ($employees['alerts'] as $item)
                        <div
                            class="flex items-start gap-3 p-3 rounded-2xl transition-all border border-transparent {{ $item['container_class'] }}">
                            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0 bg-slate-200">
                                <img class="w-full h-full object-cover" src="{{ $item['avatar'] }}"
                                    alt="{{ $item['name'] }}" />
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xs font-bold text-primary truncate">{{ $item['name'] }}</p>
                                <p class="text-[10px] {{ $item['accent_class'] }} font-medium">{{ $item['detail'] }}</p>
                            </div>
                            <span class="material-symbols-outlined {{ $item['accent_class'] }} text-lg"
                                data-icon="{{ $item['icon'] }}">{{ $item['icon'] }}</span>
                        </div>
                    @endforeach
                </div>
                <button
                    class="w-full py-2 text-[11px] font-bold text-primary bg-slate-50 hover:bg-slate-100 rounded-full transition-all">Ver
                    todas las incidencias</button>
            </section>
            <section class="bg-primary text-white p-6 rounded-full shadow-lg shadow-primary/20 space-y-6">
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-bold">Distribucion por frente</h3>
                    <span class="material-symbols-outlined text-slate-400 text-lg" data-icon="pie_chart">pie_chart</span>
                </div>
                <div class="space-y-5">
                    @foreach ($employees['distribution'] as $item)
                        <div class="space-y-2">
                            <div class="flex justify-between items-end">
                                <p class="text-xs font-medium text-slate-300">{{ $item['label'] }}</p>
                                <p class="text-xs font-bold">{{ $item['value'] }}</p>
                            </div>
                            <div class="h-1.5 w-full bg-white/10 rounded-full overflow-hidden">
                                <div class="h-full rounded-full {{ $item['bar_class'] }}"
                                    style="width: {{ $item['width'] }}">
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
            <div
                class="bg-gradient-to-br from-secondary-container to-surface-container rounded-full p-6 relative overflow-hidden group">
                <div
                    class="absolute -right-4 -bottom-4 opacity-10 group-hover:rotate-12 transition-transform duration-500">
                    <span class="material-symbols-outlined text-8xl" data-icon="engineering">engineering</span>
                </div>
                <p class="text-xs font-bold text-primary mb-2">{{ $employees['weekly_summary']['title'] }}</p>
                <p class="text-2xl font-headline font-bold text-primary leading-tight mb-4">
                    {{ $employees['weekly_summary']['value'] }}
                </p>
                <button
                    class="text-[10px] font-bold text-primary uppercase tracking-widest flex items-center gap-1 group-hover:gap-2 transition-all">
                    {{ $employees['weekly_summary']['button'] }}
                    <span class="material-symbols-outlined text-sm" data-icon="arrow_forward">arrow_forward</span>
                </button>
            </div>
        </div>
    </div>
@endsection