{% extends 'controls/controls_base_mobile.html' %}
{% load i18n %}
{% load static %}

{% block custom_style %}
<style>
    .optional-field input,
    .optional-field select,
    .optional-field textarea {
        border: 1px dashed #6c757d !important; /* Bordure grise en pointillés */
    }
</style>
{% endblock %}

{% block top_navbar %}
    <button onclick="window.history.back()" class="btn btn-outline-secondary">
        <i class="bi bi-chevron-left"></i>
    </button>
    <span class="navbar-brand mx-auto fw-bold">
        {% if control %}{% translate "Modifier le Contrôle" %}{% else %}{% translate "Nouveau Contrôle" %}{% endif %}
    </span>
    <div></div> <!-- Placeholder pour équilibrer la flèche -->
{% endblock %}

{% block content %}
    {% include "controls/controls_form_content.html" %}
{% endblock %}


{% block buttom_navbar %}
{% endblock %}

{% block script %}
<!-- jQuery 3.7.1 (local) -->
<script src="{% static 'common/jquery.min.js' %}"></script>
<script>
$(document).ready(function() {
    $("#project-select").change(function() {
        let projectId = $(this).val();
        let phaseSelect = $("#phase-select");
        let phaseContainer = $("#phase-container");

        if (projectId) {
            $.ajax({
                url: "{% url 'projects:projects_phases' project_id=0 %}".replace("0", projectId.toString()),
                data: { },
                type: "GET",
                success: function(data) {
                    phaseSelect.empty();
                    if (data.length > 0) {
                        phaseSelect.append('<option value="">Sélectionnez une phase</option>');
                        $.each(data, function(index, phase) {
                            phaseSelect.append('<option value="' + phase.id + '">' + phase.name + '</option>');
                        });
                        phaseContainer.removeClass("d-none");
                    } else {
                        phaseContainer.addClass("d-none");
                    }
                }
            });
        } else {
            phaseSelect.empty();
            phaseContainer.addClass("d-none");
        }
    });
});
</script>
{% endblock %}