{% extends 'base.html.twig' %}

{% block title %}Ajouter un cours{% endblock %}

{% block titre_page %}Ajouter un cours{% endblock %}
{% block resume_page %}Cela permet de tracer les différentes interventions qui ont été faites dans la troupe{% endblock %}
{% block description_page %}Pour créer :
    <ul>
        <li>Choisir un intervenant, ou un animateur de la troupe</li>
        <li>Choisir la date et le thème</li>
    </ul>
{% endblock %}

{% block body %}
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                {{ form_start(form, {'action': path('cours_add'), 'attr': {'class': 'row g-3'}}) }}
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-xs-12">
                            {{ form_label(form.intervenant, 'Intervenant', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.intervenant, {'attr': {'class': 'form-select'}}) }}
                        </div>
                        <div class="col-xs-12 mt-3">
                            {{ form_label(form.price, 'Prix de la master class', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.price, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="col-xs-12 mt-3">
                            {{ form_label(form.facture, 'Facture (si elle existe)', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.facture, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="col-xs-2 text-center fw-bold">
                        <div class="mt-4">OU</div>
                    </div>
                    <div class="col-xs-5">
                        {{ form_label(form.leader, 'Animateur', {'attr': {'class': 'form-label'}}) }}
                        {{ form_widget(form.leader, {'attr': {'class': 'form-select'}}) }}
                    </div>
                </div>
                <div class="col-md-6">

                    <div class="col-xs-12">
                        {{ form_label(form.date, 'Date', {'attr': {'class': 'form-label'}}) }}
                        {{ form_widget(form.date, {'attr': {'class': 'form-control'}}) }}
                    </div>

                    <div class="col-xs-12 mt-3">
                        {{ form_label(form.theme, 'Thème du cours', {'attr': {'class': 'form-label'}}) }}
                        {{ form_widget(form.theme, {'attr': {'class': 'form-control'}}) }}
                    </div>

                    <div class="col-xs-12 mt-3">
                        {{ form_label(form.comment, 'Exercices', {'attr': {'class': 'form-label'}}) }}
                        {{ form_widget(form.comment, {'attr': {'class': 'form-control'}}) }}
                    </div>
                </div>


                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        // Date format options
        const dateFormatOption = {weekday: "long", year: "numeric", month: "long", day: "numeric"};

        const mdPicker_DatePortrait = new mdDateTimePicker.default({
            type: "date",
            orientation: "PORTRAIT",
            past: moment().subtract(2, 'years'),
            future: moment().subtract(-3, 'years')
        });
        const mdPicker_DatePortraitInput = document.querySelector("#cours_date");

        // Dispatch input event
        mdPicker_DatePortrait.trigger = mdPicker_DatePortraitInput;

        // Text input events
        mdPicker_DatePortraitInput.addEventListener("focus", () => mdPicker_DatePortrait.toggle());
        mdPicker_DatePortraitInput.addEventListener("onOk", () => mdPicker_DatePortraitInput.value = new Date(mdPicker_DatePortrait.time.toString()).toLocaleDateString([], 'dd/MM/YYYY'));
    </script>
{% endblock %}