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

{% block title %}Mark Delivery — {{ escrow.order.order_number }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<style>
body { overflow: auto; }
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--bg);
    position: relative;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--accent-light);
    background: rgba(108, 92, 231, 0.06);
}
.upload-zone input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.photo-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.photo-preview-card {
    position: relative; border-radius: var(--radius-sm);
    overflow: hidden; border: 1px solid var(--border);
}
.photo-preview-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photo-preview-card .remove-btn {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
    border-radius: 50%; background: rgba(0,0,0,.7); color: #fff;
    border: none; cursor: pointer; font-size: 13px; display: grid; place-items: center;
}
.order-summary {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.order-summary-row {
    display: flex; justify-content: space-between;
    font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--border);
}
.order-summary-row:last-child { border-bottom: none; }
.order-summary-row span:first-child { color: var(--text-secondary); }
.warning-box {
    background: rgba(253, 203, 110, 0.08); border: 1px solid rgba(253, 203, 110, 0.25);
    border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px;
    font-size: 13px; color: #fdcb6e; line-height: 1.6;
}
</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 class="page-scroll" style="height:100vh;">
        <div class="page-layout">
            <div class="page-content">
                <a href="{% url 'vendors:orders' %}" class="back-link">&larr; Back to Orders</a>
                <h1 class="page-title">Mark Order Delivered</h1>
                <p class="page-desc">Upload proof of delivery. The buyer will receive an SMS to confirm receipt, after which your payment is released.</p>

                {% if errors %}
                <div class="form-errors">{% for e in errors %}<p>{{ e }}</p>{% endfor %}</div>
                {% endif %}

                <div class="order-summary">
                    <div class="order-summary-row">
                        <span>Order Number</span>
                        <span style="font-weight:700; color:var(--accent-light);">{{ escrow.order.order_number }}</span>
                    </div>
                    <div class="order-summary-row">
                        <span>Customer</span>
                        <span>{{ escrow.order.customer_name }}</span>
                    </div>
                    <div class="order-summary-row">
                        <span>Delivery Address</span>
                        <span style="text-align:right; max-width:280px;">{{ escrow.order.delivery_address }}</span>
                    </div>
                    <div class="order-summary-row">
                        <span>Your Payout (after 2% fee)</span>
                        <span style="font-weight:700; color:#00b894;">GHS {{ escrow.seller_payout }}</span>
                    </div>
                </div>

                <div class="warning-box">
                    Once you submit, the buyer has <strong>48 hours</strong> to confirm receipt via SMS.
                    If they don't respond, payment is automatically released to you.
                    Make sure your photos clearly show the item and delivery confirmation.
                </div>

                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}

                    <div class="form-section">
                        <div class="section-icon">1</div>
                        <div class="section-content">
                            <h2>Delivery Photos (required)</h2>
                            <p class="section-desc">Upload clear photos of the delivered item. Include the item, packaging, and ideally the delivery address visible.</p>
                            <div class="upload-zone" id="upload-zone">
                                <div style="font-size:32px; color:var(--text-muted); margin-bottom:8px;">
                                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                                </div>
                                <div style="font-size:14px; color:var(--text-secondary);">
                                    <strong style="color:var(--accent-light);">Click to upload</strong> or drag & drop
                                </div>
                                <div style="font-size:12px; color:var(--text-muted); margin-top:6px;">PNG, JPG, WEBP — up to 10 MB each</div>
                                <input type="file" id="photo-input" name="delivery_photos" multiple accept="image/*">
                            </div>
                            <div class="photo-previews" id="photo-previews"></div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="section-icon">2</div>
                        <div class="section-content">
                            <h2>Delivery Note <span class="optional-tag">optional</span></h2>
                            <div class="form-group">
                                <textarea name="delivery_note" rows="3"
                                    placeholder="e.g. Delivered to reception, signed by John. Item was in perfect condition."
                                    style="width:100%;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none;resize:vertical;"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions-bar">
                        <a href="{% url 'vendors:orders' %}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary btn-lg">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                            Submit Delivery Proof
                        </button>
                    </div>
                </form>
            </div>

            <aside class="page-sidebar">
                <div class="sidebar-card">
                    <h3>What happens next</h3>
                    <ol class="sidebar-steps">
                        <li>You submit delivery photos</li>
                        <li>Buyer receives SMS to confirm</li>
                        <li>Buyer confirms → you get paid instantly</li>
                        <li>No response in 48h → auto-paid to you</li>
                    </ol>
                </div>
                <div class="sidebar-card sidebar-tip">
                    <h3>Photo tips</h3>
                    <p class="sidebar-text">
                        Take clear photos of the item, the packaging, and a timestamp if possible.
                        This protects you if a dispute arises.
                    </p>
                </div>
            </aside>
        </div>
    </div>
</div>

<script>
(function() {
    const zone = document.getElementById('upload-zone');
    const fileInput = document.getElementById('photo-input');
    const previewsEl = document.getElementById('photo-previews');
    let dt = new DataTransfer();

    zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('dragover'); });
    zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
    zone.addEventListener('drop', e => { e.preventDefault(); zone.classList.remove('dragover'); addFiles(e.dataTransfer.files); });
    fileInput.addEventListener('change', () => addFiles(fileInput.files));

    function addFiles(list) {
        for (const f of list) {
            if (!f.type.startsWith('image/')) continue;
            if (f.size > 10 * 1024 * 1024) { alert(f.name + ' exceeds 10 MB.'); continue; }
            dt.items.add(f);
        }
        sync();
    }

    function removeFile(i) { dt.items.remove(i); sync(); }

    function sync() {
        fileInput.files = dt.files;
        previewsEl.innerHTML = '';
        Array.from(dt.files).forEach((f, i) => {
            const card = document.createElement('div');
            card.className = 'photo-preview-card';
            const img = document.createElement('img');
            const r = new FileReader();
            r.onload = e => img.src = e.target.result;
            r.readAsDataURL(f);
            const rm = document.createElement('button');
            rm.type = 'button'; rm.className = 'remove-btn'; rm.innerHTML = '&times;';
            rm.onclick = () => removeFile(i);
            card.appendChild(img); card.appendChild(rm);
            previewsEl.appendChild(card);
        });
    }
})();
</script>
{% endblock %}