<?
session_start();
if(!isset($_SESSION['usuario']))
{
 	echo "<script languaje='JavaScript'>";       
	echo "parent.location.href='login.php'; ";
	echo "</script>";
}
include ("clases/Usuario.class.php"); $obju = new Usuario();
require("clases/Beneficiario.class.php"); $obja = new Beneficiario();

if($obju->BuscarPorUsuario($_SESSION['usuario']))
{
   $idb = $obju->getidbeneficiario(); 	
   if($obja->BuscarPorCodigo($idb))
   {
     $nombre = $obja->getNombre();
   }
   $usuario = $obju->getusuario();
   $tipouser = $obju->gettipo();
}

echo $_SESSION['usuario'];
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Panel Administrativo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
    body {
        font-family: 'Segoe UI', sans-serif;
        background-color: #f2f4f5;
    }

    /* SIDEBAR */
    .sidebar {
        width: 250px;
        height: 100vh;
        background: #0f0f0f;
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        box-shadow: 2px 0 6px rgba(0,0,0,0.3);
        transition: 0.3s;
        z-index: 10;
    }

    .sidebar .logo {
        padding: 20px;
        font-size: 22px;
        text-align: center;
        font-weight: bold;
        background: #1a1a1a;
        color: #2ecc71;
    }

    .sidebar a {
        color: #dfe2e4;
        padding: 14px 20px;
        display: block;
        text-decoration: none;
        transition: 0.3s;
    }

    .sidebar a:hover {
        background: #2ecc71;
        color: #000;
        font-weight: 600;
    }

    .submenu a {
        padding-left: 40px;
        background: #141414;
    }

    /* CONTENT */
    .content {
        margin-left: 250px;
        padding: 20px;
    }

    /* NAVBAR */
    .topnav {
        width: 100%;
        background: #fff;
        padding: 10px 20px;
        border-bottom: 1px solid #ccc;
        position: fixed;
        left: 250px;
        top: 0;
        z-index: 9;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .topnav h5 {
        color: #2f2f2f;
        font-weight: 600;
    }

    .content-container {
        margin-top: 70px;
    }

    /* CARDS */
    .card {
        border-radius: 10px;
        border: none;
    }

    .card-body {
        border-left: 5px solid #2ecc71;
        background: #fff;
    }

    /* OVERLAY para m�vil */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.45);
        z-index: 8;
    }

    /* RESPONSIVE */
    @media(max-width: 768px){
        .sidebar {
            width: 220px;
        }
        .topnav {
            left: 220px;
        }
        .content {
            margin-left: 220px;
        }
    }

    @media(max-width: 576px){
        .sidebar {
            left: -250px;
        }
        .sidebar.active {
            left: 0;
        }
        .topnav {
            left: 0 !important;
        }
        .content {
            margin-left: 0;
        }
        .overlay.active {
            display: block;
        }
    }
</style>
</head>
<body>

<!-- SIDEBAR -->
<?php
     if($tipouser=="ADMIN")
     {
?>
<div class="sidebar" id="sidebar">
    <div class="logo">ADMINISTRADOR</div>

    <a href="#"><i class="fa fa-home"></i> Inicio</a>

    <a href="manproyecto.php" target="main"><i class="fa fa-folder"></i> Proyectos</a>
     <a href="manbeneficiario.php" target="main"><i class="fa fa-users"></i> colaborador</a>

    <a href="mandesembolso.php" target="main"><i class="fa fa-money-bill"></i> Desembolsos</a>  

    <a href="dashboard.php" target="main"><i class="fa fa-chart-line"></i> Reportes</a>
	
	 <a href="manusuario.php" target="main"><i class="fa fa-users"></i> Usuarios</a>

    <a href="session_invalida.php"><i class="fa fa-right-from-bracket"></i> Cerrar Sesi&oacute;n</a>
</div>
 <?php } else{ ?>
 <div class="sidebar" id="sidebar">
    <div class="logo">OPERADOR</div>
    <a href="#"><i class="fa fa-home"></i> Inicio</a>
    <a href="mis_desembolsos.php" target="main"><i class="fa fa-money-bill"></i> Mis Desembolsos</a>  
    <a href="session_invalida.php"><i class="fa fa-right-from-bracket"></i> Cerrar Sesi&oacute;n</a>
</div>
<? } ?>

<!-- OVERLAY (solo m�vil) -->
<div id="overlay" class="overlay" onClick="toggleSidebar()"></div>

<!-- NAVBAR SUPERIOR -->
<div class="topnav d-flex justify-content-between align-items-center">
    <button class="btn btn-dark d-block d-sm-none" onClick="toggleSidebar()">
        <i class="fa fa-bars"></i>
    </button>

    <h5 class="m-0">Bienvenido Sr: <?=$nombre;?></h5>

    <div>
        <i class="fa fa-user-circle fa-2x text-secondary"></i>
    </div>
