<!-- ============================================================ -->
<!-- LETRAS - Registro en lote -->
<!-- ============================================================ -->

<div class="mb-6">
    <a href="<?= BASE_URL ?>?c=letras" class="text-xs text-gray-400 hover:text-primary-400 transition-colors inline-flex items-center gap-1">
        <i class="fas fa-arrow-left"></i> Volver al listado
    </a>
</div>

<!-- Step 1: Datos de la Factura/Grupo -->
<div class="glass-card rounded-2xl p-6 mb-6">
    <h3 class="font-sora font-bold text-white text-lg mb-1">Datos de la Factura</h3>
    <p class="text-xs text-gray-500 mb-6">Ingrese los datos del documento de canje de facturas con letras</p>

    <form id="form-letras" method="POST" action="<?= BASE_URL ?>?c=letras&a=guardar">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-6">
            <!-- Empresa -->
            <div class="lg:col-span-2">
                <label class="block text-xs text-gray-400 mb-1.5 font-medium">Empresa Proveedora *</label>
                <div class="flex gap-2">
                    <select name="empresa_id" id="empresa_id" required class="input-glass flex-1 tom-select">
                        <option value="">-- Seleccionar empresa por RUC o Razón Social --</option>
                        <?php foreach ($empresas as $emp): ?>
                        <option value="<?= $emp['id'] ?>"><?= htmlspecialchars($emp['razon_social']) ?> <?= !empty($emp['ruc']) ? ' - RUC: ' . htmlspecialchars($emp['ruc']) : '' ?></option>
                        <?php endforeach; ?>
                    </select>
                    <button type="button" onclick="crearEmpresaDesdeLetras()" class="btn-glass px-3 py-2.5 rounded-xl text-sm flex items-center" title="Nueva empresa">
                        <i class="fas fa-plus text-primary-400"></i>
                    </button>
                </div>
            </div>

            <!-- Serie -->
            <div>
                <label class="block text-xs text-gray-400 mb-1.5 font-medium">Serie</label>
                <input type="text" name="serie" value="001" class="input-glass w-full" placeholder="001">
            </div>

            <!-- Documento SUNAT -->
            <div>
                <label class="block text-xs text-gray-400 mb-1.5 font-medium">Documento SUNAT</label>
                <input type="text" name="documento_sunat" class="input-glass w-full" placeholder="000000000012884">
            </div>

            <!-- Fecha Emisión Factura -->
            <div>
                <label class="block text-xs text-gray-400 mb-1.5 font-medium">Fecha Emisión Factura</label>
                <input type="date" name="fecha_emision_factura" class="input-glass w-full" value="<?= date('Y-m-d') ?>">
            </div>

            <!-- Fecha Emisión Letras (Base) -->
            <div>
                <label class="block text-xs text-gray-400 mb-1.5 font-medium">Fecha Emisión Letras *</label>
                <input type="date" id="fecha_emision_letras_global" class="input-glass w-full" value="<?= date('Y-m-d') ?>">
                <p class="text-[10px] text-gray-500 mt-1">Base para calcular vencimientos</p>
            </div>

            <!-- Moneda -->
            <div>
                <label class="block text-xs text-gray-400 mb-1.5 font-medium">Moneda</label>
                <select name="moneda" id="moneda_grupo" class="input-glass w-full">
                    <option value="USD">USD - Dólares</option>
                    <option value="PEN">PEN - Soles</option>
                </select>
            </div>

            <!-- Importe Factura -->
            <div>
                <label class="block text-xs text-gray-400 mb-1.5 font-medium">Importe Factura</label>
                <input type="number" step="0.01" name="importe_factura" class="input-glass w-full" placeholder="0.00">
            </div>

            <!-- Cantidad de Letras -->
            <div>
                <label class="block text-xs text-gray-400 mb-1.5 font-medium">Cantidad de Letras *</label>
                <div class="flex gap-2">
                    <input type="number" id="cantidad_letras_input" min="1" max="50" value="1" class="input-glass flex-1" placeholder="Ej: 13">
                    <button type="button" onclick="generarFilasLetras()" class="btn-primary px-4 py-2.5 rounded-xl text-sm font-semibold whitespace-nowrap">
                        <i class="fas fa-table mr-1"></i> Generar
                    </button>
                </div>
            </div>
        </div>

        <!-- Observaciones del grupo -->
        <div class="mb-6">
            <label class="block text-xs text-gray-400 mb-1.5 font-medium">Observaciones</label>
            <input type="text" name="observaciones_grupo" class="input-glass w-full" placeholder="Observaciones generales del lote...">
        </div>

        <input type="hidden" name="cantidad_letras" id="cantidad_letras_hidden" value="0">

        <!-- Step 2: Tabla de Letras (dinámica) -->
        <div id="letras-container" class="hidden">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="font-sora font-bold text-white text-lg mb-1">Detalle de Letras</h3>
                    <p class="text-xs text-gray-500">Complete los datos de cada letra. Los campos con * son obligatorios.</p>
                </div>
                <div class="text-right">
                    <p class="text-xs text-gray-400">Total calculado:</p>
                    <p class="font-sora font-bold text-white text-xl" id="total-letras">$0.00</p>
                </div>
            </div>

            <div class="overflow-x-auto rounded-xl border border-white/5">
                <table class="w-full text-sm" id="tabla-letras-crear">
                    <thead>
                        <tr class="bg-white/3 border-b border-white/5">
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase w-8">#</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase">Nº Letra *</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase w-16">Renov.</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase w-20">Tipo</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase w-20">Moneda</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase">Emisión *</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase w-16">Plazo</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase">Vencimiento *</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase">F. Pago (+8d)</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase">Importe *</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase">Banco</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase">Ref. Única</th>
                            <th class="px-3 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase">Obs.</th>
                            <th class="px-3 py-2.5 text-center text-[10px] font-semibold text-gray-400 uppercase w-10">Acc.</th>
                        </tr>
                    </thead>
                    <tbody id="letras-tbody">
                        <!-- Filas generadas dinámicamente por JS -->
                    </tbody>
                </table>
            </div>

            <!-- Submit -->
            <div class="flex items-center justify-end gap-3 mt-6">
                <a href="<?= BASE_URL ?>?c=letras" class="px-6 py-2.5 rounded-xl text-sm font-medium text-gray-400 hover:text-white border border-white/10 hover:border-white/20 transition-colors">
                    Cancelar
                </a>
                <button type="submit" class="btn-primary px-8 py-2.5 rounded-xl text-sm font-bold inline-flex items-center gap-2">
                    <i class="fas fa-save"></i> Guardar Letras
                </button>
            </div>
        </div>
    </form>
</div>
