{% 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, package fee, and picking fee combined as one "Delivery Fee" total. Pickers
            see all three broken out separately, since the picking and package fees are their compensation for
            gathering and packaging 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>
                <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">Fallback rate used when a picker's vehicle type isn't one of the three below.</p>
                <input type="number" id="delivery_fee_per_km" name="delivery_fee_per_km" value="{{ fees.delivery_fee_per_km|floatformat:0 }}" min="0" required>

                <h3 style="margin: 20px 0 6px;">B2C delivery rate by vehicle type (TSh per km)</h3>
                <p style="color: var(--muted); font-size: 0.85rem; margin-top: -4px;">Whichever vehicle the assigned picker actually drives sets the rate — shown to the customer at checkout.</p>
                <div style="display: flex; gap: 10px;">
                    <div style="flex: 1;">
                        <label for="b2c_rate_motorcycle_per_km">Motorcycle</label>
                        <input type="number" id="b2c_rate_motorcycle_per_km" name="b2c_rate_motorcycle_per_km" value="{{ fees.b2c_rate_motorcycle_per_km|floatformat:0 }}" min="0" required>
                    </div>
                    <div style="flex: 1;">
                        <label for="b2c_rate_car_per_km">Car</label>
                        <input type="number" id="b2c_rate_car_per_km" name="b2c_rate_car_per_km" value="{{ fees.b2c_rate_car_per_km|floatformat:0 }}" min="0" required>
                    </div>
                    <div style="flex: 1;">
                        <label for="b2c_rate_bicycle_per_km">Bicycle</label>
                        <input type="number" id="b2c_rate_bicycle_per_km" name="b2c_rate_bicycle_per_km" value="{{ fees.b2c_rate_bicycle_per_km|floatformat:0 }}" min="0" required>
                    </div>
                </div>

                <label for="b2b_delivery_fee_per_km" style="margin-top: 20px; display: block;">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>

                <label for="b2b_delivery_fee_per_kg">B2B delivery fee per kg (TSh)</label>
                <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">Optional extra charge tied directly to the order's total weight, on top of the truck's base rate and per-km leg. Defaults to 0 (off).</p>
                <input type="number" id="b2b_delivery_fee_per_kg" name="b2b_delivery_fee_per_kg" value="{{ fees.b2b_delivery_fee_per_kg|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>

                <label for="picking_extra_item_fee" style="margin-top: 16px;">Extra distinct item fee, per category (TSh)</label>
                <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">
                    50kg of one item is one stop for the picker; 50kg spread across several different items in the
                    same category can mean visiting several stalls — this charges that per extra distinct item
                    within a category (the 1st item in any category is always free of this charge), scaled by that
                    category's "how scattered" factor set on the category itself (Add/Edit Product &rarr; Registered
                    categories). Set to 0 (default) to turn this off entirely.
                </p>
                <input type="number" id="picking_extra_item_fee" name="picking_extra_item_fee" value="{{ fees.picking_extra_item_fee|floatformat:0 }}" min="0" required>

                <h3 style="margin: 20px 0 6px;">Package Fee (by weight or quantity — whichever is bigger, applies to both B2C and B2B)</h3>
                <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">
                    Covers boxes/sacks/wrapping. An order lands in the largest tier that either its weight or its
                    item quantity qualifies for. Shown folded into the customer's combined delivery fee, and as its
                    own separate line for the picker.
                </p>

                <label style="margin-top: 8px;">Small package — up to</label>
                <div style="display: flex; gap: 10px;">
                    <input type="number" name="package_small_max_kg" value="{{ fees.package_small_max_kg|floatformat:0 }}" min="0" required placeholder="kg" style="flex: 1;">
                    <input type="number" name="package_small_max_qty" value="{{ fees.package_small_max_qty|floatformat:0 }}" min="0" required placeholder="items" style="flex: 1;">
                    <input type="number" name="package_fee_small" value="{{ fees.package_fee_small|floatformat:0 }}" min="0" required placeholder="Fee (TSh)" style="flex: 1;">
                </div>

                <label style="margin-top: 12px;">Medium package — up to</label>
                <div style="display: flex; gap: 10px;">
                    <input type="number" name="package_medium_max_kg" value="{{ fees.package_medium_max_kg|floatformat:0 }}" min="0" required placeholder="kg" style="flex: 1;">
                    <input type="number" name="package_medium_max_qty" value="{{ fees.package_medium_max_qty|floatformat:0 }}" min="0" required placeholder="items" style="flex: 1;">
                    <input type="number" name="package_fee_medium" value="{{ fees.package_fee_medium|floatformat:0 }}" min="0" required placeholder="Fee (TSh)" style="flex: 1;">
                </div>

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

                <h3 style="margin: 20px 0 6px;">Quick Delivery</h3>
                <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">
                    A customer can skip the Mon/Wed/Sat schedule and get same-day delivery instead — the delivery
                    fee (not the picking fee) is increased by this percentage to cover the rush.
                </p>
                <label for="quick_delivery_fee_pct">Quick delivery surcharge (%)</label>
                <input type="number" step="0.1" id="quick_delivery_fee_pct" name="quick_delivery_fee_pct" value="{{ fees.quick_delivery_fee_pct|floatformat:0 }}" min="0" required>

                <h3 style="margin: 20px 0 6px;">Platform Commission</h3>
                <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">
                    Share of each delivery's combined delivery + picking fee that PickkerMarket keeps as commission —
                    the rest goes to the picker's earnings. Set to 0 and the picker keeps 100% of every delivery.
                    Only applies going forward; past earnings aren't recalculated.
                </p>
                <label for="platform_commission_pct">Platform commission (%)</label>
                <input type="number" step="0.1" id="platform_commission_pct" name="platform_commission_pct" value="{{ fees.platform_commission_pct|floatformat:1 }}" min="0" max="100" required>

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