<?php
session_start();
include '../conexion.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taller</title> <link rel="icon" href="./icons/taller.png" type="image/png">
    <link rel="stylesheet" href="./sidemenu.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>
<body  >
    <div class="wrapper">
        <main>    
            <!-- Encabezado -->
            <header>
                <!--<h1>Taller</h1>-->
                <?php include "includes/header2.php"; ?>
            </header>

            <!--<div id="sidemenu" class="menu-collapsed">-->
            <div id="sidemenu" class="menu-expanded">
                <!-- Header -->
                <div id="header">
                    <div id="title"><span></span> </div>
                    <div id="menu-btn">
                        <div class="btn-hamburger"></div>
                        <div class="btn-hamburger"></div>
                        <div class="btn-hamburger"></div>
                    </div>
                </div>
                <!--Profile-->
                <div id="profile">
                    <div id="photo"><img src="img/user.png" alt=""></div>
                    <div id="name"><span><?php echo $_SESSION['nombre'];?></span></div>
                    <!--<div id="name"><span><?php echo $_SESSION['iduser']." [ ".$_SESSION['user']." ] ";?></span></div>-->
                    <div id="name"><span><?php echo "Sucursal: ".$_SESSION['suc'];?></span></div>
                    <div id="name"><span> <?php echo "Rol: ".$_SESSION['rol'];?></span></div>
                </div>
                <!--Items-->
                <div id="menu-items">
                    <?php include './includes/navs3.php'?>
                </div>
            </div>

            

            </div>
        </main>
            <!-- Pie de página -->
            <footer>
                <?php include "includes/footer.php"; ?>
            </footer>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const btn = document.querySelector('#menu-btn');
        const menu = document.querySelector('#sidemenu');

        btn.addEventListener('click', e => {
            menu.classList.toggle("menu-expanded");
            menu.classList.toggle("menu-collapsed");

            document.querySelector('body').classList.toggle('body-expanded')
        });
    </script>

<script>
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', () => {
                const tabId = button.getAttribute('data-tab');

                document.querySelectorAll('.tab-button').forEach(btn => {
                    btn.classList.remove('active');
                });
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });

                button.classList.add('active');
                document.getElementById('tab-' + tabId).classList.add('active');
            });
        });

        // Activate the first tab by default
        document.querySelector('.tab-button').click();
    </script>
</body>
</html>
