{% extends 'base.html' %}
{% block content %}
  <div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="fw-bold">Our Products</h2>
        <!-- Live Search -->
        <div class="col-md-5">
            <form hx-get="{% url 'shop:product_list' %}" 
                  hx-trigger="keyup changed delay:500ms from:#search-input"
                  hx-target="#product-grid"
                  hx-swap="innerHTML">
                <input type="text" id="search-input" name="q" 
                       class="form-control" 
                       placeholder="Search products..." 
                       value="{{ request.GET.q }}">
            </form>
        </div>
    </div>

    <div class="row">
      <!-- Categories -->
      <div class="col-lg-3 col-md-4 mb-4">
        <h5 class="mb-3">Categories</h5>
        <ul class="list-group">
          {% for cat in categories %}
            <a href="?category={{ cat.slug }}" class="list-group-item list-group-item-action {% if request.GET.category == cat.slug %}active{% endif %}">{{ cat.name }}</a>
          {% endfor %}
        </ul>
      </div>

      <!-- Products Container -->
        <div class="col-lg-9 col-md-8">
            <div class="row g-4" id="product-grid">
                {% include "shop/partials/product_grid.html" %}
            </div>
        </div>
    </div>
  </div>

  <!-- ====================== IMAGE GALLERY MODAL ====================== -->
  <div class="modal fade" id="productGalleryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalProductName"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-0 bg-light">
          <div class="text-center position-relative py-4">
            <img id="modalMainImage" class="img-fluid" style="max-height: 520px; object-fit: contain;" />
            <button onclick="prevImage()" class="btn btn-light position-absolute start-0 top-50 translate-middle-y ms-4"><i class="fas fa-chevron-left fa-2x"></i></button>
            <button onclick="nextImage()" class="btn btn-light position-absolute end-0 top-50 translate-middle-y me-4"><i class="fas fa-chevron-right fa-2x"></i></button>
          </div>
          <!-- Thumbnails -->
          <div class="d-flex justify-content-center gap-2 p-3 bg-white" id="modalThumbnails"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Global variables
    let currentImages = []
    let currentIndex = 0
    
    function openProductGallery(productId) {
      fetch(`/product-images/${productId}/`)
        .then((response) => {
          if (!response.ok) {
            throw new Error(`HTTP ${response.status}`)
          }
    
          return response.text() // read as text first
        })
        .then((text) => {
          try {
            const data = JSON.parse(text)
    
            currentImages = data.images || []
            currentIndex = 0
    
            if (!currentImages.length) {
              alert('No images available.')
              return
            }
    
            document.getElementById('modalProductName').textContent = data.product_name
            showImage(0)
            renderThumbnails()
    
            new bootstrap.Modal(document.getElementById('productGalleryModal')).show()
          } catch (e) {
            console.error('Invalid JSON:', text)
            alert('Server did not return valid JSON.')
          }
        })
        .catch((error) => {
          console.error('Gallery Error:', error)
          alert('Failed to load product images.')
        })
    }
    
    function showImage(index) {
      if (index < 0 || index >= currentImages.length) return
      currentIndex = index
      const mainImage = document.getElementById('modalMainImage')
      mainImage.style.opacity = 0
    
      setTimeout(() => {
        mainImage.src = currentImages[index].url
        mainImage.style.opacity = 1
      }, 150)
    }
    
    function prevImage() {
      showImage(currentIndex - 1)
    }
    function nextImage() {
      showImage(currentIndex + 1)
    }
    
    function renderThumbnails() {
      const container = document.getElementById('modalThumbnails')
      container.innerHTML = ''
    
      currentImages.forEach((img, idx) => {
        const thumb = document.createElement('img')
        thumb.src = img.url
        thumb.className = `img-thumbnail mx-1 ${idx === currentIndex ? 'border-primary border-3' : ''}`
        thumb.style.height = '70px'
        thumb.style.objectFit = 'cover'
        thumb.style.cursor = 'pointer'
        thumb.onclick = () => showImage(idx)
        container.appendChild(thumb)
      })
    }
    
    // Keyboard support
    document.addEventListener('keydown', function (e) {
      const modal = document.getElementById('productGalleryModal')
      if (modal && modal.classList.contains('show')) {
        if (e.key === 'ArrowLeft') prevImage()
        if (e.key === 'ArrowRight') nextImage()
        if (e.key === 'Escape') {
          const bsModal = bootstrap.Modal.getInstance(modal)
          if (bsModal) bsModal.hide()
        }
      }
    })
    
    // Toggle Like
    function toggleLike(productId, btn) {
      fetch(`/product/${productId}/like/`, {
        method: 'POST',
        headers: { 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value }
      })
        .then((r) => r.json())
        .then((data) => {
          document.getElementById(`like-count-${productId}`).textContent = data.likes
          const icon = document.getElementById(`like-icon-${productId}`)
          if (data.liked) icon.classList.add('text-danger')
          else icon.classList.remove('text-danger')
        })
    }
    
    // Toggle Wishlist
    function toggleWishlist(productId, btn) {
      fetch(`/product/${productId}/wishlist/`, {
        method: 'POST',
        headers: {
          'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        }
      })
        .then((response) => response.json())
        .then((data) => {
          // Update count
          document.getElementById(`wishlist-count-${productId}`).textContent = data.wishlist_count
    
          // Update icon color
          const icon = document.getElementById(`wishlist-icon-${productId}`)
          if (data.in_wishlist) {
            icon.classList.add('text-warning')
          } else {
            icon.classList.remove('text-warning')
          }
        })
        .catch((error) => console.error('Error:', error))
    }
  </script>

  <style>
    .product-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
    }
    .product-image {
      transition: transform 0.4s ease;
    }
    .product-card:hover .product-image {
      transform: scale(1.08);
    }
  </style>
{% endblock %}

