{% extends "dashboard/base.html" %}
{% load humanize %}

{% block page_title %}Delivery Options{% endblock %}
{% block dashboard_content %}
<div class="grid grid--2 mb-8">
    <!-- Add Delivery Option Form -->
    <div class="card">
        <h3 class="card__title mb-4">Add Delivery Option</h3>
        <form method="post">
            {% csrf_token %}
            <div class="form-group">
                <label class="form-label">Delivery Name / Region</label>
                <input type="text" name="name" class="form-input" required
                    placeholder="e.g. Within Accra, Kumasi Central, STC Courier">
            </div>
            <div class="form-group">
                <label class="form-label">Delivery Fee (GHS)</label>
                <input type="number" name="fee" class="form-input" step="0.01" min="0" value="0.00" required
                    placeholder="0.00 (Enter 0 for Free Delivery)">
                <span class="form-hint">Set 0.00 for free delivery options.</span>
            </div>
            <div class="form-group">
                <label class="form-label">Coverage Areas / Description</label>
                <textarea name="description" class="form-textarea" rows="3"
                    placeholder="e.g. This includes areas such as Nungua, Osu, Spintex, East Legon..."></textarea>
            </div>
            <button type="submit" class="btn btn--primary btn--block">Save Delivery Option</button>
        </form>
    </div>

    <!-- Active Delivery Options List (Cards) -->
    <div>
        <h3 style="font-size:var(--font-size-lg);font-weight:700;margin-bottom:var(--space-4);">Your Active Delivery
            Options</h3>

        {% if options %}
        <div class="flex flex-col gap-4">
            {% for opt in options %}
            <div class="card card--flat">
                <div class="flex justify-between items-center mb-2">
                    <h4 style="font-weight:700;font-size:var(--font-size-base);">{{ opt.name }}</h4>
                    {% if opt.fee == 0 %}
                    <span class="badge badge--live">Free (GHS 0.00)</span>
                    {% else %}
                    <span class="badge badge--upcoming">GHS {{ opt.fee|floatformat:2 }}</span>
                    {% endif %}
                </div>
                {% if opt.description %}
                <p class="text-sm text-secondary mb-4" style="line-height:1.5;">{{ opt.description }}</p>
                {% endif %}
                <div class="flex justify-between items-center text-xs text-muted pt-2"
                    style="border-top:1px solid var(--color-border-light);">
                    <span>Created {{ opt.created_at|date:"M d, Y" }}</span>
                    <form method="post" action="{% url 'dashboard:delivery_delete' opt.id %}"
                        onsubmit="return confirm('Remove this delivery option?');">
                        {% csrf_token %}
                        <button type="submit" class="btn btn--ghost btn--sm"
                            style="color:var(--color-error);">Delete</button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <h4 class="empty-state__title">No delivery options set</h4>
            <p class="empty-state__desc">Add delivery options above (e.g. Within Accra - GHS 0 - Nungua, Osu).</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}