{% extends "tienda/base.html" %}
{% load static %}
{% load vat_filters %}

{% block content %}
<div class="row mt-4">
  <div class="col-12">
    <h2>Carrito de Compras</h2>
  </div>
</div>

{% if cart_items %}
<div class="row mt-4">
  <div class="col-md-8">
    <div class="card">
      <div class="card-body">
        <table class="table">
          <thead>
            <tr>
              <th>Producto</th>
              <th>Precio (sin IVA)</th>
              <th>Cantidad</th>
              <th>Subtotal (con IVA)</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {% for item in cart_items %}
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  {% if item.product.primary_image %}
                  <img src="/media/{{ item.product.primary_image.image }}" alt="{{ item.product.name }}" style="width: 50px; height: 50px; object-fit: cover;" class="me-3">
                  {% endif %}
                  <a href="{% url 'producto' item.product.id %}">{{ item.product.name }}</a>
                </div>
              </td>
              <td>{{ item.product.price|format_price }} €</td>
              <td>
                <form method="post" action="{% url 'update_cart_item' item.id %}" class="d-flex align-items-center" style="max-width: 150px;">
                  {% csrf_token %}
                  <input type="number" name="quantity" value="{{ item.quantity }}" min="1" class="form-control form-control-sm me-2" style="width: 70px;">
                  <button type="submit" class="btn btn-sm btn-primary">Actualizar</button>
                </form>
              </td>
              <td class="price">{{ item.get_subtotal_with_vat|format_price }} €</td>
              <td>
                <form method="post" action="{% url 'remove_from_cart' item.id %}" style="display: inline;">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-sm btn-danger">Eliminar</button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  
  <div class="col-md-4">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">Resumen del Pedido</h5>
      </div>
      <div class="card-body">
        <div class="d-flex justify-content-between mb-2">
          <span>Subtotal ({{ cart.get_items_count }} producto{{ cart.get_items_count|pluralize }})</span>
          <span class="price">{{ cart.get_total|format_price }} €</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span>IVA (21%)</span>
          <span class="price text-success">{{ cart.get_vat_amount|format_price }} €</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span>Envío</span>
          <span>Gratis</span>
        </div>
        <hr>
        <div class="d-flex justify-content-between mb-3">
          <strong>Total (con IVA)</strong>
          <strong class="price">{{ cart.get_total_with_vat|format_price }} €</strong>
        </div>
        <div class="d-grid gap-2">
          <a href="{% url 'checkout' %}" class="btn btn-primary btn-lg">Proceder al Pago</a>
          <a href="{% url 'index' %}" class="btn btn-outline-secondary">Continuar Comprando</a>
          <form method="post" action="{% url 'clear_cart' %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-outline-danger w-100">Vaciar Carrito</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% else %}
<div class="row mt-4">
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center py-5">
        <h4>Tu carrito está vacío</h4>
        <p class="text-muted">¡Agrega algunos productos para empezar!</p>
        <a href="{% url 'index' %}" class="btn btn-primary mt-3">Ver Productos</a>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}