{% 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 -->

    {% if masini %}
        <h4 class="mb-3">Import Options</h4>
        {% for id_car, (table_name, has_ids_in_masina_table, last_car_backup, last_car_backup_file, activ) in masini.items() %}
        <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 Backup {{table_name}} {{last_car_backup}}</label>
                    <input type="hidden" name="last_car_backup_file" value="{{ last_car_backup_file }}">
                    <button type="submit" name="import_car_backup" class="btn btn-secondary w-100">
                        Import
                    </button>
                    <div class="form-check mb-3">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="with_files"
                            name="with_files"
                            value="1">
                        <label class="form-check-label" for="with_files">
                            With files
                        </label>
                    </div>
                </form>
            </div>
        </div>
        {% endfor %}
    {% endif %}
    <br>

<!--    <p>admin = {{ current_user.admin }}</p>-->
<!--    <p>authenticated = {{ current_user.is_authenticated }}</p>-->
    {% if current_user.admin %}
        <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 Car</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>
                        <div class="form-check mb-3">
                            <input
                                class="form-check-input"
                                type="checkbox"
                                id="upload_with_files"
                                name="upload_with_files"
                                value="1">
                            <label class="form-check-label" for="with_files">
                                With files
                            </label>
                        </div>
                    </form>
                </div>
        </div>
    {% else %}
    {% endif %}

</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 %}