{% extends "website/home/base.html" %}
{% load static %}

{% block title %} My Cart | Ecom {% endblock %}

{% block content %}
<div class="container my-2 p-2 mb-4">
  <h4 class="mb-4">🛒 My Shopping Cart</h4>

  {% if cart_items %}
  <div class="row">
    <!-- Cart Items (Left Side) -->
    <div class="col-md-8">
      <div class="table-responsive">
        <table class="table align-middle">
          <thead class="table-light">
            <tr>
              <th scope="col">Image</th>
              <th scope="col">Product Info</th>
              <th scope="col">Price</th>
              <th scope="col" class="text-center">Quantity</th>
              <th scope="col">Subtotal</th>
              <th scope="col" class="text-center">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for item in cart_items %}
            <tr>
              <!-- Product Image -->
              <td style="width: 100px;">
                <a href="/product/{{ item.product.id }}/{{ item.product.slug }}">
                  <img src="{{ item.product.product_image.url }}" class="img-fluid rounded" alt="{{ item.product.name_english }}">
                </a>
              </td>

              <!-- Product Name -->
              <td>
                <h6 class="mb-0">{{ item.product.name_english }}</h6>
                <small class="text-muted">SKU: {{ item.product.sku_code }}</small> <br>
                {% if item.size %}<small class="text-muted">Size: {{ item.size }}</small> {% endif %}
              </td>

              <!-- Product Price -->
              <td>
                <strong> ৳{{ item.discount_price|floatformat:0 }}</strong>
              </td>

              <!-- Quantity -->
              <td class="text-center">
                <div class="d-flex justify-content-center align-items-center">
                  <button class="btn btn-sm btn-outline-secondary update-qty" data-id="{{ item.id }}"  data-action="decrease">-</button>

                  <input type="text" id="qty-{{ item.id }}" class="form-control form-control-sm mx-2 text-center" style="width: 50px;" value="{{ item.quantity }}" readonly>

                  <button class="btn btn-sm btn-outline-secondary update-qty" data-id="{{ item.id }}" data-action="increase">+</button>
                </div>
              </td>

              <!-- Subtotal -->
              <td>
                <strong> ৳{{ item.subtotal|floatformat:0 }}</strong>
              </td>

              <!-- Remove -->
              <td class="text-center">
                <button class="btn btn-sm text-danger remove-item" data-id="{{ item.id }}">
                  <i class="fa fa-trash"></i>
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Cart Summary (Right Side) -->
    <div class="col-md-4">
      <div class="border p-3 rounded shadow-sm">
        <h5 class="mb-3">Cart Summary</h5>
        <div class="d-flex justify-content-between py-1">
          <span>Subtotal</span>
          <strong>{{ subtotal }} ৳</strong>
        </div>
        <div class="d-flex justify-content-between py-1">
          <span>Shipping Cost</span>
          <strong>{{ shipping }} ৳</strong>
        </div>
        <hr>
        <div class="d-flex justify-content-between py-1 fw-bold">
          <span>Total</span>
          <strong>{{ total }} ৳</strong>
        </div>
        <!-- Checkout Button -->
        <a href="{% url 'checkout' %}" class="btn btn-primary w-100 mt-3">Proceed to Checkout</a>
        <a href="/" class="btn btn-danger w-100 mt-3">Return to Shopping</a>
      </div>
    </div>
  </div>

  {% else %}
  <div class="text-center py-5">
    <img src="/static/website/images/empty_cart.png" class="img-fluid mb-3" alt="Empty Cart" style="max-width:200px;">
    <h5>Your cart is empty!</h5>
    <a href="/" class="btn btn-primary mt-3">Continue Shopping</a>
  </div>
  {% endif %}
</div>

 <script>
document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(".remove-item").forEach(button => {
    button.addEventListener("click", function() {
      let itemId = this.getAttribute("data-id");

      if (!confirm("Are you sure you want to remove this item?")) {
        return;
      }

      fetch(`/cart/${itemId}/item-remove/`, {
        method: "POST",
        headers: {
          "X-CSRFToken": "{{ csrf_token }}",
          "X-Requested-With": "XMLHttpRequest"
        }
      })
      .then(response => response.json())
      .then(data => {
        if (data.status === "success") { 
          window.location.href = "/cart/";
        } else {
          alert(data.message);
        }
      })
      .catch(error => {
        console.error("Error:", error);
      });
    });
  });
});


// Cart Item qty update 

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(".update-qty").forEach(button => {
    button.addEventListener("click", function() {
      let itemId = this.getAttribute("data-id");
      let action = this.getAttribute("data-action");

      fetch(`/cart/${itemId}/update-qty/`, {
        method: "POST",
        headers: {
          "X-CSRFToken": "{{ csrf_token }}",
          "X-Requested-With": "XMLHttpRequest"
        },
        body: new URLSearchParams({
          "action": action
        })
      })
      .then(response => response.json())
      .then(data => {
        if (data.status === "success") {
           window.location.href = "/cart/"; 

        } else {
          alert(data.message);
        }
      });
    });
  });
});



</script>


{% endblock %}