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

{% block styles %}
    <link rel="stylesheet"
          href="{{ asset('/assets/libs/bootstrap_extension/fixed-columns/bootstrap-table-fixed-columns.min.css') }}">
{% endblock %}

{% block scripts_pre_loaded %}
    {% include '@project/project_overview_calculation.html.twig' %}
{% endblock %}

{% block content %}
        <div style="display: flex;">
            <div class="demo-charts mdl-color--white mdl-grid mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
                <div class="mdl-card__title mdl-card--expand">
                    <h2 class="mdl-card__title-text">Rohertrag pro Stunde</h2>
                </div>
                <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                    <p class="info_text">
                    <ul>
                        <li>
                            Rohertrag je Stunde aller Projekte im Status "Arbeitskalkulation"
                        </li>
                        <li>
                            Bei der Gesamtsumme werden auch archivierte Projekte einbezogen
                        </li>
                    </ul>
                    </p>
                    <div class="mdl-grid">
                        {% for ba in graph_structure.business_areas %}
                            <div class="mdl-cell mdl-cell--6-col">
                                <div class="dropdown_container">
                                    <div class="dropdown">
                                        <button class="btn btn-primary dropdown-toggle"
                                                id="drop_down_btn_{{ loop.index }}"
                                                type="button"
                                                data-toggle="dropdown">
                                            {{ ba.graph.dd_label }}
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" id="drop_down_list_{{ loop.index }}">
                                            <input class="dropdown-menu__input form-control"
                                                   id="project_selection_{{ loop.index }}" type="text"
                                                   placeholder="Filter...">
                                            {% for entry in ba.projects %}
                                                <li>
                                                    <a href="{{ entry.link }}">
                                                        {{ entry.label }}
                                                    </a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                                <div style="height: 300px">
                                    <canvas id="chart_{{ loop.index }}"></canvas>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    <div class="demo-charts mdl-color--white mdl-grid mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text">Projekte</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            <div class="keep-open btn-group">
                <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
                    Phasenauswahl
                    <span class="caret"></span>
                </button>
                <div class="dropdown-menu dropdown-menu-left">
                    <label class="dropdown-item">
                        <input id="phase_select_0" type="checkbox" data-field="0" value="0" checked="checked">
                        <span>Preiskalkulation</span>
                    </label>
                    <label class="dropdown-item">
                        <input id="phase_select_1" type="checkbox" data-field="1" value="1" checked="checked">
                        <span>Arbeitskalkulation</span>
                    </label>
                    <label class="dropdown-item">
                        <input id="phase_select_2" type="checkbox" data-field="2" value="2" checked="checked">
                        <span>Ist (laufende Nachkalkulation)</span>
                    </label>
                </div>
            </div>
            <div id="project_overview">
                <table
                        data-show-export="true"
                        data-toolbar="#toolbar"
                        data-toggle="table"
                        data-show-columns="true"
                        data-filter-control="true"
                        data-show-footer="true"
                        id="project_list"
                        data-fixed-columns="true"
                        data-fixed-number="1"
                        data-locale="de-DE"
                        data-pagination="true"
                        data-footer-style="footerStyle"
                        style="font-size: 11px;"
                >
                    <thead>
                    <tr>
                        <th data-field="project" data-sortable="true" data-filter-control="input"
                            data-footer-formatter="footer_total" rowspan="2" id="test_tmp">Projekt
                        </th>
                        <th data-field="business_area" data-sortable="true" data-filter-control="input"
                            data-footer-formatter="footer_none" rowspan="2">Geschäftsfeld
                        </th>
                        <th data-field="project_manager" data-sortable="true" data-filter-control="input"
                            data-footer-formatter="footer_none" rowspan="2">Projektleiter
                        </th>
                        <th data-field="project_maindata" data-sortable="true" data-filter-control="input"
                            data-footer-formatter="footer_none" rowspan="2" >Übergabegespräche<br>Arbeitsvorbereitung<br>Bauzeitenplan
                        </th>
                        <th data-field="soll" colspan="4">Preiskalkulation</th>
                        <th data-field="ak" colspan="5">Arbeitskalkulation</th>
                        <th data-field="ist" colspan="7">IST (laufende Nachkalkulation)</th>
                        <th data-field="hfa" colspan="2">HFA</th>
                        <th data-field="abrechnung" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_currency" rowspan="2">
                            Abrechnungs-<br/>potential
                        </th>
                        <th data-field="gewinn" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_currency" rowspan="2">
                            Gewinn / Verlust<br/>(zu Soll-AGF)
                        </th>
                    </tr>
                    <tr>
                        <th data-field="order_volume_soll" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_currency">
                            Auftrags-<br/>volumen (Soll)
                        </th>
                        <th data-field="gm_soll" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_currency">
                            Rohertrag<br/>(Soll)
                        </th>
                        <th data-field="hours_soll" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_hours">
                            Stunden<br/>(Soll)
                        </th>
                        <th data-field="gm_per_hour_soll" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_gross_profit_per_hour_price">
                            RE / h<br/>(Soll)
                        </th>
                        <th data-field="order_volume_ak" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_currency">
                            Gesamt-<br/>leistungen (AK)
                        </th>
                        <th data-field="gm_ak" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_currency">
                            Rohertrag<br/>(AK)
                        </th>
                        <th data-field="hours_ak" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_hours">
                            Stunden<br/>(AK)
                        </th>
                        <th data-field="gm_per_hour_ak" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_gross_profit_per_hour_working">
                            RE / h<br/>(AK)
                        </th>
                        <th data-field="gm_per_hour_delta_ist" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_gross_profit_delta">
                            RE / h<br/>Veränderung (AK)
                        </th>
                        <th data-field="gm_ist" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_currency">
                            Rohertrag<br/>(IST)
                        </th>
                        <th data-field="hours_ist" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_hours">
                            Stunden<br/>(IST)
                        </th>
                        <th data-field="gm_per_hour_ist" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_gross_profit_per_hour_post">
                            RE / h<br/>(IST)
                        </th>
                        <th data-field="gm_material_ist" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_material">
                            Material<br/>(IST)
                        </th>
                        <th data-field="gm_external_service_ist" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_external_service">
                            Fremdleistung<br/>(IST)
                        </th>
                        <th data-field="gm_billing_status_ist" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_none">
                            Abrechnungsstand<br/>(IST)
                        </th>
                        <th data-field="gm_date_ist" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_none">
                            Datum<br/>(IST)
                        </th>
                        <th data-field="completion_hfa" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_none">
                            Fertigstellungs-<br/>grad (HFA)
                        </th>
                        <th data-field="hfa_hfa" data-sortable="true" data-filter-control="input"
                            data-sorter="customSorter" data-footer-formatter="footer_sum_currency">
                            HFA<br/>(HFA)
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for row in project_table.body %}
                        <tr>
                            {% for td in row %}
                                <td class="{{ td.formatting }}"
                                    data-tableexport-msonumberformat="\@">{{ td.val | raw }}</td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
               href="{{ info.link.project_view }}">Zur Projektübersicht</a>
        </div>
    </div>
    <div class="demo-charts mdl-color--white mdl-grid mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text">Neueste Ereignisse</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            <table
                    id="table"
                    data-toggle="table"
                    data-url="/api/events_extended"
                    data-side-pagination="server"
                    data-locale="de-DE"
                    data-pagination="true">
                <thead>
                <tr>
                    <th data-field="date">Datum</th>
                    <th data-field="project">Projekt</th>
                    <th data-field="initiator">Auslöser</th>
                    <th data-field="order_volume">+/- Auftragsvolumen</th>
                    <th data-field="productive_hours">+/-Stunden</th>
                    <th data-field="material">+/-Material</th>
                    <th data-field="external_service">+/-Fremdleistungen</th>
                    <th data-field="comment">Erläuertung</th>
                    <th data-field="gross_margin">RE / h</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
{% endblock %}

