{% extends '@commons/default.html.twig' %}

{% block scripts_pre_loaded %}
    <script src="{{ asset('/assets/libs/bootstrap-table/bootstrap-table.min.js') }}"></script>
    <script>
        let reason_customer = {{ reason.customer|json_encode|raw }};
        let reason_supplier = {{ reason.supplier|json_encode|raw }};
    </script>
{% endblock %}

{% block modal %}
    {#Hinzufügen eines neuen Objektes#}
    <div class="modal fade" id="add_object" tabindex="-1" role="dialog" aria-labelledby="add_object__label" aria-hidden="true">
        <form name="add_object" action="{{ metadata.link.add }}" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="add_object__label">{{ action_title.add }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div>
                            <label for="type_select">Art*</label>
                            <select class="form-control" id="type_select" name="type_select" required>

                                    {% if role != 3 %}
                                        <option value="1">Ereignis</option>
                                        <option value="2">Maßnahme</option>
                                    {% endif %}
                                    <option value="3" selected>Vorschlag</option>

                            </select>
                        </div>
                        <div>
                            <label for="initiator_select">Treiber*</label>
                            <select class="form-control" id="initiator_select" name="initiator_select" required>
                                <option></option>
                                {% for initiator_id, initiator_label in initiator %}
                                    <option value="{{ initiator_id }}">{{ initiator_label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label for="reason_select">Grund*</label>
                            <select class="form-control" id="reason_select" name="reason_select" required>
                                <option></option>
                            </select>
                        </div>
                        <div class="form-row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="productive_hours">+/- Stunden in h</label>
                                    <input type="text" class="form-control" id="productive_hours"
                                           name="productive_hours" placeholder="+/- Stunden in h">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="material">+/- Material in €</label>
                                    <input type="text" class="form-control" id="material" name="material"
                                           placeholder="+/- Material in €">
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="external">+/- Fremdleistungen in €</label>
                                    <input type="text" class="form-control" id="external"
                                           name="external" placeholder="+/- Fremdleistungen in €">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="order_volume ">+/- Auftragsvolumen in €</label>
                                    <input type="text" class="form-control" id="order_volume" name="order_volume"
                                           placeholder="+/- Auftragsvolumen in €">
                                </div>
                            </div>
                        </div>
                        <div>
                            <label for="date">Datum*
                                <input type="date" name="date" id="date" max="{{ date_limit }}" required>
                            </label>
                        </div>
                        <div class="form-group">
                            <label for="comment">Bemerkung</label>
                            <textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
                        </div>
                        <input type="hidden" name="project_id" value="{{ metadata.project_id }}">
                        <input type="hidden" name="status" value="{{ metadata.status }}">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-primary">Speichern</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    {#Bearbeiten eines bestehenden Objektes#}
    <div class="modal fade" id="edit_object" tabindex="-1" role="dialog" aria-labelledby="edit_object__label" aria-hidden="true">
        <form name="edit_object" action="{{ metadata.link.edit }}" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="edit_object__label_pre_filled">{{ action_title.edit }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div>
                            <label for="type_select_pre_filled">Art*</label>
                            <select class="form-control" id="type_select_pre_filled" name="type_select" required>

                                {% if role != 3 %}
                                    <option value="1">Ereignis</option>
                                    <option value="2">Maßnahme</option>
                                {% endif %}
                                <option value="3">Vorschlag</option>

                            </select>
                        </div>
                        <div>
                            <label for="initiator_select_pre_filled">Treiber*</label>
                            <select class="form-control" id="initiator_select_pre_filled" name="initiator_select_pre_filled" required>
                                <option></option>
                                {% for initiator_id, initiator_label in initiator %}
                                    <option value="{{ initiator_id }}">{{ initiator_label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label for="reason_select_pre_filled">Grund*</label>
                            <select class="form-control" id="reason_select_pre_filled" name="reason_select_pre_filled" required>
                                <option></option>
                            </select>
                        </div>
                        <div class="form-row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="productive_hours_pre_filled">+/- Stunden in h</label>
                                    <input type="text" class="form-control" id="productive_hours_pre_filled"
                                           name="productive_hours_pre_filled" placeholder="+/- Stunden in h">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="material_pre_filled">+/- Material in €</label>
                                    <input type="text" class="form-control" id="material_pre_filled" name="material_pre_filled"
                                           placeholder="+/- Material in €">
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="external_pre_filled">+/- Fremdleistungen in €</label>
                                    <input type="text" class="form-control" id="external_pre_filled"
                                           name="external_pre_filled" placeholder="+/- Fremdleistungen in €">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="order_volume_pre_filled">+/- Auftragsvolumen in €</label>
                                    <input type="text" class="form-control" id="order_volume_pre_filled" name="order_volume_pre_filled"
                                           placeholder="+/- Auftragsvolumen in €">
                                </div>
                            </div>
                        </div>
                        <div>
                            <label for="date_pre_filled">Datum*
                                <input type="date" name="date_pre_filled" id="date_pre_filled" max="{{ date_limit }}" required>
                            </label>
                        </div>
                        <div class="form-group">
                            <label for="comment_pre_filled">Bemerkung</label>
                            <textarea class="form-control" id="comment_pre_filled" name="comment_pre_filled" rows="3"></textarea>
                        </div>
                        <input type="hidden" name="object_id_pre_filled" id="object_id_pre_filled">
                        <input type="hidden" name="status_pre_filled" id="status_pre_filled" value="{{ metadata.status }}">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-primary">Speichern</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    {#Entfernen eines Objektes#}
    <div class="modal fade" id="delete_object" tabindex="-1" role="dialog" aria-labelledby="delete__label" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="delete__label">{{ object }} löschen?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Dieser Vorgang kann nicht rückgängig gemacht werden.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                    <a id="delete_link" href=""><button type="button" class="btn btn-primary">Löschen</button></a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    {% include '@commons/basics/drop_down.html.twig' %}

    <div class="content_container">
        <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col-desktop mdl-grid">
            <div class="mdl-card__title mdl-card--expand">
                <h2 class="mdl-card__title-text">{{ title }}</h2>
            </div>
            <div class="mdl-card__supporting-text">
                <table
                        id="table"
                        data-toggle="table"
                        data-url="/api/get_list/{{ metadata.type }}/{{ metadata.project_id }}/{{ metadata.status }}"
                        data-side-pagination="server"
                        data-locale="de-DE"
                        data-pagination="true">
                    <thead>
                    <tr>
                        <th data-field="type">Art</th>
                        <th data-field="date">Datum</th>
                        <th data-field="initiator">Treiber</th>
                        <th data-field="reason">Grund</th>
                        <th data-field="hours">+/- Stunden</th>
                        <th data-field="material">+/- Material</th>
                        <th data-field="external_service">+/- Fremdl.</th>
                        <th data-field="order_volume">+/- Auftragsvol.</th>
                        <th data-field="comment">Bemerkungen</th>
                        <th data-field="effect">RE / h</th>
                        <th data-field="status">angelegt von</th>
                        {% if not is_admin %}
                            <th data-field="actions">Aktionen</th>
                        {% endif %}
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts_post_loaded %}
    <script src="{{ asset('/assets/js/drop_down.js') }}"></script>
    <script src="{{ asset('/assets/js/drop_down_pre_filled.js') }}"></script>
    <script src="{{ asset('/assets/js/drop_down_projects.js') }}"></script>
    <script src="{{ asset('/assets/js/tool_box.js') }}"></script>
    <script src="{{ asset('/assets/libs/bootstrap-table/locale/bootstrap-table-de-DE.js') }}"></script>
    {# Script, um die ID des zu löschenden Projektes zu hinterlegen #}
    <script>
        {# Script, um die Event Listener nach dem Laden der Tabelle zu aktivieren #}
        addTableEventListener('{{ metadata.link.delete }}');
    </script>
{% endblock %}