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

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    @foreach ($piecework['kpis'] as $kpi)
        <div
            class="bg-surface-container-lowest p-5 rounded-full border border-outline-variant/10 shadow-sm flex flex-col justify-between group hover:border-primary/20 transition-all">
            <div class="flex justify-between items-start">
                <span class="text-on-surface-variant font-label text-xs uppercase tracking-wider">{{ $kpi['label'] }}</span>
                <div class="w-8 h-8 rounded-lg bg-primary-fixed flex items-center justify-center text-primary">
                    <span class="material-symbols-outlined text-sm">description</span>
                </div>
            </div>
            <div class="mt-4">
                <p class="text-2xl font-bold font-headline text-on-surface">{{ $kpi['value'] }}</p>
                @if (isset($kpi['progress_width']))
                    <div class="w-full bg-outline-variant/20 h-1 rounded-full mt-2 overflow-hidden">
                        <div class="bg-green-600 h-full" style="width: {{ $kpi['progress_width'] }}"></div>
                    </div>
                @endif
                <p class="text-[10px] text-on-surface-variant mt-1">{{ $kpi['meta'] }}</p>
            </div>
        </div>
    @endforeach
</div>

<div class="grid grid-cols-12 gap-8 mb-5">
    <div class="col-span-12 lg:col-span-8 space-y-8">
        <div
            class="bg-primary-container text-white p-8 rounded-full relative overflow-hidden flex flex-col justify-between min-h-[340px] shadow-2xl">
            <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-white/5 to-transparent"></div>
            <div class="z-10 flex justify-between">
                <div>
                    <h3 class="text-lg font-headline font-semibold opacity-80">{{ $piecework['hero']['title'] }}</h3>
                    <p class="text-4xl font-bold font-headline mt-2">{{ $piecework['hero']['amount'] }}</p>
                    <span class="text-xs bg-white/10 px-3 py-1 rounded-full mt-3 inline-block">Monto Total Contratado</span>
                </div>
                <div class="text-right">
                    <div
                        class="bg-tertiary/20 text-tertiary-fixed px-4 py-2 rounded-xl flex items-center gap-2 border border-tertiary-fixed/20">
                        <span class="material-symbols-outlined text-sm">warning</span>
                        <span class="text-xs font-bold">{{ $piecework['hero']['badge'] }}</span>
                    </div>
                </div>
            </div>
            <div class="z-10 grid grid-cols-3 gap-8 mt-12">
                <div class="space-y-1">
                    <p class="text-xs opacity-60 font-medium">Ejecutado (Estimado)</p>
                    <p class="text-xl font-bold">{{ $piecework['hero']['executed'] }}</p>
                    <div class="h-1.5 w-full bg-white/10 rounded-full">
                        <div class="h-full bg-white/60 rounded-full" style="width: {{ $piecework['hero']['executed_width'] }}"></div>
                    </div>
                </div>
                <div class="space-y-1">
                    <p class="text-xs opacity-60 font-medium">Fondo de Garantia</p>
                    <p class="text-xl font-bold">{{ $piecework['hero']['warranty'] }}</p>
                    <p class="text-[10px] font-bold text-tertiary-fixed italic">{{ $piecework['hero']['warranty_note'] }}</p>
                </div>
                <div class="space-y-1">
                    <p class="text-xs opacity-60 font-medium">Saldo Pendiente</p>
                    <p class="text-xl font-bold">{{ $piecework['hero']['pending'] }}</p>
                    <p class="text-[10px] font-bold text-primary-fixed">{{ $piecework['hero']['pending_note'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-surface-container-low p-6 rounded-full border border-outline-variant/15">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-sm font-headline font-bold text-on-surface uppercase tracking-tight">Alineacion con Avance Fisico</h3>
                <span class="text-xs font-bold text-primary underline cursor-pointer">{{ $piecework['alignment']['link'] }}</span>
            </div>
            <div class="space-y-6">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-lg bg-surface flex items-center justify-center border border-outline-variant/20">
                        <span class="text-xs font-bold text-primary">{{ $piecework['alignment']['physical'] }}</span>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between mb-1">
                            <span class="text-xs font-semibold">Avance Fisico de Obra</span>
                        </div>
                        <div class="w-full h-2 bg-outline-variant/20 rounded-full overflow-hidden">
                            <div class="bg-primary h-full" style="width: {{ $piecework['alignment']['physical'] }}"></div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-lg bg-green-50 flex items-center justify-center border border-green-200">
                        <span class="text-xs font-bold text-green-700">{{ $piecework['alignment']['cost'] }}</span>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between mb-1">
                            <span class="text-xs font-semibold">Desembolso de Destajos</span>
                        </div>
                        <div class="w-full h-2 bg-outline-variant/20 rounded-full overflow-hidden">
                            <div class="bg-green-600 h-full" style="width: {{ $piecework['alignment']['cost'] }}"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <aside class="col-span-12 lg:col-span-4 space-y-6">
        <div class="bg-white p-6 rounded-full border border-outline-variant/10 shadow-sm">
            <h3 class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-4">Acciones Rapidas</h3>
            <div class="grid grid-cols-1 gap-2">
                @foreach ($piecework['quick_actions'] as $action)
                    <button
                        class="w-full flex items-center gap-3 p-3 rounded-xl bg-surface-container-low hover:bg-primary-fixed transition-all text-left">
                        <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center text-primary shadow-sm">
                            <span class="material-symbols-outlined">{{ $action['icon'] }}</span>
                        </div>
                        <div>
                            <p class="text-xs font-bold">{{ $action['label'] }}</p>
                            <p class="text-[10px] text-on-surface-variant">{{ $action['meta'] }}</p>
                        </div>
                    </button>
                @endforeach
            </div>
        </div>

        <div class="bg-surface-container-low p-6 rounded-full border border-outline-variant/10">
            <h3 class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-4">Estado de Flujo</h3>
            <div class="space-y-4">
                @foreach ($piecework['flow'] as $item)
                    <div class="flex gap-3">
                        <div class="w-1 {{ $item['bar_class'] }} rounded-full"></div>
                        <div>
                            <p class="text-xs font-bold">{{ $item['title'] }}</p>
                            <p class="text-[10px] text-on-surface-variant">{{ $item['description'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </aside>
</div>

<div class="bg-white rounded-full shadow-sm overflow-hidden border border-outline-variant/10 mb-5">
    <div class="p-6 border-b border-outline-variant/5 flex justify-between items-center">
        <h3 class="text-lg font-headline font-bold text-on-surface">Detalle de Destajos por Contratista</h3>
        <div class="flex gap-2">
            <div
                class="px-3 py-1.5 bg-surface-container-low rounded-lg text-[10px] font-bold text-on-surface-variant border border-outline-variant/10 cursor-pointer">
                Filtrar por Estatus</div>
            <div
                class="px-3 py-1.5 bg-surface-container-low rounded-lg text-[10px] font-bold text-on-surface-variant border border-outline-variant/10 cursor-pointer">
                Rango de Fechas</div>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead class="bg-surface-container-low/50">
                <tr>
                    <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Contratista</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Paquete</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-wider text-right">Contratado</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-wider text-right">Generado</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-wider text-right">Aprobado</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-wider text-right">Pagado</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-wider text-right">Retenido</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Status</th>
                    <th class="px-6 py-4"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-outline-variant/10">
                @foreach ($piecework['rows'] as $row)
                    <tr class="hover:bg-surface-container-low/30 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center text-[10px] font-bold text-primary">
                                    {{ $row['initials'] }}
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-on-surface">{{ $row['contractor'] }}</p>
                                    <p class="text-[10px] text-on-surface-variant">ID: {{ $row['contractor_id'] }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4"><span class="text-xs font-medium px-2 py-1 bg-surface-container rounded-lg">{{ $row['package'] }}</span></td>
                        <td class="px-6 py-4 text-xs font-semibold text-right">{{ $row['contracted'] }}</td>
                        <td class="px-6 py-4 text-xs font-semibold text-right">{{ $row['generated'] }}</td>
                        <td class="px-6 py-4 text-xs font-semibold text-right">{{ $row['approved'] }}</td>
                        <td class="px-6 py-4 text-xs font-semibold text-right text-green-700">{{ $row['paid'] }}</td>
                        <td class="px-6 py-4 text-xs font-semibold text-right text-tertiary-container">{{ $row['retained'] }}</td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 rounded-full text-[10px] font-bold border {{ $row['status_class'] }}">{{ $row['status'] }}</span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <button class="text-on-surface-variant hover:text-primary transition-colors"><span
                                    class="material-symbols-outlined text-sm">more_vert</span></button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>