{% extends 'base.html' %}
{% block title %}Truck 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>Truck 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;">
            The vehicles B2B pickers register as driving. Each type's max weight decides which trucks are even
            offered for a given order (a heavy order won't show a tricycle); base rate + the B2B per-km rate
            (Fee Settings) makes up the delivery fee. Only <strong>active</strong> types are offered to
            customers at checkout.
        </p>

        <div class="contact-form-wrap" style="max-width: 500px; margin-bottom: 40px;">
            <form method="post" class="contact-form">
                {% csrf_token %}
                <label for="name">Name</label>
                <input type="text" id="name" name="name" placeholder="e.g. Tricycle" required>

                <label for="icon">Icon (emoji)</label>
                <input type="text" id="icon" name="icon" placeholder="🛺" maxlength="4">

                <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>

                <button type="submit" class="btn-cta">Add Truck 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>
                    {% if not tt.is_active %}<span class="surface-badge warn">Inactive</span>{% endif %}
                    <h3 style="margin: 8px 0 2px;">{{ tt.icon }} {{ 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 }}</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 }}" 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="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)</label>
                <input type="text" id="icon-{{ tt.id }}" name="icon" value="{{ tt.icon }}" maxlength="4">

                <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>

                <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 %}