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

{% block modal %}
    <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.links.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">Neues Geschäftsfeld hinzufügen</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 class="form-group">
                            <label for="label">Geschäftsfeld</label>
                            <input type="text" class="form-control" id="label" name="label">
                        </div>
                        <div>
                            <label for="responsible_staff_id">Projektleiter</label>
                            <select class="form-control" id="responsible_staff_id" name="responsible_staff_id" required>
                                <option></option>
                                {% for project_manager in project_managers %}
                                    <option value="{{ project_manager.staff_id }}">{{ project_manager.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="productive_hours">Gesamtprodutivstunden / Jahr</label>
                                    <input type="text" class="form-control" id="productive_hours" name="productive_hours" required>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="gross_margin_per_hour">RE / Stunde in €</label>
                                    <input type="text" class="form-control" id="gross_margin_per_hour" name="gross_margin_per_hour" required>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label for="effective_from">Gültig ab
                                <input type="date" name="effective_from" id="effective_from" required>
                            </label>
                        </div>
                    </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>
    <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.links.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">Geschäftsfeld bearbeiten</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 class="form-group">
                            <label for="label_pre_filled">Geschäftsfeld</label>
                            <input type="text" class="form-control" id="label_pre_filled" name="label_pre_filled">
                        </div>
                        <div>
                            <label for="responsible_staff_id_pre_filled">Projektleiter</label>
                            <select class="form-control" id="responsible_staff_id_pre_filled"
                                    name="responsible_staff_id_pre_filled" required>
                                <option></option>
                                {% for project_manager in project_managers %}
                                    <option value="{{ project_manager.staff_id }}">{{ project_manager.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="productive_hours_pre_filled">Gesamtprodutivstunden / Jahr</label>
                                    <input type="text" class="form-control" id="productive_hours_pre_filled"
                                           name="productive_hours_pre_filled" required>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="gross_margin_per_hour_pre_filled">RE / Stunde in €</label>
                                    <input type="text" class="form-control" id="gross_margin_per_hour_pre_filled"
                                           name="gross_margin_per_hour_pre_filled" required>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label for="effective_from_pre_filled">Gültig ab
                                <input type="date" name="effective_from_pre_filled" id="effective_from_pre_filled" required>
                            </label>
                        </div>
                        <input type="hidden" name="object_id_pre_filled" id="object_id_pre_filled">
                    </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>
    <div class="modal fade" id="delete_measure" tabindex="-1" role="dialog" aria-labelledby="delete_measure__label" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="delete_measure__label">Maßnahme 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 %}
    <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">Geschäftsfelder</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="margin-left: 8px;">
                <thead>
                    <tr>
                        {% for header in table.header %}
                            <th class="mdl-data-table__cell--non-numeric">{{ header }}</th>
                        {% endfor %}
                        <th class="mdl-data-table__cell--non-numeric">Aktionen</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in table.body %}
                        {% set index = loop.index %}
                        <tr>
                            {% for td in row.data %}
                                <td class="mdl-data-table__cell--non-numeric">{{ td }}</td>
                            {% endfor %}
                            <td class="mdl-data-table__cell--non-numeric">
                                {% if table.actions is defined %}
                                    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect button_edit"
                                            id="{{ table.actions.edit.id }}-{{ index }}"
                                            data-id="{{ row.metadata.id }}"
                                            data-responsible_id="{{ row.metadata.responsible_id }}"
                                            {% for key, td in row.data %}
                                                data-row-{{ key }}="{{ td }}"
                                            {% endfor %}
                                            data-toggle="modal" data-target="#edit_object" data-edit-button>
                                        <i class="material-icons" data-toggle="modal">
                                            {{ table.actions.edit.icon }}
                                        </i>
                                    </button>
                                    <div class="mdl-tooltip" data-mdl-for="{{ table.actions.edit.id }}-{{ index }}">
                                        {{ table.actions.edit.tooltip }}
                                    </div>
                                    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect button_measure_delete"
                                            id="{{ table.actions.delete.id }}-{{ index }}"
                                            data-id="{{ row.metadata.id }}"
                                            data-toggle="modal" data-target="#delete_measure" data-action-button>
                                        <i class="material-icons" data-toggle="modal">
                                            {{ table.actions.delete.icon }}
                                        </i>
                                    </button>
                                    <div class="mdl-tooltip" data-mdl-for="{{ table.actions.delete.id }}-{{ index }}">
                                        {{ table.actions.delete.tooltip }}
                                    </div>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ back_link }}">Zurück</a>
        </div>
    </div>
{% endblock %}

{% block scripts_post_loaded %}
    <script src="{{ asset('/assets/js/tool_box.js') }}"></script>
    {# Script, um die ID des zu löschenden Projektes zu hinterlegen #}
    <script>
        let deleteLink = '{{ metadata.links.delete }}';
        let link = $('#delete_link');
        $('[data-action-button]').each(function() {
            $(this).click(function(){
                $(link).attr('href', deleteLink + $(this).data('id'));
            });
        });
    </script>

    <script>
        $('[data-edit-button]').each(function() {
            $(this).click(function(){

                $('#object_id_pre_filled').val($(this).data('id'));
                $('#label_pre_filled').val($(this).data('row-label'));
                $('#responsible_staff_id_pre_filled').val($(this).data('responsible_id'));
                $('#productive_hours_pre_filled').val($(this).data('row-productive_hours'));
                $('#gross_margin_per_hour_pre_filled').val($(this).data('row-gross_margin_per_hour'));
                $('#effective_from_pre_filled').val(formatDate($(this).data('row-effective_from')));

            });
        });
    </script>
{% endblock %}