{% 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">
                    {% if edit_mode %}
                        {% trans "Update Truck" %}
                    {% else %}
                        {% trans "Register Truck" %}
                    {% endif %}
                </li>
            </ol>
        </nav>
    </div>
</div>
{% endblock %}

{% block content %}
{% get_current_language as CURRENT_LANGUAGE %}
<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-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 "Arabic Details" %}</h5>
                                <div class="mb-3">
                                    <label class="form-label">{% trans "Model (AR)" %}</label>
                                    {{ form.model_ar }}
                                    {{ form.model_ar.errors }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{% trans "Load Capacity (AR)" %}</label>
                                    {{ form.load_capacity_ar }}
                                    {{ form.load_capacity_ar.errors }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{% trans "Color (AR)" %}</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>
                        <p class="text-muted small">{% trans "Photos will be automatically resized for better performance. PDF files are accepted for documents." %}</p>
                        
                        <div class="row {% if CURRENT_LANGUAGE == "ar" %}flex-row-reverse{% endif %}">
                            <div class="col-md-12 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>

                        <div class="row {% if CURRENT_LANGUAGE == "ar" %}flex-row-reverse{% endif %}">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Driver License (Front Face)" %}</label>
                                {% if truck.driver_license_front %}
                                    <div class="mb-2">
                                        {% with ext=truck.driver_license_front.name|lower %}
                                            {% if ".pdf" in ext %}
                                                <a href="{{ truck.driver_license_front.url }}" target="_blank" class="btn btn-outline-danger btn-sm">
                                                    <i class="fa fa-file-pdf me-1"></i> {% trans "View PDF" %}
                                                </a>
                                            {% else %}
                                                <img src="{{ truck.driver_license_front.url }}" class="img-thumbnail" style="height: 100px;">
                                            {% endif %}
                                        {% endwith %}
                                    </div>
                                {% endif %}
                                {{ form.driver_license_front }}
                                {{ form.driver_license_front.errors }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Driver License (Back Face)" %}</label>
                                {% if truck.driver_license_back %}
                                    <div class="mb-2">
                                        {% with ext=truck.driver_license_back.name|lower %}
                                            {% if ".pdf" in ext %}
                                                <a href="{{ truck.driver_license_back.url }}" target="_blank" class="btn btn-outline-danger btn-sm">
                                                    <i class="fa fa-file-pdf me-1"></i> {% trans "View PDF" %}
                                                </a>
                                            {% else %}
                                                <img src="{{ truck.driver_license_back.url }}" class="img-thumbnail" style="height: 100px;">
                                            {% endif %}
                                        {% endwith %}
                                    </div>
                                {% endif %}
                                {{ form.driver_license_back }}
                                {{ form.driver_license_back.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">
                                        {% with ext=truck.registration_front.name|lower %}
                                            {% if ".pdf" in ext %}
                                                <a href="{{ truck.registration_front.url }}" target="_blank" class="btn btn-outline-danger btn-sm">
                                                    <i class="fa fa-file-pdf me-1"></i> {% trans "View PDF" %}
                                                </a>
                                            {% else %}
                                                <img src="{{ truck.registration_front.url }}" class="img-thumbnail" style="height: 100px;">
                                            {% endif %}
                                        {% endwith %}
                                    </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">
                                        {% with ext=truck.registration_back.name|lower %}
                                            {% if ".pdf" in ext %}
                                                <a href="{{ truck.registration_back.url }}" target="_blank" class="btn btn-outline-danger btn-sm">
                                                    <i class="fa fa-file-pdf me-1"></i> {% trans "View PDF" %}
                                                </a>
                                            {% else %}
                                                <img src="{{ truck.registration_back.url }}" class="img-thumbnail" style="height: 100px;">
                                            {% endif %}
                                        {% endwith %}
                                    </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 %}