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

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

{% block content %}
<section class="page-header reveal">
  <div>
    <p class="page-eyebrow">Step 1 of 2</p>
    <h1>Checkout</h1>
    <p>Add delivery details now, capture GPS if you want, and choose your verified payment method on the next screen.</p>
  </div>
</section>

<div class="checkout-progress reveal">
    <div class="checkout-progress-step is-active">
        <strong>1</strong>
        <span>Delivery details</span>
    </div>
    <div class="checkout-progress-step">
        <strong>2</strong>
        <span>Payment method</span>
    </div>
</div>

<div class="payment-page">
  <div class="order-detail-box checkout-panel reveal">
    <div class="payment-panel-heading">
      <div>
        <p class="payment-step">Delivery &amp; review</p>
        <h2>Confirm your shipping details</h2>
        <p class="payment-caption">Your saved account address and GPS support can be used here automatically.</p>
      </div>
      <span class="payment-badge">Secure checkout</span>
    </div>

    <div class="checkout-overview-grid">
        <article class="checkout-side-card reveal">
            <span class="shop-stat-label">Line items</span>
            <strong class="shop-stat-value">{{ products|length }}</strong>
            <small class="shop-stat-note">Products in this checkout step.</small>
        </article>
        <article class="checkout-side-card reveal">
            <span class="shop-stat-label">Order total</span>
            <strong class="shop-stat-value">Rs. {{ total|floatformat:2 }}</strong>
            <small class="shop-stat-note">Final payment selection happens next.</small>
        </article>
        <article class="checkout-side-card reveal">
            <span class="shop-stat-label">Delivery profile</span>
            <strong class="shop-stat-value">{% if delivery.location_label %}Saved{% else %}Manual{% endif %}</strong>
            <small class="shop-stat-note">Use your saved address, GPS pin, or edit the fields below.</small>
        </article>
    </div>

    <div class="order-items checkout-review-list">
      {% for p in products %}
      <div class="order-item-row reveal">
        <div>
          <h4>{{ p.name }}</h4>
          <p>Quantity: {{ p.qty }}</p>
        </div>
        <strong>Rs. {{ p.subtotal|floatformat:2 }}</strong>
      </div>
      {% endfor %}
    </div>
  </div>

  <aside class="summary-box payment-summary reveal">
    <div class="payment-summary-header">
      <div>
        <h3>Delivery Details</h3>
        <p class="payment-caption">Used for shipping updates, payment confirmation, and smoother repeat orders.</p>
      </div>
      <span class="payment-badge">Order total</span>
    </div>

    <div class="summary-row total-row">
      <span>Total</span>
      <span>Rs. {{ total|floatformat:2 }}</span>
    </div>

    {% if delivery_location %}
    <div class="cart-summary-note">
        <strong>Saved location detected</strong>
        <p>Your current delivery preference is set to {{ delivery_location }}.</p>
    </div>
    {% endif %}

    {% if delivery_shortcuts %}
    <div class="checkout-shortcuts">
      <div class="checkout-shortcuts-head">
        <div>
          <strong>Quick delivery shortcuts</strong>
          <p>Reuse your saved profile details or a recent delivery point from an earlier order.</p>
        </div>
        {% if delivery.selected_shortcut_id %}
        <span class="payment-badge">Shortcut applied</span>
        {% endif %}
      </div>
      <div class="checkout-shortcuts-grid">
        {% for shortcut in delivery_shortcuts %}
        <a href="{% url 'checkout' %}?delivery_shortcut={{ shortcut.id }}" class="checkout-shortcut-card {% if shortcut.selected %}is-selected{% endif %}">
          <div class="checkout-shortcut-top">
            <strong>{{ shortcut.title|truncatechars:42 }}</strong>
            <span>{{ shortcut.badge }}</span>
          </div>
          <p>{{ shortcut.address|linebreaksbr }}</p>
          <div class="checkout-shortcut-meta">
            <span>{{ shortcut.phone }}</span>
            <span>{% if shortcut.has_precise_location %}GPS saved{% else %}Manual{% endif %}</span>
          </div>
          {% if shortcut.note %}<small>{{ shortcut.note }}</small>{% endif %}
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <form method="post" class="payment-form checkout-form" data-location-form>
      {% csrf_token %}
      <input type="hidden" name="selected_shortcut_id" value="{{ delivery.selected_shortcut_id|default:'' }}">
      <input type="hidden" name="latitude" value="{{ delivery.latitude }}">
      <input type="hidden" name="longitude" value="{{ delivery.longitude }}">
      <input type="hidden" name="location_accuracy_m" value="{{ delivery.location_accuracy_m }}">

      <div class="field-stack">
        <label for="full_name">Full Name</label>
        <input id="full_name" required type="text" name="full_name" class="field-input" value="{{ delivery.full_name }}" placeholder="Enter receiver name" autocomplete="name">
      </div>

      <div class="form-grid checkout-form-grid">
        <div class="field-stack">
          <label for="phone">Phone</label>
          <input id="phone" required type="text" name="phone" class="field-input" value="{{ delivery.phone }}" placeholder="Phone number" autocomplete="tel">
        </div>

        <div class="field-stack">
          <label for="location_label">Delivery Location</label>
          <input id="location_label" type="text" name="location_label" class="field-input" value="{{ delivery.location_label }}" placeholder="Area, city, or landmark" autocomplete="address-level2">
        </div>
      </div>

      <div class="location-card checkout-location-card">
        <div class="location-card-head">
          <div>
            <strong>GPS-assisted delivery</strong>
            <p class="field-note">Capture your current device location for more precise delivery coordination.</p>
          </div>
          <button type="button" class="btn btn-secondary small" data-geolocate-btn>Use Current GPS</button>
        </div>
        <p class="location-status" data-location-status>
          {% if delivery.latitude and delivery.longitude %}
            GPS coordinates are attached to this checkout.
          {% else %}
            GPS is optional. You can continue with a manual address if you prefer.
          {% endif %}
        </p>
      </div>

      <div class="field-stack field-stack--full">
        <label for="address">Address</label>
        <textarea id="address" required name="address" class="field-input field-textarea" placeholder="Street, city, area, landmark" autocomplete="street-address">{{ delivery.address }}</textarea>
      </div>

      <div class="field-stack field-stack--full">
        <label for="delivery_notes">Delivery notes (Optional)</label>
        <textarea id="delivery_notes" name="delivery_notes" class="field-input field-textarea field-textarea--compact" placeholder="Gate number, floor, landmark, or delivery instructions">{{ delivery.delivery_notes }}</textarea>
      </div>

      <label class="checkbox-inline checkbox-inline--solid" for="save_as_default">
        <input id="save_as_default" type="checkbox" name="save_as_default" {% if delivery.save_as_default %}checked{% endif %}>
        <span>Save these details as my default address for faster checkout next time</span>
      </label>

      <div class="gateway-status-banner info">
        <strong>Next step:</strong>
        <p>After saving delivery details you will choose eSewa, Khalti, cash on delivery, or card fallback when it is configured.</p>
      </div>

      <div class="checkout-form-actions">
        <button type="submit" class="btn btn-primary">Continue to Payment</button>
        <a href="{% url 'cart' %}" class="btn btn-secondary">Back to Cart</a>
      </div>
    </form>
  </aside>
</div>
{% endblock %}