{% extends "mysite_master.html" %}
{% load static %}


{% block navigation %}

<nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
    <div class="offcanvas-header py-3">
        <a href="{% url "site_home" %}" rel="noopener noreferrer">
            <img src="{% static 'site_assets/img/home/grocery/logo.png' %}" class="Logo" width="200px" alt="Image">
        </a>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body pt-0 pb-3">

      <!-- Navbar nav -->
      <div class="h6 fw-medium py-1 mb-0">
        <a class="d-block animate-underline py-1" href="{% url "site_home" %}">
          <span class="d-inline-block animate-target py-1">Home</span>
        </a>
      </div>
      <div class="h6 fw-medium py-1 mb-0">
        <a class="d-block animate-underline py-1" href="{% url "about_us" %}">
          <span class="d-inline-block animate-target py-1">About us</span>
        </a>
      </div>
      <div class="h6 fw-medium py-1 mb-0">
        <a class="d-block animate-underline py-1" href="{% url "shop_catalog" %}">
          <span class="d-inline-block animate-target py-1">Shop</span>
        </a>
      </div>
      <div class="h6 fw-medium py-1 mb-0">
        <a class="d-block animate-underline py-1" href="{% url "contact_us" %}">
          <span class="d-inline-block animate-target py-1">Contact Us</span>
        </a>
      </div>
    </div>

    <!-- Account button visible on screens < 768px wide (md breakpoint) -->
    <div class="offcanvas-header flex-column align-items-start d-md-none">
      <a class="btn btn-lg btn-outline-secondary w-100 rounded-pill" href="account-signin.html">
        <i class="ci-user fs-lg ms-n1 me-2"></i>
        Account
      </a>
    </div>
  </nav>
