{% extends "baseAdmin.html.twig" %}

{% block title %}TecdesignAdminBundle:Process:create{% endblock %}

{% block body %}
    <div class="container">
        <!--First row-->
        <div class="row">
            <!-- Space -->
            <!--First column-->
            <div class="col-lg-4">
            </div>
            <!--./First column-->

            <!--Second column-->
            <div class="col-lg-4">
                <!-- Form: create order process -->
                <form method="post" action="{{ path('orderProcessCreate') }}">
                    <p class="h5 text-center mb-4">Auftragsablauf anlegen</p>
                    <br>

                    <div class="md-form">
                        <i class="fa fa-user prefix grey-text"></i>
                        <input type="text" id="inputStateName" class="form-control" name="name" required
                               oninvalid="this.setCustomValidity('Bitte geben Sie einen Namen für den Auftragsablauf ein!')"
                               oninput="setCustomValidity('')"
                               maxlength="255" autofocus>
                        <label for="inputStateName">Name des Auftragsablaufs</label>
                    </div>

                    <div class="form-group">
                        <i class="fa fa-exchange prefix grey-text"></i>
                        <label for="selectOrderState">Auftragstatus auswählen</label><br>
                        {% for orderState in orderStates %}
                            <input type="checkbox" name="addedOrderStates[]"
                                   value="{{ orderState.id }}"> {{ orderState.name }}<br/>
                        {% endfor %}

                        {#<select class="form-control" name="selectOrderState" id="selectOrderState">
                            {% for orderState in orderStates %}
                                <option value="{{ orderState.id }}">{{ orderState.name }}</option>
                            {% endfor %}
                        </select>

                        <a onclick="appendStatusChild();" id="addStateBtn" class="btn btn-grey">Status hinzufügen <i
                                    class="fa fa-plus-square ml-1"></i>
                        </a>

                        <label for="addedOrderStates">Hinzugefügte Auftragsstatus</label>
                        <select class="form-control" id="addedOrderStates" name="addedOrderStates[]" multiple>
                        </select>
                        #}
                    </div>

                    <div class="form-group">
                        <i class="fa fa-file-text-o prefix grey-text"></i>
                        <label for="inputHint">Hinweis</label>
                        <textarea id="inputHint" name="hint" class="form-control" cols="40" rows="5"
                                  style="height:auto;"></textarea>
                    </div>

                    <div class="text-center">
                        <button href="" class="btn btn-primary" type="submit">Auftragsablauf anlegen <i
                                    class="fa fa-plus-square ml-1"></i>
                        </button>

                        <a href="{{ path('orderProcessList') }}" class="btn btn-grey">Abbrechen <i
                                    class="fa fa-remove ml-1"></i>
                        </a>
                    </div>
                </form>
                <!-- Form: create order process -->
            </div>
            <!--./Second column-->

            <!-- Space -->
            <!--Third column-->
            <div class="col-lg-4">
            </div>
            <!--./Third column-->
        </div>
        <!--/.First row-->

        <!--Second row-->
        <div class="row">
            <!-- Space -->
            <!--First column-->
            <div class="col-lg-2">
            </div>
            <!--./First column-->

            <!--Second column-->
            <div class="col-lg-8">
                <br>
                <p><strong>Hinweis:</strong> Bitte beachten Sie, dass die Reihenfolge der Auftragszustände erst beim
                    erneuten Bearbeiten eines Ablaufs geändert werden können.</p>
            </div>
            <!--./Second column-->

            <!-- Space -->
            <!--Third column-->
            <div class="col-lg-2">
            </div>
            <!--./Third column-->
        </div>
        <!--/.Second row-->
    </div>

    <script type="application/javascript">
        function appendStatusChild() {
            $('select#addedOrderStates').append('<option value="' + $('select#selectOrderState option:selected').val() + '">' + $('select#selectOrderState option:selected').html() + "</option>");
        }


    </script>
{% endblock %}