{% extends 'base.html' %}
{% load static_v %}
{% block title %}Fleet Trucks — Admin{% 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;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Fleet Trucks</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;">
            Register a truck on behalf of any fleet company — pick its location on the map and assign which
            warehouse(s)/industry(ies) it services, so a warehouse-tied order can offer this exact truck at
            checkout. A company can still add its own trucks from its dashboard; this is admin's view across
            every company at once.
        </p>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">Register a Truck</h3>
            <form method="post" class="contact-form">
                {% csrf_token %}
                <label for="company_id">Company</label>
                <select id="company_id" name="company_id" required>
                    <option value="">— choose —</option>
                    {% for c in companies %}
                    <option value="{{ c.id }}">{{ c.company_name }}{% if not c.is_approved %} (pending approval){% endif %}</option>
                    {% endfor %}
                </select>

                <label for="truck_type_id">Truck type</label>
                <select id="truck_type_id" name="truck_type_id" required>
                    <option value="">— choose —</option>
                    {% for tt in truck_types %}
                    <option value="{{ tt.id }}">{{ tt.name }} ({{ tt.capacity_label }})</option>
                    {% endfor %}
                </select>

                <label for="nickname">Nickname (optional)</label>
                <input type="text" id="nickname" name="nickname" placeholder="e.g. Truck 3">

                <label for="license_plate">License plate</label>
                <input type="text" id="license_plate" name="license_plate">

                <label>Base location</label>
                <div class="map-search-wrap">
                    <input type="text" id="add-truck-location-search" placeholder="e.g. Kariakoo Market">
                    <div class="geocode-results" id="add-truck-location-results"></div>
                </div>
                <button type="button" id="add-truck-locate-btn" class="locate-btn">Use current location</button>
                <div id="add-truck-map" class="map-container"></div>

                <div style="display: flex; gap: 10px; margin-top: 10px;">
                    <div style="flex: 1;">
                        <label for="add-truck-lat">Latitude</label>
                        <input type="number" step="any" id="add-truck-lat" name="lat" placeholder="e.g. -6.7924">
                    </div>
                    <div style="flex: 1;">
                        <label for="add-truck-lng">Longitude</label>
                        <input type="number" step="any" id="add-truck-lng" name="lng" placeholder="e.g. 39.2083">
                    </div>
                </div>
                <p style="color: var(--muted); font-size: 0.82rem; margin: 4px 0 0;">Type exact coordinates directly if you have them — the map above updates to match.</p>

                <label for="warehouses">Services these warehouses/industries/markets (optional — ctrl/cmd-click for more than one)</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>

                <button type="submit" class="btn-cta">Register Truck</button>
            </form>
        </div>

        <h3 style="margin-bottom: 12px;">All Trucks</h3>
        {% 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: 14px;">
                <div>
                    {% if not truck.is_active %}<span class="surface-badge warn">Inactive</span>{% endif %}
                    <h4 style="margin: 4px 0 2px;">{{ truck.nickname|default:"Unnamed truck" }} <small style="color: var(--muted); font-weight: 400;">{{ truck.license_plate }}</small></h4>
                    <p style="font-size: 0.85rem; color: var(--muted);">
                        {{ truck.company.company_name|default:"— no company —" }} &middot; {{ truck.truck_type.name|default:"—" }}
                        {% if truck.location_lat %} &middot; {{ truck.location_lat|floatformat:4 }}, {{ truck.location_lng|floatformat:4 }}{% endif %}
                    </p>
                    {% if truck.warehouses %}
                    <p style="font-size: 0.82rem; color: var(--muted); margin-top: 4px;">
                        Services: {% 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 truck-edit-toggle" data-target="edit-truck-{{ truck.id }}">Edit</button>
                    <form method="post" action="{% url 'accounts:admin_delete_fleet_truck' truck.id %}" onsubmit="return confirm('Delete this truck? This cannot be undone.');">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: #c0392b;">Delete</button>
                    </form>
                </div>
            </div>

            <form method="post" action="{% url 'accounts:admin_edit_fleet_truck' truck.id %}" id="edit-truck-{{ truck.id }}" class="contact-form" style="display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);">
                {% csrf_token %}
                <label>Company</label>
                <select name="company_id" required>
                    {% for c in companies %}
                    <option value="{{ c.id }}" {% if truck.company_id == c.id %}selected{% endif %}>{{ c.company_name }}</option>
                    {% endfor %}
                </select>

                <label>Truck type</label>
                <select name="truck_type_id" required>
                    {% for tt in truck_types %}
                    <option value="{{ tt.id }}" {% if truck.truck_type_id == tt.id %}selected{% endif %}>{{ tt.name }} ({{ tt.capacity_label }})</option>
                    {% endfor %}
                </select>

                <label>Nickname</label>
                <input type="text" name="nickname" value="{{ truck.nickname }}">

                <label>License plate</label>
                <input type="text" name="license_plate" value="{{ truck.license_plate }}">

                <label>Latitude</label>
                <input type="number" step="any" name="lat" value="{{ truck.location_lat|default:'' }}">

                <label>Longitude</label>
                <input type="number" step="any" name="lng" value="{{ truck.location_lng|default:'' }}">

                <label>Services these warehouses/industries/markets</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>

                <button type="submit" class="btn-cta">Save Changes</button>
            </form>
        </div>
        {% empty %}
        <p style="color: var(--muted);">No trucks registered yet.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/location-picker.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        initLocationPicker({
            mapId: 'add-truck-map',
            latInputId: 'add-truck-lat',
            lngInputId: 'add-truck-lng',
            searchInputId: 'add-truck-location-search',
            resultsId: 'add-truck-location-results',
            locateBtnId: 'add-truck-locate-btn',
            initialLat: {{ center.lat }},
            initialLng: {{ center.lng }},
            initialMarkerLat: null,
            initialMarkerLng: null,
            initialZoom: 12,
        });

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