<?php
header('Content-Type: text/html; charset=utf-8');
session_start();

if (!isset($_SESSION['usuario'])) {
    header("Location: rf_acceso.php");
    exit;
}

$tipo = $_SESSION['tipo'];
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Menú Principal</title>
    <link rel="icon" href="Iconos/rf_icono_vineta.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        /* ======== RESETEO BÁSICO ======== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica', sans-serif;
            background-color: #f3f4f8;
            color: #333;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* ======== BARRA SUPERIOR ======== */
        .topbar {
            width: 100%;
            background-color: #1D3C7D;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 30px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            position: fixed;
            top: 0;
            z-index: 1000;
        }

        .topbar h1 {
            font-size: 20px;
        }

        .user-info {
            font-size: 14px;
            opacity: 0.9;
        }

        /* ======== CONTENEDOR PRINCIPAL ======== */
        .main-container {
            display: flex;
            height: 100%;
            margin-top: 60px; /* espacio para topbar */
        }

        /* ======== BARRA LATERAL ======== */
        .sidebar {
            width: 250px;
            background-color: #243B72;
            color: white;
            display: flex;
            flex-direction: column;
            padding-top: 20px;
            height: calc(100vh - 60px);
            position: fixed;
            top: 60px;
            left: 0;
            overflow-y: auto;
            box-shadow: 2px 0 6px rgba(0,0,0,0.15);
            font-family: 'Helvetica', sans-serif;
            text-align: center;      /* centra horizontalmente */
            font-size: 10px;   /* ← AQUÍ se configura el tamaño del texto */
        }

        .sidebar img.logo {
            width: 120px;
            height: auto;
            margin: 0 auto 20px;
        }

        .menu-section {
            margin-top: 10px;
        }

        .menu-section button {
            display: flex;
            align-items: center;
            gap: 10px;
            background: none;
            border: none;
            color: white;
            font-size: 15px;
            text-align: left;
            padding: 12px 20px;
            cursor: pointer;
            width: 100%;
            transition: background 0.3s;
        }

        .menu-section button:hover {
            background-color: #3959A4;
        }

        .menu-section img {
            width: 22px;
            height: 22px;
        }

        .logout-btn {
            margin-top: auto;
            background: linear-gradient(to right, #e53935, #ff9800);
            color: #000;
            border: none;
            font-weight: bold;
        }

        .logout-btn:hover {
            background: linear-gradient(to right, #ff7043, #f44336);
            color: white;
        }

        /* ======== CONTENIDO CENTRAL ======== */
        .content {
            flex: 1;
            margin-left: 250px;
            padding: 30px;
            overflow-y: auto;
        }

        .content-box {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
        }

        .content-box h2 {
            color: #1D3C7D;
        }

        .fondo-leyenda {
            background-color: #ffcc00;
            text-align: center;
            padding: 5px;
            font-size: 13px;
            font-weight: bold;
            color: #333;
        }

        @media (max-width: 768px) {
            .sidebar {
                width: 200px;
            }
            .menu-section button {
                font-size: 13px;
            }
            .content {
                margin-left: 200px;
                padding: 20px;
            }
        }
        
        
        
        
            .logo {
        width: 60px !important;
        height: 60px !important;
        object-fit: contain;
    }

    .sidebar img.logo {
        width: 60px !important;
        height: 60px !important;
    }
        
        



/* BOTÓN PRINCIPAL CON DEGRADADO Y SOMBRA */



/* tamaño letra de los menu ppales  */

.submenu-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px !important;           /* tamaño del texto */
/*    font-family: 'Helvetica', sans-serif;  */
    font-family: 'Roboto', sans-serif;
/*    font-weight: 600;   bold de letra*/
    font-weight: bold;                /* ← cambiar a normal para que no sea bold */
    color: #000;
    padding: 12px 15px;
    background: linear-gradient(to left, rgb(0,255,255), rgb(31,78,121));
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}






/* HOVER BOTÓN PRINCIPAL */
.submenu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.35); /* SOMBRA MÁS PROFUNDA */
}

/* ICONO */
.submenu-btn .icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

/* FLECHA */
.submenu-btn .arrow {
    margin-left: auto;
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* SUBMENÚ CON SOMBRA */
.submenu {
    display: none;
    flex-direction: column;
    background: linear-gradient(to left, rgb(0,255,255), rgb(31,78,121));
    margin-top: 5px;
    padding: 5px 0;
    border-radius: 8px;
    overflow: hidden;
    animation: fadeIn 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* SOMBRA SUAVE */
  
}

/* ANIMACIÓN */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* OPCIONES DEL SUBMENÚ  */


/* tamaño letra de los submenus  */
.submenu button {
    background: linear-gradient(to left, rgb(0,255,255), rgb(31,78,121));
    border: none;
    color: #EFFFFF;
    text-align: left;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* SOMBRA SUAVE BOTONES */
/*    font-family: 'Helvetica', sans-serif;    */
    font-family: 'Roboto', sans-serif;
    font-size: 14px;

}








/* HOVER OPCIONES SUBMENÚ */
.submenu button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.25);
    padding-left: 25px;
}

/* PUNTO INDICADOR */
.submenu button .dot {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 10px;

}




        
    </style>
</head>

<body>

    <div class="fondo-leyenda">
        Sistema en Modo Pruebas - @Sergio Bravo contacto +56 9 46237231
    </div>

    <div class="topbar">
        <h1>StockTools</h1>
        <div class="user-info">Bienvenido, <?php echo htmlspecialchars($_SESSION['usuario']); ?></div>
    </div>

    <div class="main-container">
        <!-- ====== BARRA LATERAL ====== -->
        <div class="sidebar">
            <h1>Menú Principal</h1>
            <img src="Iconos/st_icono_menu.png" alt="Logo" class="logo" width="15" height="15">

            <div class="menu-section">
                <?php if ($tipo === '0'): ?>



