<section class="section-content padding-y">
  <div class="container mt-3">
    {% include 'base/alert.html' %}
    <!-- ============================ COMPONENT Product Details ================================= -->
    <div class="card">
      <div class="row no-gutters">
        <aside class="col-md-6">
          <!-- Gallery-Wrap -->
          <article class="gallery-wrap">
            <div class="text-center mt-5 ml-3 mr-3 img-big-wrap">
              
              <div class="carousel-inner">
                {% for image in product.product_images.all %}
                <div class="carousel-item {% if forloop.first %}active{% endif %}">
                  <img id="mainImage" src="/media/{{ image.image }}" alt="{{ product.product_name }}"/>
                </div>
                {% endfor %}
              </div>
              
              <!-- Thumnbs-Wrap -->
              <div class="form-row thumbs-wrap mt-5 d-flex justify-content-center">
                {% for image in product.product_images.all %}
                  <p class="item-thumb mx-2">
                    <img 
                      src="/media/{{image.image}}"
                      class="img-thumbnail"
                      onclick="updateMainImage(this.src)"/>
                  </p>
                {% endfor %}
              </div>
              <!-- Thumnbs-Wrap End.// -->
            </div>
          </article>
          <!-- Gallery-Wrap End.// -->
        </aside>
        <main class="col-md-6 border-left">
          <article class="content-body">
            <h2 class="title">{{product.product_name}}</h2>
            <h6 class="text-muted">{{product.category}}</h6>

            <div class="rating-wrap my-3">
              <small class="label-rating text-muted">{{ product.get_rating }}</small>
              <ul class="rating-stars">
                <li style="width: {{ rating_percentage }}%" class="stars-active">
                  <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                </li>
                <li>
                  <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                </li>
              </ul>
              <small class="label-rating text-muted">{{ product.reviews.count }} reviews</small>
              <small class="label-rating text-success">
                <i class="fa fa-clipboard-check"></i> 154 orders
              </small>
            </div>
            <!-- rating-wrap.// -->

            <div class="mb-3">
              {% if updated_price %}
              <var class="price h4">₱{{ updated_price }}.00</var>
              {% else%}
              <var class="price h4">₱{{ product.price }}.00</var>
              {% endif %}
            </div>
            <!-- price-detail-wrap .// -->

            <p style="line-height: 2rem; margin-top: revert; text-align: justify">
              {{product.product_desription}}
            </p>
            <br />
            <dl class="row">
              <dt class="col-sm-3">Brand</dt>
              <dd class="col-sm-9">Nike</dd>
              
              <dt class="col-sm-3">Color</dt>
              <dd class="col-sm-9">
                {% for color in product.color_variant.all %} 
                  {{ color.color_name }} 
                {% endfor %}
              </dd>

              <dt class="col-sm-3">Delivery</dt>
              <dd class="col-sm-9">All over the World!</dd>
            </dl>

            <hr />
            <div class="form-row">
              <div class="form-group mr-3">
                <label>Quantity</label>
                <div class="input-group mb-3 input-spinner">
                  <div class="input-group-prepend">
                    <button
                      class="btn btn-light"
                      type="button"
                      id="button-plus"
                    >
                      +
                    </button>
                  </div>
                  <input type="text" class="form-control" value="1" />
                  <div class="input-group-append">
                    <button
                      class="btn btn-light"
                      type="button"
                      id="button-minus"
                    >
                      -
                    </button>
                  </div>
                </div>
              </div>

              {% if sorted_size_variants %}
              <div class="form-group col-md">
                <label>Select size</label>
                <div class="mt-1">
                  {% for size in sorted_size_variants %}

                  <label class="custom-control custom-radio custom-control-inline">
                    <input type="radio" name="selected_size" value="{{ size.size_name }}" 
                    onchange="get_correct_price('{{size.size_name}}'); updateCartUrl();" 
                    id="size-{{ size.size_name }}"
                    {% if selected_size == size.size_name %} checked {% endif %}
                    class="custom-control-input" />

                    <div class="custom-control-label">{{ size.size_name }}</div>
                  </label>

                  {% endfor %}
                </div>
              </div>
              {% endif %}
            </div>

            <!-- Add to Wishlist Button -->
            <div class="form-group d-flex justify-content-start">
              <div class="d-sm-flex mr-2">
                <div class="mb-2 mb-sm-0 mr-0 mr-sm-3">
                  <form method="POST"
                    action="{% url 'add_to_wishlist' product.uid %}?size={{ selected_size }}"
                  >
                    {% csrf_token %}
                    <button type="submit" class="btn btn-outline-primary">
                      <i class="fas fa-heart"></i> Add to Wishlist
                    </button>
                  </form>
                </div>
                <a
                  href="{% url 'add_to_cart' product.uid %}?size={{ selected_size }}"
                  id="add-to-cart-btn" class="btn btn-primary">
                  <i class="fas fa-shopping-bag mr-1"></i>
                  <span>Add to cart</span>
                </a>
              </div>
            </div>
          </article>
        </main>
      </div>
    </div>

    <!-- Related Products Section -->
    <h3 class="title padding-y-sm">Related products</h3>
    {% if related_products%} 
      {% with related_products as list_products %} 
        {% include 'product_parts/product_list.html' %} 
      {% endwith %}
    {% else %}
      <p>No related products found.</p>
    {% endif %}
    <!-- Related Products Section End -->

    <hr />

    <!-- Product Review Section -->
    <h3 class="title padding-bottom-sm">Reviews</h3>

    {% for review in product.reviews.all %}
      <div class="card mb-3">
        <div class="card-body" style="background-color: #59ee8d91">
          <div class="form-group">
            <p>
              <strong>Posted on: </strong>{{ review.date_added|date:"Y-m-d" }} by
              <strong>{{ review.user.get_full_name }}</strong><br />
              <strong>Rating: </strong>{{ review.stars }}/5<br />
              <strong>Comment: </strong>{{ review.content|safe }}
            </p>
          </div>
        </div>
      </div>
    {% empty %}
      <p class="padding-bottom-sm">No reviews yet...</p>
    {% endfor %}

    <div class="card mb-3">
      <div class="card-body">
        <div class="form-group">
          {% if request.user.is_authenticated %}
            <form method="POST" action="">
              {% csrf_token %}
              {{ review_form|crispy }}
              <button class="btn btn-success">Submit</button>
            </form>
          {% else %}
            <p>Please <a href="{% url 'login' %}"> sign in </a> to add review!</p>
          {% endif %}
        </div>
      </div>
    </div>
    <!-- Product Review Section End-->
    <!-- ============================ COMPONENT Product Details End ================================= -->
  </div>
</section>