@php
    $piecework = $detailData['piecework'];
    $alignment = $piecework['alignment'];
@endphp

<section>
    <nav class="flex items-center gap-2 text-label text-xs text-secondary mb-2">
        <span>Dashboard</span>
        <span class="material-symbols-outlined text-[14px]">chevron_right</span>
        <span>Destajos</span>
        <span class="material-symbols-outlined text-[14px]">chevron_right</span>
        <span>Viviendas</span>
        <span class="material-symbols-outlined text-[14px]">chevron_right</span>
        <span class="font-semibold text-primary">[{{ $homeContext['lot'] }}]</span>
    </nav>
    <div class="flex items-end justify-between">
        <div>
            <h2 class="text-3xl font-bold tracking-tight text-on-surface">Destajos por Vivienda</h2>
            <p class="text-on-surface-variant font-medium mt-1">Consulta la mano de obra contratada, pagada y pendiente asociada a esta vivienda</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="px-4 py-1.5 bg-tertiary-fixed text-on-tertiary-fixed rounded-full text-xs font-bold shadow-sm flex items-center gap-2">
                <span class="w-2 h-2 rounded-full bg-on-tertiary-fixed-variant animate-pulse"></span>
                {{ $piecework['status_chip'] }}
            </span>
            <button class="bg-primary text-on-primary px-6 py-2.5 rounded-xl text-sm font-semibold flex items-center gap-2 shadow-lg shadow-primary/20 transition-all hover:scale-[1.02] active:scale-[0.98]">
                <span class="material-symbols-outlined text-sm">add</span>
                Nuevo Destajo
            </button>
        </div>
    </div>
</section>

