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

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

{% block body %}
    <div class="container">
        <!--First row-->
        <div class="row">

            <div class="col-lg-12">
                <!-- Mögliche Hinweismeldungen anzeigen -->
                {% if app.session.flashbag.peekAll|length > 0 %}
                    {% for type, messages in app.session.flashbag.all %}
                        {% for message in messages %}
                            <div class="alert alert-{{ type ? type : '' }}">
                                <p>{{ message|trans({}, domain|default('messages')) }}</p>
                            </div>
                        {% endfor %}
                    {% endfor %}
                {% endif %}
            </div>

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

            <!--Second column-->
            <div class="col-lg-8">
                <!-- Form: edit order process -->
                <form method="post" action="{{ path('orderProcessEdit', {'id': sequence.id}) }}">
                    <p class="h5 text-center mb-4">Auftragsablauf "{{ sequence.name }}" bearbeiten</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" value="{{ sequence.name }}" autofocus>
                        <label for="inputStateName">Name des Auftragsablaufs</label>
                    </div>


                    <table id="sortable" class="table table-striped table-bordered">
                        <thead class="blue-grey lighten-4">
                        <tr>
                            <th><h6><strong>#</strong></h6></th>
                            <th><h6><strong>Aktiv</strong></h6></th>
                            <th><h6><strong>Statusname</strong></h6></th>
                            <th><h6><strong>Statusalias (wird bei Kunden angezeigt)</strong></h6></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for orderState in orderStates %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td><input type="checkbox" name="addedOrderStates[]"
                                           value="{{ orderState.id }}" {% if  sequence.checkStatusLink(orderState.id) %}
                                        checked="checked"{% endif %}></td>
                                <td>{{ orderState.name }}</td>
                                <td><input type="text" name="orderStateAlias_{{ orderState.id }}"
                                           value="{{ sequence.aliasForState(orderState.id) }}"></td>
                            </tr>
                        {% else %}
                            <tr>
                                <td>Keine Einträge vorhanden.</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <br>


                    {#<div class="form-group">
                        <i class="fa fa-exchange prefix grey-text"></i>
                        <label for="selectOrderState">Auftragstatus auswählen</label><br>

                        <ol id="sortable">
                            {% for orderState in orderStates %}
                                <li><input type="checkbox" name="addedOrderStates[]"
                                           value="{{ orderState.id }}" {% if  sequence.checkStatusLink(orderState.id) %}
                                        checked="checked"{% endif %}> {{ orderState.name }}</li>
                            {% endfor %}
                        </ol>#}

                    {#<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="md-form">
                        <i class="fa fa-tag prefix grey-text"></i>
                        <input type="text" id="inputApiAlias" class="form-control" name="apiAlias"
                               maxlength="255" value="{{ sequence.apiAlias }}">
                        <label for="inputApiAlias">API-Schlüssel (Alias für Zuordnung)</label>
                    </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;">{{ sequence.hint }}</textarea>
                    </div>

                    <div class="text-center">
                        <button href="" class="btn btn-primary" type="submit">Änderungen speichern <i
                                    class="fa fa-check-square ml-1"></i>
                        </button>

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

            <!-- Space -->
            <!--Third column-->
            <div class="col-lg-2">
            </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> Zum Ändern der Reihenfolge ziehen Sie bitte den entsprechenden Eintrag mit
                    der
                    Maus an die gewünschte Position. Bitte beachten Sie, dass der Auftragsstatusalias den Kunden
                    anstelle des
                    richtigen Auftragsstatustextes angezeigt wird.</p>
            </div>
            <!--./Second column-->

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

    <script>
        $(function () {
            $("#sortable tbody").sortable();
            $("#sortable tbody").disableSelection();
        });
    </script>

{% endblock %}