{% comment %} {% extends 'base.html' %}
{% block content %}
  <div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="fw-bold">Our Products</h2>

      <form hx-get="{% url 'shop:product_list' %}" hx-trigger="keyup changed delay:500ms from:#search-input" hx-target="#product-grid" hx-swap="innerHTML">
        <input type="text" id="search-input" name="q" class="form-control" placeholder="Search products..." value="{{ request.GET.q }}" />
      </form>
    </div>

    <div class="row">
      <!-- Categories -->
      <div class="col-lg-3 col-md-4 mb-4">
        <h5 class="mb-3">Categories</h5>
        <ul class="list-group">
          {% for cat in categories %}
            <a href="?category={{ cat.slug }}" class="list-group-item list-group-item-action {% if request.GET.category == cat.slug %}active{% endif %}">{{ cat.name }}</a>
          {% endfor %}
        </ul>
      </div>

      <!-- Products Grid -->
      <div class="col-lg-9 col-md-8">
        <div class="row g-4" id="product-grid">
          {% for product in products %}
            <div class="col-md-6 col-lg-4 col-xl-3">
              <div class="card product-card h-100 shadow-sm border-0">
                <div class="position-relative overflow-hidden" style="height: 240px;">
                  {% if product.images.all %}
                    <img src="{{ product.images.first.image.url }}" class="card-img-top product-image" alt="{{ product.name }}" onclick="openProductGallery({{ product.id }})" style="height: 100%; object-fit: cover; cursor: pointer;" />
                  {% elif product.image %}
                    <img src="{{ product.image.url }}" class="card-img-top product-image" alt="{{ product.name }}" onclick="openProductGallery({{ product.id }})" style="height: 100%; object-fit: cover; cursor: pointer;" />
                  {% endif %}
                </div>

                <div class="card-body d-flex flex-column">
                  <h5 class="card-title">{{ product.name }}</h5>
                  
                  <!-- Price with Discount -->
                  {% with discount=product.get_active_discount %}
                    {% if discount %}
                      <div class="mb-2">
                        <span class="original-price text-muted text-decoration-line-through small">
                          {{ currency_symbol }}{{ product.price|floatformat:2 }}
                        </span>
                        <p class="text-success fw-bold mb-0">
                          {{ currency_symbol }}{{ product.get_discounted_price|floatformat:2 }}
                        </p>
                        <small class="text-success">Save {{ currency_symbol }}{{ product.get_discount_amount|floatformat:2 }}</small>
                      </div>
                    {% else %}
                      <p class="text-success fw-bold mb-2">{{ currency_symbol }}{{ product.price|floatformat:2 }}</p>
                    {% endif %}
                  {% endwith %}

                  <!-- Rating -->
                  <div class="mb-2">
                    <span class="text-warning">
                      {% for i in 12345 %}
                        <i class="fas fa-star{% if i|add:0 > product.average_rating %} text-muted{% endif %}"></i>
                      {% endfor %}
                    </span>
                    <small class="text-muted ms-1">({{ product.average_rating|floatformat:1 }}) • {{ product.rating_count }} reviews</small>
                  </div>

                  <!-- Stats -->
                  <div class="d-flex justify-content-between small text-muted mb-3">
                    <span><i class="fas fa-box"></i> {{ product.stock }} left</span>
                    <span><i class="fas fa-shopping-bag"></i> {{ product.quantity_sold|default:0 }} sold</span>
                  </div>

                  <!-- Interactive Like & Wishlist -->
                  <div class="d-flex gap-2 mb-3">
                    <button onclick="toggleLike({{ product.id }}, this)" class="btn btn-sm btn-outline-danger flex-fill">
                      <i class="fas fa-heart" id="like-icon-{{ product.id }}"></i>
                      <span id="like-count-{{ product.id }}">{{ product.likes|default:0 }}</span>
                    </button>
                    <button onclick="toggleWishlist({{ product.id }}, this)" class="btn btn-sm btn-outline-warning flex-fill">
                      <i class="fas fa-bookmark {% if product.id in request.session.wishlist %}text-warning{% endif %}" id="wishlist-icon-{{ product.id }}"></i>
                      <span id="wishlist-count-{{ product.id }}">{{ product.wishlist_count }}</span>
                    </button>
                  </div>

                  <div class="mt-auto">
                    <a href="{% url 'shop:product_detail' product.slug %}" class="btn btn-outline-primary w-100 mb-2">View Details</a>
                    <button hx-post="{% url 'shop:add_to_cart' product.id %}" hx-target="#cart-count" hx-swap="outerHTML" class="btn btn-success w-100"><i class="fas fa-cart-plus"></i> Add to Cart</button>
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <!-- Product Gallery Modal (keep your existing modal) -->

  <script></script>

  <style>
    .product-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
    }
    .product-image {
      transition: transform 0.4s ease;
    }
    .product-card:hover .product-image {
      transform: scale(1.08);
    }
  </style>
{% endblock %} {% endcomment %}