@php
    $homes = $phaseDetail['homes'];
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 mb-10">
    <div
        class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/5 flex flex-col justify-between">
        <span class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Total de viviendas</span>
        <div class="mt-4 flex items-end justify-between">
            <span class="text-4xl font-extrabold text-primary">{{ $homes['summary']['total'] }}</span>
            <div class="w-10 h-10 bg-primary-fixed rounded-lg flex items-center justify-center text-primary">
                <span class="material-symbols-outlined">home</span>
            </div>
        </div>
    </div>
    <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/5">
        <span class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Viviendas activas</span>
        <div class="mt-4 flex items-end justify-between">
            <span class="text-4xl font-extrabold text-primary">{{ $homes['summary']['active'] }}</span>
            <span class="text-xs font-bold text-success text-[#1e7e34] mb-1">{{ $homes['summary']['active_meta'] }}</span>
        </div>
    </div>
    <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/5">
        <span class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Viviendas
            concluidas</span>
        <div class="mt-4 flex items-end justify-between">
            <span class="text-4xl font-extrabold text-primary">{{ $homes['summary']['completed'] }}</span>
            <div class="w-8 h-1 bg-primary-fixed-dim rounded-full overflow-hidden">
                <div class="bg-primary h-full" style="width: {{ $homes['summary']['completed_width'] }}"></div>
            </div>
        </div>
    </div>
    <div
        class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/5 ring-2 ring-error/5">
        <span class="text-[10px] font-bold uppercase tracking-widest text-error">Viviendas con retraso</span>
        <div class="mt-4 flex items-end justify-between">
            <span class="text-4xl font-extrabold text-error">{{ $homes['summary']['delayed'] }}</span>
            <span class="material-symbols-outlined text-error opacity-50">schedule</span>
        </div>
    </div>
    <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/5">
        <span class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Viviendas
            bloqueadas</span>
        <div class="mt-4 flex items-end justify-between">
            <span class="text-4xl font-extrabold text-on-surface-variant">{{ $homes['summary']['blocked'] }}</span>
            <span class="material-symbols-outlined text-outline">lock</span>
        </div>
    </div>
    <div class="bg-tertiary-fixed p-6 rounded-xl shadow-sm flex flex-col justify-between">
        <span class="text-[10px] font-bold uppercase tracking-widest text-on-tertiary-fixed-variant">Alertas
            Criticas</span>
        <div class="mt-4 flex items-end justify-between">
            <span class="text-4xl font-extrabold text-on-tertiary-fixed">{{ $homes['summary']['critical'] }}</span>
            <div class="animate-pulse w-3 h-3 bg-error rounded-full mb-2"></div>
        </div>
    </div>
</div>

<div class="mb-10 p-6 bg-error-container/30 border border-error-container rounded-xl flex items-center gap-6">
    <div class="w-12 h-12 bg-error rounded-xl flex items-center justify-center text-white shrink-0">
        <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">warning</span>
    </div>
        <div class="flex-1">
            <h3 class="text-sm font-bold text-on-error-container">Atencion requerida: unidades criticas detectadas</h3>
            <div class="mt-2 flex gap-4">
            @foreach ($homes['attention'] as $item)
                <div
                    class="flex items-center gap-2 bg-white/60 px-3 py-1.5 rounded-lg border border-error-container text-xs">
                    <span class="font-bold text-on-error-container">{{ $item['lot'] }}</span>
                    <span class="w-1 h-1 bg-outline-variant rounded-full"></span>
                    <span class="{{ $loop->first ? 'text-error' : 'text-on-surface-variant' }} font-medium">{{ $item['status'] }}</span>
                </div>
            @endforeach
        </div>
    </div>
    <button class="text-error font-bold text-sm underline decoration-2 underline-offset-4">Ver informe de
        riesgos</button>
</div>

