{% extends 'base.html' %}
{% load static %}
{% load currency_filters i18n i18n_filters %}
{% block meta %}
<!-- Open Graph Tags (Facebook & WhatsApp) -->
<meta property="og:type" content="product">
<meta property="og:title" content="{{ translated_product.name|default:product.name }}">
<meta property="og:description" content="{{ translated_product.description|default:product.name|striptags|truncatechars:160 }}">
<meta property="og:url" content="{{ request.build_absolute_uri }}">
<meta property="og:site_name" content="BanshiX">
<meta property="og:locale" content="en_US">

{% if product.images.all %}
    {% for img in product.images.all %}
      {% if img.is_primary or forloop.first %}
      <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ img.image.url }}">
      <meta property="og:image:width" content="1200">
      <meta property="og:image:height" content="630">
      <meta property="og:image:type" content="image/jpeg">
      {% endif %}
    {% endfor %}
{% else %}
    <meta property="og:image" content="{% static 'images/banshix.jpeg' %}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
{% endif %}

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="product">
<meta name="twitter:title" content="{{ translated_product.name|default:product.name }}">
<meta name="twitter:description" content="{{ translated_product.description|default:product.name|striptags|truncatechars:160 }}">
<meta name="twitter:site" content="@BanshiX">
{% if product.images.all %}
    {% for img in product.images.all %}
      {% if img.is_primary or forloop.first %}
      <meta name="twitter:image" content="{{ request.scheme }}://{{ request.get_host }}{{ img.image.url }}">
      {% endif %}
    {% endfor %}
{% else %}
    <meta name="twitter:image" content="{% static 'images/banshix.jpeg' %}">
{% endif %}

<!-- Facebook Tags -->
<meta property="fb:app_id" content="" />
<meta property="fb:admins" content="" />

<!-- Pinterest Tags -->
<meta property="pinterest:media" content="{% if product.images.all %}{% for img in product.images.all %}{% if img.is_primary or forloop.first %}{{ request.scheme }}://{{ request.get_host }}{{ img.image.url }}{% endif %}{% endfor %}{% else %}{% static 'images/banshix.jpeg' %}{% endif %}">
<meta property="pinterest:description" content="{{ product.name }} - {{ product.content|striptags|truncatechars:160 }}">

<!-- LinkedIn Tags -->
<meta property="linkedin:title" content="{{ product.name }}">
<meta property="linkedin:description" content="{{ product.content|striptags|truncatechars:160 }}">

<!-- WhatsApp & General Meta Tags -->
<meta name="description" content="{{ product.content|striptags|truncatechars:160 }}">

{% endblock %}


