{% extends 'base.html' %}
{% load static_v %}
{% block title %}{{ t.fleet_register_title }} — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 600px;">
        <h1>{{ t.fleet_register_title }}</h1>

        {% if company %}
            {% if company.is_approved %}
            <div class="order-card">
                <span class="surface-badge ok">{{ t.profile_named_location_registered }}</span>
                <h3 style="margin: 8px 0 4px;">{{ company.company_name }}</h3>
                <p style="color: var(--muted); font-size: 0.85rem;">{{ t.fleet_tin_label }}: {{ tin_number|default:"—" }} &middot; {{ t.fleet_license_label }}: {{ business_license_number|default:"—" }}</p>
                <a href="{% url 'market:fleet_dashboard' %}" class="btn-cta" style="margin-top: 10px; display: inline-block;">{{ t.fleet_dashboard_title }} &rarr;</a>
            </div>
            {% else %}
            <div class="order-card">
                <span class="surface-badge warn">{{ t.fleet_pending_title }}</span>
                <h3 style="margin: 8px 0 4px;">{{ company.company_name }}</h3>
                <p style="color: var(--muted);">{{ pending_message }}</p>
                <p style="color: var(--muted); font-size: 0.85rem;">{{ t.fleet_tin_label }}: {{ tin_number|default:"—" }} &middot; {{ t.fleet_license_label }}: {{ business_license_number|default:"—" }}</p>
            </div>
            {% endif %}

            <div class="contact-form-wrap" style="max-width: 400px; margin-top: 20px;">
                <h3 style="margin-bottom: 6px;">{{ t.fleet_region_label }}</h3>
                <p style="color: var(--muted); font-size: 0.85rem; margin: -2px 0 10px;">{{ t.fleet_region_help }}</p>
                <form method="post" action="{% url 'market:fleet_update_region' %}" class="contact-form">
                    {% csrf_token %}
                    <div class="region-picker" style="position: relative;">
                        <input type="text" class="region-search-input" placeholder="{{ t.region_search_placeholder }}" value="{{ company.region_name|default:'' }}" autocomplete="off">
                        <input type="hidden" class="region-search-value" name="region_name" value="{{ company.region_name|default:'' }}">
                        <div class="region-search-results"></div>
                    </div>
                    <button type="submit" class="btn-small" style="margin-top: 10px;">{{ t.profile_save }}</button>
                </form>
            </div>
        {% else %}
        <p style="color: var(--muted); margin-bottom: 20px;">{{ t.fleet_register_intro }}</p>

        <form method="post" class="auth-form">
            {% csrf_token %}
            <label for="company_name">{{ t.fleet_company_name_label }}</label>
            <input type="text" id="company_name" name="company_name" required>

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

            <label>{{ t.fleet_region_label }}</label>
            <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">{{ t.fleet_region_help }}</p>
            <div class="region-picker" style="position: relative;">
                <input type="text" class="region-search-input" placeholder="{{ t.region_search_placeholder }}" autocomplete="off">
                <input type="hidden" class="region-search-value" name="region_name">
                <div class="region-search-results"></div>
            </div>

            <button type="submit" class="btn-cta" style="margin-top: 16px;">{{ t.fleet_register_submit }}</button>
        </form>
        {% endif %}
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="{% static_v 'js/region-picker.js' %}"></script>
{% endblock %}