{% extends 'base.html' %}{% load static %}
{% block title %}Order {{ service.name }} — Unity Nation{% endblock %}
{% block content %}
<div class="container pg-wrap" style="max-width:540px;margin:0 auto">
<div style="margin-bottom:22px"><a href="{% url 'service_detail' service.id %}" style="color:var(--muted);font-size:.83rem;text-decoration:none;display:inline-flex;align-items:center;gap:5px"><i class="fas fa-arrow-left"></i>Back to Service</a></div>
<h1 style="font-family:var(--ff);font-size:1.7rem;font-weight:700;letter-spacing:-.025em;margin-bottom:22px">Confirm Order</h1>
<div style="background:linear-gradient(135deg,rgba(123,95,230,.12),rgba(0,200,168,.06));border:1px solid rgba(123,95,230,.28);border-radius:var(--rl);padding:22px;margin-bottom:20px">
  <div style="display:flex;align-items:center;gap:14px;margin-bottom:18px">
    <div style="width:64px;height:64px;border-radius:13px;overflow:hidden;background:#1a1a3a;display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0">{% if service.image %}<img src="{{ service.image.url }}" style="width:100%;height:100%;object-fit:cover">{% else %}⚡{% endif %}</div>
    <div><h3 style="font-family:var(--ff);font-size:1rem;font-weight:700;margin-bottom:3px">{{ service.name }}</h3><div style="font-size:.82rem;color:var(--muted)">by {{ service.merchant.business_name }}</div></div>
  </div>
  <div style="display:flex;flex-direction:column;gap:0">
    <div style="display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)"><span style="color:var(--muted);font-size:.86rem">Service Price</span><span style="font-family:var(--ff);font-weight:700;color:var(--teal)">${{ service.price }}</span></div>
    {% if service.delivery_time %}<div style="display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)"><span style="color:var(--muted);font-size:.86rem">Delivery Time</span><span style="font-size:.86rem">{{ service.delivery_time }}</span></div>{% endif %}
    <div style="display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)"><span style="color:var(--muted);font-size:.86rem">Your Balance</span><span style="font-family:var(--ff);font-weight:700">${{ user.wallet_balance|floatformat:2 }}</span></div>
  </div>
</div>
<div class="card">
  <form method="post" action="{% url 'purchase_service' service.id %}">{% csrf_token %}
    <div class="form-group">
      <label class="form-label"><i class="fas fa-list-ul" style="color:var(--vlt);margin-right:5px"></i>Your Requirements *</label>
      <textarea name="requirements" class="form-control" placeholder="Describe exactly what you need in detail…" required></textarea>
    </div>
    <div class="form-group">
      <label class="form-label"><i class="fas fa-comment" style="color:var(--muted);margin-right:5px"></i>Additional Notes (optional)</label>
      <input type="text" name="notes" class="form-control" placeholder="Any other notes for the merchant?">
    </div>
    <button type="submit" class="btn btn-violet btn-block btn-lg"><i class="fas fa-check"></i>Confirm Order</button>
  </form>
</div>
</div>
{% endblock %}