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

{% block content %}
{% get_current_language as CURRENT_LANGUAGE %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card shadow">
                <div class="card-body p-5">
                    <h2 class="mb-4">
                        {% if edit_mode %}
                            {% trans "Update Truck Data" %}
                        {% else %}
                            {% trans "Register a Truck" %}
                        {% endif %}
                    </h2>
                    
                    {% if form.errors %}
                    <div class="alert alert-danger">
                        {% trans "Please correct the errors below." %}
                        {{ form.non_field_errors }}
                    </div>
                    {% endif %}

                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card bg-light border-0 p-3">
                                    <label class="form-label fw-bold">{% trans "Truck Type" %}</label>
                                    {{ form.truck_type_link }}
                                    {{ form.truck_type_link.errors }}
                                    <small class="text-muted">{% trans "Select the type of your truck from the list." %}</small>
                                </div>
                            </div>
                        </div>

                        <div class="row {% if CURRENT_LANGUAGE == "ar" %}flex-row-reverse{% endif %}">
                            <div class="col-md-6 {% if CURRENT_LANGUAGE == "ar" %}border-start{% else %}border-end{% endif %}">
                                <h5 class="mb-3 text-primary">{% trans "English Details" %}</h5>
                                <div class="mb-3">
                                    <label class="form-label">{% trans "Model" %}</label>
                                    {{ form.model }}
                                    {{ form.model.errors }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{% trans "Load Capacity" %}</label>
                                    {{ form.load_capacity }}
                                    {{ form.load_capacity.errors }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{% trans "Color" %}</label>
                                    {{ form.color }}
                                    {{ form.color.errors }}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <h5 class="mb-3 text-success">{% trans "التفاصيل باللغة العربية" %}</h5>
                                <div class="mb-3">
                                    <label class="form-label">{% trans "الموديل" %}</label>
                                    {{ form.model_ar }}
                                    {{ form.model_ar.errors }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{% trans "الحمولة" %}</label>
                                    {{ form.load_capacity_ar }}
                                    {{ form.load_capacity_ar.errors }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{% trans "اللون" %}</label>
                                    {{ form.color_ar }}
                                    {{ form.color_ar.errors }}
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">
                        <h5 class="mb-3">{% trans "General Information" %}</h5>
                        <div class="row {% if CURRENT_LANGUAGE == "ar" %}flex-row-reverse{% endif %}">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{% trans "Year" %}</label>
                                {{ form.year }}
                                {{ form.year.errors }}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{% trans "Plate No" %}</label>
                                {{ form.plate_no }}
                                {{ form.plate_no.errors }}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">{% trans "Registration Expiry Date" %}</label>
                                {{ form.registration_expiry_date }}
                                {{ form.registration_expiry_date.errors }}
                            </div>
                        </div>
                        
                        <hr class="my-4">
                        <h5>{% trans "Documents & Photos" %}</h5>
                        
                        <div class="row {% if CURRENT_LANGUAGE == "ar" %}flex-row-reverse{% endif %}">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Truck Picture" %}</label>
                                {% if truck.truck_picture %}
                                    <div class="mb-2">
                                        <img src="{{ truck.truck_picture.url }}" class="img-thumbnail" style="height: 100px;">
                                    </div>
                                {% endif %}
                                {{ form.truck_picture }}
                                {{ form.truck_picture.errors }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Driver License" %}</label>
                                {% if truck.driver_license %}
                                    <div class="mb-2">
                                        <img src="{{ truck.driver_license.url }}" class="img-thumbnail" style="height: 100px;">
                                    </div>
                                {% endif %}
                                {{ form.driver_license }}
                                {{ form.driver_license.errors }}
                            </div>
                        </div>
                        <div class="row {% if CURRENT_LANGUAGE == "ar" %}flex-row-reverse{% endif %}">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Registration (Front Face)" %}</label>
                                {% if truck.registration_front %}
                                    <div class="mb-2">
                                        <img src="{{ truck.registration_front.url }}" class="img-thumbnail" style="height: 100px;">
                                    </div>
                                {% endif %}
                                {{ form.registration_front }}
                                {{ form.registration_front.errors }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Registration (Back Face)" %}</label>
                                {% if truck.registration_back %}
                                    <div class="mb-2">
                                        <img src="{{ truck.registration_back.url }}" class="img-thumbnail" style="height: 100px;">
                                    </div>
                                {% endif %}
                                {{ form.registration_back }}
                                {{ form.registration_back.errors }}
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100 py-3 mt-4">
                            {% if edit_mode %}
                                {% trans "Update and Submit for Approval" %}
                            {% else %}
                                {% trans "Submit Registration" %}
                            {% endif %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}