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

{% block modal %}
    <div class="modal fade" id="add_submission_project" tabindex="-1" role="dialog"
         aria-labelledby="add_submission_project__label" aria-hidden="true">
        <form name="add_submission_project__form" action="{{ metadata.links.add_submission_project }}" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="add_submission_project__label">Neues Submissions-Projekt 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">
                        <input type="text" class="form-control" name="label" placeholder="Projektname">
                    </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_submission_project" tabindex="-1" role="dialog"
         aria-labelledby="edit_submission_project__label" aria-hidden="true">
        <form name="edit_submission_project__form" action="{{ metadata.links.edit_submission_project }}" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="edit_submission_project__label">Submissions-Projekt 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">
                        <input type="text" class="form-control" name="label" placeholder="Projektname"
                               value="{{ metadata.project_name }}" required>
                    </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_submission_project" tabindex="-1" role="dialog"
         aria-labelledby="delete_submission_project__label" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="delete_submission_project__label">Submissions-Projekt 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>
                        Das Projekt und alle damit verbundenen Submissionen werden entfernt. Der 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 href="{{ metadata.links.delete_submission_project }}">
                        <button type="button" class="btn btn-primary">Löschen</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="add_submission" tabindex="-1" role="dialog"
         aria-labelledby="add_submission__label" aria-hidden="true">
        <form name="edit_submission_project__form" action="{{ metadata.links.add_submission }}" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="add_submission__label">Neue Submission 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="rank">Rang *</label>
                            <input type="number" class="form-control" name="rank" id="rank" required>
                        </div>
                        <div class="form-group">
                            <label for="company_name">Unternehmen *</label>
                            <input type="text" class="form-control" name="company_name" id="company_name" required>
                        </div>
                        <div class="form-group">
                            <label for="amount">Angebot in € *</label>
                            <input type="number" class="form-control" name="amount" id="amount" required>
                        </div>
                        <div class="form-group">
                            <div class="form-check">
                                {% if stats.submission_id != 0 %}
                                    <input class="form-check-input" type="checkbox" id="is_from_company" name="is_from_company" disabled>
                                {% else %}
                                    <input class="form-check-input" type="checkbox" id="is_from_company" name="is_from_company">
                                {% endif %}
                                <label class="form-check-label" for="is_from_company">
                                    Eigenes Angebot
                                </label>
                            </div>
                            <div class="col">
                                <div id="is_from_company__info" class="icon material-icons" style="color: #757575;">info</div>
                                <div class="mdl-tooltip" data-mdl-for="is_from_company__info">
                                    Je Projekt kann nur ein Angebot markiert werden
                                </div>
                            </div>
                        </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_submission" tabindex="-1" role="dialog"
         aria-labelledby="edit_submission__label" aria-hidden="true">
        <form name="edit_submission_project__form" id="edit_submission_project__form" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="edit_submission__label">Submission 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="rank">Rang *</label>
                            <input type="number" class="form-control" name="rank" id="edit_submission_rank" required>
                        </div>
                        <div class="form-group">
                            <label for="company_name">Unternehmen *</label>
                            <input type="text" class="form-control" name="company_name"
                                   id="edit_submission_company_name" required>
                        </div>
                        <div class="form-group">
                            <label for="amount">Angebot in € *</label>
                            <input type="text" class="form-control" name="amount" id="edit_submission_amount" required>
                        </div>
                        <div class="form-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="edit_submission_is_from_company"
                                       name="is_from_company">
                                <label class="form-check-label" for="is_from_company">
                                    Eigenes Angebot
                                </label>
                            </div>
                            <div class="col">
                                <div id="is_from_company__info" class="icon material-icons" style="color: #757575;">
                                    info
                                </div>
                                <div class="mdl-tooltip" data-mdl-for="is_from_company__info">
                                    Je Projekt kann nur ein Angebot markiert werden
                                </div>
                            </div>
                        </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="delete_submission" tabindex="-1" role="dialog"
         aria-labelledby="delete_submission__label" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="delete_submission__label">Submission 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' %}
    {% if metadata.project_selected %}
        <div>
            <div>
                <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--6-col-desktop mdl-grid" style="min-width: 450px;">
                    <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                        <p><b>Eigenes Angebot:</b> {{ stats.submission }} €</p>
                        <p><b>Differenz zum 1. Rang:</b> {{ stats.delta_1 }} €</p>
                        <p><b>Differenz zum 2. Rang:</b> {{ stats.delta_2 }} €</p>
                    </div>
                </div>
                <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                    <thead>
                    <tr>
                        {% for header in table.header %}
                            <th class="mdl-data-table__cell--non-numeric">{{ header }}</th>
                        {% endfor %}
                        {% if not is_admin %}
                            <th class="mdl-data-table__cell--non-numeric">Aktionen</th>
                        {% endif %}
                    </tr>
                    </thead>
                    <tbody>
                    {% for row in table.body %}
                        {% set index = loop.index %}
                        <tr>
                            <td class="mdl-data-table__cell--non-numeric">{{ row.data.rank }}</td>
                            <td class="mdl-data-table__cell--non-numeric">{{ row.data.company }}</td>
                            <td class="mdl-data-table__cell--non-numeric">{{ row.data.amount }}</td>
                            {% if not is_admin %}
                                <td class="mdl-data-table__cell--non-numeric">
                                    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect"
                                            id="{{ table.actions.edit.id }}-{{ index }}"
                                            data-id="{{ row.metadata }}"
                                            data-rank="{{ row.data.rank }}"
                                            data-company="{{ row.data.company }}"
                                            data-amount="{{ row.data.amount }}"
                                            data-toggle="modal" data-target="#edit_submission" 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"
                                            id="{{ table.actions.delete.id }}-{{ index }}"
                                            data-id="{{ row.metadata }}"
                                            data-toggle="modal" data-target="#delete_submission" data-delete-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>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}
{% endblock %}

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

        {# Script, um das Formular zum Editieren vorzufüllen#}
        let editLink = '{{ metadata.links.edit_submission }}';
        let editForm = $('#edit_submission_project__form');
        $('[data-edit-button]').each(function () {
            $(this).click(function () {

                $(editForm).attr('action', editLink + $(this).data('id'));
                $('#edit_submission_rank').val($(this).data('rank'));
                $('#edit_submission_company_name').val($(this).data('company'));
                $('#edit_submission_amount').val($(this).data('amount'));

                if ({{ stats.submission_id }} == 0){
                    $('#edit_submission_is_from_company').attr("disabled", false);
                }
            else
                {
                    $('#edit_submission_is_from_company').attr("disabled", $(this).data('id') != '{{ stats.submission_id }}');
                    $('#edit_submission_is_from_company').prop("checked", $(this).data('id') == '{{ stats.submission_id }}');
                }

            });
        });

    </script>
{% endblock %}