{% block content %}
  <div class="container py-1 px-2 px-md-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-2">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'shop:home' %}">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Products</a></li>
        <li class="breadcrumb-item active">
        {% blocktrans %}          
        
        {{ translated_product.name|default:product.name }} {% endblocktrans %}</li>
      </ol>
    </nav>

    <div class="row g-4">
      <!-- Product Image Gallery -->
      <div class="col-lg-5 col-md-6">
        <div class="sticky-top" style="top: 20px;">
          <!-- Main Image -->
          <div class="card shadow-sm border-0 mb-3 overflow-hidden position-relative">
            <div class="bg-light d-flex align-items-center justify-content-center" style="min-height: 300px;">
              <div id="main-image-container" class="w-100">
                {% if product.images.all %}
                  {% for img in product.images.all %}
                    {% if img.is_primary or forloop.first %}
                      <img id="main-product-image" src="{{ img.image.url }}" class="img-fluid w-100" alt="{{ img.alt_text|default:product.name }}" style="max-height: 500px; object-fit: contain; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" />
                    {% endif %}
                  {% endfor %}
                {% else %}
                  <img id="main-product-image" src="{{ product.image.url }}" class="img-fluid w-100" alt="{{ product.name }}" style="max-height: 500px; object-fit: contain; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" />
                {% endif %}
              </div>
              <!-- Wishlist Heart Button - Primary Position -->
              <button 
                id="wishlist-btn"
                hx-post="{% url 'shop:toggle_wishlist' product.id %}"
                hx-swap="none"
                class="btn position-absolute top-0 end-0 m-2"
                style="background: rgba(255, 255, 255, 0.95); border: none; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: all 0.3s ease;">
                <i class="fas fa-heart text-danger" style="font-size: 20px;"></i>
              </button>
              <button class="btn btn-light position-absolute bottom-0 end-0 m-2" data-bs-toggle="modal" data-bs-target="#imageModal" title="View full size">
                <i class="fas fa-expand"></i>
              </button>
            </div>
          </div>

          <!-- Image Thumbnails -->
          {% if product.images.all|length > 1 %}
            <div class="d-flex gap-2 mb-3 overflow-auto" style="padding: 5px;">
              {% for img in product.images.all %}
                <div class="thumbnail-item" style="flex-shrink: 0; cursor: pointer;" onclick="updateMainImage('{{ img.image.url }}')">
                  <img src="{{ img.image.url }}" class="img-thumbnail" alt="{{ img.alt_text|default:product.name }}" style="width: 70px; height: 70px; object-fit: cover; border-radius: 6px;">
                </div>
              {% endfor %}
            </div>
          {% endif %}

          <!-- Video Section -->
          {% if product.videos.all %}
            <div class="card shadow-sm border-0">
              {% for video in product.videos.all %}
                {% if video.is_primary or forloop.first %}
                  <video controls class="img-fluid rounded-top" style="width: 100%; height: auto; max-height: 300px;">
                    <source src="{{ video.video.url }}" type="video/mp4">
                    Your browser does not support the video tag.
                  </video>
                  {% if video.title %}
                    <div class="card-body py-2">
                      <small class="text-muted">{{ video.title }}</small>
                    </div>
                  {% endif %}
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>

      <!-- Product Information -->
      <div class="col-lg-7 col-md-6 p-2 p-md-4">
        <h5 class="mb-3 fw-bold" style="font-size: clamp(1.0rem, 3vw, 1.25rem);">{{ translated_product.name|default:product.name }}</h5>
        <!-- Rating -->
        <div class="mb-3">
          <span class="text-warning">
            {% for i in "12345" %}
              {% if i|add:0 <= product.average_rating %}
                <i class="fas fa-star"></i>
              {% elif i|add:0 <= product.average_rating|add:0.5 %}
                <i class="fas fa-star-half-alt"></i>
              {% else %}
                <i class="far fa-star"></i>
              {% endif %}
            {% endfor %}
          </span>
          <span class="ms-2 text-muted">{{ product.average_rating|floatformat:1 }} ({{ product.reviews.count }} reviews)</span>
        </div>

        <!-- Price with Discount -->
        {% with discount=product.get_active_discount %}
          {% if discount %}
            <div class="pricing-section card border-0 bg-light p-3 mb-3 rounded-3">
              <div class="d-flex align-items-baseline gap-3 mb-2 flex-wrap">
                <span class="product-price original-price text-muted text-decoration-line-through fs-6" data-price="{{ product.price }}">
                  {{ currency_symbol }}{{ product.price|convert_currency:currency_rate|floatformat:2 }}
                </span>
                <span class="product-price discounted-price text-danger fw-bold" style="font-size: clamp(1.25rem, 4vw, 2.5rem);" data-price="{{ product.get_discounted_price }}">
                  {{ currency_symbol }}{{ product.get_discounted_price|convert_currency:currency_rate|floatformat:2 }}
                </span>
                <span class="badge bg-danger">
                  {% if discount.discount_type == 'percentage' %}
                    -{{ discount.discount_value }}%
                  {% else %}
                    Save {{ currency_symbol }}{{ discount.discount_value|convert_currency:currency_rate|floatformat:2 }}
                  {% endif %}
                </span>
              </div>
              
              <div class="alert alert-success py-2 mb-0">
                <i class="fas fa-tags"></i>
                <strong>{{ discount.name }}</strong> - Save <span class="product-price" data-price="{{ product.get_discount_amount }}">{{ currency_symbol }}{{ product.get_discount_amount|convert_currency:currency_rate|floatformat:2 }}</span>
                {% if discount.code %}
                  <br><small class="text-muted">Use code: <strong class="text-success">{{ discount.code }}</strong></small>
                {% endif %}
              </div>
            </div>
          {% else %}
            <div class="mb-3">
              <span class="product-price" style="font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: bold; color: #28a745;" data-price="{{ product.price }}">
                {{ currency_symbol }}{{ product.price|convert_currency:currency_rate|floatformat:2 }}
              </span>
            </div>
          {% endif %}
        {% endwith %}

        <!-- Stock Status -->
        <div class="mb-3">
          <div class="d-md-flex gap-2 d-grid justify-content-evenly align-items-center">
            <div class="div">
               <p class="mb-2"><strong>{% trans 'Availability' %}:</strong></p>
                {% if product.stock > 0 %}
                  <span class="badge bg-success fs-6">
                    <i class="fas fa-check-circle"></i> {{ product.stock }} {% trans 'units in stock' %}
                  </span>
                {% else %}
                  <span class="badge bg-danger fs-6">
                    <i class="fas fa-times-circle"></i> {% trans 'Out of Stock' %}
                  </span>
                {% endif %}
            </div>
            <div class="div">
             <!-- Offer Badge -->
            <div class="col-12 col-md-4 text-md-center">
              {% if product.allow_customer_offer %}
                <span class="badge bg-warning text-dark fs-6 p-2">
                  <i class="fas fa-bolt me-1"></i>
                  {% trans 'Customer Offer Available' %}
                </span>
              {% endif %}
            </div>
            </div>
            <div class="div">
              <div class="mb-3 d-grid gap-2 d-md-flex">
                <button hx-post="{% url 'shop:add_to_cart' product.id %}" hx-target="#cart-count" hx-swap="outerHTML" hx-indicator="#loading-spinner" class="btn btn-danger" {% if product.stock <= 0 %}disabled{% endif %}>
                  <i class="fas fa-shopping-cart me-2"></i>{% trans 'Add to Cart' %}
                  <div id="loading-spinner" class="htmx-indicator spinner-border spinner-border-sm ms-2" role="status" style="display:none; width: 1rem; height: 1rem;">
                      <span class="visually-hidden">Loading...</span>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Add to Cart & Wishlist -->       
        <small id="wishlist-message" class="text-muted d-block mb-3"></small>

        <!-- Product Description -->
        <div class="card border-0 shadow-sm mb-3">
          <div class="card-body">
            <h5 class="card-title fw-bold mb-2 d-flex align-items-center justify-content-between">
              <span>Description</span>
              <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#descriptionContent" aria-expanded="true" aria-controls="descriptionContent" title="Toggle description">
                <i class="fas fa-chevron-up"></i>
              </button>
            </h5>
            <div id="descriptionContent" class="collapse show">
              <div class="text-muted" style="line-height: 1.6; font-size: 0.95rem;">{{ product.description|safe }}</div>
            </div>
          </div>
        </div>

        {% if product.features.all %}
          <!-- Product Features -->
          <div class="card border-0 shadow-sm mb-3">
            <div class="card-body">
              <h5 class="card-title fw-bold mb-2 d-flex align-items-center justify-content-between">
                <span>Features & Specifications</span>
                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#featuresContent" aria-expanded="true" aria-controls="featuresContent" title="Toggle features">
                  <i class="fas fa-chevron-up"></i>
                </button>
              </h5>
              <div id="featuresContent" class="collapse show">
                <div class="row g-2 g-md-3">
                  {% for feature in product.features.all %}
                    <div class="col-sm-6">
                      <div class="card border-0 bg-light rounded-3 h-100">
                        <div class="card-body p-2 p-md-3">
                          <div class="text-uppercase text-muted small fw-semibold mb-1" style="font-size: 0.75rem; letter-spacing: 0.5px;">{{ feature.name }}</div>
                          <div class="fw-semibold text-dark" style="font-size: 0.95rem;">{{ feature.value }}</div>
                        </div>
                      </div>
                    </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
        {% endif %}

        <!-- Social Share -->
        <div class="mb-4">
          <h6 class="mb-2 fw-bold">Share this product</h6>
          <div class="d-flex flex-wrap gap-2">
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri|urlencode }}" target="_blank" class="btn btn-outline-primary btn-sm rounded-pill">
              <i class="fab fa-facebook-f"></i> Share
            </a>
            <a href="https://twitter.com/intent/tweet?text={{ translated_product.name|default:product.name|urlencode }}&url={{ request.build_absolute_uri|urlencode }}" target="_blank" class="btn btn-outline-info btn-sm rounded-pill">
              <i class="fab fa-twitter"></i> Tweet
            </a>
            <a href="https://api.whatsapp.com/send?text={{ translated_product.name|default:product.name|urlencode }}%20-%20{{ request.build_absolute_uri|urlencode }}" target="_blank" class="btn btn-outline-success btn-sm rounded-pill">
              <i class="fab fa-whatsapp"></i> WhatsApp
            </a>
            <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill" onclick="copyShareLink('{{ request.build_absolute_uri }}')">
              <i class="fas fa-link"></i> Copy Link
            </button>
          </div>
        </div>

        <!-- Edit Button for Staff -->
        {% if request.user.is_staff %}
          <div class="mt-2">
            <a href="{% url 'shop:product_update' product.slug %}" class="btn btn-outline-primary btn-sm">
              <i class="fa fa-edit me-2"></i>Edit Product
            </a>
          </div>
        {% endif %}
      </div>
    </div>

    <!-- Make an Offer Section -->
    {% if product.allow_customer_offer %}
      <div class="row mt-3">
        <div class="col-lg-7 offset-lg-5">
          <div class="card border-warning bg-light rounded-3 mb-2">
            <div class="card-body">
              <h5 class="card-title fw-bold">📝 Make an Offer</h5>
              <p class="card-text text-muted mb-2">
                Send us your preferred price for this product.
                {% if product.min_offer_price %}
                  Minimum offer: {{ currency_symbol }}{{ product.min_offer_price|convert_currency:currency_rate|floatformat:2 }}
                {% endif %}
              </p>

              {% if request.user.is_authenticated %}
                <form method="post" action="{% url 'shop:make_offer' product.slug %}">
                  {% csrf_token %}
                  {{ offer_form.non_field_errors }}

                  <div class="mb-3">
                    {{ offer_form.offered_price.label_tag }}
                    {{ offer_form.offered_price }}
                    {{ offer_form.offered_price.errors }}
                  </div>

                  <div class="mb-3">
                    {{ offer_form.message.label_tag }}
                    {{ offer_form.message }}
                    {{ offer_form.message.errors }}
                  </div>

                  <button type="submit" class="btn btn-warning">Submit Offer</button>
                </form>
              {% else %}
                <p class="mb-0">
                  <a href="{% url 'account_login' %}?next={{ request.path }}">Log in</a> to make an offer for this product.
                </p>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    {% endif %}

    <!-- Variants Section -->
    {% if product.variants.exists %}
      <div class="mt-5">
        <h4 class="mb-4 fw-bold">Available Variants</h4>
        <div class="row g-3">
          {% for variant in product.variants.all %}
            {% if variant.is_active %}
              <div class="col-md-6 col-lg-4">
                <div class="card h-100 shadow-sm border-0 rounded-3 overflow-hidden">
                  <div class="card-body">
                    <h6 class="card-title fw-bold mb-2">{{ variant.sku }}</h6>
                    <p class="text-danger fw-bold mb-1 fs-5">${{ variant.price|floatformat:2 }}</p>
                    <p class="small text-muted mb-3">
                      <i class="fas fa-box me-1"></i>
                      <strong>Stock:</strong> {{ variant.stock }} units
                    </p>
                    <!-- Display variant attributes -->
                    <div class="small mb-3">
                      {% for attr in variant.attributes.all %}
                        <span class="badge bg-secondary me-1 mb-1">{{ attr }}</span>
                      {% endfor %}
                    </div>

                    <button hx-post="{% url 'shop:add_to_cart' product.id %}" hx-target="#cart-count" hx-swap="outerHTML" class="btn btn-danger btn-sm w-100">
                      <i class="fas fa-shopping-cart me-1"></i>Add to Cart
                    </button>
                  </div>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endif %}

    <!-- Rating & Reviews Section -->
    <div class="mt-5 mb-5">
      <h4 class="mb-4 fw-bold">Customer Reviews</h4>
      <div class="row g-4">
        <!-- Write Review -->
        <div class="col-lg-5">
          <div class="card shadow-sm border-0 rounded-3 sticky-top" style="top: 20px;">
            <div class="card-body">
              <h6 class="card-title fw-bold mb-3">Leave a Review</h6>
              <form method="post" action="{% url 'shop:add_review' product.slug %}">
                {% csrf_token %}
                <div class="mb-3">
                  <label class="form-label fw-semibold">Rating</label>
                  <select name="rating" class="form-select rounded-2" required>
                    <option value="">Select your rating</option>
                    <option value="5">⭐⭐⭐⭐⭐ Excellent</option>
                    <option value="4">⭐⭐⭐⭐ Good</option>
                    <option value="3">⭐⭐⭐ Average</option>
                    <option value="2">⭐⭐ Fair</option>
                    <option value="1">⭐ Poor</option>
                  </select>
                </div>
                <div class="mb-3">
                  <label class="form-label fw-semibold">Your Review</label>
                  <textarea name="comment" class="form-control rounded-2" rows="5" placeholder="Share your experience with this product..." required></textarea>
                </div>
                <button type="submit" class="btn btn-primary w-100 rounded-2">Submit Review</button>
              </form>
            </div>
          </div>
        </div>

        <!-- Existing Reviews -->
        <div class="col-lg-7">
          {% for review in product.reviews.all %}
            <div class="card shadow-sm border-0 rounded-3 mb-3">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                  <div>
                    <h6 class="card-title fw-bold mb-1">{{ review.user.username }}</h6>
                    <div class="text-warning mb-2">
                      {% for i in "12345" %}
                        {% if i|add:0 <= review.rating %}
                          <i class="fas fa-star"></i>
                        {% else %}
                          <i class="far fa-star"></i>
                        {% endif %}
                      {% endfor %}
                    </div>
                  </div>
                  <small class="text-muted">{{ review.created_at|date:'d M Y' }}</small>
                </div>
                <p class="card-text text-muted mb-0">{{ review.comment }}</p>
              </div>
            </div>
          {% empty %}
            <div class="alert alert-info rounded-3" role="alert">
              <i class="fas fa-info-circle me-2"></i>No reviews yet. Be the first to review this product!
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <!-- Image Modal Gallery -->
  <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content bg-dark">
        <div class="modal-header border-bottom border-secondary">
          <h5 class="modal-title text-light" id="imageModalLabel">{{ translated_product.name|default:product.name }} - Image Gallery</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body d-flex align-items-center justify-content-center" style="height: calc(100vh - 120px);">
          <img id="modal-image" src="" class="img-fluid" alt="Product image" style="max-width: 90%; max-height: 90%; object-fit: contain;">
        </div>
        <div class="modal-footer border-top border-secondary">
          <div class="w-100">
            <div class="d-flex gap-2 justify-content-center overflow-auto" style="padding: 10px;">
              {% if product.images.all %}
                {% for img in product.images.all %}
                  <img src="{{ img.image.url }}" class="img-thumbnail modal-thumb" alt="Thumbnail" onclick="updateModalImage('{{ img.image.url }}')" style="width: 80px; height: 80px; object-fit: cover; cursor: pointer; opacity: 0.7; border-radius: 8px; border: 2px solid transparent; transition: all 0.3s ease;">
                {% endfor %}
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Image Gallery Functions
    function updateMainImage(imageSrc) {
      const mainImage = document.getElementById('main-product-image');
      if (mainImage) {
        mainImage.src = imageSrc;
      }
    }

    function updateModalImage(imageSrc) {
      const modalImage = document.getElementById('modal-image');
      if (modalImage) {
        modalImage.src = imageSrc;
      }
      // Highlight the selected thumbnail
      document.querySelectorAll('.modal-thumb').forEach(thumb => {
        thumb.style.opacity = '0.7';
        thumb.style.borderColor = 'transparent';
      });
      event.target.style.opacity = '1';
      event.target.style.borderColor = '#fff';
    }

    // Initialize modal image on modal open
    document.addEventListener('DOMContentLoaded', function() {
      const imageModal = document.getElementById('imageModal');
      if (imageModal) {
        imageModal.addEventListener('show.bs.modal', function() {
          const mainImage = document.getElementById('main-product-image');
          const modalImage = document.getElementById('modal-image');
          if (mainImage && modalImage) {
            modalImage.src = mainImage.src;
          }
        });
      }

      // Wishlist functionality
      document.body.addEventListener('htmx:afterRequest', function(evt) {
        if (!evt.detail || !evt.detail.elt || evt.detail.elt.id !== 'wishlist-btn') {
          return;
        }

        if (evt.detail.xhr && evt.detail.xhr.status === 200) {
          try {
            const response = JSON.parse(evt.detail.xhr.responseText || '{}');
            const btn = document.getElementById('wishlist-btn');
            const msg = document.getElementById('wishlist-message');

            if (!btn || !msg) {
              return;
            }

            const heartIcon = btn.querySelector('i');
            if (!heartIcon) {
              return;
            }

            if (response.in_wishlist) {
              btn.classList.add('btn-danger');
              btn.classList.remove('btn-outline-danger');
              heartIcon.classList.remove('far');
              heartIcon.classList.add('fas');
              msg.textContent = '✓ Added to wishlist';
              msg.classList.remove('text-muted');
              msg.classList.add('text-success');
            } else {
              btn.classList.remove('btn-danger');
              btn.classList.add('btn-outline-danger');
              heartIcon.classList.remove('fas');
              heartIcon.classList.add('far');
              msg.textContent = '✓ Removed from wishlist';
              msg.classList.remove('text-success');
              msg.classList.add('text-muted');
            }
          } catch (e) {
            console.error('Error parsing wishlist response:', e);
          }
        }
      });

      // Discount countdown
      {% with discount=product.get_active_discount %}
        {% if discount %}
          const deadline = new Date('{{ discount.end_date|date:'c' }}').getTime();

          function updateDiscountCountdown() {
            const now = new Date().getTime();
            let diff = deadline - now;

            if (diff < 0) {
              diff = 0;
            }

            const hours = Math.floor(diff / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            const formatted = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

            const discountItems = document.querySelectorAll('[data-discount-countdown]');
            discountItems.forEach(item => {
              item.textContent = formatted;
            });
          }

          updateDiscountCountdown();
          setInterval(updateDiscountCountdown, 1000);
        {% endif %}
      {% endwith %}
    });

    function copyShareLink(link) {
      navigator.clipboard.writeText(link).then(() => {
        const btn = event.target.closest('button');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
        setTimeout(() => {
          btn.innerHTML = originalText;
        }, 2000);
      });
    }

    // Handle collapse/expand icons
    document.addEventListener('DOMContentLoaded', function() {
      document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(button => {
        button.addEventListener('click', function() {
          const icon = this.querySelector('i');
          const target = document.querySelector(this.getAttribute('data-bs-target'));
          
          setTimeout(() => {
            if (target.classList.contains('show')) {
              icon.classList.remove('fa-chevron-down');
              icon.classList.add('fa-chevron-up');
            } else {
              icon.classList.remove('fa-chevron-up');
              icon.classList.add('fa-chevron-down');
            }
          }, 350); // Wait for Bootstrap animation
        });
      });
    });
  </script>

  <style>
    .modal-thumb {
      transition: all 0.3s ease;
    }

    .modal-thumb:hover {
      opacity: 1 !important;
      border-color: #fff !important;
      transform: scale(1.05);
    }

    #main-product-image {
      transition: opacity 0.3s ease;
    }

    .discount-countdown-floating {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1080;
      max-width: 290px;
      min-width: 240px;
    }

    .discount-countdown-floating .btn {
      border-radius: 999px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    }

    .discount-countdown-floating .countdown-label {
      min-width: 96px;
      text-align: right;
    }

    @media (max-width: 576px) {
      .discount-countdown-floating {
        right: 12px;
        left: 12px;
        max-width: none;
      }
    }

    .sticky-top {
      z-index: 100;
    }

    @media (max-width: 768px) {
      .sticky-top {
        position: static;
      }
    }
  </style>
{% endblock %}