{% extends "base.html" %}
{% load i18n %}

{% block breadcrumbs %}
<div class="breadcrumb-container">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="/"><i class="fa-solid fa-house me-1"></i> {% trans "Home" %}</a></li>
                <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">{% trans "Dashboard" %}</a></li>
                <li class="breadcrumb-item"><a href="{% url 'marketplace' %}">{% trans "Marketplace" %}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{% trans "Send Offer" %}</li>
            </ol>
        </nav>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="mb-4">
        <a href="{% url 'marketplace' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fa-solid fa-arrow-left me-1"></i> {% trans "Back to Marketplace" %}
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-7">
            <div class="card shadow-lg border-0">
                <div class="card-body p-5">
                    <h2 class="mb-4 text-center">{% trans "Send Shipping Offer" %}</h2>
                    
                    <div class="card bg-light border-0 mb-4">
                        <div class="card-body">
                            <h6 class="text-primary mb-2">{% trans "Target Truck" %}</h6>
                            <div class="d-flex align-items-center">
                                {% if truck.truck_picture %}
                                <img src="{{ truck.truck_picture.url }}" class="rounded me-3" style="width: 60px; height: 60px; object-fit: cover;">
                                {% else %}
                                <div class="bg-secondary bg-opacity-10 rounded me-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                    <i class="fa-solid fa-truck text-muted"></i>
                                </div>
                                {% endif %}
                                <div>
                                    <div class="fw-bold">{{ truck.display_truck_type }} - {{ truck.display_model }}</div>
                                    <small class="text-muted">{% trans "Owner" %}: {{ truck.owner.username }} | {% trans "Plate" %}: {{ truck.plate_no }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {% if form.errors %}
                    <div class="alert alert-danger">
                        <h6 class="alert-heading">{% trans "Please correct the following errors:" %}</h6>
                        <ul class="mb-0">
                            {% for field in form %}
                                {% for error in field.errors %}
                                    <li><strong>{{ field.label }}:</strong> {{ error }}</li>
                                {% endfor %}
                            {% endfor %}
                            {% for error in form.non_field_errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <form method="post" novalidate>
                        {% csrf_token %}
                        
                        <h6 class="border-bottom pb-2 mb-3">{% trans "Shipment Details" %}</h6>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">{{ form.required_truck_type_link.label }}</label>
                            {{ form.required_truck_type_link }}
                            {% if form.required_truck_type_link.errors %}<div class="text-danger small">{{ form.required_truck_type_link.errors.0 }}</div>{% endif %}
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">{{ form.description.label }}</label>
                            {{ form.description }}
                            {% if form.description.errors %}<div class="text-danger small">{{ form.description.errors.0 }}</div>{% endif %}
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ form.weight.label }}</label>
                                {{ form.weight }}
                                {% if form.weight.errors %}<div class="text-danger small">{{ form.weight.errors.0 }}</div>{% endif %}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ form.delivery_date.label }}</label>
                                {{ form.delivery_date }}
                                {% if form.delivery_date.errors %}<div class="text-danger small">{{ form.delivery_date.errors.0 }}</div>{% endif %}
                            </div>
                        </div>

                        <div class="card bg-light border-0 p-3 mb-4">
                            <h6 class="mb-3"><i class="fa-solid fa-map-marker-alt me-2 text-primary"></i> {% trans "Route" %}</h6>
                            <div class="row">
                                <div class="col-md-6 border-end">
                                    <label class="form-label small text-muted">{% trans "Origin" %}</label>
                                    <div class="mb-2">
                                        {{ form.origin_country }}
                                        {% if form.origin_country.errors %}<div class="text-danger small">{{ form.origin_country.errors.0 }}</div>{% endif %}
                                    </div>
                                    <div>
                                        {{ form.origin_city }}
                                        {% if form.origin_city.errors %}<div class="text-danger small">{{ form.origin_city.errors.0 }}</div>{% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small text-muted">{% trans "Destination" %}</label>
                                    <div class="mb-2">
                                        {{ form.destination_country }}
                                        {% if form.destination_country.errors %}<div class="text-danger small">{{ form.destination_country.errors.0 }}</div>{% endif %}
                                    </div>
                                    <div>
                                        {{ form.destination_city }}
                                        {% if form.destination_city.errors %}<div class="text-danger small">{{ form.destination_city.errors.0 }}</div>{% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <h6 class="border-bottom pb-2 mb-3 mt-4">{% trans "Pricing & Terms" %}</h6>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">{{ form.amount.label }}</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                {{ form.amount }}
                            </div>
                            {% if form.amount.errors %}<div class="text-danger small">{{ form.amount.errors.0 }}</div>{% endif %}
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold">{{ form.comments.label }}</label>
                            {{ form.comments }}
                            {% if form.comments.errors %}<div class="text-danger small">{{ form.comments.errors.0 }}</div>{% endif %}
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg py-3">
                                <i class="fa-solid fa-paper-plane me-2"></i>{% trans "Send Offer to Truck Owner" %}
                            </button>
                            <a href="{% url 'marketplace' %}" class="btn btn-link text-muted">{% trans "Cancel" %}</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const citiesByCountry = {
        {% for country in form.fields.origin_country.queryset %}
        "{{ country.id }}": [
            {% for city in country.cities.all %}
            {"id": "{{ city.id }}", "name": "{{ city.name }}"}{% if not forloop.last %},{% endif %}
            {% endfor %}
        ]{% if not forloop.last %},{% endif %}
        {% endfor %}
    };

    function updateCities(countrySelect, citySelect) {
        const countryId = countrySelect.value;
        const cities = citiesByCountry[countryId] || [];
        
        const currentCityId = citySelect.value;
        citySelect.innerHTML = '<option value="">---------</option>';
        cities.forEach(city => {
            const option = document.createElement('option');
            option.value = city.id;
            option.textContent = city.name;
            if (city.id == currentCityId) option.selected = true;
            citySelect.appendChild(option);
        });
    }

    const originCountry = document.querySelector('select[name="origin_country"]');
    const originCity = document.querySelector('select[name="origin_city"]');
    const destCountry = document.querySelector('select[name="destination_country"]');
    const destCity = document.querySelector('select[name="destination_city"]');

    if (originCountry && originCity) {
        originCountry.addEventListener('change', () => updateCities(originCountry, originCity));
        // Only run on load if there's no pre-existing selection (to avoid clearing initial filtered values)
        if (!originCity.value || originCity.value === "") {
            updateCities(originCountry, originCity);
        }
    }
    if (destCountry && destCity) {
        destCountry.addEventListener('change', () => updateCities(destCountry, destCity));
        if (!destCity.value || destCity.value === "") {
            updateCities(destCountry, destCity);
        }
    }
});
</script>
{% endblock %}