{% extends "website/home/base.html" %}
{% block title %} Product Details | {{ product.name_english }} {% endblock %}
{% load static %}
{% block content %}
<div class="container my-4 bg-white">
  <div class="row g-4">
    <!-- Left: Product Images -->
    <div class="col-lg-5">
      <div class="border rounded p-2">
        <img src="{{ product.product_image.url }}" id="mainImage" class="img-fluid w-100 rounded"
          alt="{{ product.name_english }}">
      </div>
      <!-- <div class="d-flex mt-2 gap-2 flex-wrap">
        {% if product_images %}
            <img src="{{ product.product_image.url }}" onclick="changeImage(this)" class="img-thumbnail" style="width: 60px;height:60px;" alt="">
            {% for img in product_images %}
                <img src="{{ img.image.url }}" onclick="changeImage(this)" class="img-thumbnail"  style="width: 60px;height:60px;" alt="">
            {% endfor %} 
        {% endif %}
        </div> -->

        {% if product_images %}
        <div class="mt-2">
          <!-- Carousel for more than 7 images -->
          <div class="categories-slider" style="padding:10px;background:#f5f5f5">
            <!-- Category card -->
            {% for img in product_images %}
            <div class="img product_others_card text-center">
              <img src="{{ img.image.url }}" onclick="changeImage(this)" class="img-thumbnail"
                style="width: 60px;height:60px;" alt="">
            </div>
            {% endfor %}

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

    <!-- Middle: Product Info -->
    <div class="col-lg-4">
      <h3>{{ product.name_english }}</h3>
      <h5>SKU: {{ product.sku_code }}</h5>
      <p class="text-muted small">{{ product.short_description }}</p>

      <!-- Rating -->
      <div class="mb-2">
        ⭐⭐⭐⭐⭐ <span class="text-muted">(12 Ratings)</span>
      </div>

      <!-- Price -->
      <!-- <div class="mb-3">
        <h5 class="text-danger mb-2">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> -->

      <div class="mb-3" id="price-section">
      <h5 class="text-danger mb-2">
        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>

    
    <!-- Color -->
    {% if product_colors %}
      <p><strong>Color Family:</strong> Multicolor</p>
      <div class="d-flex gap-2 mb-3">
        {% for color in product_colors %}
          <label class="color-label">
            <input type="radio" name="selected_color" value="{{ color.color_id }}"
                  {% if forloop.first %}checked{% endif %}>
            <span class="color-circle" style="background: {{ color.color.color_name }}"></span>
          </label>
        {% endfor %}
      </div>
    {% endif %}

 

    <!-- Size -->
    {% if product_sizes %}
      <p><strong>Available Size:</strong></p>
      <div class="d-flex gap-2 mb-3">
        {% 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 class="size-circle">{{ size.size.size_name }}</span>
          </label>
        {% endfor %}
      </div>
    {% 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">
        <!-- <a href="#" class="btn btn-danger text-white ">Add to Cart</a> -->
        <button class="btn btn-danger text-white  add-to-cart-btn" data-id="{{ product.id }}">Add to Cart</button>
        <a href="#" class="btn btn-success text-white ">Buy Now</a>
      </div>
    </div>

    <!-- Right: Delivery Options -->
    <div class="col-lg-3">
      <div class="border rounded p-3 small">
        <h6>Delivery Options</h6>
        <p><i class="bi bi-geo-alt"></i> Dhaka, Banani</p>
        <p><i class="bi bi-truck"></i> Standard Delivery (৳100)</p>
        <p><i class="bi bi-cash"></i> Cash on Delivery Available</p>
        <hr>
        <h6>Return & Warranty</h6>
        <p>✔ 14 days easy return</p>
        <p>❌ Warranty not available</p>
      </div>
    </div>
  </div>

  <!-- Product Description -->
  <div class="row mt-5">
    <div class="col-12">
      <h4>Description</h4>
      <hr>
      <p>{{ product.full_detail|safe }}</p>
    </div>
  </div>  
</div>


<!-- Review and Rating section  -->
<section class="py-4 bg-light">

  <div class="container"> 
    <div class="row mt-5">
      <div class="col-12">
        <h4>Customer Reviews</h4>
        <hr>

        <!-- 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">Write a Review</h5>
            <form method="post" action="">
              {% csrf_token %}
              <div class="mb-3">
                <label for="rating" class="form-label">Your Rating</label>
                <select class="form-select" id="rating" name="rating" required>
                  <option value="">Choose...</option>
                  <option value="5">★★★★★ - Excellent</option>
                  <option value="4">★★★★☆ - Very Good</option>
                  <option value="3">★★★☆☆ - Average</option>
                  <option value="2">★★☆☆☆ - Poor</option>
                  <option value="1">★☆☆☆☆ - Terrible</option>
                </select>
              </div>
              <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>
              <button type="submit" class="btn btn-primary">Submit Review</button>
            </form>
          </div>
        </div>

        <!-- Reviews List -->
        <div class="reviews-list">
          <h5 class="mb-3">All Reviews</h5>

          <!-- Single Review -->
          <div class="border rounded p-3 mb-3">
            <div class="d-flex justify-content-between">
              <div>
                <strong>Rakib Hasan</strong>
                <div class="text-warning">&#9733;&#9733;&#9733;&#9733;&#9734;</div>
              </div>
              <small class="text-muted">2 days ago</small>
            </div>
            <p class="mt-2 mb-0">Great product, delivery was fast. Highly recommended!</p>
          </div>

          <div class="border rounded p-3 mb-3">
            <div class="d-flex justify-content-between">
              <div>
                <strong>Sadia Akter</strong>
                <div class="text-warning">&#9733;&#9733;&#9733;&#9734;&#9734;</div>
              </div>
              <small class="text-muted">1 week ago</small>
            </div>
            <p class="mt-2 mb-0">Good product but packaging could be better.</p>
          </div>

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

  </div>
  
</section>



<!-- 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>
      <a href="#" class="btn btn-sm btn-outline-danger">View All</a>
    </div>

    <div class="row g-3">

      <!-- Product 1 -->
      <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="https://plus.unsplash.com/premium_photo-1705169612592-32610774a5d0?w=300&auto=format&fit=crop"
              class="card-img-top" alt="Product 1">
            <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">Ceiling Fan</h6>
            <p class="price text-success fw-bold mb-1">৳ 4,600</p>
            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
          </div>
        </div>
      </div>

      <!-- Product 2 -->
      <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="https://static.vecteezy.com/system/resources/previews/042/681/826/non_2x/illustration-of-wooden-mahogany-side-chair-on-white-vector.jpg"
              class="card-img-top" alt="Product 2">
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">Dining Chair</h6>
            <p class="price text-success fw-bold mb-1">৳ 650</p>
            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
          </div>
        </div>
      </div>

      <!-- replicate more 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">
            <img src="https://images.unsplash.com/photo-1606813902779-9a893e8d4b7b?w=300&auto=format&fit=crop"
              class="card-img-top" alt="Product 3">
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">Smartphone</h6>
            <p class="price text-success fw-bold mb-1">৳ 15,500</p>
            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
          </div>
        </div>
      </div>

      <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">
            <img src="https://images.unsplash.com/photo-1616627781215-8f6ef1d5c00c?w=300&auto=format&fit=crop"
              class="card-img-top" alt="Product 4">
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">Headphones</h6>
            <p class="price text-success fw-bold mb-1">৳ 2,200</p>
            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
          </div>
        </div>
      </div>

      <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">
            <img src="https://images.unsplash.com/photo-1585386959984-a4155228f8d6?w=300&auto=format&fit=crop"
              class="card-img-top" alt="Product 5">
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">Laptop</h6>
            <p class="price text-success fw-bold mb-1">৳ 55,000</p>
            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
          </div>
        </div>
      </div>

      <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">
            <img src="https://images.unsplash.com/photo-1622202237187-d9b1c1ed3c8b?w=300&auto=format&fit=crop"
              class="card-img-top" alt="Product 6">
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">Smart Watch</h6>
            <p class="price text-success fw-bold mb-1">৳ 3,500</p>
            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
          </div>
        </div>
      </div>

      <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">
            <img src="/static/website/images/category/5.jpg" class="card-img-top" alt="Product 4">
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">Headphones</h6>
            <p class="price text-success fw-bold mb-1">৳ 2,200</p>
            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
          </div>
        </div>
      </div>

      <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">
            <img src="/static/website/images/category/6.jpg" class="card-img-top" alt="Product 5">
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">Laptop</h6>
            <p class="price text-success fw-bold mb-1">৳ 55,000</p>
            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
          </div>
        </div>
      </div>

      <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">
            <img src="https://images.unsplash.com/photo-1622202237187-d9b1c1ed3c8b?w=300&auto=format&fit=crop"
              class="card-img-top" alt="Product 6">
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">Smart Watch</h6>
            <p class="price text-success fw-bold mb-1">৳ 3,500</p>
            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
          </div>
        </div>
      </div>

    </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>
      $(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>

{% endblock %}