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

{% block title %}Ajouter une représentation{% endblock %}

{% block body %}
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                {{ form_start(form, {'action': path('representation_edit', {'idRepresensation':representation.id}), 'attr': {'class': 'row g-3'}}) }}
                {{ form_errors(form) }}
                <div class="col-md-6">
                    {{ form_label(form.date, 'Date du spectacle', {'attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.date, {'attr': {'class': 'form-control'}}) }}
                </div>
                <div class="col-md-6">
                    {{ form_label(form.heure, 'Heure du spectacle', {'attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.heure, {'attr': {'class': 'form-control'}}) }}
                </div>
                <div class="col-md-6">
                    {{ form_label(form.spectacle, 'Spectacle', {'attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.spectacle, {'attr': {'class': 'form-select'}}) }}
                </div>
                <div class="col-md-6">
                    {{ form_label(form.heureRdv, 'Heure du rendez-vous', {'attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.heureRdv, {'attr': {'class': 'form-control'}}) }}
                </div>

                <div class="col-md-6">
                    {{ form_label(form.salle, 'Salle', {'attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.salle, {'attr': {'class': 'form-select'}}) }}
                </div>

                <div class="col-md-6">
                    {{ form_label(form.reservationButton, 'Code HTML de la billeterie (Helloasso)', {'attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.reservationButton, {'attr': {'class': 'form-control'}}) }}
                </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'),
            init: moment("{{ representation.date|date('Ymd') }}", "YYYYMMDD")
        });
        const mdPicker_DatePortraitInput = document.querySelector("#representation_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'));

        const mdPicker_TimePortrait = new mdDateTimePicker.default({
            type: "time",
            orientation: "PORTRAIT",
            mode: "true",
            init: moment("{{ representation.heure|date('Hi') }}", "HHmm")
        });

        const mdPicker_TimePortraitInput = document.querySelector( "#representation_heure" );


        // Dispatch input event
        mdPicker_TimePortrait.trigger = mdPicker_TimePortraitInput;


        // Text input events
        mdPicker_TimePortraitInput.addEventListener( "focus", () => mdPicker_TimePortrait.toggle() );
        mdPicker_TimePortraitInput.addEventListener( "onOk", () => mdPicker_TimePortraitInput.value = new Date(mdPicker_TimePortrait.time.toString()).toLocaleTimeString( [], { hour: "2-digit", minute: "2-digit" }  ) );

        const mdPicker_TimePortraitHeureRdv = new mdDateTimePicker.default({
            type: "time",
            orientation: "PORTRAIT",
            mode: "true",
            init: moment("{{ representation.heureRdv|date('Hi') }}", "HHmm")
        });
        const mdPicker_TimePortraitInputHeureRdv = document.querySelector( "#representation_heureRdv" );


        // Dispatch input event
        mdPicker_TimePortraitHeureRdv.trigger = mdPicker_TimePortraitInputHeureRdv;


        // Text input events
        mdPicker_TimePortraitInputHeureRdv.addEventListener( "focus", () => mdPicker_TimePortraitHeureRdv.toggle() );
        mdPicker_TimePortraitInputHeureRdv.addEventListener( "onOk", () => mdPicker_TimePortraitInputHeureRdv.value = new Date(mdPicker_TimePortraitHeureRdv.time.toString()).toLocaleTimeString( [], { hour: "2-digit", minute: "2-digit" }  ) );

    </script>
{% endblock %}