{% extends "base.html" %}
{% block title %}Módulo TNS{% endblock %}
{% block header %}<i class="fas fa-paper-plane mr-2 text-blue-400"></i> Módulo TNS{% endblock %}
{% block content %}
<div class="-m-8 flex flex-col" style="height: calc(100vh - 64px)">

    <!-- Barra de sub-tabs -->
    <div class="bg-white border-b border-gray-200 px-4 flex-shrink-0">
        <div class="flex">
            <button id="btn-terceros" onclick="switchTab('terceros', '/terceros?embed=1')"
                class="tab-btn flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap">
                <i class="fas fa-user text-xs"></i> Terceros
            </button>
            <button id="btn-transaccion" onclick="switchTab('transaccion', '/transaccion?embed=1')"
                class="tab-btn flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap">
                <i class="fas fa-exchange-alt text-xs"></i> Transacción RIPS
            </button>
            <button id="btn-ventas" onclick="switchTab('ventas', '/ventas?embed=1')"
                class="tab-btn flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap">
                <i class="fas fa-file-invoice-dollar text-xs"></i> Facturas Venta
            </button>
            <button id="btn-rda" onclick="switchTab('rda', '/test-rda?embed=1')"
                class="tab-btn flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap">
                <i class="fas fa-flask text-xs"></i> Prueba RDA
            </button>
            <button id="btn-automation" onclick="switchTab('automation', '/automation?embed=1')"
                class="tab-btn flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap">
                <i class="fas fa-robot text-xs"></i> Automatización
            </button>
        </div>
    </div>

    <!-- Paneles de iframe -->
    <div class="flex-1 relative overflow-hidden bg-gray-50">

        <div id="panel-terceros" class="tab-panel absolute inset-0 hidden">
            <iframe id="iframe-terceros" class="w-full h-full border-0"></iframe>
        </div>

        <div id="panel-transaccion" class="tab-panel absolute inset-0 hidden">
            <iframe id="iframe-transaccion" class="w-full h-full border-0"></iframe>
        </div>

        <div id="panel-ventas" class="tab-panel absolute inset-0 hidden">
            <iframe id="iframe-ventas" class="w-full h-full border-0"></iframe>
        </div>

        <div id="panel-rda" class="tab-panel absolute inset-0 hidden">
            <iframe id="iframe-rda" class="w-full h-full border-0"></iframe>
        </div>

        <div id="panel-automation" class="tab-panel absolute inset-0 hidden">
            <iframe id="iframe-automation" class="w-full h-full border-0"></iframe>
        </div>

    </div>
</div>

<script>
const _TAB_ACTIVE   = 'border-blue-500 text-blue-600 bg-blue-50';
const _TAB_INACTIVE = 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300';

function switchTab(name, src) {
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.add('hidden'));
    document.querySelectorAll('.tab-btn').forEach(b => {
        b.className = b.className.replace(_TAB_ACTIVE, '').replace(_TAB_INACTIVE, '').trim();
        b.classList.add(..._TAB_INACTIVE.split(' '));
    });

    const panel  = document.getElementById('panel-' + name);
    const btn    = document.getElementById('btn-' + name);
    const iframe = document.getElementById('iframe-' + name);

    panel.classList.remove('hidden');
    btn.className = btn.className.replace(_TAB_INACTIVE, '').trim();
    btn.classList.add(..._TAB_ACTIVE.split(' '));

    if (src && !iframe.src) {
        iframe.src = src;
    }

    sessionStorage.setItem('tns-tab', name);
    sessionStorage.setItem('tns-src-' + name, src);
}

(function init() {
    // Establecer clases base en todos los botones
    document.querySelectorAll('.tab-btn').forEach(b => {
        b.classList.add(..._TAB_INACTIVE.split(' '), 'border-b-2');
    });

    const saved = sessionStorage.getItem('tns-tab') || 'terceros';
    const srcMap = {
        terceros:   '/terceros?embed=1',
        transaccion:'/transaccion?embed=1',
        ventas:     '/ventas?embed=1',
        rda:        '/test-rda?embed=1',
        automation: '/automation?embed=1',
    };
    switchTab(saved, srcMap[saved] || srcMap.terceros);
})();
</script>
{% endblock %}