{% extends "website/home/base.html" %}
{% block title %} Product Details | {{ product.name_english }} {% endblock %}
{% load static %}
{% block content %}
 
<link rel="stylesheet" href="/static/css/product_details.css">
 
<div class="container my-5">

  <!-- Product Row -->
  <div class="row g-4">
    <!-- Gallery -->
    <div class="col-md-6">
      <div class="row">
        {% if product_images %} 
        <div class="col-3 thumbs-carousel">
       
            <img src="{{ product.product_image.url }}" class="img-fluid active" onclick="changeImage(this)">  

            {% for img in product_images %}  
              <img src="{{ img.image.url }}" class="img-fluid" onclick="changeImage(this)"> 
            {% endfor %} 
         
        </div>
         {% endif %}

        {% if product_images %}  <div class="col-9"> {% else %} <div class="col-11"> {% endif %}
          <div class="product-gallery">
            <img id="mainImage" src="{{ product.product_image.url }}" alt="{{ product.name_english }}"> 
        </div>
        </div>
      </div>
    </div>

    <!-- Product Details -->
    <div class="col-md-6"> 
      <h3>{{ product.name_english }}</h3> 
      
      <p><b>Category:</b> Akmam Fashion</p> 

      
      <p><b>SKU:</b> {{ product.sku_code }}</p>
      

      <div class="mb-3" id="price-section">
      <h5 class="product-price">
        Tk. {{ product.discount_price }} 
        <del class="text-muted"> Tk. {{ product.unit_price }}</del>
      </h5>
      {% if product.discount_price %}
        {% if product.discount > 0 %}
          <strong>Discount: </strong>
          <span class="badge bg-success">-{{ product.discount }}%</span>
          (Your saved Tk. {{saved_amount}})
        {% endif %}
      {% endif %}
    </div>

    <!-- Product Short Description  -->
      {% if product.full_detail %}<p>{{ product.full_detail|slice:"200" }}</p> {% endif %}
  
 
    {% if product_sizes %}
 

  <p class="mb-4"><strong>Size:</strong>
    <span class="size-options">
      {% for size in product_sizes %}
        <label class="size-label">
          <input type="radio" name="selected_size" value="{{ size.size_id }}"
                 {% if forloop.first %}checked{% endif %}>
          <span>{{ size.size.size_name }}</span>
        </label>
      {% endfor %}
    </span>
  </p>
{% endif %}
 
      <!-- Quantity -->
    <div class="d-flex align-items-center mb-3">
      <label class="me-2 fw-bold">Quantity:</label>
      <div class="input-group" style="width:120px;">
        <button class="btn btn-outline-secondary fw-bold decrease-qty">-</button>
        <input type="text" class="form-control text-center quantity-input" value="1" min="1" readonly>
        <button class="btn btn-outline-secondary fw-bold increase-qty">+</button>
      </div>
    </div>

    
      <!-- Buttons -->
      <!-- <div class="d-flex gap-3 mb-3"> 
        <button class="btn btn-danger text-white  add-to-cart-btn" data-id="{{ product.id }}">Add to Cart</button>
        <a href="#" class="btn btn-primary text-white ">Buy Now</a>
      </div> -->

      <!-- Buttons -->
      <div class="d-flex gap-3 mb-3">
        <button class="btn btn-danger text-white add-to-cart-btn" data-id="{{ product.id }}">
          Add to Cart
        </button>
        <a href="#" class="btn btn-primary text-white">Buy Now</a>
      </div>

    

        <!-- JS -->
        <script>
        document.addEventListener("DOMContentLoaded", function() {
          const cartButtons = document.querySelectorAll(".add-to-cart-btn");

          cartButtons.forEach((btn) => {
            btn.addEventListener("click", function() {
              const originalText = btn.innerHTML;

              // Set loading state
              btn.disabled = true;
              btn.innerHTML = '<span class="loading-spinner"></span> Adding...';

              // Simulate loading for 2.5 seconds
              setTimeout(() => {
                btn.innerHTML = '✅ Added';
                btn.classList.remove("btn-danger");
                btn.classList.add("btn-success");

                // Optional: Reset to original after a while
                setTimeout(() => {
                  btn.innerHTML = originalText;
                  btn.classList.remove("btn-success");
                  btn.classList.add("btn-danger");
                  btn.disabled = false;
                }, 1000);
              }, 1000);
            });
          });
        });
        </script>

 
    </div>
  </div>

  <!-- Tabs -->
  <ul class="nav nav-tabs mt-5" id="myTab" role="tablist">
    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#desc">Description</button></li> 
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#reviews">Reviews ({{ product.total_reviews }})</button></li> 
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="desc">
      <p>{{ product.full_detail|safe }}</p>
    </div>
 
    <div class="tab-pane fade" id="reviews">
      
        <!-- Average Rating -->
        <div class="d-flex align-items-center mb-3">
          <div class="me-3">
            <span class="fw-bold" style="font-size: 24px;">4.5</span>/5
          </div>
          <div>
            <span class="text-warning">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
            <small class="text-muted">(120 reviews)</small>
          </div>
        </div>




      <!-- Review Form -->
