{% load static %}
{% load shop_extras currency_filters %}

{% load static %}
<!-- Top Brand Header -->
<header class="bg-white border-bottom shadow-sm py-3">
  <div class="container d-flex flex-sm-column flex-md-row align-items-center justify-content-between">
    <div class="d-flex justify-content-start">
      <a href="{% url 'shop:home' %}" class="d-flex align-items-center text-decoration-none">
        <img src="{% static 'images/WhatsApp Image 2026-04-13 at 16.22.23.jpeg' %}" alt="BanshiX Logo" width="58" height="58" class="rounded-circle border border-2 border-primary me-3" />
        <h1 class="fw-bold text-dark mb-0 fs-3">BanshiX</h1>
      </a>
    </div>
    <div class="d-flex flex-md-row flex-sm-column justify-content-end gap-3 mt-3 mt-md-0">
      <form class="d-flex flex-grow-1 mx-4" method="get" action="{% url 'shop:product_list' %}" style="max-width: 500px;">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search products, categories..." aria-label="Search" />
          <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i></button>
        </div>
      </form>
      <!-- Right Side Icons -->
      <div class="d-flex align-items-center gap-4 justify-content-center">
        {% if user.is_authenticated %}
          <a href="{% url 'accounts:user_dashboard' %}" class="text-dark"><i class="fas fa-user-circle fa-2x"></i></a>
        {% else %}
          <a href="{% url 'account_login' %}" class="btn btn-outline-primary btn-sm">Login</a>
        {% endif %}
        <!-- Mini Cart Dropdown -->
        <div class="dropdown">
          <a href="{% url 'shop:cart' %}" class="text-dark position-relative dropdown-toggle" id="cartDropdown" data-bs-toggle="dropdown" aria-expanded="false" style="z-index: 1060;">
            <i class="fas fa-shopping-cart fa-2x"></i>
            <span id="cart-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger px-2">0</span>
          </a>

          <!-- Mini Cart Dropdown Menu -->
          <div class="dropdown-menu dropdown-menu-end p-0 shadow-lg" style="width: 340px; z-index: 1070;" id="mini-cart">
            <div class="p-3 border-bottom bg-light">
              <h6 class="mb-0">Your Cart</h6>
            </div>
            <div id="mini-cart-items" class="p-3" style="max-height: 380px; overflow-y: auto;">
              <!-- Filled dynamically via HTMX or JS -->
              <p class="text-muted text-center py-4">Your cart is empty</p>
            </div>
            <div class="p-3 border-top">
              <a href="{% url 'shop:cart' %}" class="btn btn-success w-100">View Full Cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Main Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top shadow shadow-lg" 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>
    <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> Shop</a>
        </li>

        <!-- Category Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"><i class="fas fa-th-large"></i> Categories</a>
          <ul class="dropdown-menu">
            {% for category in categories %}
              <li>
                <a class="dropdown-item" href="{% url 'shop:product_list' %}?category={{ category.slug }}">{{ category.name }}</a>
              </li>
            {% endfor %}
          </ul>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="{% url 'shop:about' %}">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'shop:help' %}">Help</a>
        </li>
      </ul>
      <!-- User Account -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'shop:my_tickets' %}">My Tickets</a>
        </li>
        {% if user.is_authenticated %}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"><i class="fas fa-user"></i> {{ user.username }}</a>
            <ul class="dropdown-menu dropdown-menu-end">
              {% if user.is_staff %}
                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:manage_dashboard' %}">Admin Dashboard</a>
                  <a class="dropdown-item" href="{% url 'shop:all_tickets_dashboard' %}">Mange tickets</a>
                  <a class="dropdown-item" href="{% url 'shop:inventory_dashboard' %}">Inventory Management</a>
                  {% comment %} <a class="dropdown-item" href="{% url 'shop:inventory_report' %}">Inventory Report</a> {% endcomment %}
                </li>
                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:admin_orders' %}">Manage Orders</a>
                </li>

                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:category_create' %}">Create Category</a>
                </li>
                <li class="nav-item">
                  <a class="dropdown-item" href="{% url 'shop:create_product' %}">Create Product</a>
                </li>
              {% else %}
                <li>
                  <a class="dropdown-item" href="{% url 'accounts:user_dashboard' %}">Dashboard</a>
                </li>
              {% endif %}
              <li>
                <a class="dropdown-item" href="{% url 'accounts:customer_profile' %}">My Profile</a>
              </li>
              <li>
                <a class="dropdown-item" href="{% url 'accounts:shipping_address_list' %}">Shipping Addresses</a>
              </li>
              <li>
                <a class="dropdown-item" href="{% url 'shop:order_list' %}">My Orders</a>
              </li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li>
                <a class="dropdown-item text-danger" href="{% url 'account_logout' %}">Logout</a>
              </li>
              <li>
                <hr class="dropdown-divider" />
              </li>
            </ul>
          </li>
        {% else %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_login' %}">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_signup' %}">Sign Up</a>
          </li>
        {% endif %}
        <!-- Currency Switcher -->
        <!-- Simpler & More Reliable Currency Switcher -->
        {% comment %} <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">{{ currency_symbol }} {{ current_currency }}</a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li>
              <a class="dropdown-item" href="{% url 'shop:set_currency' %}?currency=USD">$ USD - United States Dollar</a>
            </li>
            <li>
              <a class="dropdown-item" href="{% url 'shop:set_currency' %}?currency=EUR">€ EUR - Euro</a>
            </li>
            <li>
              <a class="dropdown-item" href="{% url 'shop:set_currency' %}?currency=GBP">£ GBP - British Pound</a>
            </li>
            <li>
              <a class="dropdown-item" href="{% url 'shop:set_currency' %}?currency=GEL">₾ GEL - Georgian Lari</a>
            </li>
            <li>
              <a class="dropdown-item" href="{% url 'shop:set_currency' %}?currency=CNY">¥ CNY - Chinese Yuan</a>
            </li>
            <li>
              <a class="dropdown-item" href="{% url 'shop:set_currency' %}?currency=JPY">¥ JPY - Japanese Yen</a>
            </li>
          </ul>
        </li> {% endcomment %}
        <!-- Clean Currency Switcher -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">{{ currency_symbol }} {{ current_currency }}</a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li>
              <a class="dropdown-item currency-switch" href="#" data-currency="USD">$ USD — United States Dollar</a>
            </li>
            <li>
              <a class="dropdown-item currency-switch" href="#" data-currency="EUR">€ EUR — Euro</a>
            </li>
            <li>
              <a class="dropdown-item currency-switch" href="#" data-currency="GBP">£ GBP — British Pound Sterling</a>
            </li>
            <li>
              <a class="dropdown-item currency-switch" href="#" data-currency="GEL">₾ GEL — Georgian Lari</a>
            </li>
            <li>
              <a class="dropdown-item currency-switch" href="#" data-currency="CNY">¥ CNY — Chinese Yuan</a>
            </li>
            <li>
              <a class="dropdown-item currency-switch" href="#" data-currency="JPY">¥ JPY — Japanese Yen</a>
            </li>
          </ul>
        </li>
        <li class="nav-item ms-3">
          <a href="{% url 'shop:cart' %}" class="btn btn-outline-light position-relative">
            <i class="fas fa-shopping-cart"></i> Cart
            <span id="cart-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger px-2">{{ cart_count }}</span>
          </a>
        </li>

        <!-- Live Cart -->
      </ul>
    </div>
  </div>
</nav>