{# templates/storefront/product_detail.html #}
{% extends "base.html" %}
{% block content %}
<div class="row g-4" lang="en" dir="ltr">
  <!-- Gallery / Cover -->
  <div class="col-md-5">
    {% if product.thumbnail %}
      <img src="{{ product.thumbnail.url }}" class="img-fluid rounded mm-card" alt="{{ product.title }}">
    {% else %}
      <div class="mm-card p-5 text-center text-muted">No image</div>
    {% endif %}

    {# optional thumbnails if you use ProductImage.related_name="images" #}
    {% if product.images.all %}
      <div class="d-flex gap-2 mt-2 flex-wrap">
        {% for im in product.images.all %}
          <img src="{{ im.image.url }}" alt="{{ im.alt|default:product.title }}"
               class="rounded border" style="width:68px;height:68px;object-fit:cover;">
        {% endfor %}
      </div>
    {% endif %}
  </div>

  <!-- Info -->
  <div class="col-md-7">
    <div class="d-flex align-items-center justify-content-between">
      <h1 class="h3 m-0">{{ product.title }}</h1>
      <span class="mm-badge">
        {% if product.in_stock %}In stock{% else %}Out of stock{% endif %}
      </span>
    </div>

    <div class="text-muted mb-2">{{ product.category.name }}</div>

    <div class="fs-4 fw-bold mb-2">
      $ {{ product.price }}
      {% if product.unit %}<span class="text-muted fs-6">/ {{ product.unit }}</span>{% endif %}
    </div>

    <div class="mb-2 small text-muted">
      {% if product.weight_grams %}Weight: {{ product.weight_grams }} g{% endif %}
    </div>

    <div class="mb-3 text-warning">
      ★ {{ product.rating|floatformat:1 }} ({{ product.reviews_count }} reviews)
    </div>

    <p class="mb-4">{{ product.description }}</p>

    <!-- Buy from this page -->
    <form action="{% url 'add_to_cart' product.slug %}" method="post"
          class="d-flex flex-wrap align-items-center gap-2">
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ request.get_full_path }}">
      <input type="number" name="qty" class="form-control mm-qty" value="1" min="1" max="99" style="max-width:120px;">
      <button class="mm-btn px-4" {% if not product.in_stock %}disabled{% endif %}>
        Add to cart
      </button>
      <a href="{% url 'cart' %}" class="btn btn-outline-secondary">View cart</a>
      <a href="/checkout/" class="btn btn-light">Checkout</a>
    </form>

    {% if not product.in_stock %}
      <div class="text-muted small mt-2">This item is currently unavailable.</div>
    {% endif %}
  </div>
</div>
<hr class="my-4">

<div lang="en" dir="ltr">
  <div class="d-flex align-items-center justify-content-between">
    <h2 class="h5 m-0">Reviews ({{ product.reviews_count }})</h2>

    <!-- Filter by review category -->
    {% if rev_categories %}
    <form method="get" class="d-flex align-items-center gap-2">
      <label class="small text-muted">Filter:</label>
      <select name="revcat" class="form-select form-select-sm" onchange="this.form.submit()">
        <option value="">All</option>
        {% for rc in rev_categories %}
          <option value="{{ rc.slug }}" {% if rc.slug == revcat_slug %}selected{% endif %}>{{ rc.name }}</option>
        {% endfor %}
      </select>
    </form>
    {% endif %}
  </div>

  <!-- Reviews list -->
  <div class="mt-3">
    {% if reviews %}
      <ul class="list-unstyled m-0">
        {% for r in reviews %}
          <li class="mm-card p-3 mb-2">
            <div class="d-flex align-items-center justify-content-between">
              <div class="fw-semibold">{{ r.display_name }}</div>
              <div class="text-warning small">★ {{ r.rating }}/5</div>
            </div>
            {% if r.title %}<div class="small text-muted">{{ r.title }}</div>{% endif %}
            <p class="mb-2">{{ r.body }}</p>
            {% if r.categories.all %}
              <div class="d-flex gap-1 flex-wrap">
                {% for c in r.categories.all %}
                  <span class="badge text-bg-light">{{ c.name }}</span>
                {% endfor %}
              </div>
            {% endif %}
            <div class="text-muted small mt-1">{{ r.created_at|date:"Y-m-d H:i" }}</div>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <div class="text-muted">No reviews yet.</div>
    {% endif %}
  </div>

  <!-- Submit review -->
  <div class="mm-card p-3 mt-4">
    <h3 class="h6">Write a review</h3>
    {% if messages %}
      {% for m in messages %}
        <div class="alert alert-{{ m.tags|default:'info' }} my-2">{{ m }}</div>
      {% endfor %}
    {% endif %}
    <form method="post" action="{% url 'add_to_cart' product.slug %}" class="d-none">
      {# keep existing form area intact; nothing here #}
    </form>

    <form method="post" action="{% url 'add_review' product.slug %}" novalidate>
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ request.get_full_path }}">

      <div class="row g-3">
        <div class="col-md-3">
          <label class="form-label">Rating (1–5)</label>
          <input type="number" name="rating" min="1" max="5" step="1" class="form-control" value="5" required>
        </div>
        <div class="col-md-9">
          <label class="form-label">Title (optional)</label>
          <input type="text" name="title" class="form-control" maxlength="160" placeholder="Great quality!">
        </div>

        <div class="col-12">
          <label class="form-label">Review</label>
          <textarea name="body" rows="4" class="form-control" required placeholder="Share details about quality, delivery, price..."></textarea>
        </div>

        {% if rev_categories %}
        <div class="col-12">
          <label class="form-label">Categories (optional)</label>
          <div class="d-flex flex-wrap gap-3">
            {% for rc in rev_categories %}
              <label class="form-check">
                <input class="form-check-input" type="checkbox" name="categories" value="{{ rc.id }}">
                <span class="form-check-label">{{ rc.name }}</span>
              </label>
            {% endfor %}
          </div>
        </div>
        {% endif %}

        {% if not request.user.is_authenticated %}
          <div class="col-md-6">
            <label class="form-label">Your name</label>
            <input type="text" name="name" class="form-control" required placeholder="John D.">
          </div>
          <div class="col-md-6">
            <label class="form-label">Email</label>
            <input type="email" name="email" class="form-control" required placeholder="you@example.com">
          </div>
        {% endif %}
      </div>

      <div class="d-flex align-items-center justify-content-between mt-3">
        <small class="text-muted">Reviews are moderated. Your review will appear after approval.</small>
        <button class="mm-btn" type="submit">Submit review</button>
      </div>
    </form>
  </div>
</div>

{% endblock %}