<div class="card mb-4">
  <div class="card-body">
    <h5 class="card-title mb-3">Write a Review</h5>
    <form id="reviewForm" method="post">
      {% csrf_token %}

      <!-- Full Name & Email in one row -->
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="name" class="form-label">Full Name</label>
          <input type="text" class="form-control" id="name" name="name" required>
        </div>
        <div class="col-md-6 mb-3">
          <label for="email" class="form-label">Email Address</label>
          <input type="email" class="form-control" id="email" name="email" required>
        </div>
      </div>

      <!-- Star Rating -->
      <div class="mb-3">
        <label class="form-label d-block mb-1">Your Rating</label>
        <div class="star-rating">
          <input type="radio" id="star5" name="rating" value="5"><label for="star5">★</label>
          <input type="radio" id="star4" name="rating" value="4"><label for="star4">★</label>
          <input type="radio" id="star3" name="rating" value="3"><label for="star3">★</label>
          <input type="radio" id="star2" name="rating" value="2"><label for="star2">★</label>
          <input type="radio" id="star1" name="rating" value="1"><label for="star1">★</label>
        </div>
      </div>

      <!-- Review Text -->
      <div class="mb-3">
        <label for="review" class="form-label">Your Review</label>
        <textarea class="form-control" id="review" name="review" rows="3" required></textarea>
      </div>

      <!-- Submit -->
      <button type="submit" class="btn btn-primary" id="submitBtn">
        <span id="btnText">Submit Review</span>
        <span id="btnLoader" class="spinner-border spinner-border-sm ms-2 d-none"></span>
      </button>

      <!-- Success Message -->
      <div id="successMsg" class="alert alert-success mt-3 d-none" role="alert">
        ✅ Review submitted successfully!
      </div>


    </form>
  </div>
</div>

 
        <!-- Reviews List -->
        <div class="reviews-list mt-4">
          <h5 class="mb-3">All Reviews</h5>
          <div class="reviews-list-section">
            {% for r in reviews %}
            <div class="border rounded p-3 mb-3">
              <div class="d-flex justify-content-between">
                <div>
                  <strong>{{ r.name }}</strong>
                  <div class="text-warning">
                    {% for i in "12345" %}
                      {% if forloop.counter <= r.rating %}
                        &#9733; <!-- filled star -->
                      {% else %}
                        &#9734; <!-- empty star -->
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
                <small class="text-muted">{{ r.created|timesince }} ago</small>
              </div>
              <p class="mt-2 mb-0">{{ r.review }}</p>
            </div>
            {% empty %}
            <p class="text-muted">No reviews yet. Be the first to write one!</p>
            {% endfor %}
          </div>
        </div>


    </div>
 
  </div>
 

