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

{% block scripts_pre_loaded %}
    <script src="{{ asset('/assets/libs/bootstrap-table/bootstrap-table.min.js') }}"></script>
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ asset('/assets/css/pages/project_manager__details.css') }}">
{% endblock %}

{% block modal %}
    {# Anzeigen der Statistiken#}
    <div class="modal fade" id="show_stats" tabindex="-1" role="dialog" aria-labelledby="add_object__label"
         aria-hidden="true" style="color: rgba(0,0,0,.54);">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="add_object__label">Statistiken</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>
                        <h5>Fertigstellungsgrad</h5>
                        <p><b>Fertigstellungsgrad:</b> {{ stats.completion }} %</p>
                    </div>
                    <div class="card__container">
                        <h5>Halbfertige Arbeiten</h5>
                        <p><b>Abrechungsstand 1 (BWA):</b> {{ stats.bwa }} €<br/>
                            <b>Halbfertige Arbeiten:</b> {{ stats.half_finished }} €
                        </p>
                    </div>
                    <div class="card__container">
                        <h5>Abrechnungspotenzial</h5>
                        <p><b>Abrechnungsstand 2 (alle):</b> {{ stats.all }} €<br/>
                            <b>Abrechnungspotenzial:</b> {{ stats.potential }} €
                        </p>
                    </div>
                    <div class="card__container">
                        <h5>Gewinn / Verlust</h5>
                        <p>
                            <b>je Stunde (Jahresplanung):</b> {{ stats.win_per_hour_ba }} €<br/>
                            <b>Gesamt (Jahresplanung:)</b> {{ stats.win_overall_ba }} €<br/>
                            <b>je Stunde (Preiskalkulation):</b> {{ stats.win_per_hour_strat }} €<br/>
                            <b>Gesamt (Preiskalkulation):</b> {{ stats.win_overall_strat }} €
                        </p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    {% include '@commons/basics/drop_down.html.twig' %}
    {% if metadata.project_selected %}
        <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col-desktop mdl-grid"
             id="controlling_area" style="width: 1300px; margin-top: 70px;">
            <div class="mdl-card__title mdl-card--expand">
                <h2 class="mdl-card__title-text">Steuerung</h2>
            </div>
            <div class="mdl-card__supporting-text">
                <div class="keep-open btn-group" style="margin-bottom: 15px;">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
                        Anzeige
                    </button>
                    <div class="dropdown-menu dropdown-menu-left">
                        <label class="dropdown-item">
                            <input id="table_select_0" type="checkbox" data-field="0" value="0" checked="checked">
                            <span>Arbeitskalkulation - mit Ereignissen</span>
                        </label>
                        <label class="dropdown-item">
                            <input id="table_select_1" type="checkbox" data-field="1" value="1" checked="checked">
                            <span>Maßnahmen / Optimierungen /etc.</span>
                        </label>
                    </div>
                </div>
                <div class="table_list--order-horizontal">
                    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                        <thead>
                        <tr>
                            <th class="mdl-data-table__cell--non-numeric" id="price_calculation__th">
                                Preiskalkulation
                                <div id="price_table_info" class="icon material-icons" style="font-size: 14px;">info
                                </div>
                                <div class="mdl-tooltip" for="price_table_info">
                                    Eingaben des Kalkulators
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="price_calculation__price" value="{{ pricecalculation.order_volume }}">
                                    <label class="mdl-textfield__label" for="price_calculation__price">Auftragsvolumen
                                        in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="price_calculation__material" value="{{ pricecalculation.material }}">
                                    <label class="mdl-textfield__label" for="price_calculation__material">Material in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="price_calculation__external_service"
                                           value="{{ pricecalculation.external_service }}">
                                    <label class="mdl-textfield__label" for="price_calculation__external_service">Fremdleistungen
                                        in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="price_calculation__gross_profit"
                                           value="{{ pricecalculation.gross_profit }}">
                                    <label class="mdl-textfield__label" for="price_calculation__gross_profit">Rohertrag
                                        gesamt in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="price_calculation__profit_per_hour"
                                           value="{{ pricecalculation.gross_per_hour }}">
                                    <label class="mdl-textfield__label" for="price_calculation__profit_per_hour">Rohertrag
                                        / Stunde in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="price_calculation__hours" value="{{ pricecalculation.productive }}">
                                    <label class="mdl-textfield__label" for="price_calculation__hours">Stunden in
                                        h</label>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"
                           id="working_calculation_with_events_table">
                        <thead>
                        <tr>
                            <th class="mdl-data-table__cell--non-numeric detail_th">
                                Arbeitskalkulation<br>-mit Ereignissen-
                                <div id="event_calc_table_info" class="icon material-icons" style="font-size: 14px;">
                                    info
                                </div>
                                <div class="mdl-tooltip" for="event_calc_table_info">
                                    Preiskalkulation inkl. der Ereignisse
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="pricecalculation_with_events__price"
                                           value="{{ pricecalculation_with_events.order_volume }}">
                                    <label class="mdl-textfield__label" for="pricecalculation_with_events__price">Auftragsvolumen
                                        in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="pricecalculation_with_events__material"
                                           value="{{ pricecalculation_with_events.material }}">
                                    <label class="mdl-textfield__label" for="pricecalculation_with_events__material">Material
                                        in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="pricecalculation_with_events__external_service"
                                           value="{{ pricecalculation_with_events.external_service }}">
                                    <label class="mdl-textfield__label"
                                           for="pricecalculation_with_events__external_service">Fremdleistungen in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="pricecalculation_with_events__gross_profit"
                                           value="{{ pricecalculation_with_events.gross_profit }}">
                                    <label class="mdl-textfield__label"
                                           for="pricecalculation_with_events__gross_profit">Rohertrag gesamt in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="pricecalculation_with_events__profit_per_hour"
                                           value="{{ pricecalculation_with_events.gross_per_hour }}">
                                    <label class="mdl-textfield__label"
                                           for="pricecalculation_with_events__profit_per_hour">Rohertrag / Stunde in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="pricecalculation_with_events__hours"
                                           value="{{ pricecalculation_with_events.productive }}">
                                    <label class="mdl-textfield__label" for="pricecalculation_with_events__hours">Stunden
                                        in h</label>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" id="optimization_table">
                        <thead>
                        <tr>
                            <th class="mdl-data-table__cell--non-numeric detail_th">
                                Maßnahmen / <br/>Optimierungen / etc.
                                <div id="measures_table_info" class="icon material-icons" style="font-size: 14px;">
                                    info
                                </div>
                                <div class="mdl-tooltip" for="measures_table_info">
                                    Veränderungen durch <br/>die Maßnahmen<br/>isoliert betrachtet
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text" id="measures_price"
                                           value="{{ measures.order_volume }}">
                                    <label class="mdl-textfield__label" for="measures_price">Auftragsvolumen in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="measures_material" value="{{ measures.material }}">
                                    <label class="mdl-textfield__label" for="measures_material">Material in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="measures_external_service" value="{{ measures.external_service }}">
                                    <label class="mdl-textfield__label" for="measures_external_service">Fremdleistungen
                                        in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="measures_gross_profit" value="{{ measures.gross_profit }}">
                                    <label class="mdl-textfield__label" for="measures_gross_profit">Rohertrag gesamt in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="measures_profit_per_hour" value="{{ measures.gross_per_hour }}">
                                    <label class="mdl-textfield__label" for="measures_profit_per_hour">Rohertrag /
                                        Stunde in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text" id="measures_hours"
                                           value="{{ measures.productive }}">
                                    <label class="mdl-textfield__label" for="measures_hours">Stunden in h</label>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" id="working_calculation_table">
                        <thead>
                        <tr>
                            <th class="mdl-data-table__cell--non-numeric detail_th">Arbeitskalkulation<br>-aktueller
                                Stand-
                                <div id="working_calculation_table_info" class="icon material-icons"
                                     style="font-size: 14px;">info
                                </div>
                                <div class="mdl-tooltip" for="working_calculation_table_info">
                                    Veränderungen durch Ereignisse<br>und Maßnahmen
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="alternatives__potential" value="{{ working_calculation.order_volume }}">
                                    <label class="mdl-textfield__label" for="alternatives__potential">Auftragsvolumen in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="alternatives__material" value="{{ working_calculation.material }}">
                                    <label class="mdl-textfield__label" for="alternatives__material">Material in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="alternatives__external_service"
                                           value="{{ working_calculation.external_service }}">
                                    <label class="mdl-textfield__label" for="alternatives__external_service">Fremdleistungen
                                        in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="alternatives__gross_profit_change"
                                           value="{{ working_calculation.gross_profit }}">
                                    <label class="mdl-textfield__label" for="alternatives__gross_profit_change">Rohertrag
                                        gesamt in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="alternatives__profit_per_hour"
                                           value="{{ working_calculation.gross_per_hour }}">
                                    <label class="mdl-textfield__label" for="alternatives__profit_per_hour">Rohertrag /
                                        Stunde in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="alternatives__hours" value="{{ working_calculation.productive }}">
                                    <label class="mdl-textfield__label" for="alternatives__hours">Stunden in h</label>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                        <thead>
                        <tr>
                            <th class="mdl-data-table__cell--non-numeric detail_th">
                                Deltaermittlungen<br>(Aktualisierungen)
                                <div id="delta_table_info" class="icon material-icons" style="font-size: 14px;">info
                                </div>
                                <div class="mdl-tooltip" for="delta_table_info">
                                    Differenz zwischen<br/>aktueller Arbeitskalkulation<br/>und Preiskalkulation
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text" id="delta__price"
                                           value="{{ delta.order_volume }}">
                                    <label class="mdl-textfield__label" for="delta__price">Auftragsvolumen in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text" id="delta__material"
                                           value="{{ delta.material }}">
                                    <label class="mdl-textfield__label" for="delta__material">Material in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="delta__external_service" value="{{ delta.external_service }}">
                                    <label class="mdl-textfield__label" for="delta__external_service">Fremdleistungen in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="delta__gross_profit" value="{{ delta.gross_profit }}">
                                    <label class="mdl-textfield__label" for="delta__gross_profit">Rohertrag gesamt in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="delta__profit_per_hour" value="{{ delta.gross_per_hour }}">
                                    <label class="mdl-textfield__label" for="delta__profit_per_hour">Rohertrag / Stunde
                                        in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text" id="delta__hours"
                                           value="{{ delta.productive }}">
                                    <label class="mdl-textfield__label" for="delta__hours">Stunden in h</label>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>


                    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                        <thead>
                        <tr>
                            <th class="mdl-data-table__cell--non-numeric" style="padding: 5px 20px 8px 20px;">
                                <div style="font-size: 9px;">
                                    Bewertungsdatum: {{ accounting_date }}<br/>
                                </div>
                                Laufende<br>Nachkalkulation
                                <div id="post_calc_table_info" class="icon material-icons" style="font-size: 14px;">
                                    info
                                </div>
                                <div class="mdl-tooltip" for="post_calc_table_info">
                                    Bisher erfasste Ist-Kosten</br>und -stunden sowie<br/>errechnetes
                                    Auftragsvolumen<br/>
                                    mittels Fertigstellungsgrad
                                </div>
                                {% if threshold.exceeds %}
                                    <div id="post_table_info" class="icon material-icons"
                                         style="font-size: 14px; color: red;">info
                                    </div>
                                    <div class="mdl-tooltip" for="post_table_info">
                                        Werte übersteigen<br/>die SOLL-Werte
                                    </div>
                                {% endif %}
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_post__price" value="{{ running_post.order_volume }}">
                                    {% if threshold.values.running_post__price %}
                                        <label class="mdl-textfield__label label--red" for="running_post__price">Auftragsvolumen
                                            in €</label>
                                    {% else %}
                                        <label class="mdl-textfield__label" for="running_post__price">Auftragsvolumen in
                                            €</label>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_post__material" value="{{ running_post.material }}">
                                    {% if threshold.values.running_post__material %}
                                        <label class="mdl-textfield__label label--red" for="running_post__material">Material
                                            in €</label>
                                    {% else %}
                                        <label class="mdl-textfield__label" for="running_post__material">Material in
                                            €</label>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_post__external_service"
                                           value="{{ running_post.external_service }}">
                                    {% if threshold.values.running_post__external_service %}
                                        <label class="mdl-textfield__label label--red"
                                               for="running_post__external_service">Fremdleistungen in €</label>
                                    {% else %}
                                        <label class="mdl-textfield__label" for="running_post__external_service">Fremdleistungen
                                            in €</label>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_post__gross_profit" value="{{ running_post.gross_profit }}">
                                    <label class="mdl-textfield__label" for="running_post__gross_profit">Rohertrag
                                        gesamt in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_post__profit_per_hour" value="{{ running_post.gross_per_hour }}">
                                    <label class="mdl-textfield__label" for="running_post__profit_per_hour">Rohertrag /
                                        Stunde in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_post__hours" value="{{ running_post.productive }}">
                                    {% if threshold.values.running_post__hours %}
                                        <label class="mdl-textfield__label label--red" for="running_post__hours">Stunden
                                            in h</label>
                                    {% else %}
                                        <label class="mdl-textfield__label" for="running_post__hours">Stunden in
                                            h</label>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                        <thead>
                        <tr>
                            <th class="mdl-data-table__cell--non-numeric detail_th">
                                Offene<br/>Differenzen
                                <div id="running_delta_table_info" class="icon material-icons" style="font-size: 14px;">
                                    info
                                </div>
                                <div class="mdl-tooltip" for="running_delta_table_info">
                                    Differenz zwischen<br/>
                                    Nach- und Arbeitskalkulation
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_delta__price" value="{{ running_delta.order_volume }}">
                                    <label class="mdl-textfield__label" for="running_delta__price">Auftragsvolumen in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_delta__material" value="{{ running_delta.material }}">
                                    <label class="mdl-textfield__label" for="running_delta__material">Material in
                                        €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_delta__external_service"
                                           value="{{ running_delta.external_service }}">
                                    <label class="mdl-textfield__label" for="running_delta__external_service">Fremdleistungen
                                        in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_delta__gross_profit" value="{{ running_delta.gross_profit }}">
                                    <label class="mdl-textfield__label" for="running_delta__gross_profit">Rohertrag
                                        gesamt in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_delta__profit_per_hour"
                                           value="{{ running_delta.gross_per_hour }}">
                                    <label class="mdl-textfield__label" for="running_delta__profit_per_hour">Rohertrag /
                                        Stunde in €</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty textfield--max-width-150 textfield--padding-bottom-5">
                                    <input class="mdl-textfield__input input--disabled" type="text"
                                           id="running_delta__hours" value="{{ running_delta.productive }}">
                                    <label class="mdl-textfield__label" for="running_delta__hours">Stunden in h</label>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block scripts_post_loaded %}
    <script src="{{ asset('/assets/js/drop_down_projects.js') }}"></script>
    <script src="{{ asset('/assets/js/tool_box.js') }}"></script>
    {# Blendet in der Übersicht einzelne Spalten ein bzw. aus #}
    <script>
        {# Für die Arbeitskalkulation - mit Ereignissen #}

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }

        function setCookie(cName, cDays) {
            let d = new Date();
            d.setTime(d.getTime() + (cDays * 24 * 60 * 60 * 1000));
            let expires = "expires=" + d.toUTCString();
            document.cookie = cName + "=" + true + ";" + expires + ";path=/";
        }

        function cookieExists(cookieName) {
            let cookie = getCookie(cookieName);
            console.log(cookie);
            return cookie != "";
        }

        function handleTableView(tableName, trigger, cookieName) {

            let table = $('#' + tableName);

            if (cookieExists(cookieName)) {
                $(table).hide();
                $('#' + trigger).prop("checked", false);
            }
            $('#' + trigger).change(function () {

                if ($(this).is(':checked')) {
                    $(table).show();
                    setCookie(cookieName, -1);

                } else {
                    $(table).hide();
                    document.cookie = cookieName + '=true;path=/;';
                    setCookie(cookieName, 7);
                }

            });
        }

        handleTableView(
            'working_calculation_with_events_table',
            'table_select_0',
            'steuerung__ak_ereignise_hide'
        );

        handleTableView(
            'optimization_table',
            'table_select_1',
            'steuerung__optimization'
        );

    </script>
{% endblock %}