</div>

<!-- CONTENIDO -->
<div class="content">
    <div class="content-container">
        <div class="card shadow-sm">
            <div class="card-body">
                <h4 class="card-title">Bienvenido al Panel</h4>
                <p><iframe name="main" id="main" frameborder="0" width="100%" height="700px"></iframe></p>
                <p>Para consultas y soporte al 950065470 </p>
            </div>
        </div>
    </div>
</div>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById("sidebar");
    const overlay = document.getElementById("overlay");

    sidebar.classList.toggle("active");
    overlay.classList.toggle("active");
}
</script>

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


<!-- AVATAR FLOTANTE -->
<?php
     if($tipouser=="ADMIN")
     {
?>
<div id="ai-avatar-container">

    <div id="ai-avatar-bubble">
        <img src="eva.png" id="ai-avatar-img" alt="Asistente Virtual">
    </div>

    <div id="ai-avatar-panel">
        <p id="ai-avatar-text">👋 ¡Hola! Soy tu asistente virtual.</p>

        <div class="ai-avatar-buttons">
            <button onclick="goTo('manproyecto.php')">📁 Proyectos</button>
            <button onclick="goTo('desembolsos.php')">💵 Desembolsos</button>
            <button onclick="goTo('dashboard.php')">📊 Reportes</button>
        </div>
    </div>

    <button id="ai-avatar-hide" onclick="toggleAvatar()">✖</button>
</div>

<button id="ai-avatar-show" onclick="toggleAvatar()">🤖 Mostrar Asistente</button>
<?php } else{ ?>
<div id="ai-avatar-container">

    <div id="ai-avatar-bubble">
        <img src="eva.png" id="ai-avatar-img" alt="Asistente Virtual">
    </div>

    <div id="ai-avatar-panel">
        <p id="ai-avatar-text">👋 ¡Hola! Soy tu asistente virtual.</p>

        <div class="ai-avatar-buttons">
            
            <button onclick="goTo('mis_desembolsos.php')">💵 Mis Desembolsos</button>
           
        </div>
    </div>

    <button id="ai-avatar-hide" onclick="toggleAvatar()">✖</button>
</div>

<button id="ai-avatar-show" onclick="toggleAvatar()">🤖 Mostrar Asistente</button>
<?       }    ?>

<style>
/* CONTENEDOR PRINCIPAL */
#ai-avatar-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 290px;
    z-index: 9999;
    padding: 5px;
    animation: fadeIn 0.8s;
}

/* BOTÓN PARA MOSTRARLO */
#ai-avatar-show {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background: #0077ff;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 50px;
    font-size: 17px;
    cursor: pointer;
    z-index: 9999;
}

/* AVATAR ANIMADO */
#ai-avatar-bubble {
    text-align: center;
}
#ai-avatar-img {
    width: 150px;
    filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.3));
    animation: floatY 4s infinite ease-in-out;
}

/* PANEL */
#ai-avatar-panel {
    background: white;
    border-radius: 14px;
    padding: 14px;
    margin-top: 8px;
    box-shadow: 0 6px 35px rgba(0,0,0,0.18);
}

#ai-avatar-text {
    text-align: center;
    font-size: 15px;
    margin-bottom: 10px;
}

/* BOTONES */
.ai-avatar-buttons button {
    width: 100%;
    background: #007bff;
    border: none;
    padding: 9px;
    color: white;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: 0.2s;
}
.ai-avatar-buttons button:hover {
    background: #0056d6;
}

/* BOTÓN DE CERRAR */
#ai-avatar-hide {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    border: none;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* OCULTO */
.hidden {
    display: none !important;
}

/* ANIMACIONES */
@keyframes floatY {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
</style>


<script>
window.onload = function() {
    speak("Hola, soy tu asistente virtual. ¿En qué puedo ayudarte hoy?");
};

function speak(text) {
    let msg = new SpeechSynthesisUtterance(text);
    msg.lang = "es-PE";
    msg.rate = 1;
    msg.pitch = 1.1;
    speechSynthesis.speak(msg);
}

function goTo(url) {
    speak("Abriendo " + url.replace(".php",""));
    setTimeout(() => {
        window.frames["main"].location.href = url;
    }, 1000);
}


function toggleAvatar() {
    const box = document.getElementById("ai-avatar-container");
    const showBtn = document.getElementById("ai-avatar-show");

    if (box.classList.contains("hidden")) {
        box.classList.remove("hidden");
        showBtn.style.display = "none";
        speak("¡Estoy aquí nuevamente!");
    } else {
        speak("Me ocultaré. Llámame cuando me necesites.");
        setTimeout(() => {
            box.classList.add("hidden");
            showBtn.style.display = "block";
        }, 800);
    }
}
</script>



</body>
</html>