</div>
 

<!-- Recommended For You -->
<section class="recommended py-5 bg-white">
  <div class="container">
    <div class="section-title d-flex justify-content-between align-items-center mb-4">
      <h4 class="fw-bold">Recommended For You</h4> 
    </div>

    <div class="row g-4">

      <!-- Product 1 -->
       {% for product in related_products %}
      <div class="col-6 col-md-4 col-lg-2">
        <div class="card product-card h-100 shadow-sm border-0">
          <div class="product-image position-relative">
            <img src="{{ product.product_image.url }}"
              class="card-img-top" alt="{{ product.name_english}}">
            <span class="badge bg-success position-absolute top-0 start-0 m-2">Hot</span>
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">{{ product.name_english }}</h6>
            {% if product.discount_price %}
              <p class="price text-success fw-bold mb-1">৳ {{ product.discount_price }}</p>
            {% else %}
              <p class="price text-muted mb-1">৳ {{ product.unit_price }}</p>
            {% endif %}
            <a href="/product/{{product.id}}/{{product.slug}}" class="btn btn-sm btn-outline-danger">View Details</a>
          </div>
        </div>
      </div>
      {% endfor %}
  

    </div>
  </div>
</section>


<script>
  function changeImage(img) {
    document.getElementById("mainImage").src = img.src;
  }
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>




<script>
  function changeImage(el) {
    document.getElementById("mainImage").src = el.src;
    document.querySelectorAll(".thumbs-carousel img").forEach(img => img.classList.remove("active"));
    el.classList.add("active");
  }

  function selectSize(el) {
    document.querySelectorAll(".size-btn").forEach(btn => btn.classList.remove("active"));
    el.classList.add("active");
  }

  function increaseQty() {
    let qty = document.getElementById("qty");
    qty.value = parseInt(qty.value) + 1;
  }
  function decreaseQty() {
    let qty = document.getElementById("qty");
    if (parseInt(qty.value) > 1) {
      qty.value = parseInt(qty.value) - 1;
    }
  }
</script>

<script>
  const gallery = document.querySelector(".product-gallery");
  const mainImage = document.getElementById("mainImage");

  gallery.addEventListener("mousemove", (e) => {
    const { left, top, width, height } = gallery.getBoundingClientRect();
    const x = ((e.clientX - left) / width) * 100;
    const y = ((e.clientY - top) / height) * 100;
    mainImage.style.transformOrigin = `${x}% ${y}%`;
  });

  gallery.addEventListener("mouseleave", () => {
    mainImage.style.transformOrigin = "center center";
  });
</script>
  

 <script>
      $(document).ready(function () {
        $(".increase-qty").click(function () {
          var input = $(this).closest(".input-group").find(".quantity-input");
          var current = parseInt(input.val()) || 1;
          input.val(current + 1);
        });

        $(".decrease-qty").click(function () {
          var input = $(this).closest(".input-group").find(".quantity-input");
          var current = parseInt(input.val()) || 1;
          if (current > 1) {
            input.val(current - 1);
          }
        });
      });
    </script>

<script>
  function showToast(message) {
    var toast = $('<div class="toast"></div>').text(message);
    $("#toast-container").append(toast);

    setTimeout(function () { toast.addClass('show'); }, 100); // fade in
    setTimeout(function () {
      toast.removeClass('show');
      setTimeout(function () { toast.remove(); }, 500); // remove after fade out
    }, 3000); // 3 seconds visible
  }

  $(document).ready(function () {
    $(".add-to-cart-btn").click(function () {
      var product_id = $(this).data("id");
      var quantity = $(".quantity-input").val(); 

      
      // Color & Size collect করা হচ্ছে
      var selected_color = $("input[name='selected_color']:checked").val() || null;
      var selected_size = $("input[name='selected_size']:checked").val() || null;

      $.ajax({
        url: "{% url 'add_to_cart_ajax' %}",
        method: "POST",
        data: {
          'product_id': product_id,
          'quantity': quantity,
          'color_id': selected_color,
          'size_id': selected_size,
          'csrfmiddlewaretoken': '{{ csrf_token }}'
        },
        success: function (response) {
          if (response.status == "success") {
            $("#cart-counter").text(response.cart_count);
            showToast(response.message); // <-- Toast here
          } else {
            showToast("Error: " + response.message);
          }
        },
        error: function () {
          showToast("Something went wrong!");
        }
      });
    });
  });
