{% extends 'base.html' %}
{% load static_v %}
{% block title %}{{ t.fleet_dashboard_title }} — PickkerMarket{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endblock %}

{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <span class="section-kicker">{{ company.company_name }}</span>
        <h1>{{ t.fleet_dashboard_title }}</h1>

        <div class="checkout-steps" style="margin-bottom: 20px;">
            <button type="button" class="checkout-step active fleet-tab-btn" data-tab="trucks">{{ t.fleet_trucks_tab }}</button>
            <button type="button" class="checkout-step fleet-tab-btn" data-tab="drivers">{{ t.fleet_drivers_tab }}</button>
            <button type="button" class="checkout-step fleet-tab-btn" data-tab="assign">{{ t.fleet_pending_assignment_title }}{% if unassigned_orders %} ({{ unassigned_orders|length }}){% endif %}</button>
            <button type="button" class="checkout-step fleet-tab-btn" data-tab="financials">{{ t.fleet_financials_tab }}</button>
            <button type="button" class="checkout-step fleet-tab-btn" data-tab="warehouse">{{ t.fleet_warehouse_tab }}</button>
            <button type="button" class="checkout-step fleet-tab-btn" data-tab="fuel">{{ t.fleet_fuel_tab }}</button>
            <button type="button" class="checkout-step fleet-tab-btn" data-tab="signoff">{{ t.fleet_signoff_tab }}</button>
        </div>

        <div id="fleet-tab-trucks">
            <h3 style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
                {{ t.fleet_live_map_title }}
                <button type="button" id="fleet-large-map-btn" class="btn-small">{{ t.fleet_large_map }}</button>
            </h3>
            <div id="fleet-live-map-wrap" class="map-container" style="height: 320px; margin-bottom: 24px;">
                <button type="button" id="fleet-map-fullscreen-btn" class="map-fullscreen-btn" aria-label="{{ t.fleet_fullscreen_map }}">⛶</button>
                <div id="fleet-live-map" style="width: 100%; height: 100%;"></div>
            </div>
            <p id="fleet-no-live-note" style="color: var(--muted); display: none;">{{ t.fleet_no_live_trucks }}</p>

            <div class="contact-form-wrap" style="max-width: 500px; margin-bottom: 30px;">
                <form method="post" action="{% url 'market:fleet_add_truck' %}" class="contact-form">
                    {% csrf_token %}
                    <label for="truck_type_id">{{ t.fleet_truck_type_label }}</label>
                    <select id="truck_type_id" name="truck_type_id" required>
                        {% for tt in truck_types %}<option value="{{ tt.id }}">{{ tt.icon }} {{ tt.name }} ({{ tt.capacity_label }})</option>{% endfor %}
                    </select>

                    <label for="nickname">{{ t.fleet_truck_nickname_label }}</label>
                    <input type="text" id="nickname" name="nickname">

                    <label for="license_plate">{{ t.fleet_truck_plate_label }}</label>
                    <input type="text" id="license_plate" name="license_plate">

                    {% if warehouses %}
                    <label for="warehouses">{{ t.profile_warehouses_served_label }}</label>
                    <select id="warehouses" name="warehouses" multiple size="4">
                        {% for w in warehouses %}
                        <option value="{{ w.vendor_key }}">{{ w.name }} ({{ w.vendor_type|title }})</option>
                        {% endfor %}
                    </select>
                    {% endif %}

                    <button type="submit" class="btn-cta">{{ t.fleet_add_truck }}</button>
                </form>
            </div>

            {% for truck in trucks %}
            <div class="order-card" style="margin-bottom: 14px;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px;">
                    <div>
                        {% if not truck.is_active %}<span class="surface-badge warn">Inactive</span>{% endif %}
                        <h3 style="margin: 8px 0 2px; display: flex; align-items: center; gap: 8px;">
                            {% if truck.truck_type.icon_url %}<img src="{{ truck.truck_type.icon_url }}" alt="" style="width: 26px; height: 26px; object-fit: contain;">{% else %}{{ truck.truck_type.icon }}{% endif %}
                            {{ truck.nickname|default:truck.truck_type.name }}
                        </h3>
                        <p style="font-size: 0.85rem; color: var(--muted);">{{ truck.truck_type.name }}{% if truck.license_plate %} &middot; {{ truck.license_plate }}{% endif %}</p>
                        {% if truck.warehouses %}
                        <p style="font-size: 0.8rem; color: var(--muted); margin-top: 2px;">&rarr; {% for w in truck.warehouses %}{{ w.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
                        {% endif %}
                    </div>
                    <div style="display: flex; gap: 8px; flex-shrink: 0;">
                        <button type="button" class="btn-small fleet-truck-edit-toggle" data-target="fleet-edit-truck-{{ truck.id }}">{{ t.fleet_edit }}</button>
                        <form method="post" action="{% url 'market:fleet_toggle_truck' truck.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn-small" style="background: var(--muted);">{% if truck.is_active %}Deactivate{% else %}Activate{% endif %}</button>
                        </form>
                    </div>
                </div>

                <form method="post" action="{% url 'market:fleet_edit_truck' truck.id %}" id="fleet-edit-truck-{{ truck.id }}" class="contact-form" style="display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);">
                    {% csrf_token %}
                    <label>{{ t.fleet_truck_type_label }}</label>
                    <select name="truck_type_id" required>
                        {% for tt in truck_types %}<option value="{{ tt.id }}" {% if tt.id == truck.truck_type_id %}selected{% endif %}>{{ tt.icon }} {{ tt.name }}</option>{% endfor %}
                    </select>
                    <label>{{ t.fleet_truck_nickname_label }}</label>
                    <input type="text" name="nickname" value="{{ truck.nickname|default:'' }}">
                    <label>{{ t.fleet_truck_plate_label }}</label>
                    <input type="text" name="license_plate" value="{{ truck.license_plate|default:'' }}">
                    {% if warehouses %}
                    <label>{{ t.profile_warehouses_served_label }}</label>
                    <select name="warehouses" multiple size="4">
                        {% for w in warehouses %}
                        <option value="{{ w.vendor_key }}" {% for tw in truck.warehouses %}{% if tw.vendor_type == w.vendor_type and tw.vendor_id == w.id %}selected{% endif %}{% endfor %}>{{ w.name }} ({{ w.vendor_type|title }})</option>
                        {% endfor %}
                    </select>
                    {% endif %}
                    <button type="submit" class="btn-cta">Save</button>
                </form>
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_no_trucks }}</p>
            {% endfor %}
        </div>

        <div id="fleet-tab-drivers" style="display: none;">
            <div class="contact-form-wrap" style="max-width: 500px; margin-bottom: 30px;">
                <form method="post" action="{% url 'market:fleet_invite_driver' %}" class="contact-form">
                    {% csrf_token %}
                    <label for="driver_first_name">{{ t.fleet_driver_name_label }}</label>
                    <input type="text" id="driver_first_name" name="first_name" required>

                    <label for="driver_last_name">{{ t.fleet_driver_last_name_label }}</label>
                    <input type="text" id="driver_last_name" name="last_name">

                    <label for="driver_email">{{ t.fleet_driver_email_label }}</label>
                    <input type="email" id="driver_email" name="email" required>

                    <label for="driver_phone">{{ t.fleet_driver_phone_label }}</label>
                    <input type="text" id="driver_phone" name="phone_number">

                    <label for="driver_truck_id">{{ t.fleet_driver_truck_label }}</label>
                    <select id="driver_truck_id" name="truck_id" required>
                        {% for truck in trucks %}<option value="{{ truck.id }}">{{ truck.nickname|default:truck.truck_type.name }}</option>{% endfor %}
                    </select>

                    <button type="submit" class="btn-cta">{{ t.fleet_invite_driver }}</button>
                </form>
            </div>

            {% for driver in drivers %}
            <div class="order-card" style="margin-bottom: 14px;">
                <h3 style="margin: 0 0 4px;">{{ driver.user.first_name }} {{ driver.user.last_name }}</h3>
                <p style="font-size: 0.85rem; color: var(--muted);">{{ driver.user.email }}{% if driver.user.phone_number %} &middot; {{ driver.user.phone_number }}{% endif %}</p>
                <p style="font-size: 0.85rem; color: var(--muted); margin-top: 4px;">
                    <span class="surface-badge {% if driver.status_reason == 'available' %}ok{% elif driver.status_reason == 'delivering' %}warn{% endif %}">
                        {% if driver.status_reason == 'delivering' %}{{ t.picker_status_delivering }}{% elif driver.status_reason == 'at_capacity' %}{{ t.picker_status_at_capacity }}{% else %}{{ t.picker_status_available }}{% endif %}
                    </span>
                    {{ t.fleet_today_orders }}: {{ driver.today_order_count }}
                </p>
                <div style="margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
                    <form method="post" action="{% url 'market:fleet_reassign_driver' driver.user_id %}" style="display: flex; gap: 8px; align-items: center;">
                        {% csrf_token %}
                        <select name="truck_id">
                            {% for truck in trucks %}<option value="{{ truck.id }}" {% if truck.id == driver.truck_id %}selected{% endif %}>{{ truck.nickname|default:truck.truck_type.name }}</option>{% endfor %}
                        </select>
                        <button type="submit" class="btn-small">{{ t.fleet_reassign_truck }}</button>
                    </form>
                    <button type="button" class="btn-small fleet-chat-toggle-btn" data-driver-id="{{ driver.user_id }}" style="background: var(--blue);">{{ t.fleet_message_driver }}</button>
                </div>
                {% include 'market/_fleet_chat_widget.html' with driver=driver my_user_id=company.owner_user_id %}
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_no_drivers }}</p>
            {% endfor %}
        </div>

        <div id="fleet-tab-assign" style="display: none;">
            {% for order in unassigned_orders %}
            <div class="order-card" style="margin-bottom: 14px;">
                <strong>{{ t.order_hash_prefix }}{{ order.id }}</strong>
                {% 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="color: var(--muted); font-size: 0.82rem; margin: 2px 0 10px;">{{ order.delivery_date }} {{ order.delivery_time_slot }} &middot; TSh {{ order.total_amount|floatformat:0 }}</p>
                {% if order.eligible_drivers %}
                <form method="post" action="{% url 'market:fleet_assign_driver' order.id %}" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
                    {% csrf_token %}
                    <label for="driver-{{ order.id }}" style="margin: 0;">{{ t.fleet_assign_driver_label }}</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 }}
                            {% if d.status_reason == 'delivering' %} — {{ t.picker_status_delivering }}{% elif d.status_reason == 'at_capacity' %} — {{ t.picker_status_at_capacity }}{% endif %}
                        </option>
                        {% endfor %}
                    </select>
                    {% if order.has_delivering_driver %}
                    <p style="color: var(--muted); font-size: 0.82rem; width: 100%; margin: 4px 0 0;">{{ t.fleet_assign_delivering_warning }}</p>
                    {% endif %}
                    <button type="submit" class="btn-small">{{ t.fleet_assign_button }}</button>
                </form>
                {% else %}
                <p style="color: var(--muted); font-size: 0.85rem;">{{ t.fleet_no_eligible_drivers }}</p>
                {% endif %}
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_pending_assignment_empty }}</p>
            {% endfor %}
        </div>

        <div id="fleet-tab-financials" style="display: none;">
            <div class="order-card" style="margin-bottom: 24px;">
                <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
                    <h3 style="margin: 0;">{{ t.fleet_ai_insights_title }}</h3>
                    <button type="button" id="fleet-ai-insights-btn" class="btn-small" style="background: var(--blue);">{{ t.fleet_ai_insights_btn }}</button>
                </div>
                <div id="fleet-ai-insights-body" style="margin-top: 10px; color: var(--muted); font-size: 0.9rem; white-space: pre-line;"></div>
            </div>

            <div style="display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px;">
                <div class="order-card" style="flex: 1; min-width: 140px; text-align: center;">
                    <p style="color: var(--muted); font-size: 0.82rem; margin-bottom: 4px;">{{ t.fleet_pending_earnings }}</p>
                    <h3 style="margin: 0;">TSh {{ earnings_summary.pending_amount|floatformat:0 }}</h3>
                </div>
                <div class="order-card" style="flex: 1; min-width: 140px; text-align: center;">
                    <p style="color: var(--muted); font-size: 0.82rem; margin-bottom: 4px;">{{ t.fleet_paid_earnings }}</p>
                    <h3 style="margin: 0;">TSh {{ earnings_summary.paid_amount|floatformat:0 }}</h3>
                </div>
                <div class="order-card" style="flex: 1; min-width: 140px; text-align: center;">
                    <p style="color: var(--muted); font-size: 0.82rem; margin-bottom: 4px;">{{ t.fleet_lifetime_earnings }}</p>
                    <h3 style="margin: 0;">TSh {{ earnings_summary.lifetime_amount|floatformat:0 }}</h3>
                </div>
            </div>

            <form method="post" action="{% url 'market:fleet_request_payout' %}" style="margin-bottom: 24px;">
                {% csrf_token %}
                <button type="submit" class="btn-cta" {% if not earnings_summary.pending_count %}disabled{% endif %}>{{ t.fleet_request_payout }}</button>
            </form>

            <h3 style="margin-bottom: 10px;">{{ t.fleet_earnings_by_driver_title }}</h3>
            {% for row in earnings_by_driver %}
            <div class="my-data-row">
                <div>
                    <strong>{{ row.name }}</strong>
                    <p style="color: var(--muted); font-size: 0.82rem;">{{ t.fleet_pending_earnings }}: TSh {{ row.pending_amount|floatformat:0 }} ({{ row.pending_count }}) &middot; {{ t.fleet_paid_earnings }}: TSh {{ row.paid_amount|floatformat:0 }}</p>
                </div>
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_no_drivers }}</p>
            {% endfor %}

            <h3 style="margin: 24px 0 10px;">{{ t.fleet_orders_tab_title }}</h3>
            {% for order in recent_orders %}
            <div class="my-data-row">
                <div>
                    <strong>{{ t.order_hash_prefix }}{{ order.id }}</strong>
                    <p style="color: var(--muted); font-size: 0.82rem;">
                        {{ order.delivery_date }} &middot; {{ order.status }} &middot; TSh {{ order.total_amount|floatformat:0 }}
                        {% if order.account_type == 'b2b' and order.status != 'pending_payment' and order.status != 'cancelled' %}
                        &middot; <span class="surface-badge {% if order.payment_released_at %}ok{% else %}warn{% endif %}">{% if order.payment_released_at %}{{ t.invoice_payment_status_released }}{% else %}{{ t.invoice_payment_status_held }}{% endif %}</span>
                        {% endif %}
                    </p>
                </div>
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_no_orders }}</p>
            {% endfor %}
        </div>

        <div id="fleet-tab-warehouse" style="display: none;">
            {% for v in owned_vendors %}
            <div class="order-card" style="margin-bottom: 16px;">
                <h3 style="margin: 0 0 4px;">{{ v.name }} <small style="color: var(--muted); font-weight: 400;">({{ v.vendor_type|title }})</small></h3>
                <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 12px;">{{ v.region|default:"—" }}</p>

                {% if v.stock %}
                <table class="admin-table" style="margin-bottom: 12px;">
                    <thead><tr><th>{{ t.fleet_stock_product_col }}</th><th>{{ t.fleet_stock_qty_col }}</th></tr></thead>
                    <tbody>
                        {% for s in v.stock %}
                        <tr>
                            <td>{{ s.product_name }}</td>
                            <td>{% if s.quantity < 10 %}<span class="surface-badge warn">{{ s.quantity }} {{ s.unit }}</span>{% else %}{{ s.quantity }} {{ s.unit }}{% endif %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p style="color: var(--muted); font-size: 0.85rem;">{{ t.fleet_no_stock_yet }}</p>
                {% endif %}

                {% if v.tied_products %}
                <p style="font-size: 0.85rem; margin-bottom: 8px;">
                    {% for p in v.tied_products %}
                    {{ p.name }}{% if not p.is_approved %} <span class="surface-badge warn" style="font-size: 0.7rem;">{{ t.fleet_pending_approval_badge }}</span>{% endif %}{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                </p>
                <form method="post" action="{% url 'market:fleet_receive_stock' v.vendor_type v.id %}" style="display: inline-flex; align-items: center; gap: 6px;">
                    {% csrf_token %}
                    <select name="product_id" required>
                        {% for p in v.tied_products %}
                        <option value="{{ p.id }}">{{ p.name }}{% if not p.is_approved %} ({{ t.fleet_pending_approval_badge }}){% endif %}</option>
                        {% endfor %}
                    </select>
                    <input type="number" min="1" name="quantity" placeholder="{{ t.fleet_qty_received_placeholder }}" required style="width: 130px;">
                    <button type="submit" class="btn-small">{{ t.fleet_receive_stock_btn }}</button>
                </form>
                {% else %}
                <p style="color: var(--muted); font-size: 0.85rem;">{{ t.fleet_no_tied_products }}</p>
                {% endif %}

                <details style="margin-top: 14px;">
                    <summary style="cursor: pointer; font-size: 0.9rem; font-weight: 600;">{{ t.fleet_add_product_title }}</summary>
                    <form method="post" action="{% url 'market:fleet_create_product' v.vendor_type v.id %}" enctype="multipart/form-data" class="contact-form fleet-product-submit-form" style="margin-top: 10px;">
                        {% csrf_token %}
                        <p style="color: var(--muted); font-size: 0.82rem; margin: -2px 0 8px;">{{ t.fleet_add_product_help }}</p>
                        {{ product_form.name.label_tag }} {{ product_form.name }}
                        {{ product_form.name_sw.label_tag }} {{ product_form.name_sw }}
                        {{ product_form.category.label_tag }} {{ product_form.category }}
                        {{ product_form.unit.label_tag }} {{ product_form.unit }}
                        {{ product_form.quality_grade.label_tag }} {{ product_form.quality_grade }}
                        {{ product_form.farm_price.label_tag }} {{ product_form.farm_price }}
                        {{ product_form.market_price.label_tag }} {{ product_form.market_price }}
                        {{ product_form.b2b_price.label_tag }} {{ product_form.b2b_price }}
                        {{ product_form.min_purchase_qty.label_tag }} {{ product_form.min_purchase_qty }}
                        {{ product_form.b2b_min_qty.label_tag }} {{ product_form.b2b_min_qty }}
                        {{ product_form.image.label_tag }} {{ product_form.image }}
                        <button type="submit" class="btn-cta" style="margin-top: 10px;">{{ t.fleet_add_product_btn }}</button>
                    </form>
                </details>
            </div>
            {% empty %}
            <p style="color: var(--muted); margin-bottom: 16px;">{{ t.fleet_no_warehouse_yet }}</p>
            {% endfor %}

            <div class="contact-form-wrap" style="max-width: 560px;">
                <h3 style="margin-bottom: 6px;">{{ t.fleet_register_vendor_title }}</h3>
                <form method="post" action="{% url 'market:fleet_register_vendor' %}" class="contact-form">
                    {% csrf_token %}
                    <label>{{ t.fleet_vendor_type_label }}</label>
                    <select name="vendor_type" required>
                        <option value="warehouse">{{ t.fleet_vendor_type_warehouse }}</option>
                        <option value="industry">{{ t.fleet_vendor_type_industry }}</option>
                    </select>
                    <label>{{ t.fleet_vendor_name_label }}</label>
                    <input type="text" name="name" required>
                    <label>{{ t.fleet_vendor_region_label }}</label>
                    <input type="text" name="region">
                    <label>{{ t.fleet_vendor_lat_label }}</label>
                    <input type="number" step="any" name="lat" placeholder="-6.8197" required>
                    <label>{{ t.fleet_vendor_lng_label }}</label>
                    <input type="number" step="any" name="lng" placeholder="39.2730" required>
                    <label style="margin-top: 10px;">{{ t.fleet_vendor_contact_phone_label }}</label>
                    <input type="text" name="contact_phone">
                    <label>{{ t.fleet_vendor_landmark_label }}</label>
                    <textarea name="landmark_note" rows="2"></textarea>
                    <button type="submit" class="btn-cta">{{ t.fleet_register_vendor_btn }}</button>
                </form>
            </div>
        </div>

        <div id="fleet-tab-fuel" style="display: none;">
            <div class="picker-stats-grid" style="margin-bottom: 20px;">
                <div class="spending-stat-card">
                    <span class="spending-stat-label">{{ t.fleet_fuel_total_spent }}</span>
                    <span class="spending-stat-value">TSh {{ fuel_summary.total_spent|floatformat:0 }}</span>
                </div>
                <div class="spending-stat-card">
                    <span class="spending-stat-label">{{ t.fleet_fuel_total_liters }}</span>
                    <span class="spending-stat-value">{{ fuel_summary.total_liters|floatformat:1 }} L</span>
                </div>
                <div class="spending-stat-card">
                    <span class="spending-stat-label">{{ t.fleet_fuel_entry_count }}</span>
                    <span class="spending-stat-value">{{ fuel_summary.entry_count }}</span>
                </div>
            </div>

            {% if fuel_summary.by_truck %}
            <div class="admin-table-wrap" style="margin-bottom: 24px;">
                <table class="admin-table">
                    <thead><tr><th>{{ t.fleet_truck_nickname_label }}</th><th>{{ t.fleet_fuel_total_spent }}</th><th>{{ t.fleet_fuel_total_liters }}</th><th>{{ t.fleet_fuel_entry_count }}</th></tr></thead>
                    <tbody>
                        {% for entry in fuel_summary.by_truck %}
                        <tr>
                            <td>{{ entry.truck_nickname }}</td>
                            <td>TSh {{ entry.spent|floatformat:0 }}</td>
                            <td>{{ entry.liters|floatformat:1 }} L</td>
                            <td>{{ entry.count }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}

            <h3 style="margin-bottom: 10px;">{{ t.fleet_fuel_log_title }}</h3>
            {% if fuel_logs %}
            <div class="admin-table-wrap">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>{{ t.fleet_fuel_col_date }}</th>
                            <th>{{ t.fleet_fuel_col_driver }}</th>
                            <th>{{ t.fleet_truck_nickname_label }}</th>
                            <th>{{ t.fuel_log_station_label }}</th>
                            <th>{{ t.fuel_log_amount_label }}</th>
                            <th>{{ t.fuel_log_liters_label }}</th>
                            <th>{{ t.fleet_fuel_col_receipt }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for f in fuel_logs %}
                        <tr>
                            <td>{{ f.created_at|slice:":10" }}</td>
                            <td>{{ f.driver_name }}</td>
                            <td>{{ f.truck_nickname }}</td>
                            <td>{{ f.station_name|default:"—" }}</td>
                            <td>{% if f.amount_spent %}TSh {{ f.amount_spent|floatformat:0 }}{% else %}—{% endif %}</td>
                            <td>{% if f.liters %}{{ f.liters }} L{% else %}—{% endif %}</td>
                            <td>{% if f.receipt_url %}<a href="{{ f.receipt_url }}" target="_blank" rel="noopener">{{ t.fleet_fuel_view_receipt }}</a>{% else %}—{% endif %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p style="color: var(--muted);">{{ t.fleet_fuel_none_yet }}</p>
            {% endif %}
        </div>

        <div id="fleet-tab-signoff" style="display: none;">
            <h3 style="margin-bottom: 10px;">{{ t.fleet_signoff_templates_title }}</h3>
            <p style="color: var(--muted); font-size: 0.88rem; margin-bottom: 16px;">{{ t.fleet_signoff_templates_help }}</p>

            {% for tpl in signoff_templates %}
            <div class="order-card" style="margin-bottom: 12px;">
                <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
                    <strong>{{ tpl.name }}</strong>{% if not tpl.is_active %} <span class="surface-badge warn">{{ t.fleet_signoff_inactive_badge }}</span>{% endif %}
                    <div style="display: flex; gap: 8px;">
                        <button type="button" class="btn-small signoff-edit-toggle" data-target="edit-signoff-{{ tpl.id }}" style="background: var(--muted);">{{ t.fleet_signoff_edit }}</button>
                        <form method="post" action="{% url 'market:fleet_toggle_signoff_template' tpl.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn-small" style="background: {% if tpl.is_active %}#c0392b{% else %}var(--blue){% endif %};">{% if tpl.is_active %}{{ t.fleet_signoff_deactivate }}{% else %}{{ t.fleet_signoff_activate }}{% endif %}</button>
                        </form>
                    </div>
                </div>
                <form method="post" action="{% url 'market:fleet_update_signoff_template' tpl.id %}" id="edit-signoff-{{ tpl.id }}" class="contact-form" style="display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);">
                    {% csrf_token %}
                    <label>{{ t.fleet_signoff_name_label }}</label>
                    <input type="text" name="name" value="{{ tpl.name }}" required>
                    {% for field in tpl.field_rows %}
                    <div style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
                        <input type="checkbox" name="enabled_{{ field.key }}" id="edit-{{ tpl.id }}-{{ field.key }}" {% if field.checked %}checked{% endif %} style="width: auto;">
                        <input type="text" name="label_{{ field.key }}" value="{{ field.label }}" placeholder="{{ field.label }}" style="flex: 1;">
                    </div>
                    {% endfor %}
                    <button type="submit" class="btn-cta" style="margin-top: 12px;">{{ t.fleet_signoff_save }}</button>
                </form>
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_signoff_none_yet }}</p>
            {% endfor %}

            <div class="contact-form-wrap" style="max-width: 560px; margin: 20px 0 30px;">
                <h3 style="margin-bottom: 6px;">{{ t.fleet_signoff_create_title }}</h3>
                <form method="post" action="{% url 'market:fleet_create_signoff_template' %}" class="contact-form">
                    {% csrf_token %}
                    <label>{{ t.fleet_signoff_name_label }}</label>
                    <input type="text" name="name" required placeholder="{{ t.fleet_signoff_name_placeholder }}">
                    {% for field in field_catalog_for_ui %}
                    <div style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
                        <input type="checkbox" name="enabled_{{ field.key }}" id="new-{{ field.key }}" style="width: auto;">
                        <input type="text" name="label_{{ field.key }}" value="{{ field.default_label }}" placeholder="{{ field.default_label }}" style="flex: 1;">
                    </div>
                    {% endfor %}
                    <button type="submit" class="btn-cta" style="margin-top: 12px;">{{ t.fleet_signoff_create_btn }}</button>
                </form>
            </div>

            <h3 style="margin-bottom: 10px;">{{ t.fleet_signoff_submissions_title }}</h3>
            {% if signoff_submissions %}
            <div class="admin-table-wrap">
                <table class="admin-table">
                    <thead><tr><th>{{ t.fleet_fuel_col_date }}</th><th>{{ t.fleet_fuel_col_driver }}</th><th>{{ t.fleet_signoff_col_template }}</th><th>{{ t.fleet_signoff_col_signature }}</th></tr></thead>
                    <tbody>
                        {% for s in signoff_submissions %}
                        <tr>
                            <td>{{ s.created_at|slice:":10" }}</td>
                            <td>{{ s.driver_name }}</td>
                            <td>{{ s.template_name }}</td>
                            <td><a href="{{ s.signature_data_url }}" target="_blank" rel="noopener">{{ t.fleet_signoff_view_signature }}</a></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p style="color: var(--muted);">{{ t.fleet_signoff_no_submissions }}</p>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/vehicle-icons.js' %}"></script>
<script src="{% static_v 'js/map-fullscreen.js' %}"></script>
<script src="{% static_v 'js/fleet-chat.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.fleet-tab-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                document.querySelectorAll('.fleet-tab-btn').forEach(function (b) { b.classList.remove('active'); });
                btn.classList.add('active');
                document.getElementById('fleet-tab-trucks').style.display = btn.dataset.tab === 'trucks' ? 'block' : 'none';
                document.getElementById('fleet-tab-drivers').style.display = btn.dataset.tab === 'drivers' ? 'block' : 'none';
                document.getElementById('fleet-tab-assign').style.display = btn.dataset.tab === 'assign' ? 'block' : 'none';
                document.getElementById('fleet-tab-financials').style.display = btn.dataset.tab === 'financials' ? 'block' : 'none';
                document.getElementById('fleet-tab-warehouse').style.display = btn.dataset.tab === 'warehouse' ? 'block' : 'none';
                document.getElementById('fleet-tab-fuel').style.display = btn.dataset.tab === 'fuel' ? 'block' : 'none';
                document.getElementById('fleet-tab-signoff').style.display = btn.dataset.tab === 'signoff' ? 'block' : 'none';
            });
        });

        document.querySelectorAll('.signoff-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 ? '{{ t.fleet_signoff_edit|escapejs }}' : '{{ t.fleet_signoff_cancel|escapejs }}';
            });
        });

        var aiBtn = document.getElementById('fleet-ai-insights-btn');
        var aiBody = document.getElementById('fleet-ai-insights-body');
        var aiLoaded = false;
        aiBtn.addEventListener('click', function () {
            aiBtn.disabled = true;
            aiBody.textContent = '{{ t.fleet_ai_insights_loading|escapejs }}';
            fetch('{% url "market:fleet_ai_insights" %}' + (aiLoaded ? '?refresh=1' : ''))
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    aiBody.textContent = data.insights;
                    aiLoaded = true;
                })
                .catch(function () {
                    aiBody.textContent = '{{ t.fleet_ai_insights_error|escapejs }}';
                })
                .finally(function () { aiBtn.disabled = false; });
        });

        document.querySelectorAll('.fleet-product-submit-form').forEach(function (form) {
            form.addEventListener('submit', function () {
                var btn = form.querySelector('button[type="submit"]');
                if (btn) btn.disabled = true;
            });
        });

        var largeMapBtn = document.getElementById('fleet-large-map-btn');
        var mapWrap = document.getElementById('fleet-live-map-wrap');
        var isLarge = false;
        largeMapBtn.addEventListener('click', function () {
            isLarge = !isLarge;
            mapWrap.style.height = isLarge ? '600px' : '320px';
            largeMapBtn.textContent = isLarge ? '{{ t.fleet_normal_map|escapejs }}' : '{{ t.fleet_large_map|escapejs }}';
            setTimeout(function () { map.invalidateSize(); }, 50);
        });

        document.querySelectorAll('.fleet-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';
            });
        });

        var map = L.map('fleet-live-map').setView([{{ center.lat }}, {{ center.lng }}], 12);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
        enableMapFullscreen('fleet-live-map-wrap', map, 'fleet-map-fullscreen-btn');

        var truckMarkers = {};
        var truckRoutes = {};

        // Placeholder-id trick so the per-driver track URL still comes
        // from Django's own url resolver (not a hand-typed path that could
        // silently drift from market/urls.py) even though the real driver
        // id only exists at runtime, from the polled JSON.
        var trackUrlTemplate = '{% url "market:fleet_track_driver" driver_id=999999 %}';

        function popupHtml(p) {
            var truckLabel = p.truck_nickname || p.truck_type_name || '';
            var trackUrl = trackUrlTemplate.replace('999999', p.driver_id);
            return '<strong>' + p.driver_name + '</strong>' +
                (p.driver_phone ? '<br>' + p.driver_phone : '') +
                (truckLabel ? '<br>' + truckLabel : '') +
                '<br>{{ t.order_hash_prefix }}' + p.order_id + ' &middot; ' + p.order_status +
                (p.route ? '<br>' + p.route.distance_km + ' km &middot; ~' + Math.round(p.route.duration_min) + ' min' : '') +
                '<br><a href="' + trackUrl + '">{{ t.fleet_track_view_route|escapejs }}</a>';
        }

        function refreshPositions() {
            fetch('{% url "market:fleet_live_positions" %}')
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    var positions = data.positions || [];
                    var seenIds = {};
                    var bounds = [];

                    positions.forEach(function (p) {
                        seenIds[p.driver_id] = true;
                        var latlng = [p.lat, p.lng];
                        bounds.push(latlng);
                        var label = p.truck_nickname || p.truck_type_name || p.driver_name;

                        if (truckMarkers[p.driver_id]) {
                            truckMarkers[p.driver_id].setLatLng(latlng).setPopupContent(popupHtml(p));
                        } else {
                            truckMarkers[p.driver_id] = L.marker(latlng, { icon: vehicleMarkerIcon('car', {}) }).addTo(map)
                                .bindTooltip(label, { permanent: true, direction: 'top', offset: [0, -20] })
                                .bindPopup(popupHtml(p));
                        }

                        if (truckRoutes[p.driver_id]) {
                            map.removeLayer(truckRoutes[p.driver_id]);
                            delete truckRoutes[p.driver_id];
                        }
                        if (p.route && p.route.geometry) {
                            truckRoutes[p.driver_id] = L.geoJSON(p.route.geometry, { style: { color: '#1c3fd6', weight: 4, opacity: 0.75 } }).addTo(map);
                        }
                    });

                    Object.keys(truckMarkers).forEach(function (driverId) {
                        if (!seenIds[driverId]) {
                            map.removeLayer(truckMarkers[driverId]);
                            delete truckMarkers[driverId];
                            if (truckRoutes[driverId]) { map.removeLayer(truckRoutes[driverId]); delete truckRoutes[driverId]; }
                        }
                    });

                    document.getElementById('fleet-no-live-note').style.display = positions.length ? 'none' : 'block';
                    if (bounds.length) { map.fitBounds(bounds, { padding: [30, 30] }); }
                });
        }

        refreshPositions();
        setInterval(refreshPositions, 8000);
    });
</script>
{% endblock %}