<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Marketplace</title>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

  <!-- GOOGLE FONT -->
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">

  <!----===== Iconscout CSS ===== -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

  <!----===== Unpkg CSS ===== -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">


  <!-- Css Styles -->
  <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="/css/elegant-icons.css" type="text/css">
  <link rel="stylesheet" href="/css/nice-select.css" type="text/css">
  <link rel="stylesheet" href="/css/magnific-popup.css" type="text/css">
  <link rel="stylesheet" href="/css/jquery-ui.min.css" type="text/css">
  <link rel="stylesheet" href="/css/owl.carousel.min.css" type="text/css">
  <link rel="stylesheet" href="/css/slicknav.min.css" type="text/css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

  <!-- General theme -->
  <link href="/css/light.css" rel="stylesheet" id="theme-css"/>

  <!-- Specific styles -->
  <link href="/css/styleMarketplace.css" rel="stylesheet">

</head>

<body>

<!-- Importa o Header -->

    <header class="navbar navbar-expand-lg navbar-dark bg-darkBlue sticky-top pt-4">
    <div class="container-fluid">
        <!-- Logo -->
        <a class="navbar-brand" href="/">
            
            <img src="img/logo_mkt_new_white.png" alt="Rent Month to Month Marketplace" class="logo-img">
        </a>

        <!-- Toggler para mobile -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Conteúdo do menu -->
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 fs-5">
                <li class="nav-item dropdown">
                    <a id="categoriesDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="margin-left: 30px;">
                        Categories
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="categoriesDropdown">
                        <li>
                            <a class="dropdown-item fs-6"
                               href="/products?type=category&amp;value=game">
                                Gaming
                            </a>
                            
                        </li>
                        <li>
                            <a class="dropdown-item fs-6"
                               href="/products?type=category&amp;value=home">
                                Home
                            </a>
                            
                        </li>
                        <li>
                            <a class="dropdown-item fs-6"
                               href="/products?type=category&amp;value=fashion">
                                Fashion
                            </a>
                            
                        </li>
                        <li>
                            <a class="dropdown-item fs-6"
                               href="/products?type=category&amp;value=books">
                                Books
                            </a>
                            
                        </li>
                        <li>
                            <a class="dropdown-item fs-6"
                               href="/products?type=category&amp;value=tech">
                                Tech
                            </a>
                            
                        </li>
                        <li>
                            <a class="dropdown-item fs-6"
                               href="/products?type=category&amp;value=toys">
                                Toys
                            </a>
                            
                        </li>
                    </ul>
                </li>
            </ul>

            <!-- Barra de busca -->
            <form class="d-flex me-3" action="/products" method="get">
                <input type="hidden" name="type" value="search" />
                
                <input
                        class="form-control me-2 fs-5"
                        type="search"
                        name="value"
                        placeholder="What are you looking to shop? Describe what you need."
                        aria-label="Search"
                        style="height: 3rem; width: 480px; font-size: 1.1rem !important" />
                <button class="btn btn-outline-light fs-5" type="submit">Search</button>
            </form>

            <!-- Localização, login e carrinho -->
            <div class="d-flex align-items-center">
                
                
                <a href="/loginAndSignup" class="text-white me-3 fs-5">Login</a>
                <div class="cart-icon position-relative">
                    

                </div>
            </div>
        </div>
    </div>
</header>


