{% extends 'base.html' %}
{% load static %}

{% block content %}
<section class="section-content padding-y bg">
	<div class="container">

		<div class="card">
			<div class="row">
				<aside class="col-md-6 mb-4 mb-md-0">
					<article class="gallery-wrap">
						<div class="img-big-wrap mainImage text-center mb-3">
							<img src="{{ single_product.images.url }}" class="img-fluid" alt="Main Product Image">
						</div>
					</article>
					<ul class="thumb list-inline d-flex flex-wrap justify-content-center">
						<li class="list-inline-item m-1">
							<a href="{{ single_product.images.url }}" target="mainImage">
								<img src="{{ single_product.images.url }}" class="img-thumbnail" alt="Product Image">
							</a>
						</li>
						{% for i in product_gallery %}
						<li class="list-inline-item m-1">
							<a href="{{i.image.url}}" target="mainImage">
								<img src="{{i.image.url}}" class="img-thumbnail" alt="Product Image">
							</a>
						</li>
						{% endfor %}
					</ul>
				</aside>

				<main class="col-md-6">
					<form action="{% url 'add_cart' single_product.id %}" method="POST">
						{% csrf_token %}
						<article class="content-body">
							<h2 class="title">{{ single_product.product_name }}</h2>
							<div class="rating-star mb-2">
                                <div class="d-flex flex-wrap align-items-center gap-1 text-warning fs-5">
                                        <i class="{% if single_product.averageReview >= 1 %}fa-solid fa-star{% elif single_product.averageReview >= 0.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
                                        <i class="{% if single_product.averageReview >= 2 %}fa-solid fa-star{% elif single_product.averageReview >= 1.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
                                        <i class="{% if single_product.averageReview >= 3 %}fa-solid fa-star{% elif single_product.averageReview >= 2.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
                                        <i class="{% if single_product.averageReview >= 4 %}fa-solid fa-star{% elif single_product.averageReview >= 3.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
                                        <i class="{% if single_product.averageReview >= 5 %}fa-solid fa-star{% elif single_product.averageReview >= 4.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
                                        <span>({{ single_product.averageReview|floatformat:1 }} out of 5)</span>





                                </div>
							</div>

							<div class="mb-3">
								<var class="price h4">$ {{single_product.price}}</var>
							</div>
							
                            <div class="mb-2 d-flex flex-wrap align-items-center gap-2">
                                <strong class="me-2">Stock:</strong>
                                {% if single_product.stock > 0 %}
                                    <span class="px-3 py-2 rounded-2 bg-light border text-primary fw-semibold">
                                        {{ single_product.stock }} available
                                    </span>
                                {% else %}
                                    <span class="px-3 py-2 rounded-2 bg-light border text-danger fw-semibold">
                                        Out of Stock
                                    </span>
                                {% endif %}
                            </div>
							
							<p>{{ single_product.description }}</p>

							<hr>
							<div class="mb-3">
								<h6>Choose Color</h6>
								<select name="color" class="form-control" required>
									<option value="" disabled selected>Select</option>
									{% for i in single_product.variation_set.colors %}
									<option value="{{ i.variation_value|lower }}">{{ i.variation_value|capfirst }}</option>
									{% endfor %}
								</select>
							</div>

							<div class="mb-3">
								<h6>Select Size</h6>
								<select name="size" class="form-control" required>
									<option value="" disabled selected>Select</option>
									{% for i in single_product.variation_set.sizes %}
									<option value="{{ i.variation_value|lower }}">{{ i.variation_value|capfirst }}</option>
									{% endfor %}
								</select>
							</div>

							<hr>
							{% if single_product.stock <= 0 %}
							<h5 class="text-danger">Out of Stock</h5>
							{% else %}
							<button type="submit" class="btn btn-primary">
								<span class="text">Add to Cart</span> <i class="fa fa-shopping-cart"></i>
							</button>
							{% endif %}
						</article>
					</form>
				</main>
			</div>
		</div>

		<br>

		<div class="row">
			<div class="col-md-12 col-lg-9">

				<form action="{% url 'submit_review' single_product.id %}" method="POST">
					{% csrf_token %}
					<h5>Write Your Review</h5>
                    <label>How do you rate this product?</label>
                    <br>
                    <div class="rate">
                      <input type="radio" name="rating" id="rating10" value="5" required><label for="rating10" title="5 stars"></label>
                      <input type="radio" name="rating" id="rating9" value="4.5"><label for="rating9" class="half" title="4.5 stars"></label>
                      <input type="radio" name="rating" id="rating8" value="4"><label for="rating8" title="4 stars"></label>
                      <input type="radio" name="rating" id="rating7" value="3.5"><label for="rating7" class="half" title="3.5 stars"></label>
                      <input type="radio" name="rating" id="rating6" value="3"><label for="rating6" title="3 stars"></label>
                      <input type="radio" name="rating" id="rating5" value="2.5"><label for="rating5" class="half" title="2.5 stars"></label>
                      <input type="radio" name="rating" id="rating4" value="2"><label for="rating4" title="2 stars"></label>
                      <input type="radio" name="rating" id="rating3" value="1.5"><label for="rating3" class="half" title="1.5 stars"></label>
                      <input type="radio" name="rating" id="rating2" value="1"><label for="rating2" title="1 star"></label>
                      <input type="radio" name="rating" id="rating1" value="0.5"><label for="rating1" class="half" title="0.5 stars"></label>
                    </div>

					<div class="mb-2">
						<label>Review Title</label>
						<input type="text" name="subject" class="form-control" required>
					</div>

					<div class="mb-3">
						<label>Review</label>
						<textarea name="review" rows="4" class="form-control" required></textarea>
					</div>

					{% if user.is_authenticated %}
						<input type="submit" value="Submit Review" class="btn btn-primary">
					{% else %}
						<p>You must be logged in to post a review. <a href="{% url 'login' %}">Login now</a></p>
					{% endif %}


					{% include 'includes/alerts.html' %}
				</form>

				<hr>

				<header class="section-heading">
					<h3>Customer Reviews</h3>
					<span>{{single_product.countReview}} reviews</span>
				</header>

				{% for review in reviews %}
				<article class="box mb-3">
					<div class="icontext w-100">
						<div class="text">
							<span class="date text-muted float-md-right">{{ review.updated_at }}</span>
							<h6 class="mb-1">{{ review.user.full_name }}</h6>
							<div class="rating-star">
								<span>
									<i class="{% if single_product.averageReview >= 1 %}fa-solid fa-star{% elif single_product.averageReview >= 0.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
                                        <i class="{% if single_product.averageReview >= 2 %}fa-solid fa-star{% elif single_product.averageReview >= 1.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
                                        <i class="{% if single_product.averageReview >= 3 %}fa-solid fa-star{% elif single_product.averageReview >= 2.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
                                        <i class="{% if single_product.averageReview >= 4 %}fa-solid fa-star{% elif single_product.averageReview >= 3.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
                                        <i class="{% if single_product.averageReview >= 5 %}fa-solid fa-star{% elif single_product.averageReview >= 4.5 %}fa-solid fa-star-half-stroke{% else %}fa-regular fa-star{% endif %}"></i>
								</span>
							</div>
						</div>
					</div>
					<div class="mt-2">
						<h6>{{ review.subject }}</h6>
						<p>{{ review.review }}</p>
					</div>
				</article>
				{% endfor %}

			</div>
		</div>

	</div>
</section>
{% endblock %}