<div class="grid grid-cols-12 gap-8">
    <div class="col-span-12 lg:col-span-8">
        <div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden">
            <div class="p-6 border-b border-outline-variant/10 flex flex-wrap items-center gap-4">
                <div class="flex-1 min-w-[200px] relative">
                    <span class="absolute inset-y-0 left-3 flex items-center text-slate-400">
                        <span class="material-symbols-outlined text-xl">search</span>
                    </span>
                    <input
                        class="w-full bg-surface-container-low border-none rounded-xl py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary/20"
                        placeholder="Filtrar por lote o clave..." type="text" />
                </div>
                <select
                    class="bg-surface-container-low border-none rounded-xl py-2 pl-4 pr-10 text-sm focus:ring-2 focus:ring-primary/20 font-medium text-on-surface-variant">
                    <option>Modelo: Cobano 46.24</option>
                </select>
                <select
                    class="bg-surface-container-low border-none rounded-xl py-2 pl-4 pr-10 text-sm focus:ring-2 focus:ring-primary/20 font-medium text-on-surface-variant">
                    <option>Estatus: Todos</option>
                    <option>Cimentacion</option>
                    <option>Estructura</option>
                    <option>Acabados</option>
                </select>
                <button class="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-xl transition-colors">
                    <span class="material-symbols-outlined">tune</span>
                </button>
            </div>
            @if (count($homes['rows']) > 0)
                <div class="divide-y divide-outline-variant/10">
                    @foreach ($homes['rows'] as $row)
                        <div class="p-6 hover:bg-surface-container-low/30 transition-colors group">
                            <div class="flex items-center gap-6">
                                <div class="w-14 h-14 {{ $row['lot_class'] }} rounded-xl flex flex-col items-center justify-center">
                                    <span class="text-[10px] font-bold opacity-70">LOTE</span>
                                    <span class="text-lg font-extrabold leading-tight">{{ $row['lot'] }}</span>
                                </div>
                                <div class="flex-1 grid grid-cols-1 md:grid-cols-4 gap-4 items-center">
                                    <div>
                                        <p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider mb-0.5">
                                            Modelo</p>
                                        <p class="text-sm font-bold text-primary">{{ $row['model'] }}</p>
                                    </div>
                                    <div>
                                        <p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider mb-0.5">
                                            Estatus Obra</p>
                                        <p class="text-sm font-bold text-primary">{{ $row['stage'] }}</p>
                                    </div>
                                    <div class="md:col-span-2 pr-8">
                                        <div class="flex justify-between items-center mb-1.5">
                                            <p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">
                                                Avance</p>
                                            <span class="text-xs font-bold {{ $row['value_class'] }}">{{ $row['progress'] }}</span>
                                        </div>
                                        <div class="h-2 w-full bg-outline-variant/20 rounded-full overflow-hidden">
                                            <div class="h-full {{ $row['progress_class'] }} rounded-full transition-all duration-1000"
                                                style="width: {{ $row['progress'] }}"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="px-3 py-1 {{ $row['badge_class'] }} text-[10px] font-bold rounded-full uppercase">
                                        {{ $row['badge'] }}
                                    </span>
                                    <p class="text-[10px] font-medium {{ $row['value_class'] }} mt-2">{{ $row['meta'] }}</p>
                                </div>
                                <button
                                    class="w-10 h-10 rounded-xl bg-surface-container-high text-primary flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all">
                                    <span class="material-symbols-outlined">chevron_right</span>
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="p-10 text-center bg-surface-container-low/40">
                    <p class="text-lg font-headline font-bold text-primary">{{ $homes['empty_title'] ?? 'Sin viviendas ligadas' }}</p>
                    <p class="text-sm text-on-surface-variant mt-2">
                        {{ $homes['empty_description'] ?? 'Esta obra no tiene un inventario de viviendas asociado en la demo.' }}
                    </p>
                </div>
            @endif
            <div
                class="p-4 bg-surface-container-low/50 border-t border-outline-variant/10 flex justify-between items-center px-6">
                <p class="text-xs text-on-surface-variant">{{ $homes['summary']['footer'] }}</p>
                <div class="flex gap-2">
                    <button class="p-2 border border-outline-variant rounded-lg text-primary disabled:opacity-50"
                        disabled=""><span class="material-symbols-outlined">chevron_left</span></button>
                    <button class="px-3 py-1 bg-primary text-white text-xs font-bold rounded-lg">1</button>
                    <button
                        class="px-3 py-1 text-xs font-bold rounded-lg hover:bg-surface-container-high transition-colors">2</button>
                    <button
                        class="px-3 py-1 text-xs font-bold rounded-lg hover:bg-surface-container-high transition-colors">3</button>
                    <button
                        class="p-2 border border-outline-variant rounded-lg text-primary hover:bg-surface-container-high transition-colors"><span
                            class="material-symbols-outlined">chevron_right</span></button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-span-12 lg:col-span-4 space-y-8">
        <div class="bg-primary text-white rounded-xl p-6 shadow-xl relative overflow-hidden">
            <div class="absolute top-0 right-0 p-8 opacity-10">
                <span class="material-symbols-outlined text-8xl">analytics</span>
            </div>
            <h3 class="text-lg font-bold mb-6 flex items-center gap-2">
                <span class="material-symbols-outlined">bar_chart</span>
                {{ $homes['model_title'] ?? 'Avance por Bloque' }}
            </h3>
            <div class="space-y-6 relative z-10">
                @foreach ($homes['model_progress'] as $item)
                    <div>
                        <div class="flex justify-between text-xs font-bold mb-2">
                            <span>{{ $item['label'] }}</span>
                            <span>{{ $item['progress'] }}</span>
                        </div>
                        <div class="h-2.5 w-full bg-white/20 rounded-full">
                            <div class="h-full {{ $item['bar_class'] }} rounded-full" style="width: {{ $item['width'] }}"></div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mt-8 pt-6 border-t border-white/10">
                <p class="text-xs text-on-primary-container font-medium mb-3 italic">Promedio de avance por bloque dentro
                    de la obra habitacional.</p>
                <button
                    class="w-full py-3 bg-white/10 hover:bg-white/20 rounded-xl text-sm font-bold transition-all">Ver
                    analisis completo</button>
            </div>
        </div>
        <div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden">
            <div class="h-40 bg-slate-200 relative">
                <img alt="Vista Satelital" class="w-full h-full object-cover opacity-80"
                    data-alt="aerial satellite view of a modern residential construction site with multiple housing units and organized street layout"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuDHnn9y2lkxKorl-DCae2uTg3_-gNvrFSq_nAsvIEEK_xxWqHbXGmANVbzGa9KioqG0MbnpRlxU2dk3ctH9PeHDI9X6-KMOWwmWkO_SLXIXFA5cH6sx5FDG05ww7cmbtJWVLECkBdnlbLteL4CgvjN9yB6GbW5qNiaG8x0WihY1gbZ_UipRKZ68Nahq_hseWfzmS8Np-t7e8rLF3BPEBH3a4-UlDbwrPzIZzvbBQiyPDTsNf-YGU5PFGQd-stpiXjk2sGB4IKbIMOC_" />
                <div class="absolute inset-0 flex items-center justify-center">
                    <div
                        class="px-4 py-2 bg-white/90 backdrop-blur rounded-full text-xs font-bold text-primary flex items-center gap-2 shadow-lg">
                        <span class="material-symbols-outlined text-sm">location_on</span>
                        Cobano - Mapa de Obra
                    </div>
                </div>
            </div>
            <div class="p-4">
                <div class="flex items-center justify-between text-xs mb-3">
                    <span class="font-bold text-on-surface-variant uppercase tracking-tighter">{{ $homes['next_milestone']['title'] }}</span>
                    <span class="font-bold text-primary">{{ $homes['next_milestone']['value'] }}</span>
                </div>
                <p class="text-xs text-on-surface-variant mb-4 leading-relaxed">{{ $homes['next_milestone']['description'] }}</p>
                <div class="flex -space-x-2">
                    <img alt="Team member" class="w-7 h-7 rounded-full border-2 border-white"
                        data-alt="close-up of a construction manager wearing a hard hat"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuADmHiAoWjfnGcLq-MLlOo0_ntNWHNRCbUGXVv4ww7zLNCeNvsBVRYKrRM9UoFJVObekAERZQtiiqpV29Cu_159fE0YoChOe5tlyxbw-wdJnSLan_IecZbJhUkHJ-v7KEePgi8Y3R3LmzY2jW_YUspQhwnaN0tKyLucLOUBgLqplqk0Wn0wzDsyQW9qrvfI6z4l_I-bn4O0t-q-F3h8LX4cnpYfLUdpsOoC-Xnw2WJga3q_eRcNT7ZesL4jrC4zc3ygaDNDJ2HdgXV0" />
                    <img alt="Team member" class="w-7 h-7 rounded-full border-2 border-white"
                        data-alt="professional female architect profile photo"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_NxRDq7_HFDPrYlCLCgiGk0awhw3zzHH3uEvJsfBqJa-vQi8IEeXnoR6b-AouvXaNG8wTRKT3agq5aLqj2-TpKqYvFu4jzvCpnww3C7wCXXws5xMsTtPiOSUE9FrIaQ8Lrf9BIi8MXnP4iYDe9sk-oTeilJaHsy7bsH41lssXohgDH6xa91Z8P1ec6CtnTmknaL7n2QYVo2N4XXRWSjFDIN8UZPFnAVAMHgO2B-QZ4eQGQVXVx3v1CggvLCxtmYrufAw51mSVOWQX" />
                    <div
                        class="w-7 h-7 rounded-full bg-surface-container-high border-2 border-white flex items-center justify-center text-[10px] font-bold text-primary">
                        +4</div>
                </div>
            </div>
        </div>
    </div>
</div>