<section class="grid grid-cols-12 gap-6">
    <div class="col-span-12 lg:col-span-4 bg-surface-container-lowest p-6 rounded-xl shadow-sm relative overflow-hidden flex flex-col justify-between h-full border border-outline-variant/10">
        <div class="relative z-10">
            <h3 class="text-primary font-bold text-lg mb-4">Detalle de Vivienda</h3>
            <div class="space-y-4">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-surface-container-low rounded-xl flex items-center justify-center text-primary-container">
                        <span class="material-symbols-outlined">home</span>
                    </div>
                    <div>
                        <p class="text-[10px] uppercase font-bold text-secondary tracking-widest">Unidad</p>
                        <p class="text-base font-bold">{{ $homeContext['lot'] }}</p>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-[10px] uppercase font-bold text-secondary tracking-widest">Obra</p>
                        <p class="text-sm font-semibold">{{ $piecework['context']['work'] }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] uppercase font-bold text-secondary tracking-widest">Prototipo</p>
                        <p class="text-sm font-semibold">{{ $piecework['context']['prototype'] }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-6 pt-6 border-t border-slate-50">
            <div class="flex justify-between items-end mb-2">
                <span class="text-xs font-bold text-secondary">Avance de Obra</span>
                <span class="text-xl font-extrabold text-primary">{{ $piecework['context']['progress'] }}</span>
            </div>
            <div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-primary to-primary-container" style="width: {{ $piecework['context']['progress'] }}"></div>
            </div>
        </div>
    </div>

    <div class="col-span-12 lg:col-span-8 grid grid-cols-2 md:grid-cols-3 gap-4">
        @foreach ($piecework['kpis'] as $item)
            <div class="{{ !empty($item['primary']) ? 'bg-primary-container shadow-lg relative group overflow-hidden' : 'bg-surface-container-lowest border border-outline-variant/10' }} p-6 rounded-xl {{ !empty($item['danger']) ? 'border-l-4 border-l-error' : '' }}">
                @if (!empty($item['primary']))
                    <div class="absolute right-[-10px] top-[-10px] opacity-10 group-hover:scale-110 transition-transform">
                        <span class="material-symbols-outlined text-white text-8xl">payments</span>
                    </div>
                @endif
                <p class="{{ !empty($item['primary']) ? 'text-on-primary-container' : 'text-secondary' }} text-xs font-bold uppercase tracking-widest mb-1">
                    {{ $item['label'] }}
                </p>
                <p class="{{ !empty($item['primary']) ? 'text-white text-3xl font-extrabold' : (!empty($item['danger']) ? 'text-error text-2xl font-bold' : 'text-on-surface text-3xl font-extrabold') }}">
                    {{ $item['value'] }}
                </p>
                @if (!empty($item['progress_width']))
                    <div class="mt-4 flex items-center gap-2">
                        <div class="flex-1 h-1.5 bg-slate-100 rounded-full">
                            <div class="h-full {{ $item['progress_class'] }}" style="width: {{ $item['progress_width'] }}"></div>
                        </div>
                        <span class="text-[10px] font-bold text-green-600">{{ $item['description'] }}</span>
                    </div>
                @else
                    <p class="text-[10px] {{ !empty($item['danger']) ? 'text-on-surface-variant underline cursor-pointer' : (!empty($item['primary']) ? 'text-primary-fixed flex items-center gap-1 mt-4' : 'text-secondary mt-2') }}">
                        @if (!empty($item['primary']))
                            <span class="material-symbols-outlined text-[12px]">trending_up</span>
                        @endif
                        <span>{{ $item['description'] }}</span>
                    </p>
                @endif
            </div>
        @endforeach
    </div>
</section>

<div class="grid grid-cols-12 gap-8">
    <div class="col-span-12 lg:col-span-9 space-y-8">
        <section class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden">
            <div class="p-6 border-b border-slate-50 flex justify-between items-center">
                <h3 class="text-lg font-bold text-primary">Contratistas y Paquetes</h3>
                <div class="flex gap-2">
                    <button class="px-3 py-1.5 text-xs font-semibold bg-surface-container-low text-secondary rounded-lg hover:bg-slate-200">Filtros</button>
                    <button class="px-3 py-1.5 text-xs font-semibold bg-surface-container-low text-secondary rounded-lg hover:bg-slate-200">Historico</button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-surface-container-low">
                        <tr>
                            <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-secondary">Contratista</th>
                            <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-secondary">Actividad</th>
                            <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-secondary text-right">Generado</th>
                            <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-secondary text-right">Pagado</th>
                            <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-secondary text-right">Pendiente</th>
                            <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-secondary text-center">Estatus</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @foreach ($piecework['rows'] as $row)
                            <tr class="hover:bg-surface-container-low/50 transition-colors cursor-pointer">
                                <td class="px-6 py-5">
                                    <div class="flex flex-col">
                                        <span class="font-bold text-sm">{{ $row['contractor'] }}</span>
                                        <span class="text-[10px] text-secondary">ID: {{ $row['contractor_id'] }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="text-sm font-medium">{{ $row['activity'] }}</span>
                                </td>
                                <td class="px-6 py-5 text-right font-semibold text-sm">{{ $row['generated'] }}</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm">{{ $row['paid'] }}</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm {{ $row['pending'] === '$0' ? 'text-secondary' : 'text-error' }}">{{ $row['pending'] }}</td>
                                <td class="px-6 py-5 text-center">
                                    <span class="px-3 py-1 text-[10px] font-bold rounded-full {{ $row['status_class'] }}">{{ $row['status'] }}</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>

        <section class="bg-white p-8 rounded-xl border border-outline-variant/10 shadow-sm">
            <div class="flex items-center justify-between mb-8">
                <div>
                    <h3 class="text-lg font-bold text-primary">Relacion Avance vs Costo</h3>
                    <p class="text-xs text-on-surface-variant">Comparativa de ejecucion fisica vs dispersion financiera</p>
                </div>
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 bg-primary rounded-full"></div>
                        <span class="text-[10px] font-bold uppercase">Avance Fisico</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 bg-secondary-fixed-dim rounded-full"></div>
                        <span class="text-[10px] font-bold uppercase">Monto Pagado</span>
                    </div>
                </div>
            </div>
            <div class="relative h-24 flex items-center gap-8">
                <div class="flex-1 space-y-3">
                    <div class="flex justify-between items-center text-[10px] font-extrabold text-primary">
                        <span>AVANCE DE OBRA</span>
                        <span>{{ $alignment['physical'] }}</span>
                    </div>
                    <div class="w-full h-4 bg-slate-100 rounded-full">
                        <div class="h-full bg-primary rounded-full shadow-md" style="width: {{ $alignment['physical'] }}"></div>
                    </div>
                </div>
                <div class="flex-none flex flex-col items-center justify-center p-4 bg-green-50 rounded-xl border border-green-100">
                    <span class="material-symbols-outlined text-green-600 text-lg">check_circle</span>
                    <span class="text-[10px] font-bold text-green-700 mt-1 uppercase">Sincronizado</span>
                </div>
                <div class="flex-1 space-y-3 text-right">
                    <div class="flex justify-between items-center text-[10px] font-extrabold text-secondary">
                        <span>{{ $alignment['cost'] }}</span>
                        <span>COSTO EJECUTADO</span>
                    </div>
                    <div class="w-full h-4 bg-slate-100 rounded-full">
                        <div class="h-full bg-secondary-fixed-dim rounded-full ml-auto" style="width: {{ $alignment['cost'] }}"></div>
                    </div>
                </div>
            </div>
            <p class="mt-6 text-[11px] text-on-surface-variant bg-surface-container-low p-4 rounded-lg italic">
                Nota: {{ $alignment['description'] }}
            </p>
        </section>
    </div>

    <div class="col-span-12 lg:col-span-3 space-y-6">
        <section class="bg-surface-container-lowest p-6 rounded-xl border border-outline-variant/10">
            <h3 class="text-sm font-bold text-primary uppercase tracking-widest mb-6">Distribucion por Familias</h3>
            <div class="space-y-5">
                @foreach ($piecework['families'] as $family)
                    <div>
                        <div class="flex justify-between text-xs mb-2">
                            <span class="font-medium text-on-surface">{{ $family['label'] }}</span>
                            <span class="font-bold">{{ $family['value'] }}</span>
                        </div>
                        <div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
                            <div class="h-full bg-primary" style="width: {{ $family['width'] }}"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="space-y-3">
            <h3 class="text-xs font-bold text-secondary uppercase tracking-widest px-2">Acciones Rapidas</h3>
            @foreach (['Ver Vivienda', 'Ver Avance', 'Ver Presupuesto', 'Exportar Reporte'] as $action)
                <button class="w-full flex items-center justify-between p-4 bg-white border border-outline-variant/20 rounded-xl hover:bg-surface-container-low transition-all group">
                    <div class="flex items-center gap-3">
                        <span class="material-symbols-outlined text-primary">
                            {{ $loop->index === 0 ? 'visibility' : ($loop->index === 1 ? 'analytics' : ($loop->index === 2 ? 'account_balance_wallet' : 'download')) }}
                        </span>
                        <span class="text-sm font-semibold">{{ $action }}</span>
                    </div>
                    <span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors">arrow_forward</span>
                </button>
            @endforeach
        </section>

        <section class="bg-primary rounded-xl overflow-hidden relative h-48 group shadow-xl">
            <img class="w-full h-full object-cover opacity-60 group-hover:scale-105 transition-transform duration-700"
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtXJgfM7YiGB3pJ6FIM0vTJKT4M5JkxR2Iwkpxn_HZaaK1U7Z3d5qMtRtIUyDeEuQ8QMvrfVNKoJnmDMoD2inVM7cmxa-hDuSpkIiCR1jF6y83ol2ea45VN7h3AX56M5NDwvMhHYx3n7WQuZkbJs-K5nHSuAnpp-oeKwkQEXl_5-QG-QJcLCS1ScWTrSsu1rrU1xvDVScbWiTw0n6H0GrvLiK5Ia5jpKqzs75HgnCKqDGlhlRZzqXQ4INFZ4zuY_x1UmIu6EImjNME" />
            <div class="absolute inset-0 bg-gradient-to-t from-primary via-transparent to-transparent"></div>
            <div class="absolute bottom-4 left-4 right-4 text-white">
                <p class="text-[10px] font-bold uppercase tracking-widest text-primary-fixed">Vivienda Actual</p>
                <p class="text-sm font-bold">{{ $piecework['preview']['title'] }}</p>
            </div>
        </section>
    </div>
</div>