<header class="navbar navbar-expand navbar-sticky sticky-top d-block bg-body z-fixed py-1 py-lg-0 py-xl-1 px-0" data-sticky-element="" style="">
    <div class="container justify-content-start py-2 py-lg-3">

      <!-- Offcanvas menu toggler (Hamburger) -->
      <button type="button" class="navbar-toggler d-block d-lg-none flex-shrink-0 me-3 me-sm-4" 
      data-bs-toggle="offcanvas" data-bs-target="#navbarNav" 
      aria-controls="navbarNav" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>


      <!-- Navbar brand (Logo) -->
      <a href="{% url "site_home" %}">
        <img src="{% static 'site_assets/img/home/grocery/logo.png' %}" class="Logo" width="200px" alt="Image">
      </a> 

      <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
  <div class="collapse navbar-stuck-hide" id="stuckNav">
    <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
      <div class="offcanvas-header py-3">
        <h5 class="offcanvas-title text-dark" id="navbarNavLabel">MK Aquarium</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body py-3 py-lg-0">
        <div class="container px-0 px-lg-3">
          <div class="row">
            <!-- Navbar nav -->
            <div class="col-lg-12 d-none d-lg-block pt-3 pt-lg-0 ps-lg-0">
              <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link {% if request.path == site_home_url %}active{% endif %}" href="{% url "site_home" %}">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link {% if request.path == about_us_url %}active{% endif %}" href="{% url "about_us" %}">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link {% if request.path == shop_catalog_url %}active{% endif %}" href="{% url "shop_catalog" %}">Shop</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link {% if request.path == contact_us_url %}active{% endif %}" href="{% url "contact_us" %}">Contact Us</a>
                  </li>
                </ul>
              <hr class="d-lg-none my-3">
              
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>



      <!-- Button group -->
    <div class="d-flex align-items-center gap-md-1 gap-lg-2 ms-auto">
        <div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
            <input type="search" id="search-input" class="form-control form-control-lg rounded-pill"  placeholder="Search for products" aria-label="Search">
            <button type="button"
                    class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
                    aria-label="Search button">
                <i class="ci-search"></i>
            </button>
            <!-- Suggestions dropdown -->
            <div id="suggestions" class="list-group position-absolute w-100 bg-white" style="top: 100%; z-index: 10;"></div>
        </div>

        <!-- Search toggle button visible on screens < 768px wide (md breakpoint) -->
        <button type="button" class="btn btn-icon fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-md-none" data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar" aria-label="Toggle search bar">
            <i class="ci-search animate-target"></i>
        </button>


        <!-- Theme switcher (light/dark/auto) -->
        <div class="dropdown">
            <button type="button" class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
                <span class="theme-icon-active d-flex animate-target">
                <i class="ci-sun"></i>
                </span>
            </button>
            <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
                <li>
                <button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
                    <span class="theme-icon d-flex fs-base me-2">
                    <i class="ci-sun"></i>
                    </span>
                    <span class="theme-label">Light</span>
                    <i class="item-active-indicator ci-check ms-auto"></i>
                </button>
                </li>
                <li>
                <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
                    <span class="theme-icon d-flex fs-base me-2">
                    <i class="ci-moon"></i>
                    </span>
                    <span class="theme-label">Dark</span>
                    <i class="item-active-indicator ci-check ms-auto"></i>
                </button>
                </li>
                <li>
                <button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
                    <span class="theme-icon d-flex fs-base me-2">
                    <i class="ci-auto"></i>
                    </span>
                    <span class="theme-label">Auto</span>
                    <i class="item-active-indicator ci-check ms-auto"></i>
                </button>
                </li>
            </ul>
        </div>


        <!-- Account button visible on screens > 768px wide (md breakpoint) -->
        <div class="dropdown">
            <button type="button"
                    class="btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" 
                    data-bs-toggle="dropdown" 
                    aria-expanded="false" 
                    aria-label="Toggle account">
                <span class="account-icon-active d-flex animate-target">
                    <i class="ci-user"></i>
                </span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end mt-2" style="--cz-dropdown-min-width: 12rem">
                {% if user.is_authenticated %}
                    <li>
                        <span class="dropdown-item text-center">Welcome, {{ user.username|capfirst }}</span>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{% url "user_dashboard" %}">
                            <span class="account-icon d-flex fs-base me-2">
                                <i class="ci-home fs-base opacity-75 me-2"></i>
                            </span>
                            <span class="account-label">Dashboard</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{% url "user_orders" %}">
                            <span class="account-icon d-flex fs-base me-2">
                                <i class="ci-package"></i>
                            </span>
                            <span class="account-label">My Orders</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{% url "user_wishlist" %}">
                            <span class="account-icon d-flex fs-base me-2">
                                <i class="ci-heart"></i>
                            </span>
                            <span class="account-label">Wishlist</span>
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item text-danger" href="{% url 'logout' %}"> <!-- Adjust logout URL -->
                            <span class="account-icon d-flex fs-base me-2">
                                <i class="ci-log-out fs-base opacity-75 me-2"></i>
                            </span>
                            <span class="account-label">Logout</span>
                        </a>
                    </li>
                {% else %}
                    <li>
                        <a class="dropdown-item" href="{% url 'login' %}">
                            <span class="account-icon d-flex fs-base me-2">
                                <i class="ci-login"></i>
                            </span>
                            <span class="account-label">Login</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>  
        <!-- Cart button -->
        <a href="{% url 'view_cart' %}" class="btn btn-icon fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale">
            {% if user.is_authenticated %}
            <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill ms-n3 z-2"
                style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">
                {{ cart_item_count }}
            </span>
            {% endif %}
            <i class="ci-shopping-cart animate-target"></i>
        </a>
    </div>
    </div>

    <div class="collapse d-md-none" id="searchBar">
        <div class="container pt-2 pb-3">
          <div class="position-relative">
            <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
            <input type="search" id="mobile-search-input" class="form-control form-icon-start rounded-pill" placeholder="Search for products" data-autofocus="collapse">
            <!-- Suggestions dropdown -->
            <div id="mobile-suggestions" class="list-group position-absolute w-100 bg-white" style="top: 100%; z-index: 10;"></div>
          </div>
        </div>
      </div>
