{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/product.css' %}">
{% endblock %}

{% block content %}
<section class="page-header">
  <div>
    <h1>Checkout</h1>
    <p>Review your order and complete shipping details.</p>
  </div>
</section>

<div class="payment-page">
  <div class="order-detail-box">
    <h2>Order Summary</h2>
    <div class="order-items">
      {% for p in products %}
      <div class="order-item-row">
        <div>
          <h4>{{ p.name }}</h4>
          <p>Quantity: {{ p.qty }}</p>
        </div>
        <strong>Rs. {{ p.subtotal|floatformat:2 }}</strong>
      </div>
      {% endfor %}
    </div>

    <div class="summary-row total-row" style="margin-top:12px;">
      <span>Total</span>
      <span>Rs. {{ total|floatformat:2 }}</span>
    </div>
  </div>

  <aside class="summary-box">
    <h3>Delivery Details</h3>
    <form method="post" class="payment-form">
      {% csrf_token %}
      <label>Full Name</label>
      <input required type="text" name="full_name" class="field-input" value="{{ delivery.full_name }}">

      <label>Phone</label>
      <input required type="text" name="phone" class="field-input" value="{{ delivery.phone }}">

      <label>Address</label>
      <textarea required name="address" class="field-input field-textarea">{{ delivery.address }}</textarea>

      <button type="submit" class="btn btn-primary">Continue to Payment</button>
    </form>
  </aside>
</div>
{% endblock %}