@php
    $subtasks = $detailData['subtasks'];
    $comparison = $subtasks['comparison'];
@endphp

<div class="mb-8">
    <div class="flex items-end justify-between mb-6">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <span class="px-2 py-0.5 {{ $subtasks['status_class'] }} text-[10px] font-bold rounded uppercase tracking-wider">
                    {{ $subtasks['status_label'] }}
                </span>
                <h1 class="text-3xl font-extrabold text-primary">{{ $homeContext['lot'] }} <span class="text-slate-400 font-light">|</span>
                    {{ $homeContext['model'] }}</h1>
            </div>
            <p class="text-slate-500 font-medium">{{ $subtasks['stage_label'] }}</p>
        </div>
        <div class="flex flex-col items-end">
            <span class="text-xs font-bold text-slate-400 mb-1 uppercase tracking-widest">Avance General</span>
            <div class="flex items-center gap-3">
                <span class="text-2xl font-bold text-primary">{{ $homeContext['progress'] }}</span>
                <div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden">
                    <div class="bg-primary h-full rounded-full" style="width: {{ $homeContext['progress'] }}"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-12 gap-6">
    <div class="col-span-12 lg:col-span-8 space-y-6">
        <div class="grid grid-cols-4 gap-4">
            @foreach ($subtasks['stats'] as $item)
                <div class="{{ $item['wrapper_class'] ?? '' }} bg-white p-6 rounded-full shadow-sm ghost-border {{ ($item['accent_class'] ?? '') === 'text-error' ? 'border-l-4 border-error' : '' }}">
                    <p class="text-xs font-semibold text-slate-500 mb-2">{{ $item['label'] }}</p>
                    <h2 class="text-3xl font-extrabold {{ $item['accent_class'] }}">
                        {{ $item['value'] }}
                        @if (!empty($item['meta']))
                            <span class="text-lg font-medium text-slate-400">{{ $item['meta'] }}</span>
                        @endif
                    </h2>
                    @if (!empty($item['support_label']))
                        <div class="mt-4 flex items-center justify-between">
                            <span class="text-[10px] text-slate-400 uppercase tracking-tighter">{{ $item['support_label'] }}</span>
                            <span class="text-xs font-bold text-primary">{{ $item['support_value'] }}</span>
                        </div>
                        <div class="mt-2 w-full h-1.5 bg-slate-100 rounded-full">
                            <div class="bg-primary h-full rounded-full" style="width: {{ $item['progress_width'] }}"></div>
                        </div>
                    @else
                        <p class="text-[10px] text-slate-400 mt-2">{{ $item['description'] }}</p>
                        @if (!empty($item['badge']))
                            <span class="inline-block mt-2 px-2 py-0.5 bg-error-container text-on-error-container text-[10px] font-bold rounded">
                                {{ $item['badge'] }}
                            </span>
                        @endif
                    @endif
                </div>
            @endforeach
        </div>

        <div class="bg-white rounded-full shadow-sm ghost-border overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                <h3 class="font-bold text-primary">Listado de Subtareas por Proceso</h3>
                <button class="text-xs font-bold text-primary flex items-center gap-1 hover:underline">
                    <span class="material-symbols-outlined text-sm">filter_list</span> Filtrar
                </button>
            </div>
            <div class="p-6">
                <table class="w-full text-left">
                    <thead>
                        <tr class="text-[10px] font-bold text-slate-400 uppercase tracking-widest border-b border-slate-50">
                            <th class="pb-4 font-semibold">Subtarea</th>
                            <th class="pb-4 font-semibold">Responsable</th>
                            <th class="pb-4 font-semibold">Vencimiento</th>
                            <th class="pb-4 font-semibold text-center">Progreso</th>
                            <th class="pb-4 font-semibold text-right">Estatus</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm">
                        @foreach ($subtasks['rows'] as $row)
                            <tr class="hover:bg-slate-50 transition-colors group">
                                <td class="py-4">
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-primary">{{ $row['task'] }}</span>
                                        <span class="text-[10px] text-slate-400 uppercase">{{ $row['area'] }}</span>
                                    </div>
                                </td>
                                <td class="py-4 text-slate-600">{{ $row['owner'] }}</td>
                                <td class="py-4 text-slate-600">{{ $row['due'] }}</td>
                                <td class="py-4">
                                    <div class="flex items-center justify-center gap-2">
                                        <span class="text-[10px] font-bold text-slate-500">{{ $row['progress'] }}</span>
                                        <div class="w-16 h-1 bg-slate-100 rounded-full overflow-hidden">
                                            <div class="{{ $row['bar_class'] }} h-full" style="width: {{ $row['progress_width'] }}"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 text-right">
                                    @if (($row['status_type'] ?? 'text') === 'icon')
                                        <span class="material-symbols-outlined {{ $row['status_class'] }}" style="font-variation-settings: 'FILL' 1;">
                                            {{ $row['status'] }}
                                        </span>
                                    @else
                                        <span class="text-[10px] font-bold uppercase {{ $row['status_class'] }}">{{ $row['status'] }}</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="bg-primary-container text-white p-8 rounded-full flex items-center justify-between relative overflow-hidden">
            <div class="relative z-10">
                <h3 class="text-xl font-bold mb-2">{{ $comparison['title'] }}</h3>
                <p class="text-slate-400 text-sm max-w-xs">{{ $comparison['description'] }}</p>
            </div>
            <div class="flex gap-8 relative z-10">
                <div class="text-center">
                    <p class="text-[10px] font-bold text-slate-400 uppercase mb-2">Fisico</p>
                    <div class="w-20 h-20 rounded-full border-4 border-white flex items-center justify-center">
                        <span class="text-xl font-extrabold">{{ $comparison['physical'] }}</span>
                    </div>
                </div>
                <div class="text-center">
                    <p class="text-[10px] font-bold text-slate-400 uppercase mb-2">Subtareas</p>
                    <div class="w-20 h-20 rounded-full border-4 border-primary-fixed flex items-center justify-center text-primary-fixed">
                        <span class="text-xl font-extrabold">{{ $comparison['subtasks'] }}</span>
                    </div>
                </div>
            </div>
            <div class="absolute right-0 top-0 w-64 h-64 bg-white/5 rounded-full -mr-20 -mt-20"></div>
        </div>
    </div>

    <div class="col-span-12 lg:col-span-4 space-y-6">
        <div class="bg-white rounded-full shadow-sm ghost-border overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 bg-error/5">
                <h3 class="font-bold text-error flex items-center gap-2">
                    <span class="material-symbols-outlined text-xl">report_problem</span>
                    Alertas de Subtareas
                </h3>
            </div>
            <div class="p-4 space-y-3">
                @foreach ($subtasks['alerts'] as $index => $alert)
                    <div class="p-3 {{ $index === 0 ? 'bg-error-container' : 'bg-tertiary-fixed' }} rounded-xl">
                        <div class="flex justify-between items-start mb-1">
                            <span class="text-xs font-bold {{ $index === 0 ? 'text-on-error-container' : 'text-on-tertiary-fixed-variant' }}">
                                {{ $alert['title'] }}
                            </span>
                            <span class="text-[10px] font-medium {{ $index === 0 ? 'text-error' : 'text-on-tertiary-container' }}">
                                {{ $alert['level'] }}
                            </span>
                        </div>
                        <p class="text-[11px] {{ $index === 0 ? 'text-on-error-container opacity-80' : 'text-on-tertiary-fixed-variant opacity-80' }}">
                            {{ $alert['description'] }}
                        </p>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="bg-white rounded-full shadow-sm ghost-border overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100">
                <h3 class="font-bold text-primary">Actividad de Subtareas</h3>
            </div>
            <div class="p-6 relative">
                <div class="absolute left-8 top-10 bottom-10 w-px bg-slate-100"></div>
                <div class="space-y-8 relative">
                    @foreach ($subtasks['activity'] as $item)
                        <div class="flex gap-4 items-start">
                            <div class="w-4 h-4 rounded-full {{ $item['dot_class'] }} mt-1 ring-4 ring-white relative z-10"></div>
                            <div>
                                <p class="text-xs font-bold text-primary">{{ $item['title'] }}</p>
                                <p class="text-[11px] text-slate-500 mt-0.5">{{ $item['description'] }}</p>
                                <p class="text-[10px] font-medium text-slate-400 mt-1">{{ $item['time'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
                <button class="w-full mt-6 py-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest hover:text-primary transition-colors border border-dashed border-slate-200 rounded-lg">
                    Ver todo el log
                </button>
            </div>
        </div>

        <div class="rounded-full overflow-hidden shadow-sm ghost-border aspect-square relative group">
            <img alt="Building Model" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNKkzO_twSluPIhxbuLcASAltuCyjl84VfkxTzUTITEHce4pQLOk4EmH4hYh-M4d40g9IQMEm8eJ_5NmsyYN6dUi02rxIpOA2cS-LtFoVjyEnoRqaPWPLGvWD_HCfbvpkTgJ_hpcn3hJ1nHX9Crf-4SdIlz7VOnQ2-rWnNcwrEpNcH1Yn2prFcJsAPZA4fQKGOnllFpLDm_3qDToUQPDxVqZ_moeDDI7CQ4M090MIZXqaL-d1wmwgYGmhi9Xh8xpXxuBTrI-VYOvU4" />
            <div class="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent flex flex-col justify-end p-6">
                <p class="text-[10px] font-bold text-slate-300 uppercase">Referencia de Modelo</p>
                <h4 class="text-white font-bold">{{ $subtasks['reference']['title'] }}</h4>
                <p class="text-white/70 text-xs mt-1">{{ $subtasks['reference']['subtitle'] }}</p>
            </div>
        </div>
    </div>
</div>