<%-include('./partials/header.ejs')%>


<nav>
    <div class="logo">
        <img src="Images/navLogo.png">
    </div>
    <ul class="nav-links">
        <li><a href="/">Home</a></li>
        <li><a href="/about-us">About Us</a></li>
        <li class="drop-down">
            <a href="/categories">Categories</a>
            <div class="categories-container pop-up-menu">
                <ul>
                    <% if (Category.length === 0) { %>
                        <p>No categories found.</p>
                    <% } else { %>
                        <% Category.forEach(category => { %>
                            <li data-tag="<%= category.name %>">
                                <img src="<%= category.image %>" alt="<%= category.name %>">
                                <h2><%= category.name %></h2>
                            </li>
                        <% }); %>
                    <% } %>
                </ul>
            </div>
        </li>
        <li class="drop-down">
            <a href="/services">Services</a>
            <div class="service-container pop-up-menu">
                <ul>
                    <% if (Services.length === 0) { %>
                        <p>No services found.</p>
                    <% } else { %>
                        <% Services.forEach(service => { %>
                            <li data-tag="<%= service.name %>">
                                <img src="<%= service.image %>" alt="<%= service.name %>">
                                <h2><%= service.name %></h2>
                            </li>
                        <% }); %>
                    <% } %>
                </ul>
            </div>
        </li>
        
        <li><a href="/shop">Shop</a></li>
        <li><a class="active" href="/contact-us">Contact Us</a></li>
    </ul>
    <div class="search-bar">
        <span class="icon"><img src="Images/search.png"></span>
        <input type="search" placeholder=" Search through our collection">
        <div class="search-parts-container">
            <% if (Products.length === 0) { %>
                <p>No products found.</p>
            <% } else { %>
                <% Products.forEach(Product => { %>
                    <a href="/details/<%= Product.i_d %>">
                        <div class="card" data-category="<%= Product.category %>" data-brand="<%= Product.brand %>">
                            <img src="<%= Product.image %>" alt="<%= Product.name %>">
                            <h3><%= Product.name %></h3>
                        </div>
                    </a>
                <% }); %>
            <% } %>  
        </div>
    </div>
    <ul class="nav-icons">
        <li><h3 class="cartCount"><%=cartProducts.length%></h3><a href="/cart"><img src="Images/cart.png" id="cart"></a></li>
        <li id="open"><img src="Images/open.png"></li>
        <li id="close"><img src="Images/close.png"></li>
    </ul>
</nav>

<section class="info top-banner">
    <h2>Contact Us</h2>
    <div>
        <form action="/addMessage" method="post">
            <ul>
                <li class="spec-input">
                    <div>
                        <label for="firstUserName"></label>
                        <input type="text" name="firstUserName" placeholder="First name" required>
                    </div>
                    <div>
                        <label for="lastUserName"></label>
                        <input type="text" name="lastUserName" placeholder="Last Name" required>
                    </div>
                </li>
                <li class="spec-input">
                    <div>
                        <label for="mobileNumber"></label>
                        <input type="number" name="mobileNumber" placeholder="Mobile number" required>
                    </div> 
                    <div>
                        <label for="email"></label>
                        <input type="email" name="email" placeholder="Email" required>
                    </div>
                </li>
                <li class="spec-input">
                    <div>
                        <label for="subject"></label>
                        <input type="text" name="subject" placeholder="Subject">
                    </div>
                </li>
                <textarea name="text" id="" placeholder="Write message here..."></textarea>
            </ul>
            <button class="danger" >Submit</button>
        </form>
        <div class="info-section">
            <h2>PanTracks company ltd</h2>
            <p>
                Get in touch with pan trucks East Africa  for prompt and affordable truck spare parts and auto services. Our technicians have years of experience in the trade and ensure that you receive a high standard of service every time. Contact us today for a free quote.
            </p>
            <div class="details">
                <h3>+254 722699004</h3>
                <h3>+254 726747083</h3>
                <h3>info@pantrackskenya.co.ke</h3>
            </div>
        </div>
    </div>
</section>

<section class="map-section">
    <div class="right">
        <img src="Images/map.png">
    </div>
    <div class="location">
        <img src="Images/location1.png">
        <img src="Images/location2.png">
    </div>
</section>

<script>
    const formButton = document.querySelector('.info .danger');
    formButton.addEventListener('click', async function(e) {
    e.preventDefault(); // Prevent the default form submission

    // Check if any of the form fields are empty
    if (document.querySelector('input[name="firstUserName"]').value === '' ||
        document.querySelector('input[name="lastUserName"]').value === '' ||
        document.querySelector('input[name="mobileNumber"]').value === '' ||
        document.querySelector('input[name="email"]').value === '' ||
        document.querySelector('input[name="subject"]').value === '' ||
        document.querySelector('textarea[name="text"]').value === '') {
        alert('Please fill in all fields');
        return; // Exit the function early if any field is empty
    }else{
        document.querySelector('form').submit();
    }

    // If all fields are filled, show the alert and reload after a short delay
    setTimeout(() => {
        alert('Your message was sent, we will be in touch with you shortly');
        window.location.reload(true);
    }, 100);
});

</script>



<script>window.addEventListener('beforeunload', function(event) {
        console.log('Clearing session storage');
        sessionStorage.removeItem('cartItems');
    });</script><%-include('./partials/footer.ejs')%>