<?php
session_start();
require_once('../connection.php');


if (!isset($_SESSION['userID'])) {
    header('Location: ../login/login-form.php');
    exit();
}

$first_name = $_SESSION['first_name'];
$email = $_SESSION['email'];

?>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GLH | User Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    
    <style>
        
    .sidebar { 
        background-color: #3b3b3b;
        height: 100%;
        width: 260px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        overflow-x: hidden;
        padding-top: 20px;
    }


    .dash {
        padding: 20px;
        transition: margin-left .3s;
    }


    @media screen and (min-width: 768px) {
    .sidebar {
        display: block !important;
    }
    
    .dash {
        margin-left: 260px;
        padding-right: 20px; 
    }
    
    .sidebar-open, .sidebar-hidden {
        display: none !important;
    }
    }
        
    
    .logo {
        margin-left: 15px;
        margin-top: 10px; 
        margin-bottom: 30px; 
        display: block;    
    }
    
    hr.solid-top {
        border-top: 1px solid #bbb;
        border-radius: 5px;
        width: 90%;
        margin-left: 13px;
    }
    
    .sidebar-links {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 14px; 
        display: block;
        border-color: transparent;
    }
    
    .sidebar-links a:hover {
        background-color: #90d5ff;
    }
    
    .sidebar-links button {
        background-color: transparent;
        color: white;
        border-color: transparent;
        border-radius: 3px;
    }
    
    .sidebar-links button:hover {
        background-color: #90d5ff;
        color: black;
    }
    
    hr.solid-bottom {
        border-top: 1px solid #bbb;
        border-radius: 5px;
        width: 90%;
        margin-left: 13px;
    }

    .user-profile {
        margin-top: 61.8vh;
    }
    
    .dash {
        padding-right: 260px;
        padding: 20px;
        transition: margin-left .3s;
    }

    .sidebar-open {
        background: transparent;
        border: none;
        color: black;
        font-size: 30px;
    }

    .sidebar-hidden {
        background: transparent;
        border: none;
        color: white;
        font-size: 30px;
        float: right;
        margin-right: 8px;
        margin-top: -115px;
    }

    </style>
</head>
<body>
    
    <header class="sidebar" id="sidebar">
        <div class="logo">
            <a href="../index.php">
                <img src="../glh.png" class="logo" alt="logo" width="150" height="60">
            </a>
        </div>
        
        <button class="sidebar-hidden" onclick="hideNav()"><i class="bi bi-x"></i></button>
        
        <hr class="solid-top">
        
        <div class="sidebar-links">
            <div class="home-page">
                <a href="../index.php"><button><i class="bi bi-house"></i> Home</button></a>
            </div>
            <div class="orders">
                <a href="orders.php"><button><i class="bi bi-receipt-cutoff"></i> Order History</button></a>
            </div>
            <div class="producer">
                <a href="producer.php"><button><i class="bi bi-person-lock"></i> Becoming a producer</button></a>
            </div>
            <div class="producer-dash">
                <a href="producer-dashboard.php"><button><i class="bi bi-laptop"></i> Producer Dashboard</button></a>
            </div>
        </div>
            
            <hr class="solid-bottom">
            
            <div class="sidebar-links">
                <div class="user-profile">
                    <a href="account.php">
                        <button><i class="bi bi-person-exclamation"></i> Account Details</button>
                    </a>
                </div>
                <div class="logout">
                    <a href="logout.php">
                        <button><i class="bi bi-box-arrow-left"></i> Logout</button>
                    </a>
                </div>
            </div>
    </header>
    
    
    
    <div class="dash">
        <button class="sidebar-open" onclick="showNav()"><i class="bi bi-list"></i></button>
        <h2>Welcome, <?php echo "$first_name" ?></h2><br>
    </div>
        
    
<script>
function showNav() {
  document.getElementById("sidebar").style.display = "block";
}

function hideNav() {
  document.getElementById("sidebar").style.display = "none";
}
</script>
    
    
</body>
</html>
