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

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

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

        .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;
        }

        #productSearch {
            max-width: 400px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/dashboard">Elfit Arabia 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 (typeof unread_count !=='undefined' && 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" 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: 15px;"><i class="fas fa-search me-2"></i><strong>Place an Inquiry</strong></h2>
            <div class="mb-4">
                <input type="text" id="productSearch" class="form-control" placeholder="🔍 Search for products..."
                    onkeyup="filterProducts()">
            </div>

            <% for (var i=0; i < all_categories.length; i++) { %>
                <% var category=all_categories[i]; %>
                    <% var catId=category.replace(/[^a-zA-Z0-9]/g, '' ); %>
                        <div class="product-category mb-3">
                            <div class="category-header d-flex justify-content-between align-items-center"
                                data-bs-toggle="collapse" data-bs-target="#<%= catId %>" aria-expanded="false">
                                <h4 class="mb-0">
                                    <%= category %>
                                </h4>
                                <i class="fas fa-chevron-down category-arrow"></i>
                            </div>
                            <div class="collapse category-content" id="<%= catId %>">
                                <div class="category-body mt-3">
                                    <% var categoryProducts=products_by_cat[category] || []; %>
                                        <% if (categoryProducts.length> 0) { %>
                                            <div class="row g-3">
                                                <% for (var j=0; j < categoryProducts.length; j++) { %>
                                                    <% var product=categoryProducts[j]; %>
                                                        <div class="col-12 col-md-6 col-lg-4">
                                                            <div class="card h-100">
                                                                <div class="card-body d-flex flex-column">
                                                                    <h5 class="card-title">
                                                                        <%= product.name %>
                                                                    </h5>

                                                                    <% if (product.options) { %>
                                                                        <% var optKeys=Object.keys(product.options); %>
                                                                            <% if (optKeys.length> 0) { %>
                                                                                <% for (var k=0; k < optKeys.length;
                                                                                    k++) { %>
                                                                                    <% var optName=optKeys[k]; %>
                                                                                        <div class="mb-2">
                                                                                            <small class="text-muted">
                                                                                                <%= optName %>: <%=
                                                                                                        product.options[optName]
                                                                                                        %>
                                                                                            </small>
                                                                                        </div>
                                                                                        <% } %>
                                                                                            <% } %>
                                                                                                <% } %>

                                                                                                    <% if (product.rate)
                                                                                                        { %>
                                                                                                        <p class="mb-2">
                                                                                                            <strong>More
                                                                                                                Details:</strong>
                                                                                                            <a href="<%= product.rate %>"
                                                                                                                class="text-accent">
                                                                                                                <%= product.rate
                                                                                                                    %>
                                                                                                            </a>
                                                                                                        </p>
                                                                                                        <% } %>

                                                                                                            <p
                                                                                                                class="mb-2">
                                                                                                                <strong>Stock:</strong>
                                                                                                                <% if
                                                                                                                    (product.stock==='in_stock'
                                                                                                                    ) {
                                                                                                                    %>
                                                                                                                    <span
                                                                                                                        class="badge bg-success">In
                                                                                                                        Stock</span>
                                                                                                                    <% } else
                                                                                                                        {
                                                                                                                        %>
                                                                                                                        <span
                                                                                                                            class="badge bg-danger">Out
                                                                                                                            of
                                                                                                                            Stock</span>
                                                                                                                        <% }
                                                                                                                            %>
                                                                                                            </p>

                                                                                                            <% if
                                                                                                                (product.image)
                                                                                                                { %>
                                                                                                                <img src="/uploads/products/<%= product.image %>"
                                                                                                                    class="img-fluid mb-3"
                                                                                                                    style="max-height:150px; object-fit:contain; border-radius: var(--radius-md);">
                                                                                                                <% } else
                                                                                                                    { %>
                                                                                                                    <div class="mb-3 d-flex align-items-center justify-content-center text-muted"
                                                                                                                        style="height:150px; background: var(--surface-elevated); border: 1px dashed var(--surface-border); border-radius: var(--radius-md);">
                                                                                                                        <i
                                                                                                                            class="fas fa-image me-2"></i>
                                                                                                                        No
                                                                                                                        Image
                                                                                                                    </div>
                                                                                                                    <% }
                                                                                                                        %>

                                                                                                                        <% if
                                                                                                                            (product.stock==='in_stock'
                                                                                                                            )
                                                                                                                            {
                                                                                                                            %>
                                                                                                                            <% var
                                                                                                                                escapedName=product.name.replace(/'/g, "\\'"
                                                                                                                                );
                                                                                                                                %>
                                                                                                                                <button
                                                                                                                                    class="btn btn-primary btn-sm mt-auto"
                                                                                                                                    data-bs-toggle="modal"
                                                                                                                                    data-bs-target="#orderModal"
                                                                                                                                    onclick="setOrderProduct('<%= product.id %>', '<%= escapedName %>')">
                                                                                                                                    <i
                                                                                                                                        class="fas fa-paper-plane me-1"></i>
                                                                                                                                    Place
                                                                                                                                    an
                                                                                                                                    Inquiry
                                                                                                                                </button>
                                                                                                                                <% }
                                                                                                                                    %>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <% } %>
                                            </div>
                                            <% } else { %>
                                                <p class="text-muted"><i class="fas fa-info-circle me-1"></i> No
                                                    products available in this category.</p>
                                                <% } %>
                                </div>
                            </div>
                        </div>
                        <% } %>
        </div>
    </div>

    <!-- Order Modal -->
    <div class="modal fade" id="orderModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-clipboard-list me-2"></i> Place Inquiry</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" action="/place_order">
                    <div class="modal-body">
                        <p><strong>Product:</strong> <span id="orderProductLabel" class="text-accent"></span></p>
                        <input type="hidden" name="product_name" id="orderProductName">
                        <input type="hidden" name="product_id" id="orderProductId">
                        <div class="mb-3">
                            <label class="form-label">Expected Date</label>
                            <input type="date" class="form-control" name="expected_date" required>
                        </div>
                        <div class="mb-3 d-flex gap-2">
                            <input type="number" class="form-control" name="quantity_value" placeholder="Quantity"
                                required>
                            <input type="text" class="form-control" name="quantity_unit"
                                placeholder="Unit (kg, item, m...)" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Comments / Specifications</label>
                            <textarea class="form-control" name="comments" rows="3"
                                placeholder="Any special requirements or specifications..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success"
                            onclick="return confirm('Are you sure you want to place this inquiry?')">
                            <i class="fas fa-check me-1"></i> Confirm Inquiry
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function setOrderProduct(productId, productName) {
            document.getElementById("orderProductId").value = productId;
            document.getElementById("orderProductName").value = productName;
            document.getElementById("orderProductLabel").textContent = productName;
        }

        function filterProducts() {
            const query = document.getElementById("productSearch").value.trim().toLowerCase();
            const productCategories = document.querySelectorAll(".product-category");

            productCategories.forEach(category => {
                const collapseElement = category.querySelector(".collapse");
                const collapseInstance = bootstrap.Collapse.getOrCreateInstance(collapseElement, { toggle: false });
                const products = category.querySelectorAll(".card");
                let hasVisibleProduct = false;

                products.forEach(card => {
                    const title = card.querySelector(".card-title").textContent.trim().toLowerCase();
                    const optionsText = card.querySelector(".card-body").textContent.trim().toLowerCase();

                    if (title.includes(query) || optionsText.includes(query)) {
                        card.parentElement.style.display = "block";
                        hasVisibleProduct = true;
                    } else {
                        card.parentElement.style.display = "none";
                    }
                });

                if (query !== "") {
                    collapseInstance.show();
                    category.style.display = hasVisibleProduct ? "block" : "none";
                } else {
                    category.style.display = "block";
                    collapseInstance.hide();
                    products.forEach(card => {
                        card.parentElement.style.display = "block";
                    });
                }
            });
        }

        function checkForNewMessages() {
            fetch('/api/unread-count')
                .then(response => response.json())
                .then(data => {
                    const badge = document.querySelector('.badge.bg-danger');
                    if (data.count > 0) {
                        if (badge) {
                            badge.textContent = data.count;
                        }
                    } else if (badge) {
                        badge.remove();
                    }
                })
                .catch(error => console.error('Error checking messages:', error));
        }

        setInterval(checkForNewMessages, 30000);
        document.addEventListener('DOMContentLoaded', checkForNewMessages);
    </script>

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

</html>