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

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

            </nav>
        </div>

    </header>
@endsection

@section('main-content')
    <div class="flex items-end justify-between mb-8">
        <div>
            <h2 class="text-3xl font-extrabold tracking-tight text-on-surface">Viviendas</h2>
            <p class="text-slate-500 mt-1">Consulta el estado de las {{ $homesPerProjectTotal }} viviendas
                consideradas por obra dentro de la demo</p>
        </div>
        <button
            class="bg-gradient-to-br from-primary to-primary-container text-white px-6 py-3 rounded-xl font-bold flex items-center gap-2 hover:shadow-xl transition-all active:scale-95">
            <span class="material-symbols-outlined">add_circle</span>
            Nueva vivienda
        </button>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
        <div class="bg-surface-container-lowest p-5 rounded-xl shadow-sm border border-outline-variant/10">
            <span class="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Total</span>
            <div class="text-2xl font-extrabold text-on-surface mt-1">{{ $homes['summary']['total'] }}</div>
            <div class="text-[10px] text-slate-400 mt-1">Viviendas por obra</div>
        </div>
        <div
            class="bg-surface-container-lowest p-5 rounded-xl shadow-sm border border-outline-variant/10 border-l-4 border-l-blue-500">
            <span class="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Activas</span>
            <div class="text-2xl font-extrabold text-on-surface mt-1">{{ $homes['summary']['active'] }}</div>
            <div class="text-[10px] text-blue-600 font-semibold mt-1">En proceso</div>
        </div>
        <div
            class="bg-surface-container-lowest p-5 rounded-xl shadow-sm border border-outline-variant/10 border-l-4 border-l-emerald-500">
            <span class="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Terminadas</span>
            <div class="text-2xl font-extrabold text-on-surface mt-1">{{ $homes['summary']['completed'] }}</div>
            <div class="text-[10px] text-emerald-600 font-semibold mt-1">Entrega lista</div>
        </div>
        <div
            class="bg-surface-container-lowest p-5 rounded-xl shadow-sm border border-outline-variant/10 border-l-4 border-l-amber-500">
            <span class="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Con Retraso</span>
            <div class="text-2xl font-extrabold text-on-surface mt-1">{{ $homes['summary']['delayed'] }}</div>
            <div class="text-[10px] text-amber-600 font-semibold mt-1">Requiere ajuste</div>
        </div>
        <div
            class="bg-surface-container-lowest p-5 rounded-xl shadow-sm border border-outline-variant/10 border-l-4 border-l-error">
            <span class="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Alertas</span>
            <div class="text-2xl font-extrabold text-error mt-1">{{ $homes['summary']['alerts'] }}</div>
            <div class="text-[10px] text-error/70 font-semibold mt-1">Critico</div>
        </div>
        <div class="bg-primary text-white p-5 rounded-xl shadow-lg">
            <span class="text-primary-fixed-dim text-[11px] font-bold uppercase tracking-wider">Avance Gral.</span>
            <div class="text-2xl font-extrabold mt-1">{{ $homes['summary']['average'] }}</div>
            <div class="w-full bg-white/20 h-1 rounded-full mt-2 overflow-hidden">
                <div class="bg-blue-400 h-full" style="width: {{ $homes['summary']['average_width'] }}"></div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-12 gap-8">
        <div class="col-span-12 lg:col-span-9 space-y-8">
            <div
                class="bg-surface-container-low p-4 rounded-xl flex flex-wrap items-center gap-4 border border-outline-variant/5">
                <div class="flex-1 min-w-[200px]">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Buscar Lote</label>
                    <input class="w-full bg-white border-outline-variant/20 rounded-lg text-sm px-3 py-2"
                        placeholder="Ej: Lote 101" type="text" />
                </div>
                <div class="w-40">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Etapa</label>
                    <select class="w-full bg-white border-outline-variant/20 rounded-lg text-sm px-3 py-2">
                        <option>Todas</option>
                        <option>Cimentacion</option>
                        <option>Estructura</option>
                        <option>Acabados</option>
                    </select>
                </div>
                <div class="w-40">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Estado</label>
                    <select class="w-full bg-white border-outline-variant/20 rounded-lg text-sm px-3 py-2">
                        <option>En proceso</option>
                        <option>Detenida</option>
                        <option>Terminada</option>
                    </select>
                </div>
                <div class="flex items-end h-full pt-4">
                    <button
                        class="px-4 py-2 text-slate-600 hover:bg-slate-200 rounded-lg text-sm transition-colors flex items-center gap-2">
                        <span class="material-symbols-outlined text-base">filter_list</span> Mas filtros
                    </button>
                </div>
            </div>
            <div class="bg-surface-container-lowest rounded-xl shadow-sm overflow-hidden border border-outline-variant/10">
                <table class="w-full text-left border-collapse">
                    <thead class="bg-slate-50 border-b border-slate-100">
                        <tr>
                            <th class="px-6 py-4 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Vivienda
                            </th>
                            <th class="px-6 py-4 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Modelo
                            </th>
                            <th class="px-6 py-4 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Etapa
                            </th>
                            <th class="px-6 py-4 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Estado
                            </th>
                            <th class="px-6 py-4 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Avance
                            </th>
                            <th class="px-6 py-4 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Alertas
                            </th>
                            <th class="px-6 py-4 text-[11px] font-bold text-slate-500 uppercase tracking-wider text-right">
                                Accion</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @foreach ($homes['rows'] as $row)
                            <tr x-data
                                @click="window.location.href = '{{ route('home_work.show', ['id' => $row['id']]) }}'; "
                                class="hover:bg-surface-container-low transition-colors group">
                                <td class="px-6 py-4">
                                    <div class="font-bold text-on-surface">{{ $row['lot'] }}</div>
                                    <div class="text-[10px] text-slate-400">{{ $row['id'] }}</div>
                                </td>
                                <td class="px-6 py-4 text-sm text-slate-600">{{ $row['model'] }}</td>
                                <td class="px-6 py-4 text-sm text-slate-600 font-medium">{{ $row['stage'] }}</td>
                                <td class="px-6 py-4">
                                    <span
                                        class="{{ $row['state_class'] }} px-2 py-1 rounded text-[10px] font-bold uppercase">
                                        {{ $row['state'] }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-24 bg-slate-100 h-1.5 rounded-full overflow-hidden">
                                            <div class="{{ $row['progress_class'] }} h-full"
                                                style="width: {{ $row['progress'] }}">
                                            </div>
                                        </div>
                                        <span class="text-xs font-bold text-slate-700">{{ $row['progress'] }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span
                                        class="material-symbols-outlined {{ $row['alert_class'] }}">{{ $row['alert_icon'] }}</span>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <button
                                        class="text-primary hover:underline text-xs font-bold opacity-0 group-hover:opacity-100 transition-opacity">Ver
                                        detalle</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div
                    class="px-6 py-4 bg-slate-50/50 flex justify-between items-center text-xs text-slate-500 border-t border-slate-100">
                    <div>{{ $homes['summary']['footer'] }}</div>
                    <div class="flex gap-2">
                        <button
                            class="px-3 py-1 bg-white border border-slate-200 rounded hover:bg-slate-50">Anterior</button>
                        <button
                            class="px-3 py-1 bg-white border border-slate-200 rounded hover:bg-slate-50">Siguiente</button>
                    </div>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/10">
                <h3 class="text-sm font-bold text-on-surface mb-6 uppercase tracking-wider">Distribucion por rango de
                    avance</h3>
                <div class="space-y-4">
                    @foreach ($homes['distribution'] as $item)
                        <div class="flex items-center gap-4">
                            <span class="text-xs font-medium text-slate-500 w-16">{{ $item['label'] }}</span>
                            <div class="flex-1 h-3 bg-slate-100 rounded-full overflow-hidden">
                                <div class="{{ $item['bar_class'] }} h-full" style="width: {{ $item['width'] }}"></div>
                            </div>
                            <span class="text-xs font-bold text-slate-700">{{ $item['count'] }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-3 space-y-8">
            <div class="bg-white p-6 rounded-xl border border-error/10 shadow-sm">
                <div class="flex items-center gap-2 mb-4">
                    <span class="material-symbols-outlined text-error text-xl"
                        style="font-variation-settings: 'FILL' 1;">notification_important</span>
                    <h3 class="text-sm font-bold text-on-surface uppercase tracking-tight">Requieren Atencion</h3>
                </div>
                <div class="space-y-4">
                    @foreach ($homes['attention'] as $item)
                        <div class="p-3 bg-surface-container-low rounded-lg border-l-4 {{ $item['border_class'] }}">
                            <div class="flex justify-between items-start">
                                <span class="text-xs font-bold text-slate-900">{{ $item['lot'] }}</span>
                                <span
                                    class="text-[9px] {{ $item['tag_class'] }} px-1.5 py-0.5 rounded uppercase font-bold">
                                    {{ $item['tag'] }}
                                </span>
                            </div>
                            <p class="text-[11px] text-slate-500 mt-1">{{ $item['description'] }}</p>
                        </div>
                    @endforeach
                </div>
                <button
                    class="w-full mt-4 py-2 border border-slate-200 rounded-lg text-[11px] font-bold text-slate-500 hover:bg-slate-50 transition-colors">
                    Ver todas las alertas
                </button>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/10">
                <h3 class="text-sm font-bold text-on-surface mb-6 uppercase tracking-wider">Por Bloque</h3>
                <div class="space-y-6">
                    @foreach ($homes['prototype_distribution'] as $item)
                        <div class="flex flex-col gap-2">
                            <div class="flex justify-between text-xs mb-1">
                                <span class="font-medium text-slate-600 italic">{{ $item['label'] }}</span>
                                <span class="font-bold text-primary">{{ $item['value'] }}</span>
                            </div>
                            <div class="w-full h-2 bg-slate-100 rounded-full">
                                <div class="{{ $item['bar_class'] }} h-full rounded-full"
                                    style="width: {{ $item['width'] }}">
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div
                class="relative overflow-hidden rounded-xl bg-primary aspect-square flex flex-col items-center justify-center p-6 text-center shadow-lg">
                <img class="absolute inset-0 w-full h-full object-cover opacity-30 mix-blend-overlay"
                    data-alt="professional architectural site photo showing clean steel and concrete construction in progress with warm sunset sky"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtcSkcWXHSRt-fM4YoUZfYPAa5vpxooL8U7Eynwbs3vq-vHY0vlCdV3BbGCG18ls_JV_9aLP9uqSQfMvbOu_-Rc-6RCFrbfi0lD6BVMlsko9dSHz1JAv45COqtyP2h2wOwhcFaGLxjuiw0IMfcDYWlHTRjaBpcmplYMNet-fNJcpJz7_9cuJ0bO6bNsUUhBVUowq8NP6WXprfHWHw8f2ThaQvsm9hwrb1_quX2SkQGTRWgK8eg8A1pKhTvIRvGFNpK9krDFKqjvM8T" />
                <div class="relative z-10">
                    <div class="text-white text-4xl font-extrabold">{{ $homes['deliveries']['count'] }}</div>
                    <div class="text-blue-200 text-xs font-bold uppercase tracking-widest mt-2">Nuevas entregas</div>
                    <div class="text-white/60 text-[10px] mt-4 leading-relaxed">{{ $homes['deliveries']['description'] }}
                    </div>
                    <button
                        class="mt-6 px-4 py-2 bg-white text-primary rounded-full text-[10px] font-extrabold uppercase shadow-xl hover:scale-105 transition-transform">Consultar
                        Agenda</button>
                </div>
            </div>
        </div>
    </div>
@endsection