{% extends parent_template %}

{% block title %}Form Forge Mapping Event{% endblock %}

{% block head %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
            <div class="col s12">
                <h5 class="center">Mapping Event</h5>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12 m6 offset-m3">
                <a href="{{ path('form_forge_update_reason', {'publicKey': reason.publicKey}) }}" class="waves-effect waves-light btn green-camping">
                    <i class="material-icons left">keyboard_arrow_left</i>
                    Retour
                </a>
            </div>
        </div>
        <div class="row">
            {#Message success#}
            {% for message in app.session.flashBag.get('success') %}
                <div class="card-panel teal lighten-5 flow-text col s12 m6 offset-m3 center-align message">
                    {{ message }}
                </div>
            {% endfor %}

            {#message errors#}
            {% for message in app.session.flashBag.get('errors') %}
                <div class="card-panel red lighten-2 flow-text col s12 m6 offset-m3 center-align message">
                    {{ message }}
                </div>
            {% endfor %}
        </div>

        <div class="row">
            <form id="add-new-event" class="col s12" method="post" action="{{ path('form_forge_new_mapping_event', {'publicKey': reason.publicKey}) }}">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('form_forge_new_mapping_event') }}">
                <div class="row">
                    <div class="input-field col s12 m6 offset-m3">
                        <input id="mapping-event" name ="event-name" type="text" required>
                        <label for="mapping-event">Nom d'événement <span class="req">*</span></label>
                    </div>

                    <div class="input-field col s12 m2">
                        <a onclick="$('#add-new-event').submit()" id="send-new-mapping-event" class="waves-effect waves-ligh btn-flat" disabled><i class="material-icons left">send</i></a>
                    </div>
                </div>
            </form>
            <form id="form-choice-event-name" class="col s12" method="post" action="{{ path('form_forge_choice_mapping_event',{'publicKey': reason.publicKey}) }}">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('form_forge_choice_mapping_event') }}">
                <div class="row">
                    <div class="input-field col s12 m6 offset-m3">
                        <ul class="collapsible">
                            <li>
                                <div class="collapsible-header">
                                    <i class="material-icons">event</i>
                                    Liste des événement
                                    <span class="badge">{{ events | length }} event</span>
                                </div>
                                <div class="collapsible-body">
                                    <div class="row">
                                        {% for event in events %}
                                            <div class="col s10">
                                                <label>
                                                    <input type="checkbox" name="event-{{ event.id }}" class="filled-in" value="{{ event.id }}"/>
                                                    <span>{{ event.name }}</span>
                                                </label>
                                            </div>
                                            <div class="col s2 center-align">
                                                <a href="{{ path('form_forge_remove_mapping_event',{'id': event.id, 'publicKey': reason.publicKey}) }}"><i class="material-icons">delete_forever</i></a>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </li>
                            <div class="row">
                                <div class="col s12">
                                    <div class="badge">
                                        <a onclick="$('#form-choice-event-name').submit()" id="btn-choice-event" class="waves-effect waves-ligh btn-flat right" disabled>send</a>
                                    </div>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    {{ parent() }}

    <script>
        $('#mapping-event').on('keydown mousedown mouseout click change', function () {
            $('#mapping-event').val()!=='' ? $('#send-new-mapping-event').attr('disabled', false ):$('#send-new-mapping-event').attr('disabled', true);
        });

        setTimeout(function (){
            $(".message").hide();
        }, 4000);

        // function confirmation() {
        $('input:checkbox').on('click change', function () {
            !$("input:checkbox").is(':checked') ? $('#btn-choice-event').attr('disabled', true) : $('#btn-choice-event').attr('disabled', false);
        });

    </script>

{% endblock %}