{% extends 'base.html' %}

{% block content %}

<div class="container mt-4">

    <h3 class="mb-4">Add a Car</h3>

    <!-- ADD CAR FORM -->
    <form method="POST" action="/add_masina" class="card p-4 shadow-sm">

        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Car Brand</label>
                    <select id="car_brand" name="brand" class="form-select">
                        <option value="">Select brand</option>
                        {% for row in all_cars_brands %}
                            {% if loop.first or row[0] != all_cars_brands[loop.index0-1][0] %}
                                <option value="{{ row[0] }}">{{ row[0] }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Model</label>
                <select id="car_model" name="model" class="form-select">
                    <option value="">Select model</option>
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Motorisation</label>
                <select id="car_motor" name="car_type" class="form-select">
                    <option value="">Select motorisation</option>
                </select>
            </div>
        </div>

        <button type="submit" name="create_user_car" class="btn btn-primary mt-3">
            Add Car
        </button>

    </form>

    <hr class="my-5">

    <!-- IMPORT SECTIONS -->
    <h4 class="mb-3">Import Options</h4>

    <div class="row g-4">

        <div class="col-md-4">
            <form action="/add_masina" method="POST" enctype="multipart/form-data" class="card p-3 shadow-sm">
                <label class="form-label">Import SQL File</label>
                <input type="file" name="myfile" class="form-control mb-3">
                <button type="submit" name="import_car_sql" class="btn btn-secondary w-100">
                    Upload SQL
                </button>
            </form>
        </div>

        <div class="col-md-4">
            <form action="/add_masina" method="POST" enctype="multipart/form-data" class="card p-3 shadow-sm">
                <label class="form-label">Import Car With Files (ZIP)</label>
                <input type="file" name="zip_file" class="form-control mb-3">
                <button type="submit" name="import_car_with_files" class="btn btn-secondary w-100">
                    Upload ZIP (With Files)
                </button>
            </form>
        </div>

        <div class="col-md-4">
            <form action="/add_masina" method="POST" enctype="multipart/form-data" class="card p-3 shadow-sm">
                <label class="form-label">Import Car Without Files (ZIP)</label>
                <input type="file" name="zip_file" class="form-control mb-3">
                <button type="submit" name="import_car_without_files" class="btn btn-secondary w-100">
                    Upload ZIP (No Files)
                </button>
            </form>
        </div>

    </div>

</div>


<!-- ▼▼▼ JAVASCRIPT FOR FILTERED DROPDOWNS ▼▼▼ -->
<script>
    // full dataset from Python
    const carData = {{ all_cars_brands | tojson }};

    const brandSelect = document.getElementById('car_brand');
    const modelSelect = document.getElementById('car_model');
    const motorSelect = document.getElementById('car_motor');

    // On brand change → populate models
    brandSelect.addEventListener('change', function () {
        const brand = this.value;

        modelSelect.innerHTML = "<option value=''>Select model</option>";
        motorSelect.innerHTML = "<option value=''>Select motorisation</option>";

        if (!brand) return;

        const models = [...new Set(
            carData.filter(row => row[0] === brand).map(row => row[1])
        )];

        models.forEach(model => {
            let opt = document.createElement('option');
            opt.value = model;
            opt.textContent = model;
            modelSelect.appendChild(opt);
        });
    });

    // On model change → populate motorisations
    modelSelect.addEventListener('change', function () {
        const brand = brandSelect.value;
        const model = this.value;

        motorSelect.innerHTML = "<option value=''>Select motorisation</option>";

        if (!brand || !model) return;

        const motors = [...new Set(
            carData
                .filter(row => row[0] === brand && row[1] === model)
                .map(row => row[2])
        )];

        motors.forEach(motor => {
            let opt = document.createElement('option');
            opt.value = motor;
            opt.textContent = motor;
            motorSelect.appendChild(opt);
        });
    });
</script>

{% endblock %}