<!-- ============================================================ -->
<!-- RENOVAR LETRA -->
<!-- ============================================================ -->

<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
    <a href="<?= BASE_URL ?>?c=letras" class="p-2 rounded-xl bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors">
        <i class="fas fa-arrow-left"></i>
    </a>
    <div>
        <h3 class="font-sora font-bold text-white text-lg">Renovar Letra</h3>
        <p class="text-xs text-gray-500 mt-1">Generar una nueva letra con el saldo restante</p>
    </div>
</div>

<div class="glass-card rounded-2xl p-6 max-w-2xl mx-auto">
    <form method="POST" action="<?= BASE_URL ?>?c=letras&a=guardarRenovacion">
        <input type="hidden" name="id" value="<?= $letra['id'] ?>">

        <!-- Info Original -->
        <div class="mb-6 bg-white/5 rounded-xl p-4 border border-white/10">
            <h4 class="text-sm font-semibold text-white mb-3 flex items-center gap-2">
                <i class="fas fa-file-invoice text-primary-400"></i> Datos de la Letra Original
            </h4>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
                <div>
                    <span class="block text-xs text-gray-500">Nº Letra</span>
                    <span class="font-mono text-white"><?= htmlspecialchars($letra['numero_letra']) ?></span>
                </div>
                <div>
                    <span class="block text-xs text-gray-500">Empresa</span>
                    <span class="font-medium text-white truncate block w-full" title="<?= htmlspecialchars($letra['razon_social']) ?>"><?= htmlspecialchars($letra['razon_social']) ?></span>
                </div>
                <div>
                    <span class="block text-xs text-gray-500">Moneda</span>
                    <span class="text-white"><?= $letra['moneda'] ?></span>
                </div>
                <div>
                    <span class="block text-xs text-gray-500">Importe Original</span>
                    <span class="font-bold text-white"><?= $letra['moneda'] === 'USD' ? '$' : 'S/' ?><?= number_format($letra['importe'], 2) ?></span>
                    <input type="hidden" id="importe_original" value="<?= $letra['importe'] ?>">
                    <input type="hidden" id="moneda_simbolo" value="<?= $letra['moneda'] === 'USD' ? '$' : 'S/' ?>">
                </div>
            </div>
        </div>

        <!-- Opciones de Renovación -->
        <h4 class="text-sm font-semibold text-white mb-4 border-b border-white/10 pb-2">Opciones de Renovación</h4>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
            <!-- Porcentaje de Abono -->
            <div>
                <label class="block text-sm text-gray-400 mb-2 font-medium">Porcentaje a Abonar (%)</label>
                <div class="relative">
                    <input type="number" name="porcentaje_abono" id="porcentaje_abono" value="50" min="0" max="99" step="1" required class="input-glass w-full pl-10" oninput="calcularNuevoImporte()">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-percent text-gray-500 text-xs"></i>
                    </div>
                </div>
                <p class="text-[10px] text-gray-500 mt-1.5">Monto abonado hoy: <span id="monto_abonado" class="font-bold text-emerald-400">...</span></p>
            </div>

            <!-- Nuevo Plazo -->
            <div>
                <label class="block text-sm text-gray-400 mb-2 font-medium">Nuevo Plazo (Días)</label>
                <div class="relative">
                    <select name="nuevo_plazo" required class="input-glass w-full pl-10 appearance-none">
                        <option value="7">7 Días</option>
                        <option value="15">15 Días</option>
                        <option value="30" selected>30 Días</option>
                        <option value="45">45 Días</option>
                        <option value="60">60 Días</option>
                    </select>
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-calendar-alt text-gray-500 text-xs"></i>
                    </div>
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                        <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
                    </div>
                </div>
                <p class="text-[10px] text-gray-500 mt-1.5">A partir de la fecha de hoy.</p>
            </div>
        </div>

        <!-- Resumen Nueva Letra -->
        <div class="bg-primary-500/10 border border-primary-500/20 rounded-xl p-5 text-center mb-6">
            <p class="text-sm text-gray-400 mb-1">Importe de la Nueva Letra</p>
            <p class="text-3xl font-bold text-primary-400 font-sora" id="nuevo_importe">...</p>
            <p class="text-xs text-gray-500 mt-2">Este será el saldo por cobrar en el nuevo plazo seleccionado.</p>
        </div>

        <!-- Acciones -->
        <div class="flex justify-end gap-3 pt-4 border-t border-white/5">
            <a href="<?= BASE_URL ?>?c=letras" class="btn-glass px-5 py-2.5 rounded-xl text-sm font-medium">Cancelar</a>
            <button type="submit" class="btn-primary px-6 py-2.5 rounded-xl text-sm font-semibold flex items-center gap-2">
                <i class="fas fa-sync-alt"></i> Procesar Renovación
            </button>
        </div>
    </form>
</div>

<script>
    function calcularNuevoImporte() {
        const importeOriginal = parseFloat(document.getElementById('importe_original').value) || 0;
        const porcentaje = parseFloat(document.getElementById('porcentaje_abono').value) || 0;
        const simbolo = document.getElementById('moneda_simbolo').value;

        if (porcentaje >= 0 && porcentaje < 100) {
            const abonado = (importeOriginal * porcentaje) / 100;
            const nuevo = importeOriginal - abonado;
            
            document.getElementById('monto_abonado').textContent = simbolo + abonado.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
            document.getElementById('nuevo_importe').textContent = simbolo + nuevo.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        } else {
            document.getElementById('monto_abonado').textContent = '-';
            document.getElementById('nuevo_importe').textContent = '-';
        }
    }

    document.addEventListener('DOMContentLoaded', calcularNuevoImporte);
</script>
