<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>My Orders - Elfit Arabia</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="/style.css">
    <style>
        body {
            padding: 100px 20px 40px 20px;
        }

        .section {
            background: linear-gradient(145deg, var(--surface-card) 0%, var(--primary-800) 100%);
            border: 1px solid var(--surface-border);
            border-radius: var(--radius-lg);
            padding: 28px;
            margin-bottom: 24px;
            box-shadow: var(--shadow-md);
        }

        .section h2 {
            color: var(--text-primary);
            font-weight: 700;
        }

        .nav-link {
            white-space: nowrap;
            margin-left: 15px;
        }

        .order-status-badge {
            display: inline-block;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/dashboard">Elfit Arabia Client Dashboard</a>
        </div>
        <div class="d-flex">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/my-messages">
                        <i class="fas fa-envelope me-1"></i> My Messages
                        <% if (unread_count> 0) { %>
                            <span class="badge bg-danger rounded-pill ms-1 badge-notification">
                                <%= unread_count %>
                            </span>
                            <% } %>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/my-orders"><i class="fas fa-shopping-cart me-1"></i> My Orders</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact-us"><i class="fas fa-phone me-1"></i> Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout"><i class="fas fa-sign-out-alt me-1"></i> Logout</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="content container-fluid">
        <div class="section">
            <h2 style="padding-bottom: 20px"><i class="fas fa-shopping-bag me-2"></i><strong>My Orders</strong></h2>
            <% if (orders && orders.length> 0) { %>
                <div class="list-group">
                    <% orders.forEach(function(order) { %>
                        <div class="list-group-item mb-3">
                            <div class="d-flex w-100 justify-content-between align-items-start">
                                <div>
                                    <h4 class="mb-1">
                                        <i class="fas fa-box me-2"></i>
                                        Order #<%= order.id %>: <%= order.product_name %>
                                    </h4>
                                    <span class="badge bg-primary">
                                        <%= order.quantity %>
                                    </span>
                                </div>
                                <small class="text-muted"><i class="fas fa-clock me-1"></i>
                                    <%= order.created_at %>
                                </small>
                            </div>
                            <p class="mb-1 mt-3"><strong><i class="fas fa-calendar me-1"></i> Expected:</strong>
                                <%= order.expected_date %>
                            </p>
                            <% if (order.comments) { %>
                                <p class="mb-1"><strong><i class="fas fa-comment me-1"></i> Comments:</strong>
                                    <%= order.comments %>
                                </p>
                                <% } %>
                                    <div class="mt-3">
                                        <strong><i class="fas fa-info-circle me-1"></i> Order Status:</strong>
                                        <span class="badge bg-info ms-2">
                                            <%= order.status ? order.status.charAt(0).toUpperCase() +
                                                order.status.slice(1) : 'Pending' %>
                                        </span>
                                    </div>
                        </div>
                        <% }); %>
                </div>
                <% } else { %>
                    <div class="text-center py-5">
                        <i class="fas fa-shopping-cart fa-3x text-muted mb-3"></i>
                        <p class="text-muted fs-5">You have not placed any orders yet.</p>
                        <a href="/dashboard" class="btn btn-primary mt-2">
                            <i class="fas fa-search me-1"></i> Browse Products
                        </a>
                    </div>
                    <% } %>
        </div>
    </div>

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

</html>