<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CRM</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

<style>
body{
    background:#f4f6fb;
    font-family:system-ui;
}

/* 🔥 NAVBAR */
.navbar{
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    padding:8px 14px;
    position:relative;
    z-index:1000;
}

/* NAV LINKS */
.nav-link{
    font-size:14px;
    border-radius:8px;
    padding:6px 10px;
    display:flex;
    align-items:center;
    gap:6px;
}

.nav-link:hover{
    background:#eef2ff;
}

/* 🔥 DROPDOWN FIX */
.dropdown-menu{
    z-index:9999 !important;
    border-radius:10px;
    border:1px solid #e5e7eb;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* 🔥 TABS */
#tabs{
    display:flex;
    gap:6px;
    padding:6px 10px 0 10px;
    background:#f4f6fb;
    border-bottom:1px solid #e5e7eb;
    align-items:flex-end;
    overflow-x:auto;
}

/* TAB */
.tab{
    font-size:13px;
    padding:6px 14px;
    border-radius:12px 12px 0 0;
    background:#e5e7eb;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    border:1px solid transparent;
    transition:.2s;
}

/* HOVER */
.tab:hover{
    background:#dbeafe;
}

/* ACTIVE */
.tab.active{
    background:#fff;
    border:1px solid #e5e7eb;
    border-bottom:1px solid #fff;
    position:relative;
    top:1px;
}

/* FIXED */
.tab.fixed{
    background:#111827;
    color:#fff;
    border:none;
}

/* CLOSE */
.close{
    margin-left:6px;
    color:red;
    cursor:pointer;
}

/* 🔥 CONTENT */
#content{
    background:#fff;
    border:1px solid #e5e7eb;
    border-top:none;
    height: calc(100vh - 120px);
}

/* TAB CONTENT */
.tab-content{
    display:none;
    height:100%;
}

.tab-content.active{
    display:block;
}

iframe{
    width:100%;
    height:100%;
    border:0;
}
</style>
</head>

<body>

<!-- 🔥 NAVBAR -->
<nav class="navbar navbar-expand-lg">

<div class="container-fluid">

    <a class="navbar-brand fw-bold text-primary">
        <i class="fa-solid fa-bolt"></i> CRM
    </a>

    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="menu">

        <ul class="navbar-nav me-auto">

            @foreach($padres as $padre)
            <li class="nav-item dropdown">

                <!-- PADRE CON ICONO -->
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="{{ $padre->icono }}"></i>
                    {{ $padre->titulo }}
                </a>

                <ul class="dropdown-menu">

                    @foreach($hijos[$padre->id] ?? [] as $h)
                    <li>
                        <a class="dropdown-item"
                           onclick="openTab(
                                '{{ $h->id }}',
                                '{{ $h->titulo }}',
                                '{{ $h->tipo }}',
                                '{{ $h->contenido }}',
                                '{{ $h->icono }}'
                           )">

                            <i class="{{ $h->icono }} me-2"></i>
                            {{ $h->titulo }}
                        </a>
                    </li>
                    @endforeach

                </ul>

            </li>
            @endforeach

        </ul>

        <!-- PERFIL -->
        <ul class="navbar-nav ms-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="fa-solid fa-user"></i>
                    {{ auth()->user()->name ?? 'Usuario' }}
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item">Perfil</a></li>
                    <li><a class="dropdown-item text-danger">Salir</a></li>
                </ul>
            </li>
        </ul>

    </div>
</div>
</nav>

<!-- 🔥 TABS -->
<div id="tabs">

    <!-- FIJAS -->
    <div class="tab fixed active" onclick="activate('home')">
        <i class="fa-solid fa-house"></i> Inicio
    </div>

    <div class="tab fixed" onclick="activate('vicidial')">
        <i class="fa-solid fa-phone"></i> Vicidial
    </div>

</div>

<!-- 🔥 CONTENT -->
<div id="content">

    <div class="tab-content active" id="content-home">
        <div class="p-3">🏠 Inicio del sistema</div>
    </div>

    <div class="tab-content" id="content-vicidial">
        <iframe src="/vicidial"></iframe>
    </div>

</div>

<script>

function openTab(id,title,tipo,url,icon){

    let tabId="tab-"+id;

    if(document.getElementById(tabId)){
        activate(tabId);
        return;
    }

    let tab=document.createElement("div");
    tab.className="tab active";
    tab.id=tabId;

    tab.innerHTML=`
        <i class="${icon}"></i>
        ${title}
        <span class="close" onclick="closeTab(event,'${tabId}')">×</span>
    `;

    tab.onclick=()=>activate(tabId);

    document.getElementById("tabs").appendChild(tab);

    let content=document.createElement("div");
    content.className="tab-content active";
    content.id="content-"+tabId;

    if(tipo==="iframe"){
        content.innerHTML=`<iframe src="${url}"></iframe>`;
    }else{
        content.innerHTML="Cargando...";
        fetch(url).then(r=>r.text()).then(h=>content.innerHTML=h);
    }

    document.getElementById("content").appendChild(content);

    activate(tabId);
}

function activate(id){

    document.querySelectorAll(".tab")
        .forEach(t=>t.classList.remove("active"));

    document.querySelectorAll(".tab-content")
        .forEach(c=>c.classList.remove("active"));

    document.getElementById(id)?.classList.add("active");
    document.getElementById("content-"+id)?.classList.add("active");
}


</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>