{% load static %}
{% load shop_extras currency_filters i18n %}
<style>
  .product-price {
    transition: all 0.3s ease;
  }
</style>
<header class="bg-white border-bottom shadow-sm py-2 py-md-3">
  <div class="container-fluid ps-5 pe-5">
    <div class="d-flex justify-content-between align-items-center">
      <!-- Logo -->
      <div class="">
        <a href="{% url 'shop:home' %}" class="d-flex align-items-center text-decoration-none">
          <img src="{% static 'images\banshix logo.jpeg' %}" alt="BanshiX Logo" width="50" height="50" class="rounded-circle border border-2 border-primary me-2 me-md-3" />
          <h1 class="fw-bold text-dark mb-0 fs-4 fs-md-3">BanshiX</h1>
        </a>
      </div>
      
      <!-- Search + Icons -->
      <div class="">
        <div class="d-flex">
          <!-- Search Bar -->
          <div class="col-12 col-md-4 order-2 order-md-1">
            <form class="d-flex  d-none d-md-flex" method="get" action="{% url 'shop:product_list' %}">
              <div class="input-group">
                <input type="text" class="form-control form-control-sm" name="q" placeholder="{% trans 'Search products...' %}" value="{{ request.GET.q }}" />
                <button class="btn btn-primary btn-sm" type="submit"><i class="fas fa-search"></i></button>
              </div>
            </form>
          </div>

          <!-- Icons Section -->
          <div class="col-12 col-md-8 order-1 order-md-2">
            <div class="d-flex align-items-center justify-content-end gap-2 gap-md-3">
              <div class="d-flex flex-row align-items-end text-end me-2 d-none d-md-flex">
                <span class="small text-muted me-1">Visitors today</span>
                <span id="visitor-count-header" class="badge bg-info text-dark fw-semibold">0</span>
              </div>

              <div class="d-flex d-md-none">
                {% if user.is_authenticated %}
                  <a href="{% url 'shop:user_dashboard' %}" class="text-dark"><i class="fas fa-user-circle fa-lg"></i></a>
                {% else %}
                  <a href="{% url 'account_login' %}" class="btn btn-outline-primary btn-sm">{% trans 'Login' %}</a>
                {% endif %}
              </div>

              <!-- Language Selector -->
              <div class="dropdown">
                <button 
                  class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                  type="button" 
                  id="languageDropdown" 
                  data-bs-toggle="dropdown" 
                  aria-expanded="false"
                  title="Select Language">
                  <i class="fas fa-globe bg-danger"></i>
                  <span class="d-none d-md-inline ms-1">{{ current_language|upper }}</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
                  {% for lang_code, lang_name in available_languages %}
                    <li>
                      <a class="dropdown-item {% if lang_code == current_language %}active fw-bold{% endif %}" 
                         href="{% url 'shop:set_language_with_code' lang_code %}">
                        <i class="fas fa-check me-2 bg-info"></i>
                        {{ lang_name }}
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              </div>

              <!-- Currency Switcher -->
              <div class="dropdown">
                <button 
                  class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                  type="button" 
                  id="currencyDropdown" 
                  data-bs-toggle="dropdown"
                  title="Select Currency">
                  <i class="fas fa-coins"></i>
                  <span class="d-none d-md-inline ms-1">{{ currency_symbol }} {{ current_currency }}</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="currencyDropdown">
                  {% for curr_code, curr_info in currencies.items %}
                    <li>
                      <a class="dropdown-item currency-switch {% if curr_code == current_currency %}active fw-bold{% endif %}" 
                         href="{% url 'shop:set_currency_with_code' curr_code %}"
                         data-currency="{{ curr_code }}">
                        <i class="fas fa-check me-2"></i>
                        {{ curr_info.symbol }} {{ curr_code }} — {{ curr_info.name }}
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              </div>
              <!-- Cart -->
              <a href="{% url 'shop:cart' %}" class="text-dark position-relative">
                <i class="fas fa-shopping-cart fa-3x"></i>
                <span id="cart-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger px-2">0</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- ==================== MAIN NAVIGATION ==================== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top shadow z-3"  style="
    z-index: 1050;
    border-bottom: 3px solid #0d6efd;
    background: linear-gradient(90deg, #a14e17, #df565d);">
  <div class="container">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"><span class="navbar-toggler-icon"></span></button>
    <form class="d-flex d-md-none" method="get" action="{% url 'shop:product_list' %}">
      <div class="input-group">
        <input type="text" class="form-control form-control-sm" name="q" placeholder="{% trans 'Search products...' %}" value="{{ request.GET.q }}" />
        <button class="btn btn-primary btn-sm" type="submit"><i class="fas fa-search"></i></button>
      </div>
    </form>
    <div class="d-flex flex-row align-items-end text-end me-2 d-md-none">
      <span class="small text-muted me-1">Visitors today</span>
      <span id="visitor-count-navbar" class="badge bg-info text-dark fw-semibold">0</span>
    </div>

    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'shop:product_list' %}"><i class="fas fa-store"></i> {% trans 'Shop' %}</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"><i class="fas fa-th-large"></i> {% trans 'Categories' %}</a>
          <ul class="dropdown-menu">
            {% for category in product_category %}
              <li>
                <a class="dropdown-item" href="{% url 'shop:product_list' %}?category={{ category.slug }}">{% trans category.name %}</a>
              </li>
            {% endfor %}
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'shop:about' %}">{% trans 'About' %}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'shop:help' %}">{% trans 'Help' %}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'shop:faq' %}">{% trans 'FAQ' %}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'shop:privacy_policy' %}">{% trans 'Privacy Policy' %}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'shop:terms_of_service' %}">{% trans 'Terms of Service' %}</a>
        </li>
      </ul>

      <!-- Right Side -->
      <ul class="navbar-nav">
        {% if user.is_authenticated %}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"><i class="fas fa-user"></i> {{ user.username }}</a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <a class="dropdown-item" href="{% url 'shop:user_dashboard' %}">{% trans 'Dashboard' %}</a>
              </li>             
              <li>
                <a class="dropdown-item" href="{% url 'shop:order_list' %}">My Orders</a>
              </li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              {% if user.is_staff %}
                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:manage_dashboard' %}">{% trans 'Admin Dashboard' %}</a>
                </li>
                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:all_tickets_dashboard' %}">{% trans 'Manage Tickets' %}</a>
                </li>
                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:inventory_dashboard' %}">{% trans 'Manage Inventory' %}</a>
                </li>
                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:admin_orders' %}">{% trans 'Manage Orders' %}</a>
                </li>
                 <li>
                <a class="dropdown-item" href="{% url 'accounts:shipping_address_list' %}">{% trans 'Manage Addresses' %}</a>
              </li>
                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:category_create' %}">{% trans 'Manage Category' %}</a>
                </li>
                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:create_product' %}">{% trans 'Manage Product' %}</a>
                </li>
              {% endif %}
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li>
                <a class="dropdown-item text-danger" href="{% url 'account_logout' %}">Logout</a>
              </li>
              <li>
                <a class="dropdown-item"
                  href="{% url 'mfa_index' %}">
                    <i class="bi bi-shield-lock me-2"></i>
                    Security Settings
                </a>
            </li>
            </ul>
          </li>
        {% else %}
        <div class="d-flex align-items-center gap-2">
          <li class="nav-item">
            <a class="btn btn-primary" href="{% url 'account_login' %}">{% trans 'Login' %}</a>
          </li>
          <li class="nav-item">
            <a class="btn btn-outline-success" href="{% url 'account_signup' %}">{% trans 'Sign Up' %}</a>
          </li>
          
        </div>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

