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

{% block scripts_pre_loaded %}
    <script src="{{ asset('/assets/js/calculation.js') }}"></script>
    <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 bodyclass %}projektdetails{% endblock %}

{% block modal %}
    {# Hinzufügen einer neuen Maßnahme #}
    <div class="modal fade" id="add_measure" tabindex="-1" role="dialog" aria-labelledby="add_measure__label" aria-hidden="true">
        <form name="add_measure__form" 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_measure__label">Neue Maßnahme 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>
                            <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 einer Maßnahme#}
    <div class="modal fade" id="edit_object" tabindex="-1" role="dialog" aria-labelledby="edit_measure__label" aria-hidden="true">
        <form name="edit_measure" 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_measure__label">Maßnahme 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>
                            <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" 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 einer Maßnahme#}
    <div class="modal fade" id="delete_object" 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>
    {# Hinzufügen eines Projektes #}
    <div class="modal fade" id="add_project" tabindex="-1" role="dialog" aria-labelledby="add_project_label"
         aria-hidden="true">
        <form name="add_project__form" action="{{ metadata.links.add_project }}" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="add_project__label">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">
                        <div class="form-group">
                            <label for="measure_comment">Projektname</label>
                            <input type="text" class="form-control" id="name" name="name"/>
                        </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>
    {# Entfernen eines Projektes #}
    <div class="modal fade" id="delete_project" tabindex="-1" role="dialog" aria-labelledby="delete_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_project__label">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>
                        Dabei werden alle Projekt abhängigen Inhalte, wie Maßnahmen und Ereignisse, ebenfalls entfernt.
                        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 href="{{ metadata.links.delete_project }}{{ project.id }}">
                        <button type="button" class="btn btn-primary">Löschen</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    {# Archivieren eines Projektes #}
    <div class="modal fade" id="archive_project" tabindex="-1" role="dialog" aria-labelledby="archive_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_project__label">Projekt archiveren?</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 wird im Anschluss nicht mehr in den Auswahllisten geführt.
                        Der Vorgang kann in der Liste der archivierten Projekte 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.archive_project }}{{ project.id }}">
                        <button type="button" class="btn btn-primary">Archivieren</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    {% include '@commons/basics/drop_down.html.twig' %}
    <div class="content_container" style="display: block;">
        {% include '@commons/warning.html.twig' %}
        <div style="display: flex;">
            <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--4-col-desktop mdl-grid"
                 style="margin-left: 0; min-width: 350px;">
                <div class="mdl-card__title mdl-card--expand">
                    <h2 class="mdl-card__title-text">Projektdetails</h2>
                </div>
                <form name="add_company" action="{{ metadata.links.update_project }}" method="post">
                    <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input" type="text" id="name" name="name"
                                   value="{{ project.name }}">
                            <label class="mdl-textfield__label" for="name">Projektname</label>
                        </div>
                        <div>
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <select class="mdl-textfield__input input--mandatory" id="staff_id" name="staff_id">
                                    <option></option>
                                    {% for project_manager in project_managers %}
                                        {% if project_manager.is_responsible %}
                                            <option value="{{ project_manager.id }}"
                                                    selected>{{ project_manager.label }}</option>
                                        {% else %}
                                            <option value="{{ project_manager.id }}">{{ project_manager.label }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                                <label class="mdl-textfield__label" for="staff_id">Projektleiter*</label>
                            </div>
                        </div>
                        <div>
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <select class="mdl-textfield__input input--mandatory" id="team_manager_id"
                                        name="team_manager_id">
                                    <option></option>
                                    {% for team_manager in team_managers %}
                                        {% if team_manager.is_responsible %}
                                            <option value="{{ team_manager .id }}"
                                                    selected>{{ team_manager.label }}</option>
                                        {% else %}
                                            <option value="{{ team_manager.id }}">{{ team_manager.label }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                                <label class="mdl-textfield__label" for="team_manager_id">Teamleiter*</label>
                            </div>
                        </div>
                        <div>
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <select class="mdl-textfield__input input--mandatory" id="status_id" name="status_id">
                                    <option></option>
                                    {% for status in project_status %}
                                        {% if status.is_selected and status.can_edit %}
                                            <option value="{{ status.id }}" selected>{{ status.label }}</option>
                                        {% elseif status.is_selected %}
                                            <option value="{{ status.id }}" selected>{{ status.label }}</option>
                                        {% elseif status.can_edit %}
                                            <option value="{{ status.id }}">{{ status.label }}</option>
                                        {% else %}
                                            <option value="{{ status.id }}">{{ status.label }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                                <label class="mdl-textfield__label" for="status_id">Projektstatus*</label>
                            </div>
                        </div>
                        <div>
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <select class="mdl-textfield__input" id="ba_id" name="ba_id">
                                    <option></option>
                                    {% for business_area in business_areas %}
                                        {% if business_area.is_checked %}
                                            <option value="{{ business_area.id }}"
                                                    selected>{{ business_area.label }}</option>
                                        {% else %}
                                            <option value="{{ business_area.id }}">{{ business_area.label }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                                <label class="mdl-textfield__label" for="ba_id">Geschäftsfeld*</label>
                            </div>
                        </div>
                        <input name="project_id" type="hidden" value="{{ project.id }}">
                        <p class="info_text">
                            * Pflichtfeld
                        </p>
                    </div>
                    <div class="mdl-card__actions mdl-card--border">
                        {% if not is_admin %}
                            {% if project_managers is empty %}
                                <button class="mdl-button mdl-js-button mdl-js-ripple-effect" type="submit" disabled="">
                                    Senden
                                </button>
                            {% else %}
                                <button class="mdl-button mdl-js-button mdl-js-ripple-effect" type="submit">Senden
                                </button>
                            {% endif %}
                        {% endif %}
                    </div>
                </form>
            </div>
            <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--4-col-desktop mdl-grid">
                <div class="mdl-card__title mdl-card--expand">
                    <h2 class="mdl-card__title-text">Vorkalkulation</h2>
                </div>
                <form name="add_company" action="{{ precalculation.link }}" method="post">
                    <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input" id="pre_price_overall" name="pre_price_overall"
                                   value="{{ precalculation.order_volume }}" type="text"
                                   pattern="-?([0-9]||\.[0-9]{3})*(,[0-9][0-9])?">
                            <label class="mdl-textfield__label" for="pre_price_overall">Auftragsvolumen in €</label>
                            <span class="mdl-textfield__error">Eingabe ist kein gültiger Wert</span>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input" id="pre_material" name="pre_material" value="{{ precalculation.material }}" type="text" pattern="-?([0-9]||\.[0-9]{3})*(,[0-9][0-9])?">
                            <label class="mdl-textfield__label" for="pre_material">Materialkosten in €</label>
                            <span class="mdl-textfield__error">Eingabe ist kein gültiger Wert</span>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input" id="pre_external" name="pre_external" value="{{ precalculation.external_service }}" type="text" pattern="-?([0-9]||\.[0-9]{3})*(,[0-9][0-9])?">
                            <label class="mdl-textfield__label" for="pre_external">Fremdleistungen in €</label>
                            <span class="mdl-textfield__error">Eingabe ist kein gültiger Wert</span>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input" id="pre_productive" name="pre_productive" value="{{ precalculation.productive }}" type="text" pattern="-?([0-9]||\.[0-9]{3})*(,[0-9]([0-9])?)?">
                            <label class="mdl-textfield__label" for="pre_productive">Produktivstunden</label>
                            <span class="mdl-textfield__error">Eingabe ist kein gültiger Wert</span>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input input--disabled" id="pre_gross_per_hour" name="pre_gross_per_hour" value="{{ precalculation.gross_per_hour }}" type="text">
                            <label class="mdl-textfield__label" for="pre_gross_per_hour">Rohertrag pro Stunde in €</label>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input input--disabled" id="pre_gross_overall" name="pre_gross_overall" value="{{ precalculation.gross_profit }}" type="text">
                            <label class="mdl-textfield__label" for="pre_gross_overall">Rohertrag Gesamt in €</label>
                        </div>
                        <input name="project_id" type="hidden" value="{{ project.id }}">
                    </div>
                    <div class="mdl-card__actions mdl-card--border">
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="button_pre_calculation" type="submit">Senden</button>
                    </div>
                </form>
            </div>
            <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--4-col-desktop mdl-grid">
                <div class="mdl-card__title mdl-card--expand">
                    <h2 class="mdl-card__title-text">Preiskalkulation</h2>
                </div>
                <form name="add_company" action="" method="post">
                    <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input input--disabled" id="price_calculation_price_overall" name="price_calculation_price_overall" value="{{ pricecalculation.order_volume }}" type="text">
                            <label class="mdl-textfield__label" for="price_calculation_price_overall">Auftragsvolumen in €</label>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input input--disabled" id="price_calculation_material" name="price_calculation_material" value="{{ pricecalculation.material }}" type="text">
                            <label class="mdl-textfield__label" for="price_calculation_material">Materialkosten in €</label>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input input--disabled" id="price_calculation_external" name="price_calculation_external" value="{{ pricecalculation.external_service }}" type="text">
                            <label class="mdl-textfield__label" for="price_calculation_external">Fremdleistungen in €</label>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input input--disabled" id="price_calculation_productive" name="price_calculation_productive" value="{{ pricecalculation.productive }}" type="text">
                            <label class="mdl-textfield__label" for="price_calculation_productive">Produktivstunden</label>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input input--disabled" id="price_calculation_gross_per_hour" name="price_calculation_gross_per_hour" value="{{ pricecalculation.gross_per_hour }}" type="text">
                            <label class="mdl-textfield__label" for="price_calculation_gross_per_hour">Rohertrag pro Stunde in €</label>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input input--disabled" id="price_calculation_gross_overall" name="price_calculation_gross_overall" value="{{ pricecalculation.gross_profit }}" type="text">
                            <label class="mdl-textfield__label" for="price_calculation_gross_overall">Rohertrag Gesamt in €</label>
                        </div>
                        <input name="project_id" type="hidden" value="{{ project.id }}">
                    </div>
                    <div class="mdl-card__actions mdl-card--border">
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" type="submit" style="visibility: hidden">Senden</button>
                    </div>
                </form>
            </div>
        </div>
        <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">Maßnahmen</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.role_status }}"
                        data-side-pagination="server"
                        data-locale="de-DE"
                        data-pagination="true">
                    <thead>
                    <tr>
                        <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>
                        {% 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>
        let project_status = {{ project.status }};

        if (project_status !== 1) {
            $('#button_pre_calculation').prop("disabled", true);
        }

        if (project_status !== 2) {
            $('.button_edit_entry').prop("disabled", true);
            $('.button_delete_entry').prop("disabled", true);

            $('.link_edit_entry').click(function(e) {
                e.preventDefault();
            });
        }

        if(project_status !== 1 && project_status !== 2) {
            $('#project_status_notification').show();
        }

        prefillEditEventMeasure();

    </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.links.delete }}');
    </script>
{% endblock %}