</header>

{% endblock navigation %}




{% block content %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.wishlist-btn').on('click', function() {
            const button = $(this);
            const productId = button.data('product-id');

            $.ajax({
                url: "{% url 'toggle_wishlist' 0 %}".replace('0', productId),
                type: "POST",
                data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function(response) {
                    if (response.status === 'added') {
                        button.find('i').addClass('filled-heart').css('color', 'red');
                        window.location.reload();
                    } else if (response.status === 'removed') {
                        button.find('i').removeClass('filled-heart').css('color', '');
                        window.location.reload();
                    }
                },
                error: function() {
                    window.location.reload();
                }
            });
        });

        $('[data-increment], [data-decrement]').on('click', function() {
            const isIncrement = $(this).data('increment') !== undefined;
            const cartItem = $(this).closest('[data-cart-item-id]');
            const cartItemId = cartItem.data('cart-item-id');
            let quantityInput = cartItem.find('input[type="number"]');
            let currentQuantity = parseInt(quantityInput.val());
            let newQuantity = isIncrement ? currentQuantity : currentQuantity;
            if (newQuantity < 1) return; // Prevent quantity from going below 1
            quantityInput.val(newQuantity);
            updateCart(cartItemId, newQuantity);
        });
    });

    function removeFromCart(cartItemId) {
        $.ajax({
            url: `/mysite/remove_cart_item/${cartItemId}/`,
            type: 'POST',
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            },
            data: {
                'action': 'delete'
            },
            success: function() {
                location.reload();
                $(`[data-cart-item-id="${cartItemId}"]`).remove();
            },
            error: function() {
                console.error('Error removing item from cart');
            }
        });
    }

    function updateCart(cartItemId, quantity) {
        $.ajax({
            url: `/mysite/update_cart_item/${cartItemId}/`,
            type: 'POST',
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            },
            contentType: 'application/json',
            data: JSON.stringify({ quantity: quantity }),
            success: function(data) {
                $(`[data-cart-item-id="${cartItemId}"] .item-total-price`).text(`₹ ${data.item_total_price}`);
                $('#cart-total-price').text(`₹ ${data.cart_total_price}`);
            },
            error: function(xhr) {
                console.error('Failed to update cart item:', xhr.responseText);
            }
        });
    }

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }


    // Generalized function to handle search inputs
    function setupSearch(inputId, suggestionsId) {
      const searchInput = document.getElementById(inputId);
      const suggestionsContainer = document.getElementById(suggestionsId);

      searchInput.addEventListener('keyup', function () {
          const query = this.value;

          if (query.length > 0) {
              fetch(`/mysite/product-suggestions/?q=${query}`)
                  .then(response => response.json())
                  .then(data => {
                      suggestionsContainer.innerHTML = '';
                      data.forEach(item => {
                          const suggestionItem = document.createElement('a');
                          suggestionItem.href = `/mysite/shop_catalog/?q=${item.name}`;
                          suggestionItem.className = 'list-group-item list-group-item-action';
                          suggestionItem.textContent = `${item.name} - ${item.category}`;
                          suggestionsContainer.appendChild(suggestionItem);
                      });
                  })
                  .catch(err => {
                      console.error('Error fetching suggestions:', err);
                  });
          } else {
              suggestionsContainer.innerHTML = '';
          }
      });

      // Clear suggestions when input loses focus
      searchInput.addEventListener('blur', () => {
          setTimeout(() => suggestionsContainer.innerHTML = '', 200); // Delay to allow click on suggestions
      });
    }

    // Initialize both mobile and desktop search
    document.addEventListener('DOMContentLoaded', () => {
      setupSearch('search-input', 'suggestions'); // Desktop search
      setupSearch('mobile-search-input', 'mobile-suggestions'); // Mobile search
    });

</script>
{% endblock content %}