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

@section('main-content')
    <div class="flex items-end justify-between mb-8">
        <div>
            <h1 class="text-3xl font-extrabold text-primary tracking-tight mb-1">Detalle de contratista</h1>
            <p class="text-on-surface-variant font-medium">Consulta contratos, pagos, garantias, incidencias y
                participacion operativa del contratista</p>
        </div>
        <div class="flex gap-3">
            <button
                class="px-4 py-2 bg-surface-container-lowest border border-outline-variant/30 text-on-surface rounded-full font-semibold text-sm flex items-center gap-2 hover:bg-surface-container transition-colors">
                <span class="material-symbols-outlined text-sm">edit</span>
                Edit
            </button>
            <button
                class="px-4 py-2 bg-primary text-on-primary rounded-full font-semibold text-sm flex items-center gap-2 hover:opacity-90 transition-opacity">
                <span class="material-symbols-outlined text-sm">add</span>
                New Review
            </button>
            <button
                class="p-2 bg-surface-container-lowest border border-outline-variant/30 text-on-surface rounded-full hover:bg-surface-container transition-colors">
                <span class="material-symbols-outlined text-lg">ios_share</span>
            </button>
        </div>
    </div>

    <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 lg:col-span-8 bg-surface-container-lowest p-8 rounded-full shadow-sm">
            <div class="flex items-start gap-8">
                <div class="w-24 h-24 rounded-full bg-primary flex items-center justify-center shrink-0">
                    <span class="material-symbols-outlined text-white text-4xl">corporate_fare</span>
                </div>
                <div class="flex-grow">
                    <div class="flex items-center gap-3 mb-4">
                        <h2 class="text-2xl font-bold text-on-surface">{{ $contractor['name'] }}</h2>
                        <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider {{ $contractor['hero_status_class'] }}">
                            {{ $contractor['status'] }}
                        </span>
                    </div>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                        <div>
                            <p class="text-[10px] uppercase font-bold text-outline tracking-widest mb-1">Especialidad</p>
                            <p class="font-semibold text-on-surface">{{ $contractor['specialty'] }}</p>
                        </div>
                        <div>
                            <p class="text-[10px] uppercase font-bold text-outline tracking-widest mb-1">Contacto</p>
                            <p class="font-semibold text-on-surface">{{ $contractor['contact'] }}</p>
                        </div>
                        <div>
                            <p class="text-[10px] uppercase font-bold text-outline tracking-widest mb-1">Inicio Contrato</p>
                            <p class="font-semibold text-on-surface">{{ $contractor['contract_start'] }}</p>
                        </div>
                        <div>
                            <p class="text-[10px] uppercase font-bold text-outline tracking-widest mb-1">Etapas Activas</p>
                            <p class="font-semibold text-on-surface">{{ $contractor['active_projects'] }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-span-12 lg:col-span-4 bg-error-container/20 border border-error/10 p-6 rounded-full flex flex-col justify-center">
            <div class="flex items-center gap-3 mb-3 text-error">
                <span class="material-symbols-outlined">warning</span>
                <h3 class="font-bold">Incidencias y Alertas</h3>
            </div>
            <ul class="space-y-2">
                @foreach ($contractor['alerts'] as $alert)
                    <li class="flex items-center gap-2 text-sm text-on-error-container">
                        <span class="w-1.5 h-1.5 rounded-full {{ $alert['dot_class'] }}"></span>
                        {{ $alert['text'] }}
                    </li>
                @endforeach
            </ul>
        </div>

        <div class="col-span-12 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-7 gap-4">
            <div class="bg-primary-container text-on-primary-container p-6 rounded-full">
                <p class="text-xs font-semibold opacity-70 mb-2">Contratos</p>
                <p class="text-2xl font-bold">{{ $contractor['contracts_count'] }}</p>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/10">
                <p class="text-xs font-bold text-on-surface-variant mb-2">Contratado</p>
                <p class="text-2xl font-bold text-primary">{{ $contractor['contracted'] }}</p>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/10">
                <p class="text-xs font-bold text-on-surface-variant mb-2">Generado</p>
                <p class="text-2xl font-bold text-primary">{{ $contractor['generated'] }}</p>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/10">
                <p class="text-xs font-bold text-on-surface-variant mb-2">Aprobado</p>
                <p class="text-2xl font-bold text-primary">{{ $contractor['approved'] }}</p>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/10">
                <p class="text-xs font-bold text-on-surface-variant mb-2">Pagado</p>
                <p class="text-2xl font-bold text-green-600">{{ $contractor['paid'] }}</p>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/10">
                <p class="text-xs font-bold text-on-surface-variant mb-2">Pendiente</p>
                <p class="text-2xl font-bold text-orange-500">{{ $contractor['pending'] }}</p>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/10">
                <p class="text-xs font-bold text-on-surface-variant mb-2">Retenido</p>
                <p class="text-2xl font-bold text-primary">{{ $contractor['retained'] }}</p>
            </div>
        </div>

        <div class="col-span-12 lg:col-span-8 space-y-6">
            <div class="bg-surface-container-lowest rounded-full p-8 shadow-sm">
                <div class="flex items-center justify-between mb-8">
                    <h3 class="text-xl font-bold text-primary">Resumen de Contratos</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="text-[10px] uppercase font-bold text-outline tracking-widest">
                                <th class="pb-4 px-2">Contrato</th>
                                <th class="pb-4 px-2">Etapa</th>
                                <th class="pb-4 px-2">Contratado</th>
                                <th class="pb-4 px-2">Generado</th>
                                <th class="pb-4 px-2">Status</th>
                                <th class="pb-4 px-2">Ult. Rev.</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm font-medium">
                            @foreach ($contractor['contracts_rows'] as $row)
                                <tr class="hover:bg-surface-container-low transition-colors group">
                                    <td class="py-4 px-2 font-bold text-primary">{{ $row['code'] }}</td>
                                    <td class="py-4 px-2">{{ $row['phase'] }}</td>
                                    <td class="py-4 px-2">{{ $row['contracted'] }}</td>
                                    <td class="py-4 px-2">{{ $row['generated'] }}</td>
                                    <td class="py-4 px-2">
                                        <span class="px-2 py-0.5 rounded-full text-[10px] uppercase font-bold {{ $row['status_class'] }}">
                                            {{ $row['status'] }}
                                        </span>
                                    </td>
                                    <td class="py-4 px-2 text-on-surface-variant">{{ $row['review'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-surface-container-lowest p-8 rounded-full shadow-sm">
                    <h3 class="text-lg font-bold text-primary mb-6">Resumen de Pagos</h3>
                    <div class="space-y-4">
                        <div class="flex justify-between items-end">
                            <div>
                                <p class="text-xs text-outline font-semibold mb-1">Historico Total</p>
                                <p class="text-xl font-bold text-primary">{{ $contractor['payments']['total'] }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-xs text-outline font-semibold mb-1">Diferencias</p>
                                <p class="text-lg font-bold text-error">{{ $contractor['payments']['difference'] }}</p>
                            </div>
                        </div>
                        <div class="h-2 w-full bg-outline-variant/20 rounded-full overflow-hidden flex">
                            <div class="h-full bg-green-500" style="width: {{ $contractor['payments']['paid_width'] }}"></div>
                            <div class="h-full bg-orange-400" style="width: {{ $contractor['payments']['approved_width'] }}"></div>
                            <div class="h-full bg-error" style="width: {{ $contractor['payments']['pending_width'] }}"></div>
                        </div>
                        <div class="flex gap-4 text-[10px] font-bold uppercase tracking-widest text-outline">
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-500"></span>
                                Pagado</span>
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-orange-400"></span>
                                Aprobado</span>
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-error"></span>
                                Pendiente</span>
                        </div>
                    </div>
                </div>

                <div class="bg-primary text-white p-8 rounded-full shadow-lg relative overflow-hidden">
                    <div class="relative z-10">
                        <h3 class="text-lg font-bold mb-6">Retenciones y Garantias</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <p class="text-xs opacity-70 mb-1">Total Retenido</p>
                                <p class="text-2xl font-bold">{{ $contractor['retentions_summary']['total'] }}</p>
                            </div>
                            <div>
                                <p class="text-xs opacity-70 mb-1">Por Liberar</p>
                                <p class="text-2xl font-bold text-tertiary-fixed">{{ $contractor['retentions_summary']['release'] }}</p>
                            </div>
                            <div class="col-span-2 pt-4 border-t border-white/10">
                                <p class="text-xs opacity-70 mb-2">Estatus de Fondo de Garantia</p>
                                <div class="flex justify-between text-sm font-semibold">
                                    <span>Liberado: {{ $contractor['retentions_summary']['released'] }}</span>
                                    <span>Balance: {{ $contractor['retentions_summary']['balance'] }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-br from-primary-container/40 to-transparent pointer-events-none"></div>
                </div>
            </div>
        </div>

        <div class="col-span-12 lg:col-span-4 space-y-6">
            <div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
                <h3 class="text-lg font-bold text-primary mb-6">Participacion por Etapa</h3>
                <div class="space-y-6">
                    @foreach ($contractor['participation'] as $item)
                        <div class="group">
                            <div class="flex justify-between items-center mb-2">
                                <p class="text-sm font-bold text-primary">{{ $item['label'] }}</p>
                                <span class="text-xs font-bold text-on-surface-variant">{{ $item['progress'] }}</span>
                            </div>
                            <div class="h-1.5 w-full bg-outline-variant/20 rounded-full overflow-hidden">
                                <div class="h-full bg-primary" style="width: {{ $item['width'] }}"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="bg-surface-container p-6 rounded-full">
                <h3 class="text-lg font-bold text-primary mb-6">Actividad Reciente</h3>
                <div
                    class="space-y-6 relative before:content-[''] before:absolute before:left-3 before:top-2 before:bottom-2 before:w-0.5 before:bg-outline-variant/30">
                    @foreach ($contractor['activity_feed'] as $item)
                        <div class="relative pl-8">
                            <div
                                class="absolute left-0 top-1 w-6 h-6 rounded-full bg-white border-2 {{ $item['border_class'] }} flex items-center justify-center">
                                <span class="material-symbols-outlined text-[14px] {{ $item['icon_color_class'] }}">{{ $item['icon'] }}</span>
                            </div>
                            <div>
                                <p class="text-sm font-bold text-on-surface">{{ $item['title'] }}</p>
                                <p class="text-xs text-on-surface-variant mb-1">{{ $item['subtitle'] }}</p>
                                <p class="text-[10px] text-outline font-semibold">{{ $item['time'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
                <button
                    class="w-full mt-8 py-2 border border-outline-variant/40 rounded-full text-xs font-bold text-primary hover:bg-surface-container-highest transition-colors">
                    Ver historial completo
                </button>
            </div>
        </div>
    </div>

    <div class="mt-8 bg-surface-container-lowest p-8 rounded-full shadow-sm">
        <div class="flex items-center justify-between mb-8">
            <h3 class="text-xl font-bold text-primary">Detalle de Actividades por Etapa</h3>
            <div class="flex gap-2">
                <span class="px-3 py-1 bg-surface-container text-primary rounded-full text-xs font-semibold">
                    Total Actividades: {{ count($contractor['activity_cards']) }}
                </span>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            @foreach ($contractor['activity_cards'] as $item)
                <div class="p-4 bg-surface-container-low rounded-xl">
                    <p class="text-[10px] uppercase font-bold text-outline mb-1">{{ $item['label'] }}</p>
                    <div class="flex justify-between items-center">
                        <p class="font-bold text-primary">{{ $item['amount'] }}</p>
                        <span class="text-xs font-bold {{ $item['progress_class'] }}">{{ $item['progress'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection