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

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

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

try {
    $pdo = new PDO("mysql:host=$servername; dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $stmt = $pdo->prepare("SELECT * FROM orders WHERE customerID = ? ORDER BY order_date DESC");
    $stmt->execute([$customerID]);
    $orders = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Database Error: " . $e->getMessage());
}
?>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GLH | Order History</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <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;
    }


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


    @media screen and (min-width: 768px) {
    .sidebar {
        display: block !important;
    }
    
    .orders {
        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 button {
        background-color: transparent;
        color: white;
        border-color: transparent;
        border-radius: 3px;
        width: 100%;
        text-align: left;
    }
    
    .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; 
    }

    .orders {
        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="dashboard">
                <a href="dashboard.php"><button><i class="bi bi-laptop"></i> Dashboard</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="orders">
        <button class="sidebar-open" onclick="showNav()"><i class="bi bi-list"></i></button>
        <h2>Your Order History</h2><br>
        
        <?php if (empty($orders)): ?>
            <p>You haven't placed any orders yet.</p>
        <?php else: ?>
            <table class="table">
                <thead>
                    <tr>
                        <th>Order No.</th>
                        <th>Product Name</th>
                        <th>Quantity</th>
                        <th>Date</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($orders as $order): ?>
                    <tr>
                        <td>#<?php echo htmlspecialchars($order['orderID']); ?></td>
                        <td><?php echo htmlspecialchars($order['product_name']); ?></td>
                        <td><?php echo htmlspecialchars($order['quantity']); ?></td>
                        <td><?php echo date('d M, Y', strtotime($order['order_date'])); ?></td>
                        <td>£<?php echo number_format($order['grand_total'], 2); ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php endif; ?>
    </div>
    
<script>
function showNav() {
  document.getElementById("sidebar").style.display = "block";
}

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