<main id="content">
    <!-- Com Drawer -->
    <div class="d-flex">
        <div id="flex-drawer-sidebar" class="flex-shrink-0" style="min-height: 100vh;">
            <div class="sidebar collapsed" id="sidebar">

    <span
            id="notification-badge" class="d-none"></span>

    <button class="toggle-btn" id="toggleBtn" onclick="toggleSidebar()">
        <span id="toggleIcon">></span>
    </button>

    <div class="sidebar-content">
        <h4>This is your marketplace</h4>

        <!-- Administrator Options -->
        

        <!-- Business Management -->
        

        <!-- My Account -->
        <div class="filter-section">
            <h5>Account & Personalization</h5>
            <ul class="category-list">
                <li>
                    <a href="/loginAndSignup">Login and Signup</a>
                </li>

                

                

                

                

                

                
            </ul>
        </div>

        <!-- Order Tracking -->
        

        <!-- Theme Toggle -->
        <div class="filter-section">
            <h5>Choose your theme</h5>
            <button class="theme-toggle" onclick="toggleTheme()">
                <span class="theme-icon">🌙</span>
                <span class="theme-text">Dark Mode</span>
            </button>
        </div>

        <!-- Categories -->
        <div class="filter-section">
            <h5>Categories</h5>
            <ul class="category-list">
                <li>
                    <a href="/products?type=category&amp;value=game">Gaming</a>
                    
                </li>
                <li>
                    <a href="/products?type=category&amp;value=home">Home</a>
                    
                </li>
                <li>
                    <a href="/products?type=category&amp;value=fashion">Fashion</a>
                    
                </li>
                <li>
                    <a href="/products?type=category&amp;value=books">Books</a>
                    
                </li>
                <li>
                    <a href="/products?type=category&amp;value=tech">Tech</a>
                    
                </li>
                <li>
                    <a href="/products?type=category&amp;value=toys">Toys</a>
                    
                </li>
            </ul>
        </div>

        <!-- Price Range -->
        <div class="filter-section">
            <h5>Price</h5>
            <div class="price-range">
                <input type="range" class="range-slider" min="0" max="1000" value="500" id="priceRange">
            </div>
            <div class="range-values">
                <span>$0</span>
                <span id="maxPrice">$1000</span>
            </div>
        </div>

        <!-- Rating -->
        <div class="filter-section">
            <h5>Rating</h5>
            <div class="checkbox-group">
                <label class="styled-checkbox-label" style="display: flex; align-items: center; margin-bottom: 8px; cursor: pointer;">
                    <input type="checkbox" class="styled-checkbox-input" style="margin-right: 6px;">
                    <span class="styled-checkbox-custom"></span>
                    <span>★★★★★</span>
                </label>

                <label class="styled-checkbox-label" style="display: flex; align-items: center; margin-bottom: 8px; cursor: pointer;">
                    <input type="checkbox" class="styled-checkbox-input" style="margin-right: 6px;">
                    <span class="styled-checkbox-custom"></span>
                    <span>★★★★</span>
                </label>

                <label class="styled-checkbox-label" style="display: flex; align-items: center; margin-bottom: 8px; cursor: pointer;">
                    <input type="checkbox" class="styled-checkbox-input" style="margin-right: 6px;">
                    <span class="styled-checkbox-custom"></span>
                    <span>★★★</span>
                </label>

                <label class="styled-checkbox-label" style="display: flex; align-items: center; margin-bottom: 8px; cursor: pointer;">
                    <input type="checkbox" class="styled-checkbox-input" style="margin-right: 6px;">
                    <span class="styled-checkbox-custom"></span>
                    <span>★★</span>
                </label>

                <label class="styled-checkbox-label" style="display: flex; align-items: center; margin-bottom: 8px; cursor: pointer;">
                    <input type="checkbox" class="styled-checkbox-input" style="margin-right: 6px;">
                    <span class="styled-checkbox-custom"></span>
                    <span>★</span>
                </label>
            </div>
        </div>

        <!-- Brand -->
        <div class="filter-section">
            <h5>Brand</h5>
            <div class="checkbox-group">
                <label class="styled-checkbox-label" style="display: block;">
                    <input type="checkbox" class="styled-checkbox-input">
                    <span class="styled-checkbox-custom"></span>
                    Samsung
                </label>

                <label class="styled-checkbox-label" style="display: block;">
                    <input type="checkbox" class="styled-checkbox-input">
                    <span class="styled-checkbox-custom"></span>
                    Apple
                </label>

                <label class="styled-checkbox-label" style="display: block;">
                    <input type="checkbox" class="styled-checkbox-input">
                    <span class="styled-checkbox-custom"></span>
                    Nike
                </label>
            </div>
        </div>

        <button class="btn" onclick="applyFilters()" style="background-color: #0b93f2; color: white; padding: 10px; margin: 10px;">
            Apply Filters
        </button>

        <button class="btn" onclick="clearFilters()" style="background-color: #0b93f2; color: white; padding: 10px; margin: 10px;">
            Clear Filters
        </button>

    </div>
