{% extends 'base.html' %}
{% block title %}Vehicle Types — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Vehicle Types</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;">
            Every vehicle a picker can register as driving — B2C (motorcycle/car/bicycle) and B2B trucks, in one
            place. Each type's max weight decides who's even offered for a given order (a heavy cart won't show a
            bicycle, a light one won't need a large truck); the per-km rate + (B2B only) base rate make up the
            delivery fee, or leave the per-km rate blank to use the platform-wide default. Only <strong>active</strong>
            types are offered to customers/pickers.
        </p>

        <div class="contact-form-wrap" style="max-width: 500px; margin-bottom: 40px;">
            <form method="post" enctype="multipart/form-data" class="contact-form">
                {% csrf_token %}
                <label for="segment">Segment</label>
                <select id="segment" name="segment" required>
                    <option value="b2c">B2C (individual customers)</option>
                    <option value="b2b">B2B (truck orders)</option>
                </select>

                <label for="name">Name</label>
                <input type="text" id="name" name="name" placeholder="e.g. Tricycle" required>

                <label for="icon">Icon (emoji fallback — used where an image can't render)</label>
                <input type="text" id="icon" name="icon" placeholder="🛺" maxlength="4">

                <label for="icon_image">Icon image (optional — PNG, shown instead of the emoji wherever possible)</label>
                <input type="file" id="icon_image" name="icon_image" accept="image/*">

                <label for="capacity_label">Capacity (display text)</label>
                <input type="text" id="capacity_label" name="capacity_label" placeholder="e.g. up to 3 m³">

                <label for="max_weight_kg">Max weight (kg)</label>
                <input type="number" step="1" id="max_weight_kg" name="max_weight_kg" min="0" required>

                <label for="base_rate">Base rate (TSh)</label>
                <input type="number" step="1" id="base_rate" name="base_rate" min="0" required>
                <p style="color: var(--muted); font-size: 0.82rem; margin: -2px 0 0;">B2B only — added once per delivery on top of the per-km rate. Leave 0 for B2C.</p>

                <label for="per_km_rate">Per-km delivery rate (TSh, optional)</label>
                <input type="number" step="any" id="per_km_rate" name="per_km_rate" min="0" placeholder="platform default">
                <p style="color: var(--muted); font-size: 0.82rem; margin: -2px 0 0;">Leave blank to use the platform-wide flat per-km rate instead.</p>

                <button type="submit" class="btn-cta">Add Vehicle Type</button>
            </form>
        </div>

        {% for tt in truck_types %}
        <div class="order-card">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px;">
                <div>
                    <span class="surface-badge">{% if tt.segment == 'b2c' %}B2C{% else %}B2B{% endif %}</span>
                    {% if not tt.is_active %}<span class="surface-badge warn">Inactive</span>{% endif %}
                    <h3 style="margin: 8px 0 2px; display: flex; align-items: center; gap: 8px;">
                        {% if tt.icon_url %}<img src="{{ tt.icon_url }}" alt="" style="width: 28px; height: 28px; object-fit: contain;">{% else %}{{ tt.icon }}{% endif %}
                        {{ tt.name }}
                    </h3>
                    <p style="font-size: 0.9rem; color: var(--muted);">{{ tt.capacity_label }} &middot; up to {{ tt.max_weight_kg|floatformat:0 }} kg</p>
                    <p style="font-size: 0.85rem; color: var(--muted); margin-top: 4px;">
                        Base rate: TSh {{ tt.base_rate|floatformat:0 }}
                        {% if tt.per_km_rate %} &middot; TSh {{ tt.per_km_rate|floatformat:0 }}/km{% else %} &middot; platform default per-km rate{% endif %}
                    </p>
                </div>
                <div style="display: flex; gap: 8px; flex-shrink: 0;">
                    <button type="button" class="btn-small truck-edit-toggle" data-target="edit-truck-{{ tt.id }}">Edit</button>
                    <form method="post" action="{% url 'accounts:admin_toggle_truck_type' tt.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: var(--muted);">{% if tt.is_active %}Deactivate{% else %}Activate{% endif %}</button>
                    </form>
                </div>
            </div>

            <form method="post" action="{% url 'accounts:admin_edit_truck_type' tt.id %}" id="edit-truck-{{ tt.id }}" enctype="multipart/form-data" class="contact-form truck-edit-form" style="display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);">
                {% csrf_token %}
                <label for="segment-{{ tt.id }}">Segment</label>
                <select id="segment-{{ tt.id }}" name="segment" required>
                    <option value="b2c" {% if tt.segment == 'b2c' %}selected{% endif %}>B2C (individual customers)</option>
                    <option value="b2b" {% if tt.segment == 'b2b' %}selected{% endif %}>B2B (truck orders)</option>
                </select>

                <label for="name-{{ tt.id }}">Name</label>
                <input type="text" id="name-{{ tt.id }}" name="name" value="{{ tt.name }}" required>

                <label for="icon-{{ tt.id }}">Icon (emoji fallback)</label>
                <input type="text" id="icon-{{ tt.id }}" name="icon" value="{{ tt.icon }}" maxlength="4">

                <label for="icon_image-{{ tt.id }}">Icon image (optional — PNG)</label>
                {% if tt.icon_url %}<p style="font-size: 0.82rem; color: var(--muted);">Current: <a href="{{ tt.icon_url }}" target="_blank">view image</a></p>{% endif %}
                <input type="file" id="icon_image-{{ tt.id }}" name="icon_image" accept="image/*">

                <label for="capacity_label-{{ tt.id }}">Capacity (display text)</label>
                <input type="text" id="capacity_label-{{ tt.id }}" name="capacity_label" value="{{ tt.capacity_label }}">

                <label for="max_weight_kg-{{ tt.id }}">Max weight (kg)</label>
                <input type="number" step="1" id="max_weight_kg-{{ tt.id }}" name="max_weight_kg" value="{{ tt.max_weight_kg|floatformat:0 }}" min="0" required>

                <label for="base_rate-{{ tt.id }}">Base rate (TSh)</label>
                <input type="number" step="1" id="base_rate-{{ tt.id }}" name="base_rate" value="{{ tt.base_rate|floatformat:0 }}" min="0" required>
                <p style="color: var(--muted); font-size: 0.82rem; margin: -2px 0 0;">B2B only — added once per delivery on top of the per-km rate. Leave 0 for B2C.</p>

                <label for="per_km_rate-{{ tt.id }}">Per-km delivery rate (TSh, optional)</label>
                <input type="number" step="any" id="per_km_rate-{{ tt.id }}" name="per_km_rate" value="{{ tt.per_km_rate|default:'' }}" min="0" placeholder="platform default">
                <p style="color: var(--muted); font-size: 0.82rem; margin: -2px 0 0;">Leave blank to use the platform-wide flat per-km rate instead.</p>

                <button type="submit" class="btn-cta">Save Changes</button>
            </form>
        </div>
        {% empty %}
        <p style="color: var(--muted);">No truck types added yet — add your first one above.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.truck-edit-toggle').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var form = document.getElementById(btn.getAttribute('data-target'));
                if (!form) return;
                var isOpen = form.style.display !== 'none';
                form.style.display = isOpen ? 'none' : 'flex';
                btn.textContent = isOpen ? 'Edit' : 'Cancel';
            });
        });
    });
</script>
{% endblock %}