<!-- SUBMENÚ PROFESIONAL -->
<div class="submenu-container">
    <button class="submenu-btn">
        <img src="Iconos/planos_icono_mvigente.png" class="icon">
        Ver Herramientas y Equipos
        <span class="arrow">&#9662;</span>
    </button>

    <div class="submenu">
        <button onclick="location.href='conf_usuarios.php'">
            <span class="dot"></span> Buscar
        </button>

        <button onclick="location.href='conf_clases.php'">
            <span class="dot"></span> Ver Todos
        </button>

        <button onclick="location.href='conf_restricciones.php'">
            <span class="dot"></span> Ver Arriendos / Estados
        </button>

        <button onclick="location.href='conf_restricciones.php'">
            <span class="dot"></span> Ver (con RF)
        </button>

    </div>
</div>



<!-- SUBMENÚ PROFESIONAL -->
<div class="submenu-container">
    <button class="submenu-btn">
        <img src="Iconos/planos_icono_mvigente.png" class="icon">
        Proceso de Préstamos
        <span class="arrow">&#9662;</span>
    </button>

    <div class="submenu">
        <button onclick="location.href='conf_usuarios.php'">
            <span class="dot"></span> Entregar Préstamo
        </button>

        <button onclick="location.href='conf_clases.php'">
            <span class="dot"></span> Ver Herramientas/Equipos en Préstamo
        </button>

        <button onclick="location.href='conf_restricciones.php'">
            <span class="dot"></span> Devolución Péstamo
        </button>

        <button onclick="location.href='conf_proveedores.php'">
            <span class="dot"></span> Ver Pendientes de Devolución
        </button>
        
        <button onclick="location.href='conf_usuarios.php'">
            <span class="dot"></span> Eentregas con RF
        </button>

        <button onclick="location.href='conf_restricciones.php'">
            <span class="dot"></span> Devolución con RF
        </button>
        
        
    </div>
</div>



<!-- SUBMENÚ PROFESIONAL -->
<div class="submenu-container">
    <button class="submenu-btn">
        <img src="Iconos/planos_icono_mvigente.png" class="icon">
        PRESTAMOS SUB CONTRATOS
        <span class="arrow">&#9662;</span>
    </button>

    <div class="submenu">
        <button onclick="location.href='conf_usuarios.php'">
            <span class="dot"></span> ENTREGA
        </button>

        <button onclick="location.href='conf_restricciones.php'">
            <span class="dot"></span> DEVOLUCIÓN
        </button>

        <button onclick="location.href='conf_usuarios.php'">
            <span class="dot"></span> ENTREGA RF
        </button>

        <button onclick="location.href='conf_restricciones.php'">
            <span class="dot"></span> DEVOLUCIÓN RF
        </button>
        
        
    </div>
</div>
                    
                    
                    
<!-- SUBMENÚ PROFESIONAL -->
<div class="submenu-container">
    <button class="submenu-btn">
        <img src="Iconos/planos_icono_mvigente.png" class="icon">
        CONFIGURACIONES
        <span class="arrow">&#9662;</span>
    </button>

    <div class="submenu">
        <button onclick="location.href='conf_usuarios.php'">
            <span class="dot"></span> Gestión de Usuarios
        </button>

        <button onclick="location.href='conf_clases.php'">
            <span class="dot"></span> Gestión de Clases
        </button>

        <button onclick="location.href='conf_restricciones.php'">
            <span class="dot"></span> Restricciones por Clase
        </button>

        <button onclick="location.href='conf_proveedores.php'">
            <span class="dot"></span> Proveedores
        </button>
    </div>
</div>

                    
                    
                    
                    
                    
                    
                    
                    
                <?php endif; ?>

                <?php if ($tipo === '1'): ?>
                    <button onclick="location.href='planos_buscar.php'">
                        <img src="Iconos/planos_icono_mbuscar.png"> BUSCAR PLANO
                    </button>
                    <button onclick="location.href='planos_ver.php'">
                        <img src="Iconos/planos_icono_mver.png"> VER PLANOS
                    </button>
                <?php endif; ?>
            </div>

            <button class="logout-btn" onclick="location.href='rf_logout.php'">
                <img src="Iconos/planos_icono_mout.png"> CERRAR SESIÓN
            </button>
        </div>

        <!-- ====== CONTENIDO CENTRAL ====== -->
        <div class="content">
            <div class="content-box">
<h2 style="margin-bottom:10px;">Bienvenido al Sistema de Administración de Herramientas y Equipos</h2>
<p style="font-size:15px;">Selecciona una opción del menú para comenzar.</p>                <img src="Iconos/st_logo.png" alt="Icono" style="width: 400px; margin-top:20px;">


<p style="font-size:10px; color:#555;">
    CC LOGITIC — Todos los Derechos Reservados  
    <a href="https://www.logitic.cl" target="_blank">www.logitic.cl</a>
</p>

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







<script>
document.querySelectorAll('.submenu-btn').forEach(btn => {
    btn.addEventListener('click', function () {
        let submenu = this.nextElementSibling;
        let arrow = this.querySelector('.arrow');

        if (submenu.style.display === 'flex') {
            submenu.style.display = 'none';
            arrow.style.transform = 'rotate(0deg)';
        } else {
            submenu.style.display = 'flex';
            arrow.style.transform = 'rotate(180deg)';
        }
    });
});
</script>






</body>
</html>
