{% extends 'base.html' %}
{% block title %}Fee Settings — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 700px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Fee Settings</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>

        <p style="color: var(--muted); margin-bottom: 24px;">
            Customers see delivery fee and picking fee combined as one "Delivery Fee" total. Pickers see them
            broken out separately, since the picking fee is their compensation for gathering the order on top
            of the delivery fee for transport.
        </p>

        <div class="contact-form-wrap" style="max-width: 500px;">
            <form method="post" class="contact-form">
                {% csrf_token %}

                <label for="delivery_fee_per_km">B2C delivery fee per km (TSh)</label>
                <input type="number" id="delivery_fee_per_km" name="delivery_fee_per_km" value="{{ fees.delivery_fee_per_km|floatformat:0 }}" min="0" required>

                <label for="b2b_delivery_fee_per_km">B2B delivery fee per km (TSh)</label>
                <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">Added on top of the chosen truck type's base rate (see Truck Types).</p>
                <input type="number" id="b2b_delivery_fee_per_km" name="b2b_delivery_fee_per_km" value="{{ fees.b2b_delivery_fee_per_km|floatformat:0 }}" min="0" required>

                <h3 style="margin: 20px 0 6px;">Picking fee (by total order weight — applies to both B2C and B2B)</h3>

                <label for="picking_tier1_max_kg">Up to this weight (kg)</label>
                <div style="display: flex; gap: 10px;">
                    <input type="number" id="picking_tier1_max_kg" name="picking_tier1_max_kg" value="{{ fees.picking_tier1_max_kg|floatformat:0 }}" min="0" required style="flex: 1;">
                    <input type="number" name="picking_tier1_fee" value="{{ fees.picking_tier1_fee|floatformat:0 }}" min="0" required placeholder="Fee (TSh)" style="flex: 1;">
                </div>

                <label for="picking_tier2_max_kg" style="margin-top: 12px;">Up to this weight (kg)</label>
                <div style="display: flex; gap: 10px;">
                    <input type="number" id="picking_tier2_max_kg" name="picking_tier2_max_kg" value="{{ fees.picking_tier2_max_kg|floatformat:0 }}" min="0" required style="flex: 1;">
                    <input type="number" name="picking_tier2_fee" value="{{ fees.picking_tier2_fee|floatformat:0 }}" min="0" required placeholder="Fee (TSh)" style="flex: 1;">
                </div>

                <label for="picking_tier3_max_kg" style="margin-top: 12px;">Up to this weight (kg)</label>
                <div style="display: flex; gap: 10px;">
                    <input type="number" id="picking_tier3_max_kg" name="picking_tier3_max_kg" value="{{ fees.picking_tier3_max_kg|floatformat:0 }}" min="0" required style="flex: 1;">
                    <input type="number" name="picking_tier3_fee" value="{{ fees.picking_tier3_fee|floatformat:0 }}" min="0" required placeholder="Fee (TSh)" style="flex: 1;">
                </div>

                <label for="picking_tier4_fee" style="margin-top: 12px;">Above that weight — flat fee (TSh)</label>
                <input type="number" id="picking_tier4_fee" name="picking_tier4_fee" value="{{ fees.picking_tier4_fee|floatformat:0 }}" min="0" required>

                <button type="submit" class="btn-cta" style="margin-top: 20px;">Save Changes</button>
            </form>
        </div>
    </div>
</section>
{% endblock %}