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

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

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

{% block content %}
    <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>

    </div>
{% endblock %}

{% block scripts_post_loaded %}
    <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 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,
                },
            },
        })

    </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');
            $(table).bootstrapTable(action, 'gm_material_ist');
            $(table).bootstrapTable(action, 'gm_external_service_ist');
            $(table).bootstrapTable(action, 'gm_billing_status_ist');
            $(table).bootstrapTable(action, 'gm_date_ist');

        });
    </script>


{% endblock %}