{% extends 'base.html' %}
{% block title %}Fleet Order Assignment — 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>Fleet Order Assignment</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;">
            Orders that chose a fleet company at checkout are waiting for that company to assign one of
            its own drivers internally. Admin can watch this queue across every company and assign a driver
            directly if a company needs help — same validation as the company's own assignment (driver must
            belong to that order's company, and their truck must be rated for the order's weight class).
        </p>

        {% for order in orders %}
        <div class="order-card" style="margin-bottom: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px;">
                <div>
                    <strong>Order #{{ order.id }}</strong>
                    <span class="surface-badge warn" style="margin-left: 6px;">Awaiting assignment</span>
                    {% if order.sla_hours is not None %}
                    <span class="surface-badge {{ order.sla_class }}" style="margin-left: 6px;">Confirmed {{ order.sla_hours }}h ago</span>
                    {% endif %}
                    <p style="font-size: 0.85rem; color: var(--muted); margin: 4px 0 0;">
                        {{ order.company.company_name|default:"Unknown company" }} &middot; {{ order.delivery_date }} {{ order.delivery_time_slot }} &middot; TSh {{ order.total_amount|floatformat:0 }}
                    </p>
                </div>
            </div>

            {% if order.eligible_drivers %}
            <form method="post" action="{% url 'accounts:admin_assign_order_driver' order.id %}" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);">
                {% csrf_token %}
                <label for="driver-{{ order.id }}" style="margin: 0;">Assign driver</label>
                <select id="driver-{{ order.id }}" name="driver_id" required>
                    {% for d in order.eligible_drivers %}
                    <option value="{{ d.user_id }}">{{ d.user.first_name }} {{ d.user.last_name }}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="btn-small">Assign</button>
            </form>
            {% else %}
            <p style="color: var(--muted); font-size: 0.85rem; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);">
                No eligible driver in this company yet for this order's weight class.
            </p>
            {% endif %}
        </div>
        {% empty %}
        <p style="color: var(--muted);">No orders waiting for driver assignment right now.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}