<!-- ==================== LANGUAGE & CURRENCY SWITCH JAVASCRIPT ==================== -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const CURRENCIES = {{ currencies_json|safe }};

    function updateAllPrices(newCurrency) {
      const rate = CURRENCIES[newCurrency].rate
      const symbol = CURRENCIES[newCurrency].symbol

      document.querySelectorAll('.product-price').forEach(function (el) {
        const basePrice = parseFloat(el.getAttribute('data-price'))
        if (!isNaN(basePrice)) {
          const converted = (basePrice * rate).toFixed(2)
          el.textContent = `${symbol}${converted}`
        }
      })
    }

    function updateVisitorCount() {
      fetch('{% url "shop:live_visitors_count" %}')
        .then((response) => response.json())
        .then((data) => {
          const count = data.daily_visitors || 0;
          const formattedCount = count.toLocaleString();

          // Update Header Visitor Count (Large screens)
          const headerCount = document.getElementById('visitor-count-header');
          if (headerCount) headerCount.textContent = formattedCount;

          // Update Navbar Visitor Count (Small screens)
          const navbarCount = document.getElementById('visitor-count-navbar');
          if (navbarCount) navbarCount.textContent = formattedCount;

        })
        .catch((error) => {
          console.error('Visitor count failed:', error)
        })
    }

    updateVisitorCount()
    setInterval(updateVisitorCount, 100)  // Update every 5 minutes

    // Load saved currency preference and update prices
    const currentCurrency = '{{ current_currency }}'
    if (currentCurrency && CURRENCIES[currentCurrency]) {
      updateAllPrices(currentCurrency)
    }
  })
</script>