<!-- ============================================================ -->
<!-- EMPRESAS - Listado con DataTables -->
<!-- ============================================================ -->

<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
    <div>
        <h3 class="font-sora font-bold text-white text-lg">Empresas Proveedoras</h3>
        <p class="text-xs text-gray-500 mt-1">Gestiona las empresas que emiten letras a JW DIESEL</p>
    </div>
    <button type="button" onclick="abrirModalNuevaEmpresa()" class="btn-primary px-5 py-2.5 rounded-xl text-sm font-semibold inline-flex items-center gap-2">
        <i class="fas fa-plus"></i> Nueva Empresa
    </button>
</div>

<div class="glass-card rounded-2xl overflow-hidden">
    <div class="p-6 overflow-x-auto">
        <table id="tabla-empresas" class="w-full min-w-max text-sm dt-dark-theme" style="width:100%">
            <thead>
                <tr class="border-b border-white/10">
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Empresa</th>
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">RUC</th>
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider hidden lg:table-cell">Dirección</th>
                    <th class="px-3 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider hidden md:table-cell">Contacto</th>
                    <th class="px-3 py-3 text-center text-xs font-semibold text-gray-400 uppercase tracking-wider">Letras Pend.</th>
                    <th class="px-3 py-3 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Monto Pend.</th>
                    <th class="px-3 py-3 text-center text-xs font-semibold text-gray-400 uppercase tracking-wider">Estado</th>
                    <th class="px-3 py-3 text-center text-xs font-semibold text-gray-400 uppercase tracking-wider">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                <?php foreach ($empresas as $emp): 
                    $isActive = (int)$emp['estado'] === 1;
                    $letrasPend = (int)($emp['letras_pendientes'] ?? 0);
                    $montoPend  = (float)($emp['monto_pendiente'] ?? 0);
                    $totalLetras = (int)($emp['total_letras'] ?? 0);
                ?>
                <tr class="hover:bg-white/3 transition-colors <?= !$isActive ? 'opacity-50' : '' ?>" id="row-empresa-<?= $emp['id'] ?>">
                    <td class="px-3 py-3">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-primary-600/20 to-violet-600/20 flex items-center justify-center border border-primary-500/10 flex-shrink-0">
                                <span class="font-sora font-bold text-primary-400 text-xs"><?= strtoupper(substr($emp['razon_social'], 0, 2)) ?></span>
                            </div>
                            <div class="min-w-0">
                                <p class="text-white font-semibold text-xs truncate max-w-[200px]"><?= htmlspecialchars($emp['razon_social']) ?></p>
                                <?php if ($totalLetras > 0): ?>
                                <p class="text-[10px] text-gray-500"><?= $totalLetras ?> letra(s) total</p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </td>
                    <td class="px-3 py-3 text-gray-300 font-mono text-xs"><?= htmlspecialchars($emp['ruc'] ?? '-') ?></td>
                    <td class="px-3 py-3 text-gray-400 text-xs truncate max-w-[150px] hidden lg:table-cell"><?= htmlspecialchars($emp['direccion'] ?? '-') ?></td>
                    <td class="px-3 py-3 hidden md:table-cell">
                        <div>
                            <p class="text-gray-300 text-xs truncate max-w-[120px]"><?= htmlspecialchars($emp['contacto'] ?? '-') ?></p>
                            <?php if (!empty($emp['telefono'])): ?>
                            <p class="text-[10px] text-gray-500"><i class="fas fa-phone text-[8px] mr-1"></i><?= htmlspecialchars($emp['telefono']) ?></p>
                            <?php endif; ?>
                        </div>
                    </td>
                    <td class="px-3 py-3 text-center">
                        <?php if ($letrasPend > 0): ?>
                        <span class="inline-flex items-center justify-center min-w-[28px] px-2 py-0.5 rounded-full text-xs font-bold bg-amber-500/15 text-amber-400">
                            <?= $letrasPend ?>
                        </span>
                        <?php else: ?>
                        <span class="text-gray-600 text-xs">0</span>
                        <?php endif; ?>
                    </td>
                    <td class="px-3 py-3 text-right">
                        <?php if ($montoPend > 0): ?>
                        <span class="text-white font-semibold text-xs">$<?= number_format($montoPend, 2) ?></span>
                        <?php else: ?>
                        <span class="text-gray-600 text-xs">$0.00</span>
                        <?php endif; ?>
                    </td>
                    <td class="px-3 py-3 text-center" id="estado-cell-<?= $emp['id'] ?>">
                        <?php if ($isActive): ?>
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-semibold bg-emerald-500/15 text-emerald-400 border border-emerald-500/20">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> Activa
                        </span>
                        <?php else: ?>
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-semibold bg-gray-500/15 text-gray-400 border border-gray-500/20">
                            <span class="w-1.5 h-1.5 rounded-full bg-gray-500"></span> Inactiva
                        </span>
                        <?php endif; ?>
                    </td>
                    <td class="px-3 py-3 text-center">
                        <div class="flex items-center justify-center gap-1">
                            <a href="<?= BASE_URL ?>?c=empresas&a=editar&id=<?= $emp['id'] ?>" 
                               class="p-2 rounded-lg hover:bg-primary-500/10 text-gray-400 hover:text-primary-400 transition-colors" title="Editar">
                                <i class="fas fa-edit text-xs"></i>
                            </a>
                            <button onclick="toggleEstadoEmpresa(<?= $emp['id'] ?>, '<?= htmlspecialchars(addslashes($emp['razon_social'])) ?>', <?= $isActive ? '1' : '0' ?>)" 
                                    class="p-2 rounded-lg hover:bg-<?= $isActive ? 'red' : 'emerald' ?>-500/10 text-gray-400 hover:text-<?= $isActive ? 'red' : 'emerald' ?>-400 transition-colors" 
                                    title="<?= $isActive ? 'Desactivar' : 'Activar' ?>">
                                <i class="fas fa-<?= $isActive ? 'eye-slash' : 'eye' ?> text-xs"></i>
                            </button>
                            <?php if ($totalLetras === 0): ?>
                            <button onclick="eliminarEmpresa(<?= $emp['id'] ?>, '<?= htmlspecialchars(addslashes($emp['razon_social'])) ?>')" 
                                    class="p-2 rounded-lg hover:bg-red-500/10 text-gray-400 hover:text-red-400 transition-colors" 
                                    title="Eliminar permanentemente">
                                <i class="fas fa-trash text-xs"></i>
                            </button>
                            <?php endif; ?>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
