@extends('layouts.app')

@section('titulo', 'Nuevo Deudor — GestionCob')

@section('contenido')

<div class="max-w-3xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Nuevo Deudor</h1>
        <a href="{{ route('deudores.index') }}"
           class="text-gray-600 hover:underline">&#8592; Volver</a>
    </div>

    @if($errors->any())
        <div class="bg-red-100 text-red-800 px-4 py-3 rounded mb-4">
            <ul>
                @foreach($errors->all() as $error)
                    <li>&#8226; {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('deudores.store') }}" method="POST">
        @csrf

        {{-- ===== BLOQUE 1: DATOS DEL DEUDOR ===== --}}
        <div class="bg-white rounded shadow p-6 mb-6">
            <h2 class="text-lg font-bold text-gray-700 mb-4 pb-2 border-b">
                1. Datos del Deudor
            </h2>

            <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 documento *</label>
                    <select name="tipo_documento"
                            class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Seleccione...</option>
                        <option value="CC"  {{ old('tipo_documento') == 'CC'  ? 'selected' : '' }}>CC &#8212; C&#233;dula de ciudadan&#237;a</option>
                        <option value="NIT" {{ old('tipo_documento') == 'NIT' ? 'selected' : '' }}>NIT</option>
                        <option value="CE"  {{ old('tipo_documento') == 'CE'  ? 'selected' : '' }}>CE &#8212; C&#233;dula extranjer&#237;a</option>
                        <option value="PP"  {{ old('tipo_documento') == 'PP'  ? 'selected' : '' }}>PP &#8212; Pasaporte</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">N&#250;mero de documento *</label>
                    <input type="text" name="numero_documento" maxlength="20"
                           value="{{ old('numero_documento') }}"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Ej: 12345678">
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre completo *</label>
                <input type="text" name="nombre_completo" maxlength="150"
                       value="{{ old('nombre_completo') }}"
                       class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="Nombre y apellidos completos del deudor">
            </div>

            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tel&#233;fono principal</label>
                    <input type="text" name="telefono" maxlength="20"
                           value="{{ old('telefono') }}"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Ej: 3001234567">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tel&#233;fono alternativo</label>
                    <input type="text" name="telefono_alternativo" maxlength="20"
                           value="{{ old('telefono_alternativo') }}"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Ej: 3009876543">
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Correo electr&#243;nico</label>
                <input type="email" name="email" maxlength="100"
                       value="{{ old('email') }}"
                       class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="correo@ejemplo.com">
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Direcci&#243;n de notificaci&#243;n judicial</label>
                <textarea name="direccion_notificacion" rows="2"
                          class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder="Direcci&#243;n completa para notificaciones judiciales">{{ old('direccion_notificacion') }}</textarea>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Ciudad de residencia</label>
                <input type="text" name="ciudad" maxlength="80"
                       value="{{ old('ciudad') }}"
                       class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="Ej: Bogot&#225;">
            </div>

            <div>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="tiene_bienes" value="1"
                           {{ old('tiene_bienes') ? 'checked' : '' }}
                           class="w-4 h-4">
                    <span class="text-sm font-medium text-gray-700">Se identificaron bienes embargables</span>
                </label>
            </div>
        </div>

        {{-- ===== BLOQUE 2: DATOS DEL PROCESO ===== --}}
        <div class="bg-white rounded shadow p-6 mb-6">
            <h2 class="text-lg font-bold text-gray-700 mb-4 pb-2 border-b">
                2. Datos del Proceso
            </h2>

            {{-- Entidad con autocompletado --}}
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Entidad *</label>
                    <select name="entidad_cliente_id" id="entidad_select"
                            class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                            onchange="actualizarIdEntidad()">
                        <option value="">Seleccione una entidad...</option>
                        @foreach($entidades as $entidad)
                            <option value="{{ $entidad->id }}"
                                    data-codigo="{{ $entidad->codigo }}"
                                    {{ old('entidad_cliente_id') == $entidad->id ? 'selected' : '' }}>
                                {{ $entidad->nombre }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">ID de la Entidad</label>
                    <input type="text" id="id_entidad_display"
                           class="w-full border rounded px-3 py-2 text-sm bg-gray-50 text-gray-500"
                           placeholder="Se completa al seleccionar entidad"
                           readonly>
                </div>
            </div>

            {{-- Número de obligación y Ciudad financiera --}}
            <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 obligaci&#243;n</label>
                    <input type="text" name="numero_obligacion" maxlength="80"
                           value="{{ old('numero_obligacion') }}"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Ej: 0001-2024-00123">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Ciudad financiera</label>
                    <input type="text" name="ciudad_financiera" maxlength="80"
                           value="{{ old('ciudad_financiera') }}"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Ej: Bogot&#225;">
                </div>
            </div>

            {{-- Tipo de subproceso --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de Subproceso *</label>
                <div class="flex gap-4">
                    <label class="flex items-center gap-2 cursor-pointer border rounded px-4 py-3 flex-1
                        {{ old('tipo_subproceso') == 'PREJUDICIAL' ? 'border-yellow-400 bg-yellow-50' : 'border-gray-200' }}"
                        id="label_prej">
                        <input type="radio" name="tipo_subproceso" value="PREJUDICIAL"
                               {{ old('tipo_subproceso', 'PREJUDICIAL') == 'PREJUDICIAL' ? 'checked' : '' }}
                               onchange="toggleTipoSubproceso()"
                               class="w-4 h-4 text-yellow-600">
                        <div>
                            <p class="font-medium text-sm text-gray-800">&#9878; Gesti&#243;n Prejur&#237;dica</p>
                            <p class="text-xs text-gray-500">Gesti&#243;n de cobro extrajudicial</p>
                        </div>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer border rounded px-4 py-3 flex-1
                        {{ old('tipo_subproceso') == 'JURIDICO' ? 'border-red-400 bg-red-50' : 'border-gray-200' }}"
                        id="label_jur">
                        <input type="radio" name="tipo_subproceso" value="JURIDICO"
                               {{ old('tipo_subproceso') == 'JURIDICO' ? 'checked' : '' }}
                               onchange="toggleTipoSubproceso()"
                               class="w-4 h-4 text-red-600">
                        <div>
                            <p class="font-medium text-sm text-gray-800">&#9878; Proceso Jur&#237;dico</p>
                            <p class="text-xs text-gray-500">Proceso ante autoridad judicial</p>
                        </div>
                    </label>
                </div>
            </div>

            {{-- Fecha presentación demanda — solo para Jurídico --}}
            <div id="campo_fecha_demanda" class="mb-4" style="display: {{ old('tipo_subproceso') == 'JURIDICO' ? 'block' : 'none' }}">
                <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"
                       value="{{ old('fecha_presentacion_demanda') }}"
                       class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                <p class="text-xs text-gray-400 mt-1">Requerido para procesos jur&#237;dicos</p>
            </div>

            {{-- Datos financieros --}}
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Saldo capital *</label>
                    <input type="number" name="saldo_capital" step="0.01" min="0"
                           value="{{ old('saldo_capital') }}"
                           class="w-full border rounded px-3 py-2 text-sm 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">Intereses</label>
                    <input type="number" name="intereses" step="0.01" min="0"
                           value="{{ old('intereses', 0) }}"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-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">Tipo de producto</label>
                    <select name="tipo_producto"
                            class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Seleccione...</option>
                        <option value="CUPO"        {{ old('tipo_producto') == 'CUPO'        ? 'selected' : '' }}>Cupo de cr&#233;dito</option>
                        <option value="HIPOTECARIO" {{ old('tipo_producto') == 'HIPOTECARIO' ? 'selected' : '' }}>Hipotecario</option>
                        <option value="CONSUMO"     {{ old('tipo_producto') == 'CONSUMO'     ? 'selected' : '' }}>Consumo</option>
                        <option value="TARJETA"     {{ old('tipo_producto') == 'TARJETA'     ? 'selected' : '' }}>Tarjeta de cr&#233;dito</option>
                        <option value="VEHICULO"    {{ old('tipo_producto') == 'VEHICULO'    ? 'selected' : '' }}>Veh&#237;culo</option>
                        <option value="NOMINA"      {{ old('tipo_producto') == 'NOMINA'      ? 'selected' : '' }}>N&#243;mina</option>
                        <option value="OTRO"        {{ old('tipo_producto') == 'OTRO'        ? 'selected' : '' }}>Otro</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">D&#237;as en mora</label>
                    <input type="number" name="dias_mora" min="0"
                           value="{{ old('dias_mora') }}"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Ej: 90">
                </div>
            </div>

            {{-- Asesor asignado --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Asesor asignado *</label>
                <select name="asesor_id"
                        class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Seleccione un asesor...</option>
                    @foreach($asesores as $asesor)
                        <option value="{{ $asesor->id }}"
                                {{ old('asesor_id') == $asesor->id ? 'selected' : '' }}>
                            {{ $asesor->name }} &#8212; {{ $asesor->getRoleNames()->first() ?? 'sin rol' }}
                        </option>
                    @endforeach
                </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 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder="Informaci&#243;n adicional del caso...">{{ old('observaciones') }}</textarea>
            </div>
        {{-- CHECKLIST DE DOCUMENTOS --}}
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-3">Documentos disponibles al ingreso</label>
            <div class="grid grid-cols-2 gap-2 border rounded p-4 bg-gray-50">
                @php
                $docs = [
                    'carta_remisoria'        => 'Carta remisoria',
                    'consulta_infofer'       => 'Consulta Infofer',
                    'autorizacion_carta'     => 'Autorizaci&#243;n y/o carta de 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'   => 'Pantallazos / Soportes de liquidaci&#243;n',
                    'solicitud_servicios'    => 'Solicitud servicios financieros / CRM',
                    'camara_comercio'        => 'C&#225;mara de comercio',
                    'imagen_cedula'          => 'Imagen c&#233;dula',
                    'tarjeta_propiedad'      => 'Imagen tarjeta propiedad veh&#237;culo',
                    'poder'                  => 'Poder',
                    'deceval'                => 'Deceval',
                    'escritura'              => 'Escritura',
                    'estado_cuenta'          => 'Estado de cuenta',
                    'entrega_email'          => 'Forma de entrega: Email',
                    'entrega_fisico'         => 'Forma de entrega: F&#237;sico',
                ];
                @endphp
                @foreach($docs as $key => $label)
                <label class="flex items-center gap-2 cursor-pointer py-1">
                     <input type="checkbox" name="documentos_checklist[]" value="{{ $key }}"
                           {{ is_array(old('documentos_checklist')) && in_array($key, old('documentos_checklist')) ? 'checked' : '' }}
                           class="w-4 h-4 text-blue-600">
                    <span class="text-sm text-gray-700">{!! $label !!}</span>
                </label>
                @endforeach
            </div>
            <p class="text-xs text-gray-400 mt-1">Marque los documentos que est&#225;n disponibles al momento del ingreso.</p>
        </div>
            {{-- Fecha de asignación automática --}}
            <div class="bg-blue-50 border border-blue-200 rounded px-4 py-3 text-sm text-blue-700">
                &#8505; La <strong>Fecha de Alta del Deudor</strong> y el <strong>ID de Radicaci&#243;n</strong> se generar&#225;n autom&#225;ticamente al guardar.
            </div>
        </div>

        <button type="submit"
                class="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700 font-medium text-base">
            Registrar Deudor y Crear Proceso
        </button>

    </form>
</div>

<script>
function actualizarIdEntidad() {
    const select = document.getElementById('entidad_select');
    const opcion = select.options[select.selectedIndex];
    const codigo = opcion.getAttribute('data-codigo') || '';
    document.getElementById('id_entidad_display').value = codigo ? codigo : '';
}

function toggleTipoSubproceso() {
    const radios = document.querySelectorAll('input[name="tipo_subproceso"]');
    const campoDemanda = document.getElementById('campo_fecha_demanda');
    const labelPrej = document.getElementById('label_prej');
    const labelJur  = document.getElementById('label_jur');
    let valor = '';
    radios.forEach(r => { if (r.checked) valor = r.value; });

    campoDemanda.style.display = valor === 'JURIDICO' ? 'block' : 'none';

    if (valor === 'PREJUDICIAL') {
        labelPrej.className = labelPrej.className.replace('border-gray-200', '').replace('border-red-400 bg-red-50', '') + ' border-yellow-400 bg-yellow-50';
        labelJur.className  = 'flex items-center gap-2 cursor-pointer border rounded px-4 py-3 flex-1 border-gray-200';
    } else {
        labelJur.className  = labelJur.className.replace('border-gray-200', '').replace('border-yellow-400 bg-yellow-50', '') + ' border-red-400 bg-red-50';
        labelPrej.className = 'flex items-center gap-2 cursor-pointer border rounded px-4 py-3 flex-1 border-gray-200';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    actualizarIdEntidad();
    toggleTipoSubproceso();
});
</script>

@endsection