{% extends "base.html" %}
{% load widget_tweaks %}
{% block content %}

<h1 class="mm-section-title">Checkout</h1>

{% if messages %}{% for m in messages %}<div class="alert alert-{{ m.tags }}">{{ m }}</div>{% endfor %}{% endif %}

<div class="row g-4">
  <!-- Form -->
  <div class="col-12 col-lg-7">
    <div class="mm-soft-card">
      <h2 class="h6 title mb-3">Contact & Shipping</h2>

      <form method="post" novalidate>
        {% csrf_token %}

        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">Full name</label>
            {% render_field form.name class="form-control" %}
          </div>
          <div class="col-md-6">
            <label class="form-label">Phone</label>
            {% render_field form.phone class="form-control" %}
          </div>
          <div class="col-12">
            <label class="form-label">Email</label>
            {% render_field form.email class="form-control" %}
          </div>

          <div class="col-12">
            <label class="form-label">Address line 1</label>
            {% render_field form.address_line1 class="form-control" %}
          </div>
          <div class="col-12">
            <label class="form-label">Address line 2 (optional)</label>
            {% render_field form.address_line2 class="form-control" %}
          </div>

          <div class="col-md-4">
            <label class="form-label">City</label>
            {% render_field form.city class="form-control" %}
          </div>
          <div class="col-md-4">
            <label class="form-label">State/Province</label>
            {% render_field form.region class="form-control" %}
          </div>
          <div class="col-md-4">
            <label class="form-label">Postal code</label>
            {% render_field form.postal_code class="form-control" %}
          </div>
          <div class="col-md-6">
            <label class="form-label">Country</label>
            {% render_field form.country class="form-control" %}
          </div>
          <div class="col-12">
            <label class="form-label">Notes (optional)</label>
            {% render_field form.notes class="form-control" rows="3" %}
          </div>
        </div>

        <div class="form-check mt-3">
          <input class="form-check-input" type="checkbox" id="agree" required>
          <label class="form-check-label" for="agree">
            I agree to the Terms & Privacy.
          </label>
        </div>

        <div class="d-grid mt-3">
          <button class="mm-btn mm-btn-block" type="submit">Place Order</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Summary -->
  <div class="col-12 col-lg-5">
    <div class="mm-soft-card">
      <h2 class="h6 title mb-3">Order Summary</h2>

      {% if lines %}
        <ul class="list-unstyled m-0">
          {% for row in lines %}
            <li class="d-flex justify-content-between align-items-center py-2 border-bottom">
              <div class="d-flex align-items-center gap-2">
                {% if row.product.thumbnail %}
                  <img src="{{ row.product.thumbnail.url }}" alt="{{ row.product.title }}"
                       class="rounded" style="width:48px;height:48px;object-fit:cover;">
                {% endif %}
                <span class="small">{{ row.product.title }} × {{ row.qty }}</span>
              </div>
              <span class="fw-semibold small">$ {{ row.line_total|floatformat:2 }}</span>
            </li>
          {% endfor %}
        </ul>
        <div class="d-flex justify-content-between align-items-center mt-3">
          <strong>Total</strong>
          <strong>$ {{ total|floatformat:2 }}</strong>
        </div>
        <div class="text-muted small mt-2">Taxes and shipping are calculated at delivery (demo).</div>
      {% else %}
        <div class="alert alert-light border">Your cart is empty.</div>
      {% endif %}
    </div>
  </div>
</div>

{% endblock %}