@extends('layouts.app')

@section('titulo', $proceso->radicado_interno . ' — GestionCob')

@section('contenido')

<div class="flex justify-between items-center mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-800 font-mono">
            {{ $proceso->radicado_interno }}
        </h1>
        <p class="text-sm text-gray-500 mt-1">
            Creado el {{ \Carbon\Carbon::parse($proceso->fecha_alta_deudor)->format('d/m/Y H:i') }}
        </p>
    </div>
    <a href="{{ route('procesos.index') }}"
       class="text-gray-600 hover:underline py-2">&#8592; Volver</a>
</div>

<div class="grid grid-cols-3 gap-4 mb-6">
    <div class="bg-white rounded shadow p-4">
        <p class="text-xs text-gray-500 mb-1">Tipo</p>
        @if($proceso->tipo_subproceso == 'PREJUDICIAL')
            <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded text-sm font-medium">Gesti&#243;n Prejur&#237;dica</span>
        @elseif($proceso->tipo_subproceso == 'JURIDICO')
            <span class="bg-red-100 text-red-800 px-3 py-1 rounded text-sm font-medium">Proceso Jur&#237;dico</span>
        @else
            <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded text-sm font-medium">Gesti&#243;n Prejur&#237;dica</span>
        @endif
    </div>
    <div class="bg-white rounded shadow p-4">
        <p class="text-xs text-gray-500 mb-1">Estado actual</p>
        <p class="font-medium text-sm uppercase">
            @if($proceso->tipo_subproceso == 'JURIDICO')
                {{ str_replace('_', ' ', $proceso->estado_jur ?? '&#8212;') }}
            @else
                {{ str_replace('_', ' ', $proceso->estado_prej ?? '&#8212;') }}
            @endif
        </p>
    </div>
    <div class="bg-white rounded shadow p-4">
        <p class="text-xs text-gray-500 mb-1">Total deuda</p>
        <p class="font-bold text-lg text-green-700">
            ${{ number_format($proceso->total_deuda, 0, ',', '.') }}
        </p>
    </div>
</div>

{{-- ==================== LÍNEA DE TIEMPO PREJUDICIAL ==================== --}}
@if($proceso->tipo_subproceso != 'JURIDICO')
@php
    $estadosPrej = [
        'recepcion'           => 'Recepci&#243;n',
        'registro'            => 'Registro',
        'localizacion'        => 'Localizaci&#243;n',
        'gestion_activa'      => 'Gesti&#243;n activa',
        'acuerdo_en_curso'    => 'Acuerdo en curso',
        'seguimiento_acuerdo' => 'Seguimiento acuerdo',
    ];
    $estadosFinalesPrej = [
        'cerrado_recuperado' => ['label' => 'Recuperado',         'color' => 'green'],
        'cerrado_gse'        => ['label' => 'Cerrado GSE',        'color' => 'gray'],
        'escalado_juridico'  => ['label' => 'Escalado Juridico',  'color' => 'red'],
        'devuelto'           => ['label' => 'Devuelto',           'color' => 'orange'],
    ];
    $estadoActualPrej = $proceso->estado_prej ?? '';
    $estadosKeysPrej  = array_keys($estadosPrej);
    $posActualPrej    = array_search($estadoActualPrej, $estadosKeysPrej);
    $esFinalPrej      = array_key_exists($estadoActualPrej, $estadosFinalesPrej);
@endphp