</script>


<!-- Get size wise product price  -->
<script>
$(document).ready(function(){
    $("input[name='selected_size']").change(function(){
        var size_id = $(this).val();
        var product_id = "{{ product.id }}"; 

        $.ajax({
            url: "{% url 'get_size_price' %}",
            method: "POST",
            data: {
                size_id: size_id,
                product_id: product_id,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response){
                if(response.status === "success"){
                    var price_html = `
                        <h5 class="text-danger mb-2">
                            Tk. ${response.discount_price}
                            <del class="text-muted"> Tk. ${response.unit_price}</del>
                        </h5>
                    `;
                    if(response.discount > 0){
                        price_html += `
                            <strong>Discount: </strong>
                            <span class="badge bg-success">-${response.discount}%</span>
                            (Your saved Tk. ${response.saved_amount})
                        `;
                    }

                    $("#price-section").html(price_html);  // update price section
                } else {
                    alert(response.message);
                }
            },
            error: function(){
                alert("Something went wrong!");
            }
        });
    });
});
</script>



<!-- AJAX Script for Review Submission -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("reviewForm");
    const submitBtn = document.getElementById("submitBtn");
    const btnText = document.getElementById("btnText");
    const btnLoader = document.getElementById("btnLoader");
    const successMsg = document.getElementById("successMsg");

    form.addEventListener("submit", function (e) {
      e.preventDefault();

      // Show loading spinner
      btnLoader.classList.remove("d-none");
      btnText.textContent = "Submitting...";
      submitBtn.disabled = true;

      const formData = new FormData(form);

      fetch("{% url 'save_review' product.id %}", {
        method: "POST",
        body: formData,
        headers: {
          "X-Requested-With": "XMLHttpRequest",
        },
      })
        .then((res) => res.json())
        .then((data) => {
          // Wait 3 seconds for loading effect
          setTimeout(() => {
            // Hide loader
            btnLoader.classList.add("d-none");
            btnText.textContent = "Submit Review";
            submitBtn.disabled = false;

            if (data.status === "success") {
              // Show success message
              successMsg.classList.remove("d-none");
              successMsg.textContent = "✅ Review submitted successfully!";

              // Create new review
              const newReview = document.createElement("div");
              newReview.classList.add("border", "rounded", "p-3", "mb-3");
              newReview.innerHTML = `
                <div class="d-flex justify-content-between">
                  <div>
                    <strong>${data.name}</strong>
                    <div class="text-warning">
                      ${"&#9733;".repeat(data.rating)}${"&#9734;".repeat(5 - data.rating)}
                    </div>
                  </div>
                  <small class="text-muted">${data.created}</small>
                </div>
                <p class="mt-2 mb-0">${data.review}</p>
              `;
              document.querySelector(".reviews-list-section").prepend(newReview);

              form.reset();

              // Hide success message after 3 seconds
              setTimeout(() => {
                successMsg.classList.add("d-none");
              }, 3000);
            } else {
              alert("⚠️ Failed to submit review. Try again!");
            }
          }, 3000);
        })
        .catch((err) => {
          btnLoader.classList.add("d-none");
          btnText.textContent = "Submit Review";
          submitBtn.disabled = false;
          alert("⚠️ Network error. Please try again later.");
          console.error("Error:", err);
        });
    });
  });
</script>



{% endblock %}