@extends('layouts.app')

@section('title', 'Nuevo Préstamo')

@section('content')
<div class="mb-3">
    <a href="{{ route('prestamos.index') }}" class="btn btn-sm btn-outline-light">
        <i class="bi bi-arrow-left"></i> Volver
    </a>
</div>

<h1 class="section-title">
    <i class="bi bi-plus-circle"></i> Nuevo Préstamo
</h1>

<form action="{{ route('prestamos.store') }}" method="POST" enctype="multipart/form-data" id="prestamoForm">
    @csrf

    <div class="card-custom mb-3">
        <div class="card-header-custom">
            <i class="bi bi-calculator"></i> Datos del Préstamo
        </div>
        <div class="card-body p-3 p-md-4">
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label-custom">Fecha de Entrega</label>
                    <input type="date" name="fecha_entrega" class="form-control form-control-custom @error('fecha_entrega') is-invalid @enderror" value="{{ old('fecha_entrega', date('Y-m-d')) }}" required>
                    @error('fecha_entrega')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label-custom">Monto del Crédito</label>
                    <div class="input-group">
                        <span class="input-group-text" style="border-radius: 12px 0 0 12px;">$</span>
                        <input type="text" id="montoCredito" class="form-control form-control-custom @error('monto_credito') is-invalid @enderror" value="{{ old('monto_credito') }}" required style="border-radius: 0 12px 12px 0;" autocomplete="off">
                        <input type="hidden" name="monto_credito" id="montoCreditoRaw">
                        @error('monto_credito')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <small class="text-muted">Mínimo: $200,000</small>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label-custom">Modalidad de Pago</label>
                    <select name="modalidad_pago" class="form-select form-control-custom @error('modalidad_pago') is-invalid @enderror" required id="modalidad">
                        <option value="">Seleccione...</option>
                        <option value="semanal" {{ old('modalidad_pago') == 'semanal' ? 'selected' : '' }}>Semanal</option>
                        <option value="quincenal" {{ old('modalidad_pago') == 'quincenal' ? 'selected' : '' }}>Quincenal</option>
                        <option value="mensual" {{ old('modalidad_pago') == 'mensual' ? 'selected' : '' }}>Mensual</option>
                    </select>
                    @error('modalidad_pago')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label-custom">Número de Cuotas</label>
                    <input type="number" name="numero_cuotas" class="form-control form-control-custom @error('numero_cuotas') is-invalid @enderror" min="1" value="{{ old('numero_cuotas') }}" required id="numeroCuotas">
                    @error('numero_cuotas')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12">
                    <div id="calculoPreview" style="display: none; margin-top: 1.5rem;">
                        <div style="background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%); border-radius: 15px; padding: 1rem; margin-bottom: 1rem;">
                            <div class="row g-2 text-center">
                                <div class="col-6 col-md-3">
                                    <div style="color: #065f46; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem;">Tasa de Interés</div>
                                    <div id="tasaInteres" style="color: #064e3b; font-size: 1.25rem; font-weight: 700;">0%</div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div style="color: #065f46; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem;">Interés Total</div>
                                    <div id="totalInteres" style="color: #064e3b; font-size: 1.25rem; font-weight: 700;">$0</div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div style="color: #065f46; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem;">Total a Pagar</div>
                                    <div id="totalPagar" style="color: #064e3b; font-size: 1.25rem; font-weight: 700;">$0</div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div style="color: #065f46; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem;">Valor Cuota</div>
                                    <div id="valorCuota" style="color: #064e3b; font-size: 1.25rem; font-weight: 700;">$0</div>
                                </div>
                            </div>
                        </div>

                        <div class="card-custom">
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead style="background-color: #f9fafb;">
                                            <tr>
                                                <th class="p-3" style="font-weight: 600;">Cuota</th>
                                                <th class="p-3" style="font-weight: 600;">Fecha de Pago</th>
                                                <th class="p-3 text-center" style="font-weight: 600;">% Pagado</th>
                                                <th class="p-3 text-end" style="font-weight: 600;">Monto</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tablaCuotas">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="fechas_cuotas" id="fechasCuotasInput">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <!-- Datos del Cliente -->
        <div class="col-12 col-lg-6">
            <div class="card-custom h-100">
                <div class="card-header-custom">
                    <i class="bi bi-person-fill"></i> Datos del Cliente
                </div>
                <div class="card-body p-3 p-md-4">
                    <div class="row g-2 g-md-3">
                        <div class="col-6">
                            <label class="form-label-custom">Nombre Completo</label>
                            <input type="text" name="cliente_nombre_completo" class="form-control form-control-custom @error('cliente_nombre_completo') is-invalid @enderror" value="{{ old('cliente_nombre_completo') }}" required>
                            @error('cliente_nombre_completo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Cédula</label>
                            <input type="text" name="cliente_cedula" class="form-control form-control-custom @error('cliente_cedula') is-invalid @enderror" value="{{ old('cliente_cedula') }}" required>
                            @error('cliente_cedula')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Ciudad/Residencia</label>
                            <input type="text" name="cliente_ciudad" class="form-control form-control-custom @error('cliente_ciudad') is-invalid @enderror" value="{{ old('cliente_ciudad') }}" required>
                            @error('cliente_ciudad')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Celular</label>
                            <input type="tel" name="cliente_celular" class="form-control form-control-custom @error('cliente_celular') is-invalid @enderror" value="{{ old('cliente_celular') }}" required>
                            @error('cliente_celular')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Correo Electrónico</label>
                            <input type="email" name="cliente_email" class="form-control form-control-custom @error('cliente_email') is-invalid @enderror" value="{{ old('cliente_email') }}">
                            @error('cliente_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Referencia Personal</label>
                            <input type="text" name="cliente_referencia_personal" class="form-control form-control-custom @error('cliente_referencia_personal') is-invalid @enderror" value="{{ old('cliente_referencia_personal') }}">
                            @error('cliente_referencia_personal')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label-custom">Dirección de Residencia</label>
                            <textarea name="cliente_direccion_residencia" class="form-control form-control-custom @error('cliente_direccion_residencia') is-invalid @enderror" rows="2">{{ old('cliente_direccion_residencia') }}</textarea>
                            @error('cliente_direccion_residencia')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label-custom">Dirección de Trabajo</label>
                            <textarea name="cliente_direccion_trabajo" class="form-control form-control-custom @error('cliente_direccion_trabajo') is-invalid @enderror" rows="2">{{ old('cliente_direccion_trabajo') }}</textarea>
                            @error('cliente_direccion_trabajo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label-custom">Foto de Cédula</label>
                            <input type="file" name="cliente_foto_cedula" class="form-control form-control-custom @error('cliente_foto_cedula') is-invalid @enderror" accept="image/*">
                            @error('cliente_foto_cedula')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Datos del Codeudor -->
        <div class="col-12 col-lg-6">
            <div class="card-custom h-100">
                <div class="card-header-custom">
                    <i class="bi bi-person-plus-fill"></i> Datos del Codeudor
                </div>
                <div class="card-body p-3 p-md-4">
                    <div class="row g-2 g-md-3">
                        <div class="col-6">
                            <label class="form-label-custom">Nombre Completo</label>
                            <input type="text" name="codeudor_nombre_completo" class="form-control form-control-custom @error('codeudor_nombre_completo') is-invalid @enderror" value="{{ old('codeudor_nombre_completo') }}" required>
                            @error('codeudor_nombre_completo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Cédula</label>
                            <input type="text" name="codeudor_cedula" class="form-control form-control-custom @error('codeudor_cedula') is-invalid @enderror" value="{{ old('codeudor_cedula') }}" required>
                            @error('codeudor_cedula')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Ciudad/Residencia</label>
                            <input type="text" name="codeudor_ciudad" class="form-control form-control-custom @error('codeudor_ciudad') is-invalid @enderror" value="{{ old('codeudor_ciudad') }}" required>
                            @error('codeudor_ciudad')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Celular</label>
                            <input type="tel" name="codeudor_celular" class="form-control form-control-custom @error('codeudor_celular') is-invalid @enderror" value="{{ old('codeudor_celular') }}" required>
                            @error('codeudor_celular')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Correo Electrónico</label>
                            <input type="email" name="codeudor_email" class="form-control form-control-custom @error('codeudor_email') is-invalid @enderror" value="{{ old('codeudor_email') }}">
                            @error('codeudor_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label-custom">Referencia Personal</label>
                            <input type="text" name="codeudor_referencia_personal" class="form-control form-control-custom @error('codeudor_referencia_personal') is-invalid @enderror" value="{{ old('codeudor_referencia_personal') }}">
                            @error('codeudor_referencia_personal')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label-custom">Dirección de Residencia</label>
                            <textarea name="codeudor_direccion_residencia" class="form-control form-control-custom @error('codeudor_direccion_residencia') is-invalid @enderror" rows="2">{{ old('codeudor_direccion_residencia') }}</textarea>
                            @error('codeudor_direccion_residencia')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label-custom">Dirección de Trabajo</label>
                            <textarea name="codeudor_direccion_trabajo" class="form-control form-control-custom @error('codeudor_direccion_trabajo') is-invalid @enderror" rows="2">{{ old('codeudor_direccion_trabajo') }}</textarea>
                            @error('codeudor_direccion_trabajo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label-custom">Foto de Cédula</label>
                            <input type="file" name="codeudor_foto_cedula" class="form-control form-control-custom @error('codeudor_foto_cedula') is-invalid @enderror" accept="image/*">
                            @error('codeudor_foto_cedula')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-grid gap-2 mb-4">
        <button type="submit" class="btn btn-primary-custom btn-lg">
            <i class="bi bi-check-circle"></i> Crear Préstamo
        </button>
        <a href="{{ route('prestamos.index') }}" class="btn btn-outline-light">
            <i class="bi bi-x-circle"></i> Cancelar
        </a>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modalidadInput = document.getElementById('modalidad');
    const numeroCuotasInput = document.getElementById('numeroCuotas');
    const montoInput = document.getElementById('montoCredito');
    const montoRawInput = document.getElementById('montoCreditoRaw');
    const fechaEntregaInput = document.querySelector('input[name="fecha_entrega"]');
    const calculoPreview = document.getElementById('calculoPreview');
    const tablaCuotas = document.getElementById('tablaCuotas');
    const form = document.getElementById('prestamoForm');

    // Función para formatear número con puntos
    function formatearNumero(numero) {
        return numero.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    // Función para limpiar el formato y obtener solo números
    function limpiarNumero(valor) {
        return valor.replace(/\./g, '');
    }

    // Formatear el campo de monto mientras escribe
    montoInput.addEventListener('input', function(e) {
        let valor = limpiarNumero(e.target.value);

        // Solo permitir números
        if (!/^\d*$/.test(valor)) {
            valor = valor.replace(/\D/g, '');
        }

        // Guardar el valor sin formato en el hidden input
        montoRawInput.value = valor;

        // Formatear y mostrar
        if (valor) {
            e.target.value = formatearNumero(valor);
        }
    });

    // Al cargar, formatear el valor inicial si existe
    if (montoInput.value) {
        const valorLimpio = limpiarNumero(montoInput.value);
        montoRawInput.value = valorLimpio;
        montoInput.value = formatearNumero(valorLimpio);
    }

    // Función para guardar datos en localStorage
    function guardarEnLocalStorage() {
        const formData = {
            fecha_entrega: fechaEntregaInput.value,
            monto_credito: montoRawInput.value,
            modalidad_pago: modalidadInput.value,
            numero_cuotas: numeroCuotasInput.value,
            cliente_nombre_completo: document.querySelector('input[name="cliente_nombre_completo"]')?.value || '',
            cliente_cedula: document.querySelector('input[name="cliente_cedula"]')?.value || '',
            cliente_ciudad: document.querySelector('input[name="cliente_ciudad"]')?.value || '',
            cliente_celular: document.querySelector('input[name="cliente_celular"]')?.value || '',
            cliente_referencia_personal: document.querySelector('input[name="cliente_referencia_personal"]')?.value || '',
            cliente_email: document.querySelector('input[name="cliente_email"]')?.value || '',
            cliente_direccion_residencia: document.querySelector('textarea[name="cliente_direccion_residencia"]')?.value || '',
            cliente_direccion_trabajo: document.querySelector('textarea[name="cliente_direccion_trabajo"]')?.value || '',
            codeudor_nombre_completo: document.querySelector('input[name="codeudor_nombre_completo"]')?.value || '',
            codeudor_cedula: document.querySelector('input[name="codeudor_cedula"]')?.value || '',
            codeudor_ciudad: document.querySelector('input[name="codeudor_ciudad"]')?.value || '',
            codeudor_celular: document.querySelector('input[name="codeudor_celular"]')?.value || '',
            codeudor_referencia_personal: document.querySelector('input[name="codeudor_referencia_personal"]')?.value || '',
            codeudor_email: document.querySelector('input[name="codeudor_email"]')?.value || '',
            codeudor_direccion_residencia: document.querySelector('textarea[name="codeudor_direccion_residencia"]')?.value || '',
            codeudor_direccion_trabajo: document.querySelector('textarea[name="codeudor_direccion_trabajo"]')?.value || ''
        };
        localStorage.setItem('prestamo_form_data', JSON.stringify(formData));
    }

    // Función para cargar datos desde localStorage
    function cargarDesdeLocalStorage() {
        const savedData = localStorage.getItem('prestamo_form_data');
        if (savedData) {
            const formData = JSON.parse(savedData);

            fechaEntregaInput.value = formData.fecha_entrega || '';

            const montoGuardado = formData.monto_credito || '';
            montoRawInput.value = montoGuardado;
            montoInput.value = montoGuardado ? formatearNumero(montoGuardado) : '';

            modalidadInput.value = formData.modalidad_pago || '';
            numeroCuotasInput.value = formData.numero_cuotas || '';

            if (document.querySelector('input[name="cliente_nombre_completo"]'))
                document.querySelector('input[name="cliente_nombre_completo"]').value = formData.cliente_nombre_completo || '';
            if (document.querySelector('input[name="cliente_cedula"]'))
                document.querySelector('input[name="cliente_cedula"]').value = formData.cliente_cedula || '';
            if (document.querySelector('input[name="cliente_ciudad"]'))
                document.querySelector('input[name="cliente_ciudad"]').value = formData.cliente_ciudad || '';
            if (document.querySelector('input[name="cliente_celular"]'))
                document.querySelector('input[name="cliente_celular"]').value = formData.cliente_celular || '';
            if (document.querySelector('input[name="cliente_referencia_personal"]'))
                document.querySelector('input[name="cliente_referencia_personal"]').value = formData.cliente_referencia_personal || '';
            if (document.querySelector('input[name="cliente_email"]'))
                document.querySelector('input[name="cliente_email"]').value = formData.cliente_email || '';
            if (document.querySelector('textarea[name="cliente_direccion_residencia"]'))
                document.querySelector('textarea[name="cliente_direccion_residencia"]').value = formData.cliente_direccion_residencia || '';
            if (document.querySelector('textarea[name="cliente_direccion_trabajo"]'))
                document.querySelector('textarea[name="cliente_direccion_trabajo"]').value = formData.cliente_direccion_trabajo || '';

            if (document.querySelector('input[name="codeudor_nombre_completo"]'))
                document.querySelector('input[name="codeudor_nombre_completo"]').value = formData.codeudor_nombre_completo || '';
            if (document.querySelector('input[name="codeudor_cedula"]'))
                document.querySelector('input[name="codeudor_cedula"]').value = formData.codeudor_cedula || '';
            if (document.querySelector('input[name="codeudor_ciudad"]'))
                document.querySelector('input[name="codeudor_ciudad"]').value = formData.codeudor_ciudad || '';
            if (document.querySelector('input[name="codeudor_celular"]'))
                document.querySelector('input[name="codeudor_celular"]').value = formData.codeudor_celular || '';
            if (document.querySelector('input[name="codeudor_referencia_personal"]'))
                document.querySelector('input[name="codeudor_referencia_personal"]').value = formData.codeudor_referencia_personal || '';
            if (document.querySelector('input[name="codeudor_email"]'))
                document.querySelector('input[name="codeudor_email"]').value = formData.codeudor_email || '';
            if (document.querySelector('textarea[name="codeudor_direccion_residencia"]'))
                document.querySelector('textarea[name="codeudor_direccion_residencia"]').value = formData.codeudor_direccion_residencia || '';
            if (document.querySelector('textarea[name="codeudor_direccion_trabajo"]'))
                document.querySelector('textarea[name="codeudor_direccion_trabajo"]').value = formData.codeudor_direccion_trabajo || '';

            // Recalcular después de cargar los datos
            calcularInteres();
        }
    }

    // Cargar datos guardados al iniciar
    cargarDesdeLocalStorage();

    // Agregar event listeners a todos los campos del formulario
    const formInputs = form.querySelectorAll('input, select, textarea');
    formInputs.forEach(input => {
        if (input.type !== 'file') { // No guardar inputs de tipo file
            input.addEventListener('input', guardarEnLocalStorage);
            input.addEventListener('change', guardarEnLocalStorage);
        }
    });

    function calcularFechaPago(fechaBase, modalidad, numeroCuota) {
        const fecha = new Date(fechaBase);

        switch(modalidad) {
            case 'semanal':
                fecha.setDate(fecha.getDate() + (numeroCuota * 7));
                break;
            case 'quincenal':
                fecha.setDate(fecha.getDate() + (numeroCuota * 15));
                break;
            case 'mensual':
                fecha.setMonth(fecha.getMonth() + numeroCuota);
                break;
        }

        return fecha;
    }

    function formatearFecha(fecha) {
        const meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
                      'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];
        const dia = fecha.getDate().toString().padStart(2, '0');
        const mes = meses[fecha.getMonth()];
        return `${dia}/${mes}`;
    }

    function calcularInteres() {
        const modalidad = modalidadInput.value;
        const numeroCuotas = parseInt(numeroCuotasInput.value);
        const monto = parseFloat(montoRawInput.value || 0);
        const fechaEntrega = fechaEntregaInput.value;

        if (!modalidad || !numeroCuotas || !monto || monto < 200000 || !fechaEntrega) {
            calculoPreview.style.display = 'none';
            return;
        }

        let mesesCompletos = 0;
        let fraccion = false;

        switch(modalidad) {
            case 'semanal':
                mesesCompletos = Math.floor(numeroCuotas / 4);
                fraccion = (numeroCuotas % 4) > 0;
                break;
            case 'quincenal':
                mesesCompletos = Math.floor(numeroCuotas / 2);
                fraccion = (numeroCuotas % 2) > 0;
                break;
            case 'mensual':
                mesesCompletos = numeroCuotas;
                break;
        }

        const tasaInteres = (mesesCompletos * 20) + (fraccion ? 10 : 0);
        const totalInteres = monto * (tasaInteres / 100);
        const totalPagar = monto + totalInteres;
        const valorCuota = totalPagar / numeroCuotas;

        document.getElementById('tasaInteres').textContent = tasaInteres + '%';
        document.getElementById('totalInteres').textContent = '$' + totalInteres.toLocaleString('es-CO', { maximumFractionDigits: 0 });
        document.getElementById('totalPagar').textContent = '$' + totalPagar.toLocaleString('es-CO', { maximumFractionDigits: 0 });
        document.getElementById('valorCuota').textContent = '$' + valorCuota.toLocaleString('es-CO', { maximumFractionDigits: 0 });

        // Generar tabla de cuotas
        tablaCuotas.innerHTML = '';
        const fechaBase = new Date(fechaEntrega);

        for (let i = 1; i <= numeroCuotas; i++) {
            const fechaPago = calcularFechaPago(fechaBase, modalidad, i);
            const row = document.createElement('tr');

            const modalidadTexto = modalidad === 'semanal' ? 'semana' :
                                  modalidad === 'quincenal' ? 'quincena' : 'mes';

            const fechaFormatted = fechaPago.toISOString().split('T')[0];

            // Calcular porcentaje de interés aplicado según regla de negocio
            let porcentajeInteres = 0;
            let esFraccion = false;

            switch(modalidad) {
                case 'semanal':
                    // Cada 4 semanas = 1 mes completo (20%)
                    const mesActualSemanal = Math.floor(i / 4);
                    const restoSemanal = i % 4;

                    if (restoSemanal === 0 || (mesActualSemanal < Math.floor(numeroCuotas / 4))) {
                        porcentajeInteres = 20;
                    } else {
                        porcentajeInteres = 10;
                        esFraccion = true;
                    }
                    break;

                case 'quincenal':
                    // Cada 2 quincenas = 1 mes completo (20%)
                    const mesActualQuincenal = Math.floor(i / 2);
                    const restoQuincenal = i % 2;

                    if (restoQuincenal === 0 || (mesActualQuincenal < Math.floor(numeroCuotas / 2))) {
                        porcentajeInteres = 20;
                    } else {
                        porcentajeInteres = 10;
                        esFraccion = true;
                    }
                    break;

                case 'mensual':
                    // Cada cuota = 1 mes completo (20%)
                    porcentajeInteres = 20;
                    break;
            }

            const badgeColor = esFraccion ?
                'background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);' :
                'background: linear-gradient(135deg, #10b981 0%, #059669 100%);';

            row.innerHTML = `
                <td class="p-3">
                    <span class="fw-bold">${i} ${modalidadTexto}</span>
                </td>
                <td class="p-3">
                    <input type="date"
                           class="form-control form-control-sm fecha-cuota"
                           value="${fechaFormatted}"
                           data-cuota="${i}"
                           style="max-width: 180px; border-radius: 8px; border: 2px solid #e5e7eb;">
                </td>
                <td class="p-3 text-center">
                    <span class="badge" style="${badgeColor} font-size: 0.85rem;">
                        ${porcentajeInteres}%
                    </span>
                </td>
                <td class="p-3 text-end fw-bold" style="color: #d4af37;">
                    $${Math.round(valorCuota).toLocaleString('es-CO')}
                </td>
            `;

            tablaCuotas.appendChild(row);
        }

        calculoPreview.style.display = 'block';
    }

    // Capturar fechas antes de enviar el formulario
    form.addEventListener('submit', function(e) {
        const fechasCuotas = [];
        document.querySelectorAll('.fecha-cuota').forEach(input => {
            fechasCuotas.push({
                numero_cuota: input.dataset.cuota,
                fecha: input.value
            });
        });
        document.getElementById('fechasCuotasInput').value = JSON.stringify(fechasCuotas);

        // Limpiar localStorage al enviar el formulario
        localStorage.removeItem('prestamo_form_data');
    });

    modalidadInput.addEventListener('change', calcularInteres);
    numeroCuotasInput.addEventListener('input', calcularInteres);
    montoInput.addEventListener('input', calcularInteres);
    fechaEntregaInput.addEventListener('change', calcularInteres);
});
</script>
@endpush