<div>
    @if(session()->has('orden_message'))
        <div class="mb-4 p-3 bg-green-100 text-green-800 rounded-lg text-sm">{{ session('orden_message') }}</div>
    @endif
    @if(session()->has('orden_error'))
        <div class="mb-4 p-3 bg-red-100 text-red-800 rounded-lg text-sm">{{ session('orden_error') }}</div>
    @endif

    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold">📋 Seg. Jurídico — Orden de Gestión</h3>
        @if($orden && $orden->esta_completo)
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">✅ Completado (3/3 firmas)</span>
        @elseif($orden)
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">⏳ {{ $orden->firmas_count }}/3 firmas</span>
        @else
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-600">Sin crear</span>
        @endif
    </div>

    {{-- FORMULARIO --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha Vencimiento</label>
            <input type="date" wire:model="fecha_vencimiento" class="w-full text-sm border-gray-300 rounded-md shadow-sm"
                {{ ($orden && $orden->esta_completo) ? 'disabled' : '' }}>
        </div>
        <div class="flex items-end gap-4">
            <label class="flex items-center gap-1 text-sm">
                <input type="checkbox" wire:model="tiene_deceval" class="rounded border-gray-300 text-indigo-600"
                    {{ ($orden && $orden->esta_completo) ? 'disabled' : '' }}>
                Deceval
            </label>
            <label class="flex items-center gap-1 text-sm">
                <input type="checkbox" wire:model="pagare_virtual" class="rounded border-gray-300 text-indigo-600"
                    {{ ($orden && $orden->esta_completo) ? 'disabled' : '' }}>
                Pagaré Virtual
            </label>
            <label class="flex items-center gap-1 text-sm">
                <input type="checkbox" wire:model="con_escritura" class="rounded border-gray-300 text-indigo-600"
                    {{ ($orden && $orden->esta_completo) ? 'disabled' : '' }}>
                Escritura
            </label>
        </div>
    </div>

    <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">Instrucciones Especiales</label>
        <textarea wire:model="instrucciones_especiales" rows="2" class="w-full text-sm border-gray-300 rounded-md shadow-sm"
            {{ ($orden && $orden->esta_completo) ? 'disabled' : '' }}></textarea>
    </div>

    <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">Observaciones</label>
        <textarea wire:model="observaciones" rows="2" class="w-full text-sm border-gray-300 rounded-md shadow-sm"
            {{ ($orden && $orden->esta_completo) ? 'disabled' : '' }}></textarea>
    </div>

    @if(!$orden || !$orden->esta_completo)

                    {{-- Checkboxes Seguimiento Jurídico V2 --}}
                    <div class="pt-4 border-t border-gray-200 mt-4">
                        <p class="text-sm font-semibold text-gray-700 mb-3">✅ Documentos y Verificaciones</p>
                        <div class="grid grid-cols-2 gap-3">
                            <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" wire:model="check_liquidacion_credito" class="h-4 w-4 rounded border-gray-300 text-indigo-600">
                                <span class="text-sm text-gray-700">Liquidación de Crédito</span>
                            </label>
                            <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" wire:model="check_plan_pago" class="h-4 w-4 rounded border-gray-300 text-indigo-600">
                                <span class="text-sm text-gray-700">Plan de Pago</span>
                            </label>
                            <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" wire:model="check_investigacion_bienes" class="h-4 w-4 rounded border-gray-300 text-indigo-600">
                                <span class="text-sm text-gray-700">Investigación de Bienes</span>
                            </label>
                            <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" wire:model="check_fosyga" class="h-4 w-4 rounded border-gray-300 text-indigo-600">
                                <span class="text-sm text-gray-700">Consulta FOSYGA</span>
                            </label>
                            <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" wire:model="check_poder" class="h-4 w-4 rounded border-gray-300 text-indigo-600">
                                <span class="text-sm text-gray-700">Poder Notariado</span>
                            </label>
                            <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" wire:model="check_formato" class="h-4 w-4 rounded border-gray-300 text-indigo-600">
                                <span class="text-sm text-gray-700">Formato Seg. Jurídico</span>
                            </label>
                        </div>
                    </div>
    <button wire:click="guardar" class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700 mb-6">
        {{ $orden ? 'Actualizar Orden' : 'Crear Orden de Gestión' }}
    </button>
    @endif

    {{-- PANEL DE FIRMAS --}}
    @if($orden)
    <div class="border-t pt-4 mt-4">
        <h4 class="font-semibold text-gray-700 mb-3">Firmas Digitales</h4>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            {{-- Firma Asistente --}}
            <div class="border rounded-lg p-4 {{ $orden->firmado_asistente_at ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }}">
                <div class="text-sm font-medium text-gray-700 mb-2">👤 Asistente</div>
                @if($orden->firmado_asistente_at)
                <div class="text-xs text-green-700">
                    ✅ {{ $orden->firmanteAsistente->name ?? 'N/A' }}<br>
                    {{ $orden->firmado_asistente_at->format('d/m/Y H:i:s') }}
                </div>
                @else
                <button wire:click="firmar('asistente')"
                    class="w-full px-3 py-1.5 bg-indigo-600 text-white rounded text-xs hover:bg-indigo-700">
                    ✍️ Firmar como Asistente
                </button>
                @endif
            </div>

            {{-- Firma Sustanciador --}}
            <div class="border rounded-lg p-4 {{ $orden->firmado_sustanciador_at ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }}">
                <div class="text-sm font-medium text-gray-700 mb-2">⚖️ Sustanciador</div>
                @if($orden->firmado_sustanciador_at)
                <div class="text-xs text-green-700">
                    ✅ {{ $orden->firmanteSustanciador->name ?? 'N/A' }}<br>
                    {{ $orden->firmado_sustanciador_at->format('d/m/Y H:i:s') }}
                </div>
                @else
                <button wire:click="firmar('sustanciador')"
                    class="w-full px-3 py-1.5 bg-indigo-600 text-white rounded text-xs hover:bg-indigo-700"
                    {{ !$orden->firmado_asistente_at ? 'disabled' : '' }}>
                    ✍️ Firmar como Sustanciador
                </button>
                @if(!$orden->firmado_asistente_at)
                <div class="text-xs text-gray-400 mt-1">Requiere firma del asistente primero</div>
                @endif
                @endif
            </div>

            {{-- Firma Gerente --}}
            <div class="border rounded-lg p-4 {{ $orden->firmado_gerente_at ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }}">
                <div class="text-sm font-medium text-gray-700 mb-2">🏛️ Gerente</div>
                @if($orden->firmado_gerente_at)
                <div class="text-xs text-green-700">
                    ✅ {{ $orden->firmanteGerente->name ?? 'N/A' }}<br>
                    {{ $orden->firmado_gerente_at->format('d/m/Y H:i:s') }}
                </div>
                @else
                <button wire:click="firmar('gerente')"
                    class="w-full px-3 py-1.5 bg-indigo-600 text-white rounded text-xs hover:bg-indigo-700"
                    {{ !$orden->firmado_sustanciador_at ? 'disabled' : '' }}>
                    ✍️ Firmar como Gerente
                </button>
                @if(!$orden->firmado_sustanciador_at)
                <div class="text-xs text-gray-400 mt-1">Requiere firma del sustanciador primero</div>
                @endif
                @endif
            </div>
        </div>
    </div>
    @endif
</div>
