{% extends "base.html" %}
{% load static %}
{% block title %}Delivery Submitted — ACA Vendor{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<style>
body { overflow: auto; }
.result-wrap { max-width: 560px; margin: 0 auto; padding: 60px 24px 80px; }

.result-hero { text-align: center; margin-bottom: 32px; }
.result-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(42,157,143,0.12);
    border: 1px solid rgba(42,157,143,0.3);
    color: #2a9d8f;
    display: grid; place-items: center;
    margin: 0 auto 22px;
}
.result-hero h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.result-hero p { color: var(--text-dim); font-size: 14px; font-weight: 300; line-height: 1.7; }

.order-badge {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px;
    background: var(--gold-glow);
    border: 1px solid rgba(201,169,110,0.3);
    border-radius: var(--radius);
    padding: 9px 20px;
    font-family: var(--font-display);
    font-size: 15px; font-weight: 800; letter-spacing: 0.04em;
    color: var(--gold);
}

.info-card {
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.info-card-header {
    padding: 12px 18px;
    background: var(--charcoal);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted);
}
.info-card-body {
    padding: 16px 18px;
    font-size: 13px; font-weight: 300;
    color: var(--text-dim); line-height: 1.7;
}
.auto-release {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--gold-glow);
    border: 1px solid rgba(201,169,110,0.2);
    border-radius: var(--radius);
    padding: 8px 14px;
    margin-top: 10px;
    font-size: 12px; font-weight: 400;
    color: var(--gold);
}

.steps {
    display: flex; flex-direction: column; gap: 8px;
}
.step {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 13px; font-weight: 300;
    color: var(--text-dim); line-height: 1.5;
}
.step-num {
    min-width: 22px; height: 22px; border-radius: 50%;
    background: var(--gold-glow);
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
    flex-shrink: 0; margin-top: 1px;
}

.result-actions { display: flex; gap: 10px; margin-top: 24px; }
.result-actions .btn { flex: 1; justify-content: center; }
</style>
{% endblock %}

{% block body %}
<div class="dash">
    <nav class="dash-nav">
        <div class="dash-nav-brand">
            <span class="logo-icon">&#9670;</span>
            <span class="logo-text">ACA Vendor</span>
        </div>
        <div class="dash-nav-links">
            <a href="{% url 'vendors:dashboard' %}" class="nav-link">Dashboard</a>
            <a href="{% url 'vendors:orders' %}" class="nav-link active">Orders</a>
            <a href="{% url 'vendors:settings' %}" class="nav-link">Settings</a>
        </div>
        <div class="dash-nav-right">
            <span class="nav-user">{{ escrow.vendor.store_name }}</span>
        </div>
    </nav>

    <div style="flex:1; overflow-y:auto; padding: 0;">
        <div class="result-wrap">
            <div class="result-hero">
                <div class="result-icon">
                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <h1>Delivery Proof Submitted</h1>
                <p>Your delivery has been recorded. The buyer has been notified via SMS and can now confirm receipt.</p>
                <div class="order-badge">{{ escrow.order.order_number }}</div>
            </div>

            <div class="info-card">
                <div class="info-card-header">What happens next</div>
                <div class="info-card-body">
                    <div class="steps">
                        <div class="step">
                            <div class="step-num">1</div>
                            <span>The buyer receives an SMS with a confirmation link</span>
                        </div>
                        <div class="step">
                            <div class="step-num">2</div>
                            <span>They confirm receipt — your payment is released immediately</span>
                        </div>
                        <div class="step">
                            <div class="step-num">3</div>
                            <span>If the buyer doesn't respond, payment is auto-released after 48 hours</span>
                        </div>
                    </div>
                    {% if escrow.auto_release_after %}
                    <div class="auto-release">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        Auto-release on {{ escrow.auto_release_after|date:"M d, Y · H:i" }}
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="result-actions">
                <a href="{% url 'vendors:orders' %}" class="btn btn-primary">Back to Orders</a>
                <a href="{% url 'vendors:dashboard' %}" class="btn btn-secondary">Dashboard</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}