{% 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 active" aria-current="page">{% trans "Add A Bid" %}</li>
            </ol>
        </nav>
    </div>
</div>
{% endblock %}

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

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow border-0">
                <div class="card-body p-5">
                    <h2 class="mb-4">{% trans "Post a New Shipment" %}</h2>
                    <p class="text-muted mb-4">{% trans "Enter shipment details to receive bids or send as an offer." %}</p>

                    {% 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" id="shipmentForm" novalidate>
                        {% csrf_token %}
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold">{% trans "Goods Description" %}</label>
                            {{ form.description }}
                            {% if form.description.errors %}<div class="text-danger small">{{ form.description.errors.0 }}</div>{% endif %}
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">{% trans "Weight/Volume" %}</label>
                                {{ form.weight }}
                                {% if form.weight.errors %}<div class="text-danger small">{{ form.weight.errors.0 }}</div>{% endif %}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">{% trans "Truck Type" %}</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="col-md-4">
                                <label class="form-label fw-bold">{% trans "Delivery Date" %}</label>
                                {{ form.delivery_date }}
                                {% if form.delivery_date.errors %}<div class="text-danger small">{{ form.delivery_date.errors.0 }}</div>{% endif %}
                            </div>
                        </div>

                        <hr class="my-4">

                        <h5 class="mb-3 text-primary"><i class="fa-solid fa-map-marker-alt me-2"></i> {% trans "Route Details" %}</h5>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card bg-light border-0 p-3 mb-3">
                                    <label class="form-label fw-bold">{% trans "Origin Country" %}</label>
                                    {{ form.origin_country }}
                                    {% if form.origin_country.errors %}<div class="text-danger small">{{ form.origin_country.errors.0 }}</div>{% endif %}
                                    
                                    <label class="form-label fw-bold mt-2">{% trans "Origin City" %}</label>
                                    {{ 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">
                                <div class="card bg-light border-0 p-3 mb-3">
                                    <label class="form-label fw-bold">{% trans "Destination Country" %}</label>
                                    {{ form.destination_country }}
                                    {% if form.destination_country.errors %}<div class="text-danger small">{{ form.destination_country.errors.0 }}</div>{% endif %}
                                    
                                    <label class="form-label fw-bold mt-2">{% trans "Destination City" %}</label>
                                    {{ form.destination_city }}
                                    {% if form.destination_city.errors %}<div class="text-danger small">{{ form.destination_city.errors.0 }}</div>{% endif %}
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100 py-3 mt-4 fs-5">
                            <i class="fa-solid fa-paper-plane me-2"></i> {% trans "Post Shipment" %}
                        </button>
                    </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] || [];
        
        // Save current selection if any
        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));
        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 %}