{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% trans "Shop All Products" %} | Jimma Market{% endblock %}

{% block content %}
<section class="py-5 bg-light min-vh-100">
  <div class="container">
    <div class="row g-4 align-items-center mb-5">
      <div class="col-md-6">
        <h2 class="fw-bold mb-0">{% trans "Explore Our Shop" %} 🏬</h2>
        <p class="text-secondary mb-0">{% trans "Discover the best products from Jimma's finest vendors." %}</p>
      </div>
      <div class="col-md-6">
        <form action="{% url 'product_list' %}" method="get" class="d-flex gap-2">
          {% if current_category %}
            <input type="hidden" name="category" value="{{ current_category }}">
          {% endif %}
          {% if current_kebele %}
            <input type="hidden" name="kebele" value="{{ current_kebele }}">
          {% endif %}
          <div class="input-group rounded-pill overflow-hidden border-0 shadow-sm flex-grow-1">
            <span class="input-group-text bg-white border-0"><i class="bi bi-search"></i></span>
            <input type="text" name="q" value="{{ request.GET.q|default:'' }}" class="form-control border-0 shadow-none px-3" placeholder="{% trans "Search products..." %}">
          </div>
          <button type="submit" class="btn btn-primary rounded-pill px-4">{% trans "Search" %}</button>
        </form>
      </div>
    </div>

    <div class="row g-4">
      <!-- Filters Sidebar -->
      <div class="col-lg-3">
        <div class="card border-0 shadow-sm p-4 rounded-4 sticky-top" style="top: 100px;">
          <h5 class="fw-bold mb-4">{% trans "Filters" %}</h5>
          
          <form action="{% url 'product_list' %}" method="get">
            {% if request.GET.q %}
              <input type="hidden" name="q" value="{{ request.GET.q }}">
            {% endif %}

            <div class="mb-4">
              <label class="form-label small fw-bold">{% trans "Neighborhood (Kebele)" %}</label>
              <select name="kebele" onchange="this.form.submit()" class="form-select form-select-sm rounded-3 border-light bg-light">
                <option value="">{% trans "All Areas" %}</option>
                {% for kebele in kebeles %}
                  <option value="{{ kebele }}" {% if current_kebele == kebele %}selected{% endif %}>{{ kebele }}</option>
                {% endfor %}
              </select>
            </div>

            <div class="mb-4">
              <label class="form-label small fw-bold">{% trans "Category" %}</label>
              <div class="d-flex flex-column gap-2 mt-2">
                <a href="?{% if request.GET.q %}q={{ request.GET.q }}&{% endif %}{% if current_kebele %}kebele={{ current_kebele }}&{% endif %}" class="text-decoration-none {% if not current_category %}fw-bold text-primary{% else %}text-secondary{% endif %} small">
                  {% trans "All Categories" %}
                </a>
                {% for cat in categories %}
                  <a href="?category={{ cat.slug }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if current_kebele %}&kebele={{ current_kebele }}{% endif %}" class="text-decoration-none {% if current_category == cat.slug %}fw-bold text-primary{% else %}text-secondary{% endif %} small">
                    {{ cat.name }}
                  </a>
                {% endfor %}
              </div>
            </div>

            <div class="mb-4">
              <label class="form-label small fw-bold">{% trans "Sort By" %}</label>
              <select name="sort" onchange="this.form.submit()" class="form-select form-select-sm rounded-3 border-light bg-light">
                <option value="newest" {% if current_sort == 'newest' %}selected{% endif %}>{% trans "Newest Arrivals" %}</option>
                <option value="price_low" {% if current_sort == 'price_low' %}selected{% endif %}>{% trans "Price: Low to High" %}</option>
                <option value="price_high" {% if current_sort == 'price_high' %}selected{% endif %}>{% trans "Price: High to Low" %}</option>
              </select>
            </div>

            <div class="pt-3 border-top mt-4">
              <button type="button" class="btn btn-outline-dark btn-sm w-100 rounded-pill" onclick="window.location.href='{% url 'product_list' %}'">
                {% trans "Clear All Filters" %}
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Products Grid -->
      <div class="col-lg-9">
        {% if current_kebele %}
        <div class="alert alert-primary bg-primary-subtle border-0 rounded-4 mb-4 d-flex align-items-center">
            <i class="bi bi-geo-alt-fill me-2 fs-5"></i>
            <div>
                {% trans "Showing products from vendors in" %} <strong>{{ current_kebele }}</strong>
            </div>
            <a href="?{% if request.GET.q %}q={{ request.GET.q }}&{% endif %}{% if current_category %}category={{ current_category }}&{% endif %}" class="btn-close ms-auto" aria-label="Close"></a>
        </div>
        {% endif %}

        <div class="row g-4">
          {% for product in products %}
          <div class="col-sm-6 col-md-4">
            <div class="card h-100 border-0 shadow-sm position-relative hover-lift transition-hover">
              {% if product.image %}
                <img src="{{ product.image.url }}" class="card-img-top p-2 rounded-4" alt="{{ product.name }}" style="height: 200px; object-fit: cover;">
              {% else %}
                <div class="card-img-top bg-secondary-subtle d-flex align-items-center justify-content-center m-2 rounded-4" style="height: 200px;">
                  <i class="bi bi-image fs-1 text-secondary"></i>
                </div>
              {% endif %}
              <div class="card-body pt-0">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <span class="badge bg-light text-primary d-inline-block rounded-pill small fw-bold">{{ product.category.name }}</span>
                    {% if product.review_count > 0 %}
                    <div class="text-warning small">
                        <i class="bi bi-star-fill"></i> {{ product.average_rating }}
                    </div>
                    {% endif %}
                </div>
                <h6 class="fw-bold mb-2">
                  <a href="{% url 'product_detail' product.slug %}" class="text-decoration-none text-dark">
                    {{ product.name }}
                  </a>
                </h6>
                <div class="mb-2">
                    <small class="text-muted"><i class="bi bi-shop me-1"></i>{{ product.vendor.business_name }}</small>
                    <br>
                    <small class="text-muted small"><i class="bi bi-geo-alt me-1"></i>{{ product.vendor.kebele }}</small>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-auto">
                  <span class="fw-bold text-primary">{{ product.price }} ETB</span>
                  <a href="{% url 'cart_add' product.id %}" class="btn btn-dark btn-sm rounded-pill px-3">
                    <i class="bi bi-plus-lg"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
          {% empty %}
          <div class="col-12 text-center py-5 bg-white rounded-5 shadow-sm">
            <i class="bi bi-search display-1 text-secondary opacity-50 mb-4"></i>
            <h4 class="fw-bold">{% trans "No products found" %}</h4>
            <p class="text-secondary">{% trans "Try adjusting your filters or search query." %}</p>
            <a href="{% url 'product_list' %}" class="btn btn-primary rounded-pill px-4 mt-3">{% trans "Clear Filters" %}</a>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

<style>
    .transition-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
    }
</style>
{% endblock %}