{% block scripts_post_loaded %}
    <script src="{{ asset('/assets/libs/bootstrap_extension/filter-control/bootstrap-table-filter-control.min.js') }}"></script>
    <script src="{{ asset('/assets/libs/bootstrap_extension/fixed-columns/bootstrap-table-fixed-columns.min.js') }}"></script>
    <script src="{{ asset('/assets/libs/bootstrap-table/locale/bootstrap-table-de-DE.js') }}"></script>
    <script>
        $('#project_list').bootstrapTable({
            exportTypes: ['csv', 'xlsx'],
            exportOptions: {
                csvSeparator: ';',
                fileName: 'youco_auswertung',
                numbers: {
                    html: {
                        decimalMark: ',',
                        thousandsSeparator: '.'
                    },
                    output: false,
                },
            },
        });

        {# Dient dazu auch bei der Fußzeile der Tabelle die Einheiten nicht mit in den Value eintragen zu müssen, #}
        {# um so die Einheit nicht mit zu exportieren, da dies sonst in Excel als String formatiert wird #}
        function footerStyle(column) {
            return {
                abrechnung: {classes: 'project_overview__currency__footer'},
                gewinn: {classes: 'project_overview__currency__footer'},
                order_volume_soll: {classes: 'project_overview__currency__footer'},
                gm_soll: {classes: 'project_overview__currency__footer'},
                hours_soll: {classes: 'project_overview__hours__footer'},
                gm_per_hour_soll: {classes: 'project_overview__currency__footer'},
                order_volume_ak: {classes: 'project_overview__currency__footer'},
                gm_ak: {classes: 'project_overview__currency__footer'},
                hours_ak: {classes: 'project_overview__hours__footer'},
                gm_per_hour_ak: {classes: 'project_overview__currency__footer'},
                gm_ist: {classes: 'project_overview__currency__footer'},
                hours_ist: {classes: 'project_overview__hours__footer'},
                gm_per_hour_ist: {classes: 'project_overview__currency__footer'},
                gm_per_hour_delta_ist: {classes: 'project_overview__currency__footer'},
                hfa_hfa: {classes: 'project_overview__currency__footer'},
            }[column.field]
        }

    </script>
    <script>
        $(document).ready(function () {
            $(".dropdown-menu__input").on("keyup", function () {
                var value = $(this).val().toLowerCase();
                $(this).siblings().filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>

    <script>
        {% for ba in graph_structure.business_areas %}

        let ctx{{ loop.index }} = document.getElementById('chart_{{ loop.index }}').getContext('2d');
        let chart{{ loop.index }} = new Chart(ctx{{ loop.index }}, {
            type: 'line',
            data: {
                labels: JSON.parse('{{ graph_structure.months | raw }}'),
                datasets: [
                    {
                        label: 'Plan-Werte',
                        borderColor: 'rgb(105, 105, 105)',
                        data: JSON.parse('{{ ba.graph.history | raw }}'),
                        fill: false,
                        lineTension: 0
                    },
                    {
                        label: 'IST-Werte',
                        borderColor: 'rgb(0, 28, 61)',
                        data: JSON.parse('{{ ba.graph.stats | raw }}'),
                        fill: false,
                        lineTension: 0
                    },
                    {
                        label: 'Preiskalkulation',
                        borderColor: 'rgb(77,211,216)',
                        data: JSON.parse('{{ ba.graph.pricecalculation_value | raw }}'),
                        fill: false,
                        lineTension: 0
                    }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: '{{ ba.graph.label }}'
                },
                responsive: true,
                maintainAspectRatio: false
            },
            showColumns: true,
        });

        {% endfor %}
    </script>

    <script>
        $('#project_overview tr:last').css("font-weight", "bold")
    </script>


    {# Blendet in der Tabelle gesamte Phasen ein / aus #}
    <script>
        {# Für die strategische Kalkulation #}
        $('#phase_select_0').change(function () {

            let table = $('#project_list');
            let action = '';

            if($(this).is(':checked')) {

                action = 'showColumn';

            } else {
                action = 'hideColumn';
            }

            $(table).bootstrapTable(action, 'order_volume_soll');
            $(table).bootstrapTable(action, 'gm_soll');
            $(table).bootstrapTable(action, 'hours_soll');
            $(table).bootstrapTable(action, 'gm_per_hour_soll');

        });

        {# Für die Arbeitskalkulation #}
        $( '#phase_select_1' ).change(function() {

            let table = $('#project_list');
            let action = '';
            let show = true;

            if($(this).is(':checked')) {

                action = 'showColumn';

            } else {
                action = 'hideColumn';
            }

            $(table).bootstrapTable(action, 'order_volume_ak');
            $(table).bootstrapTable(action, 'gm_ak');
            $(table).bootstrapTable(action, 'hours_ak');
            $(table).bootstrapTable(action, 'gm_per_hour_ak');

        });

        {# Für die Nachkalkulation #}
        $( '#phase_select_2' ).change(function() {

            let table = $('#project_list');
            let action = '';
            let show = true;

            if($(this).is(':checked')) {

                action = 'showColumn';

            } else {
                action = 'hideColumn';
            }

            $(table).bootstrapTable(action, 'gm_ist');
            $(table).bootstrapTable(action, 'hours_ist');
            $(table).bootstrapTable(action, 'gm_per_hour_ist');
            $(table).bootstrapTable(action, 'gm_per_hour_delta_ist');

        });

    </script>

    <script src="{{ asset('/assets/js/tool_box.js') }}"></script>
{% endblock %}