<div class="bg-white rounded shadow p-6 mb-6">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-bold text-gray-700">Estado de la Gesti&#243;n Prejur&#237;dica</h2>
        <form action="{{ route('procesos.estado', $proceso) }}" method="POST" class="flex items-center gap-2">
            @csrf
            @method('PATCH')
            <select name="estado_prej" class="border rounded px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                @foreach($estadosPrej as $key => $label)
                    <option value="{{ $key }}" {{ $estadoActualPrej == $key ? 'selected' : '' }}>{!! $label !!}</option>
                @endforeach
                @foreach($estadosFinalesPrej as $key => $info)
                    <option value="{{ $key }}" {{ $estadoActualPrej == $key ? 'selected' : '' }}>&#11035; {{ $info['label'] }}</option>
                @endforeach
            </select>
            <button type="submit" class="bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700">
                Actualizar
            </button>
        </form>
    </div>

    @if(!$esFinalPrej)
    <div class="relative mt-4">
        <div class="flex items-center justify-between relative">
            <div class="absolute top-4 left-0 right-0 h-1 bg-gray-200 z-0"></div>
            @php
                $porcentajePrej = $posActualPrej !== false ? ($posActualPrej / (count($estadosPrej) - 1)) * 100 : 0;
            @endphp
            <div class="absolute top-4 left-0 h-1 bg-blue-500 z-0 transition-all"
                 style="width: {{ $porcentajePrej }}%"></div>
            @foreach($estadosPrej as $key => $label)
            @php
                $idx = array_search($key, $estadosKeysPrej);
                $completado = $posActualPrej !== false && $idx <= $posActualPrej;
                $esActivo   = $key === $estadoActualPrej;
            @endphp
            <div class="flex flex-col items-center z-10 flex-1">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                    {{ $esActivo ? 'bg-blue-600 text-white ring-4 ring-blue-200' :
                       ($completado ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500') }}">
                    @if($completado && !$esActivo) &#10003; @else {{ $idx + 1 }} @endif
                </div>
                <p class="text-xs mt-2 text-center font-medium
                    {{ $esActivo ? 'text-blue-600' : ($completado ? 'text-gray-700' : 'text-gray-400') }}"
                   style="max-width: 80px">{!! $label !!}</p>
            </div>
            @endforeach
        </div>
    </div>
    @else
    @php $infoFinalPrej = $estadosFinalesPrej[$estadoActualPrej]; @endphp
    <div class="mt-4 flex items-center gap-3 p-4 rounded-lg
        {{ $infoFinalPrej['color'] == 'green'  ? 'bg-green-50 border border-green-200' :
           ($infoFinalPrej['color'] == 'red'   ? 'bg-red-50 border border-red-200' :
           ($infoFinalPrej['color'] == 'orange'? 'bg-orange-50 border border-orange-200' :
           'bg-gray-50 border border-gray-200')) }}">
        <span class="text-2xl">
            {{ $infoFinalPrej['color'] == 'green'  ? '&#9989;' :
               ($infoFinalPrej['color'] == 'red'   ? '&#9878;' :
               ($infoFinalPrej['color'] == 'orange'? '&#8617;' : '&#128274;')) }}
        </span>
        <div>
            <p class="font-bold text-gray-800">{{ $infoFinalPrej['label'] }}</p>
            <p class="text-sm text-gray-500">Gesti&#243;n finalizada</p>
        </div>
    </div>
    @endif
</div>

{{-- BOTÓN DE TRÁNSITO A JURÍDICO --}}
@if($proceso->estado_prej != 'cerrado_recuperado' && $proceso->estado_prej != 'cerrado_gse' && $proceso->estado_prej != 'escalado_juridico')
<div class="bg-white rounded shadow p-6 mb-6 border-l-4 border-red-500">
    <div class="flex justify-between items-center">
        <div>
            <h3 class="font-bold text-gray-800 mb-1">&#9888; &#191;Requiere actuaci&#243;n judicial?</h3>
            <p class="text-sm text-gray-500">Use esta opci&#243;n cuando el deudor incumple acuerdos y se requiere intervenci&#243;n de un juez.</p>
        </div>
        <button onclick="document.getElementById('modal-escalar').classList.remove('hidden')"
                class="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 font-medium whitespace-nowrap ml-4">
            &#9878; Escalar a Proceso Jur&#237;dico
        </button>
    </div>
</div>
@endif

@endif
{{-- FIN BLOQUE PREJUDICIAL --}}

{{-- ==================== LÍNEA DE TIEMPO JURÍDICA ==================== --}}
@if($proceso->tipo_subproceso == 'JURIDICO')
@php
    $estadosJur = [
        'presentacion_demanda' => 'Presentaci&#243;n Demanda',
        'mandamiento_pago'     => 'Mandamiento de Pago',
        'notificacion'         => 'Notificaci&#243;n',
        'sentencia'            => 'Sentencia',
        'liquidacion_costas'   => 'Liquidaci&#243;n Costas',
        'liquidacion_credito'  => 'Liquidaci&#243;n Cr&#233;dito',
    ];
    $estadosFinalesJur = [
        'cerrado_recuperado' => ['label' => 'Recuperado',  'color' => 'green'],
        'cerrado_gse'        => ['label' => 'Cerrado GSE', 'color' => 'gray'],
        'devuelto'           => ['label' => 'Devuelto',    'color' => 'orange'],
    ];
    $estadoActualJur = $proceso->estado_jur ?? '';
    $estadosKeysJur  = array_keys($estadosJur);
    $posActualJur    = array_search($estadoActualJur, $estadosKeysJur);
    $esFinalJur      = array_key_exists($estadoActualJur, $estadosFinalesJur);
@endphp

<div class="bg-white rounded shadow p-6 mb-6">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-bold text-gray-700">Estado del Proceso Jur&#237;dico</h2>
        <form action="{{ route('procesos.estado', $proceso) }}" method="POST" class="flex items-center gap-2">
            @csrf
            @method('PATCH')
            <select name="estado_jur" class="border rounded px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                @foreach($estadosJur as $key => $label)
                    <option value="{{ $key }}" {{ $estadoActualJur == $key ? 'selected' : '' }}>{!! $label !!}</option>
                @endforeach
                @foreach($estadosFinalesJur as $key => $info)
                    <option value="{{ $key }}" {{ $estadoActualJur == $key ? 'selected' : '' }}>&#11035; {{ $info['label'] }}</option>
                @endforeach
            </select>
            <button type="submit" class="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700">
                Actualizar
            </button>
        </form>
    </div>

    @if(!$esFinalJur)
    <div class="relative mt-4">
        <div class="flex items-center justify-between relative">
            <div class="absolute top-4 left-0 right-0 h-1 bg-gray-200 z-0"></div>
            @php
                $porcentajeJur = $posActualJur !== false ? ($posActualJur / (count($estadosJur) - 1)) * 100 : 0;
            @endphp
            <div class="absolute top-4 left-0 h-1 bg-red-500 z-0 transition-all"
                 style="width: {{ $porcentajeJur }}%"></div>
            @foreach($estadosJur as $key => $label)
            @php
                $idx = array_search($key, $estadosKeysJur);
                $completado = $posActualJur !== false && $idx <= $posActualJur;
                $esActivo   = $key === $estadoActualJur;
            @endphp
            <div class="flex flex-col items-center z-10 flex-1">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                    {{ $esActivo ? 'bg-red-600 text-white ring-4 ring-red-200' :
                       ($completado ? 'bg-red-500 text-white' : 'bg-gray-200 text-gray-500') }}">
                    @if($completado && !$esActivo) &#10003; @else {{ $idx + 1 }} @endif
                </div>
                <p class="text-xs mt-2 text-center font-medium
                    {{ $esActivo ? 'text-red-600' : ($completado ? 'text-gray-700' : 'text-gray-400') }}"
                   style="max-width: 80px">{!! $label !!}</p>
            </div>
            @endforeach
        </div>
    </div>
    @else
    @php $infoFinalJur = $estadosFinalesJur[$estadoActualJur]; @endphp
    <div class="mt-4 flex items-center gap-3 p-4 rounded-lg
        {{ $infoFinalJur['color'] == 'green'  ? 'bg-green-50 border border-green-200' :
           ($infoFinalJur['color'] == 'orange'? 'bg-orange-50 border border-orange-200' :
           'bg-gray-50 border border-gray-200') }}">
        <span class="text-2xl">
            {{ $infoFinalJur['color'] == 'green'  ? '&#9989;' :
               ($infoFinalJur['color'] == 'orange'? '&#8617;' : '&#128274;') }}
        </span>
        <div>
            <p class="font-bold text-gray-800">{{ $infoFinalJur['label'] }}</p>
            <p class="text-sm text-gray-500">Proceso finalizado</p>
        </div>
    </div>
    @endif
</div>
@endif
{{-- FIN BLOQUE JURÍDICO --}}

{{-- MODAL ESCALAR A JURÍDICO --}}
@if($proceso->tipo_subproceso != 'JURIDICO')
<div id="modal-escalar" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white rounded shadow-lg p-6 w-full max-w-md mx-4">
        <h3 class="text-lg font-bold text-gray-800 mb-1">Escalar a Proceso Jur&#237;dico</h3>
        <p class="text-sm text-gray-500 mb-4">La gesti&#243;n prejur&#237;dica quedar&#225; cerrada y se iniciar&#225; el proceso judicial.</p>
        <form action="{{ route('gestion.escalar', $proceso) }}" method="POST">
            @csrf
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de Presentaci&#243;n de la Demanda *</label>
                <input type="date" name="fecha_presentacion_demanda"
                       class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"
                       required>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Motivo del escalamiento *</label>
                <textarea name="motivo_escalamiento" rows="3"
                          class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"
                          placeholder="Describa por que se escala a proceso juridico..."
                          required minlength="10"></textarea>
            </div>
            <div class="flex gap-3">
                <button type="submit"
                        class="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 font-medium flex-1">
                    Confirmar Escalamiento
                </button>
                <button type="button"
                        onclick="document.getElementById('modal-escalar').classList.add('hidden')"
                        class="bg-gray-200 text-gray-700 px-4 py-2 rounded text-sm hover:bg-gray-300 flex-1">
                    Cancelar
                </button>
            </div>
        </form>
    </div>
</div>
@endif

{{-- ==================== DEUDOR E INFORMACIÓN FINANCIERA ==================== --}}
<div class="grid grid-cols-2 gap-6 mb-6">
    <div class="bg-white rounded shadow p-6">
        <h2 class="text-lg font-bold text-gray-700 mb-4">Deudor</h2>
        <div class="space-y-2 text-sm">
            <div class="flex justify-between">
                <span class="text-gray-500">Nombre</span>
                <span class="font-medium">{{ $proceso->deudor->nombre_completo }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Documento</span>
                <span>{{ $proceso->deudor->tipo_documento }} {{ $proceso->deudor->numero_documento }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Tel&#233;fono</span>
                <span>{{ $proceso->deudor->telefono ?? '&#8212;' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Ciudad</span>
                <span>{{ $proceso->deudor->ciudad ?? '&#8212;' }}</span>
            </div>
        </div>
        <div class="mt-4 pt-4 border-t">
            <a href="{{ route('deudores.show', $proceso->deudor) }}"
               class="text-blue-600 hover:underline text-sm">
                Ver ficha completa del deudor &#8594;
            </a>
        </div>
    </div>

    <div class="bg-white rounded shadow p-6">
        <h2 class="text-lg font-bold text-gray-700 mb-4">Informaci&#243;n financiera</h2>
        <div class="space-y-2 text-sm">
            <div class="flex justify-between">
                <span class="text-gray-500">Entidad</span>
                <span class="font-medium">{{ $proceso->entidadCliente->nombre }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Producto</span>
                <span>{{ $proceso->tipo_producto ?? '&#8212;' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Saldo capital</span>
                <span>${{ number_format($proceso->saldo_capital, 0, ',', '.') }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Intereses</span>
                <span>${{ number_format($proceso->intereses, 0, ',', '.') }}</span>
            </div>
            <div class="flex justify-between border-t pt-2 mt-2">
                <span class="font-medium">Total deuda</span>
                <span class="font-bold text-green-700">
                    ${{ number_format($proceso->total_deuda, 0, ',', '.') }}
                </span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">D&#237;as en mora</span>
                <span>{{ $proceso->dias_mora ?? '&#8212;' }}</span>
            </div>
        </div>
    </div>
</div>

{{-- ==================== DOCUMENTOS DEL CASO ==================== --}}
@php
$nombresDoc = [
    'carta_remisoria'          => 'Carta remisoria',
    'consulta_infofer'         => 'Consulta Infofer',
    'autorizacion_carta'       => 'Autorizaci&#243;n / carta instrucciones',
    'pagare_fisico'            => 'Pagar&#233; F&#237;sico',
    'pagare_virtual'           => 'Pagar&#233; Virtual',
    'documento_otro_si'        => 'Documento Otro S&#237;',
    'plan_pagos'               => 'Plan de pagos',
    'liquidaciones_obligacion' => 'Liquidaciones por obligaci&#243;n',
    'soportes_liquidacion'     => 'Soportes de liquidaci&#243;n',
    'solicitud_servicios'      => 'Solicitud servicios / CRM',
    'camara_comercio'          => 'C&#225;mara de comercio',
    'imagen_cedula'            => 'Imagen c&#233;dula',
    'tarjeta_propiedad'        => 'Tarjeta propiedad veh&#237;culo',
    'poder'                    => 'Poder',
    'deceval'                  => 'Deceval',
    'escritura'                => 'Escritura',
    'estado_cuenta'            => 'Estado de cuenta',
    'entrega_email'            => 'Entrega: Email',
    'entrega_fisico'           => 'Entrega: F&#237;sico',
];
$docsPresentes = $proceso->documentos_checklist
    ? (is_array($proceso->documentos_checklist)
        ? $proceso->documentos_checklist
        : json_decode($proceso->documentos_checklist, true))
    : [];
@endphp

<div class="bg-white rounded shadow p-6 mb-6">
    <h2 class="text-lg font-bold text-gray-700 mb-4">Documentos del caso</h2>
    @if(count($docsPresentes) > 0)
    <div class="grid grid-cols-3 gap-2">
        @foreach($nombresDoc as $key => $label)
        <div class="flex items-center gap-2 py-1">
            @if(in_array($key, $docsPresentes))
                <span class="text-green-500 text-sm">&#10003;</span>
                <span class="text-sm text-gray-700">{!! $label !!}</span>
            @else
                <span class="text-gray-300 text-sm">&#10007;</span>
                <span class="text-sm text-gray-400">{!! $label !!}</span>
            @endif
        </div>
        @endforeach
    </div>
    @else
    <p class="text-sm text-gray-500">No se registraron documentos al ingreso.</p>
    @endif
</div>

{{-- ==================== GESTIONES ==================== --}}
<div class="bg-white rounded shadow p-6 mb-6">
    <h2 class="text-lg font-bold text-gray-700 mb-4">Registrar nueva gesti&#243;n</h2>
    <form action="{{ route('gestiones.store', $proceso) }}" method="POST">
        @csrf
        <div class="grid grid-cols-2 gap-4 mb-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Canal *</label>
                <select name="tipo_canal"
                        class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Seleccione...</option>
                    <option value="LLAMADA">Llamada telef&#243;nica</option>
                    <option value="WHATSAPP">WhatsApp</option>
                    <option value="EMAIL">Email</option>
                    <option value="SMS">SMS</option>
                    <option value="VISITA_CAMPO">Visita de campo</option>
                    <option value="CARTA_FISICA">Carta f&#237;sica</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Resultado *</label>
                <select name="resultado"
                        class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Seleccione...</option>
                    <option value="SIN_CONTACTO">Sin contacto</option>
                    <option value="BUZON">Buz&#243;n de voz</option>
                    <option value="NUMERO_INVALIDO">N&#250;mero inv&#225;lido</option>
                    <option value="CONTACTO_EFECTIVO">Contacto efectivo</option>
                    <option value="PROMESA_PAGO">Promesa de pago</option>
                    <option value="ACUERDO_LOGRADO">Acuerdo logrado</option>
                    <option value="RECHAZO">Rechazo</option>
                </select>
            </div>
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">Observaciones</label>
            <textarea name="observaciones" rows="3"
                      class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Detalle de la gesti&#243;n realizada..."></textarea>
        </div>
        <div class="grid grid-cols-2 gap-4 mb-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Fecha pr&#243;xima gesti&#243;n</label>
                <input type="date" name="fecha_proxima_gestion"
                       class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="flex items-end pb-2">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="registrada_en_banco" value="1" class="w-4 h-4">
                    <span class="text-sm text-gray-700">Ya registr&#233; en plataforma del banco</span>
                </label>
            </div>
        </div>
        <button type="submit"
                class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 font-medium">
            Guardar gesti&#243;n
        </button>
    </form>
</div>

<div class="bg-white rounded shadow p-6 mb-6">
    <h2 class="text-lg font-bold text-gray-700 mb-4">
        Historial de gestiones
        <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded text-sm ml-2">
            {{ $proceso->gestiones->count() }}
        </span>
    </h2>
    @forelse($proceso->gestiones()->orderBy('created_at', 'desc')->get() as $gestion)
    <div class="border rounded p-4 mb-3">
        <div class="flex justify-between items-start mb-2">
            <div class="flex gap-2 items-center">
                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">
                    {{ $gestion->tipo_canal }}
                </span>
                <span class="px-2 py-1 rounded text-xs font-medium
                    {{ $gestion->resultado == 'ACUERDO_LOGRADO' ? 'bg-green-100 text-green-800' :
                       ($gestion->resultado == 'SIN_CONTACTO'   ? 'bg-gray-100 text-gray-600' :
                       'bg-yellow-100 text-yellow-800') }}">
                    {{ str_replace('_', ' ', $gestion->resultado) }}
                </span>
            </div>
            <div class="flex items-center gap-3">
                <span class="text-xs text-gray-400">
                    {{ \Carbon\Carbon::parse($gestion->fecha_gestion)->format('d/m/Y H:i') }}
                </span>
                <form action="{{ route('gestiones.destroy', [$proceso, $gestion]) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            onclick="return confirm('&#191;Eliminar esta gesti&#243;n?')"
                            class="text-red-400 hover:text-red-600 text-xs">
                        Eliminar
                    </button>
                </form>
            </div>
        </div>
        @if($gestion->observaciones)
        <p class="text-sm text-gray-600 mb-2">{{ $gestion->observaciones }}</p>
        @endif
        <div class="flex gap-4 text-xs text-gray-400">
            @if($gestion->fecha_proxima_gestion)
            <span>Pr&#243;xima: {{ \Carbon\Carbon::parse($gestion->fecha_proxima_gestion)->format('d/m/Y') }}</span>
            @endif
            @if($gestion->registrada_en_banco)
            <span class="text-green-600">&#10003; Registrada en banco</span>
            @else
            <span class="text-orange-500">&#9888; Pendiente registrar en banco</span>
            @endif
        </div>
    </div>
    @empty
    <p class="text-sm text-gray-500">No hay gestiones registradas a&#250;n.</p>
    @endforelse
</div>
    
{{-- ==================== MEDIDAS CAUTELARES ==================== --}}
@if($proceso->tipo_subproceso == 'JURIDICO')
<div class="bg-white rounded shadow p-6 mb-6">
    <h2 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
        &#9878; Medidas Cautelares
        <span class="bg-red-100 text-red-700 px-2 py-1 rounded text-sm ml-2">
            {{ $proceso->medidas->count() }}
        </span>
    </h2>

    {{-- LISTADO DE MEDIDAS --}}
    @forelse($proceso->medidas()->orderBy('created_at', 'desc')->get() as $medida)
    <div class="border rounded p-4 mb-3 {{ $medida->estado == 'LEVANTADA' ? 'opacity-60 bg-gray-50' : 'bg-white' }}">
        <div class="flex justify-between items-start mb-2">
            <div class="flex gap-2 items-center flex-wrap">
                <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium">
                    {{ str_replace('_', ' ', $medida->tipo_medida) }}
                </span>
                @if($medida->tipo_embargo)
                <span class="bg-orange-100 text-orange-700 px-2 py-1 rounded text-xs">
                    {{ str_replace('_', ' ', $medida->tipo_embargo) }}
                </span>
                @endif
                <span class="px-2 py-1 rounded text-xs font-medium
                    {{ $medida->estado == 'SOLICITADA' ? 'bg-yellow-100 text-yellow-700' :
                       ($medida->estado == 'DECRETADA' ? 'bg-blue-100 text-blue-700' :
                       ($medida->estado == 'EJECUTADA' ? 'bg-green-100 text-green-700' :
                       'bg-gray-100 text-gray-500')) }}">
                    {{ $medida->estado }}
                </span>
            </div>
            <div class="flex items-center gap-2">
                @if($medida->estado != 'LEVANTADA')
                <button onclick="document.getElementById('modal-levantar-{{ $medida->id }}').classList.remove('hidden')"
                        class="text-xs text-orange-600 hover:underline border border-orange-300 px-2 py-1 rounded">
                    Levantar
                </button>
                @endif
                <form action="{{ route('medidas.destroy', $medida) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            onclick="return confirm('&#191;Eliminar esta medida cautelar?')"
                            class="text-red-400 hover:text-red-600 text-xs">
                        Eliminar
                    </button>
                </form>
            </div>
        </div>
        <div class="grid grid-cols-3 gap-2 text-xs text-gray-500 mt-2">
            @if($medida->entidad_destino)
            <span>Entidad: <strong>{{ $medida->entidad_destino }}</strong></span>
            @endif
            @if($medida->monto_asegurado)
            <span>Monto: <strong>${{ number_format($medida->monto_asegurado, 0, ',', '.') }}</strong></span>
            @endif
            @if($medida->numero_oficio)
            <span>Oficio: <strong>{{ $medida->numero_oficio }}</strong></span>
            @endif
            @if($medida->fecha_vencimiento)
            <span class="{{ \Carbon\Carbon::parse($medida->fecha_vencimiento)->isPast() ? 'text-red-500 font-bold' : '' }}">
                Vence: {{ \Carbon\Carbon::parse($medida->fecha_vencimiento)->format('d/m/Y') }}
            </span>
            @endif
            @if($medida->oficio_levantamiento)
            <span class="text-gray-400">Oficio levantamiento: {{ $medida->oficio_levantamiento }}</span>
            @endif
        </div>
        @if($medida->observaciones)
        <p class="text-xs text-gray-500 mt-2 italic">{{ $medida->observaciones }}</p>
        @endif
    </div>

    {{-- MODAL LEVANTAR --}}
    <div id="modal-levantar-{{ $medida->id }}"
         class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
        <div class="bg-white rounded shadow-lg p-6 w-full max-w-md mx-4">
            <h3 class="text-lg font-bold text-gray-800 mb-1">Levantar Medida Cautelar</h3>
            <p class="text-sm text-gray-500 mb-4">Ingrese el n&#250;mero o descripci&#243;n del oficio judicial de levantamiento.</p>
            <form action="{{ route('medidas.levantar', $medida) }}" method="POST">
                @csrf
                @method('PATCH')
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Oficio judicial de levantamiento *</label>
                    <input type="text" name="oficio_levantamiento"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
                           placeholder="Ej: Oficio No. 2026-1234 del Juzgado..."
                           required minlength="5">
                </div>
                <div class="flex gap-3">
                    <button type="submit"
                            class="bg-orange-500 text-white px-4 py-2 rounded text-sm hover:bg-orange-600 font-medium flex-1">
                        Confirmar Levantamiento
                    </button>
                    <button type="button"
                            onclick="document.getElementById('modal-levantar-{{ $medida->id }}').classList.add('hidden')"
                            class="bg-gray-200 text-gray-700 px-4 py-2 rounded text-sm hover:bg-gray-300 flex-1">
                        Cancelar
                    </button>
                </div>
            </form>
        </div>
    </div>
    @empty
    <p class="text-sm text-gray-500 mb-4">No hay medidas cautelares registradas.</p>
    @endforelse

    {{-- FORMULARIO NUEVA MEDIDA --}}
    <div class="border-t pt-4 mt-4">
        <h3 class="font-medium text-gray-700 mb-3">Registrar nueva medida cautelar</h3>
        <form action="{{ route('medidas.store', $proceso) }}" method="POST">
            @csrf
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de medida *</label>
                    <select name="tipo_medida" id="tipo_medida_select"
                            class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"
                            onchange="toggleTipoEmbargo()">
                        <option value="">Seleccione...</option>
                        <option value="EMBARGO">Embargo</option>
                        <option value="INSCRIPCION_DEMANDA">Inscripci&#243;n de la Demanda</option>
                        <option value="SECUESTRO_BIENES">Secuestro de Bienes</option>
                        <option value="INTERVENCION_EMPRESA">Intervenci&#243;n de Empresa</option>
                    </select>
                </div>
                <div id="campo_tipo_embargo" style="display:none">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de embargo</label>
                    <select name="tipo_embargo"
                            class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                        <option value="">Seleccione...</option>
                        <option value="CUENTA_BANCARIA">Cuenta bancaria</option>
                        <option value="SALARIO">Salario</option>
                        <option value="VEHICULO">Veh&#237;culo</option>
                        <option value="BIEN_INMUEBLE">Bien inmueble</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Estado inicial *</label>
                    <select name="estado"
                            class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                        <option value="SOLICITADA">Solicitada</option>
                        <option value="DECRETADA">Decretada</option>
                        <option value="EJECUTADA">Ejecutada</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Monto asegurado ($)</label>
                    <input type="number" name="monto_asegurado" step="0.01" min="0"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"
                           placeholder="0.00">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Entidad notificada</label>
                    <input type="text" name="entidad_destino" maxlength="200"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"
                           placeholder="Ej: Bancolombia, RUNT...">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">N&#250;mero de oficio</label>
                    <input type="text" name="numero_oficio" maxlength="100"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"
                           placeholder="Ej: Oficio 2026-001">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de elaboraci&#243;n</label>
                    <input type="date" name="fecha_elaboracion"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de vencimiento</label>
                    <input type="date" name="fecha_vencimiento"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">URL documento soporte (PDF)</label>
                <input type="text" name="documento_soporte" maxlength="500"
                       class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"
                       placeholder="https://... o ruta al documento">
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Observaciones</label>
                <textarea name="observaciones" rows="2"
                          class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"
                          placeholder="Detalles adicionales de la medida..."></textarea>
            </div>

            <button type="submit"
                    class="bg-red-600 text-white px-6 py-2 rounded hover:bg-red-700 font-medium">
                Registrar Medida Cautelar
            </button>
        </form>
    </div>
</div>
@endif
{{-- ==================== ACUERDOS ==================== --}}
<div class="bg-white rounded shadow p-6">
    <h2 class="text-lg font-bold text-gray-700 mb-4">Acuerdos de pago</h2>
    @forelse($proceso->acuerdos()->orderBy('created_at', 'desc')->get() as $acuerdo)
    <div class="border rounded p-4 mb-4">
        <div class="flex justify-between items-start mb-3">
            <div>
                <span class="font-bold text-lg">
                    ${{ number_format($acuerdo->monto_total_acordado, 0, ',', '.') }}
                </span>
                <span class="text-sm text-gray-500 ml-2">en {{ $acuerdo->numero_cuotas }} cuota(s)</span>
            </div>
            <span class="px-2 py-1 rounded text-xs font-medium
                {{ $acuerdo->estado == 'VIGENTE'  ? 'bg-green-100 text-green-800' :
                   ($acuerdo->estado == 'CUMPLIDO' ? 'bg-blue-100 text-blue-800' :
                   ($acuerdo->estado == 'ROTO'     ? 'bg-red-100 text-red-800' :
                   'bg-yellow-100 text-yellow-800')) }}">
                {{ $acuerdo->estado }}
            </span>
        </div>
        <div class="grid grid-cols-3 gap-2 text-sm text-gray-600 mb-3">
            <span>Descuento: {{ $acuerdo->descuento_aplicado }}%</span>
            <span>Canal: {{ str_replace('_', ' ', $acuerdo->canal_formalizacion) }}</span>
            <span>Primera cuota: {{ \Carbon\Carbon::parse($acuerdo->fecha_primera_cuota)->format('d/m/Y') }}</span>
        </div>
        <table class="w-full text-sm">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-3 py-2 text-left">Cuota</th>
                    <th class="px-3 py-2 text-left">Monto</th>
                    <th class="px-3 py-2 text-left">Vencimiento</th>
                    <th class="px-3 py-2 text-left">Estado</th>
                    <th class="px-3 py-2 text-left">Acci&#243;n</th>
                </tr>
            </thead>
            <tbody>
                @foreach($acuerdo->cuotas()->orderBy('numero_cuota')->get() as $cuota)
                <tr class="border-t">
                    <td class="px-3 py-2"># {{ $cuota->numero_cuota }}</td>
                    <td class="px-3 py-2">${{ number_format($cuota->monto_cuota, 0, ',', '.') }}</td>
                    <td class="px-3 py-2">{{ \Carbon\Carbon::parse($cuota->fecha_vencimiento)->format('d/m/Y') }}</td>
                    <td class="px-3 py-2">
                        <span class="px-2 py-1 rounded text-xs
                            {{ $cuota->estado_cuota == 'PAGADA'  ? 'bg-green-100 text-green-800' :
                               ($cuota->estado_cuota == 'VENCIDA' ? 'bg-red-100 text-red-800' :
                               'bg-gray-100 text-gray-600') }}">
                            {{ $cuota->estado_cuota }}
                        </span>
                    </td>
                    <td class="px-3 py-2">
                        @if($cuota->estado_cuota == 'PENDIENTE')
                            <form action="{{ route('cuotas.confirmar', $cuota) }}" method="POST">
                                @csrf
                                <button type="submit"
                                        onclick="return confirm('&#191;Confirmar pago?')"
                                        class="text-green-600 hover:underline text-xs">
                                    Confirmar pago
                                </button>
                            </form>
                        @elseif($cuota->estado_cuota == 'PAGADA')
                            <span class="text-xs text-gray-400">
                                Pagada {{ \Carbon\Carbon::parse($cuota->fecha_pago_real)->format('d/m/Y') }}
                            </span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @empty
    <p class="text-sm text-gray-500 mb-4">No hay acuerdos registrados a&#250;n.</p>
    @endforelse

    @if(($proceso->estado_prej != 'cerrado_recuperado') && ($proceso->estado_jur != 'cerrado_recuperado'))
    <div class="border-t pt-4 mt-4">
        <h3 class="font-medium text-gray-700 mb-3">Registrar nuevo acuerdo</h3>
        <form action="{{ route('acuerdos.store', $proceso) }}" method="POST">
            @csrf
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Monto total acordado ($) *</label>
                    <input type="number" name="monto_total_acordado" step="0.01" min="1"
                           class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="0.00">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Descuento sobre intereses (%) *</label>
                    <input type="number" name="descuento_aplicado" step="0.01" min="0" max="100" value="0"
                           class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">N&#250;mero de cuotas *</label>
                    <input type="number" name="numero_cuotas" min="1" max="36" value="1"
                           class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Fecha primera cuota *</label>
                    <input type="date" name="fecha_primera_cuota"
                           class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Canal de formalizaci&#243;n *</label>
                <select name="canal_formalizacion"
                        class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Seleccione...</option>
                    <option value="VERBAL_GRABADO">Verbal grabado</option>
                    <option value="ESCRITO_FISICO">Escrito f&#237;sico</option>
                    <option value="FIRMA_DIGITAL">Firma digital</option>
                    <option value="WHATSAPP">WhatsApp</option>
                    <option value="EMAIL">Email</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Observaciones</label>
                <textarea name="observaciones" rows="2"
                          class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder="Condiciones especiales del acuerdo..."></textarea>
            </div>
            <button type="submit"
                    class="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700 font-medium">
                Crear acuerdo de pago
            </button>
        </form>
    </div>
    @endif
</div>
<script>
function toggleTipoEmbargo() {
    const select = document.getElementById('tipo_medida_select');
    const campo  = document.getElementById('campo_tipo_embargo');
    campo.style.display = select.value === 'EMBARGO' ? 'block' : 'none';
}
</script>

@endsection