</div>
        </div>

        <div class="flex-grow-1">
            <body>
<div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</div>
</body>
        </div>
    </div>

    <!-- Sem Drawer -->
    
</main>

<!-- Importa o Footer -->
<footer class="bg-darkBlue text-white py-3 mt-auto position-relative">
    <div class="text-center">
        &copy; 2025 Rent Month to Month - All rights reserved.
    </div>
    <a href="/monthtomonth"
       style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #0b93f2; text-decoration: underline;">
        
        <img src="img/logo_extra_new.png" alt="Rent Month to Month" style="height: 46px;">
        rentmtm.com
    </a>
</footer>

<!-- =========================
     CSS / Preloads (CDN)
     ========================= -->
<link
        rel="preload"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"
        integrity="sha512-+0n0xVW2Z0J2N9LkZc6wQ2PumoefRg2fzGEylh4G6dkhOCi/hTyTXQbY4Z1cdqUPVHtVHCnRvWmvMRGsiE9fYg=="
        crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" defer></script>

<!-- =========================
     Vendor (por página)
     ========================= -->


<!-- Leaflet (somente se você realmente usa em alguma página) -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" defer></script>

<!-- =========================
     JS Core / Plugins (ordem importa: jQuery antes)
     ========================= -->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<script src="/js/jquery.nice-select.min.js" defer></script>
<script src="/js/jquery-ui.min.js" defer></script>
<script src="/js/jquery.nicescroll.min.js" defer></script>
<script src="/js/jquery.magnific-popup.min.js" defer></script>
<script src="/js/jquery.slicknav.js" defer></script>
<script src="/js/owl.carousel.min.js" defer></script>

<!-- Template main (jQuery-based) -->
<script src="/js/main.js" defer></script>

<!-- =========================
     JS Globais (sempre)
     ========================= -->
<script src="/js/removeScrollFocus.js" defer></script>
<script src="/js/drawer.js" defer></script>
<script src="/js/theme.js" defer></script>
<script src="/js/preferences.js" defer></script>
<script src="/js/commons.js" defer></script>

<!-- =========================
     JS por página (com th:if)
     ========================= -->

<!-- HOME -->


<!-- MY ACCOUNT -->


<!-- HOME CUSTOMIZATION -->


<!-- PÁGINAS GENÉRICAS (catch-all /{page}) -->

    <script src="/js/itemImageModal.js" defer></script>
    <script src="/js/scriptMarketplace.js" defer></script>

    <!-- mantenha somente se essas páginas realmente usam -->
    <script src="/js/scriptForgotPassword.js" defer></script>
    <script src="/js/scriptRegisterProfile.js" defer></script>
    <script src="/js/scriptSearchRentalItem.js" defer></script>
    <script src="/js/scriptBtns.js" defer></script>
    <script src="/js/scriptAPIConsumeAddress.js" defer></script>


<!-- =========================
     Websocket libs (se usar)
     ========================= -->
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js" defer></script>
<script src="/js/listener.js" defer></script>

<!-- Outros -->
<script src="/js/confirmCancelOrder.js" defer></script>
<script src="/js/shipping.js" defer></script>
<script src="/js/cart.js" defer></script>
<script src="/js/checkout.js" defer></script>
<script src="/js/collapseOrders.js" defer></script>
<script src="/js/filterOrders.js" defer></script>
<script src="/js/filterProducts.js" defer></script>
<script src="/js/approveItems.js" defer></script>

<!-- Address Autocomplete separado -->
<script src="/js/scriptAddressAutoComplete.js" defer></script>

</body>
</html>
