{% extends "cms/base.html" %}
{% block title %}Send Deal Link — Order #{{ order.order_number }}{% endblock %}
{% block page_title %}Send Deal Link{% endblock %}

{% block cms_content %}

<div class="cms-section-header">
  <h2>Send Deal Link <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">#{{ order.order_number }}</span></h2>
  <a href="{% url 'cms_order_detail' order.pk %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i> Back</a>
</div>

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

<div class="row g-4">
  <div class="col-md-7">
    <div class="cms-card">
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cms-muted);margin-bottom:1rem">Agreement Details</div>

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

        <div class="mb-3">
          <label class="form-label" style="font-size:.8rem;font-weight:600;color:var(--cms-muted)">Client</label>
          <div style="font-weight:600">{{ order.customer_name }}</div>
          <div style="font-size:.82rem;color:var(--cms-muted)">{{ order.customer_email }}</div>
        </div>

        <div class="mb-3">
          <label class="form-label" style="font-size:.8rem;font-weight:600;color:var(--cms-muted)">Terms Type
            <span style="font-weight:400">(auto-detected: {{ detected_type }})</span>
          </label>
          <select name="terms_type" class="form-select form-select-sm">
            {% for value, label in terms_choices %}
            <option value="{{ value }}" {% if detected_type == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="mb-4" style="padding:.85rem 1rem;background:var(--cms-bg);border-radius:8px;font-size:.83rem;color:var(--cms-muted)">
          <i class="fa-solid fa-envelope me-1"></i>
          An email will be sent to <strong style="color:var(--cms-text)">{{ order.customer_email }}</strong> with a personal agreement link.
          They will review the terms, sign digitally, and proceed to payment — all in one flow.
        </div>

        {% if existing %}
        <div class="mb-3" style="padding:.75rem 1rem;background:#fef9c3;border-radius:8px;font-size:.82rem;color:#854d0e">
          <i class="fa-solid fa-triangle-exclamation me-1"></i>
          A deal link was already sent{% if existing.sent_at %} on {{ existing.sent_at|date:"d M Y" }}{% endif %}.
          {% if existing.is_accepted %}
          <strong>Client has already signed.</strong>
          {% else %}
          Sending again will update the existing link.
          {% endif %}
        </div>
        {% endif %}

        <button type="submit" class="btn-cms">
          <i class="fa-solid fa-paper-plane me-1"></i>
          {% if existing %}Resend Deal Link{% else %}Send Deal Link{% endif %}
        </button>
      </form>
    </div>
  </div>

  <div class="col-md-5">
    <div class="cms-card">
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cms-muted);margin-bottom:1rem">Order Summary</div>
      <dl style="font-size:.85rem">
        <dt class="text-muted small">Reference</dt><dd>#{{ order.order_number }}</dd>
        <dt class="text-muted small">Total</dt><dd class="fw-600">£{{ order.total }}</dd>
        {% if order.balance_due > 0 %}
        <dt class="text-muted small">Due</dt><dd class="text-warning fw-600">£{{ order.balance_due }}</dd>
        {% endif %}
        <dt class="text-muted small">Status</dt><dd>{{ order.get_status_display }}</dd>
      </dl>
      {% if order.items.all %}
      <div style="margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--cms-border)">
        {% for item in order.items.all %}
        <div style="font-size:.82rem;margin-bottom:.3rem">
          <i class="fa-solid fa-box me-1" style="color:var(--cms-muted);font-size:.7rem"></i>
          {{ item.product_name }}{% if item.quantity > 1 %} ×{{ item.quantity }}{% endif %}
          <span style="color:var(--cms-muted);float:right">£{{ item.total_price }}</span>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</div>

{% endblock %}