{% extends 'base.html.twig' %}

{% block title %}Statistic analysis{% endblock %}

{% block content %}

    <header class="content__title">
        <h1>Statistic Analysis</h1>
    </header>

    <div class="row">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Anfragen</h4>
                    <h6 class="card-subtitle">Verteilung in Privatperson und Organisation</h6>

                    <div class="flot-chart" id="flot-pie-anfragen"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-anfragen"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Anfragen</h4>
                    <h6 class="card-subtitle">Art der Anfragen</h6>

                    <div class="flot-chart" id="flot-pie-art-der-anfragen"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-art-der-anfragen"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Beratung</h4>
                    <h6 class="card-subtitle">Erst- oder wiederholter Kontakt</h6>

                    <div class="flot-chart" id="flot-pie-erstkontakt"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-erstkontakt"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Location</h4>
                    <h6 class="card-subtitle">Umgebung generell</h6>

                    <div class="flot-chart" id="flot-pie-umgebung"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-umgebung"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Location</h4>
                    <h6 class="card-subtitle">Herkunftshintergrund</h6>

                    <div class="flot-chart" id="flot-pie-herkunftshintergrund"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-herkunftshintergrund"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Gesprächsdauer</h4>
                    <h6 class="card-subtitle">Gruppen</h6>

                    <div class="flot-chart" id="flot-pie-conversation"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-conversation"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Geschlecht</h4>
                    <h6 class="card-subtitle">Gruppen</h6>

                    <div class="flot-chart" id="flot-pie-gender"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-gender"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Kontakt</h4>
                    <h6 class="card-subtitle">betrifft</h6>

                    <div class="flot-chart" id="flot-pie-contact-concern"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-contact-concern"></div>
                </div>
            </div>
        </div>
{#        <div class="col-lg-4">#}
{#            <div class="card">#}
{#                <div class="card-body">#}
{#                    <h4 class="card-title">Gesprächsdauer</h4>#}
{#                    <h6 class="card-subtitle">Gruppen</h6>#}

{#                    <div class="flot-chart" id="flot-pie-conversation"></div>#}
{#                    <div class="flot-chart-legends flot-chart-legend--pie-conversation"></div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Location</h4>
                    <h6 class="card-subtitle">Starnberg</h6>

                    <div class="flot-chart" id="flot-pie-starnberg"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-starnberg"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Alter</h4>
                    <h6 class="card-subtitle">Gruppen</h6>

                    <div class="flot-chart" id="flot-pie-agegroups"></div>
                    <div class="flot-chart-legends flot-chart-legend--pie-agegroups"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Art der Beratungsanlässe</h4>
                    <h6 class="card-subtitle">Gesprächsgrund</h6>

                    <table class="table">
                        <thead class="thead-light">
                        <tr>
                            <th>Anliegen</th>
                            <th>Anzahl</th>
                        </tr>
                        </thead>
                        <tbody>

                        {% for label, amount in charts.privateCause %}
                            <tr>
                                <td>{{ label }}</td>
                                <td>{{ amount }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Leistung</h4>
                    <h6 class="card-subtitle"></h6>

                    <table class="table">
                        <thead class="thead-light">
                        <tr>
                            <th>Anliegen</th>
                            <th>Anzahl</th>
                        </tr>
                        </thead>
                        <tbody>

                        {% for label, amount in charts.privateService %}
                            <tr>
                                <td>{{ label }}</td>
                                <td>{{ amount }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Weitervermittlungen</h4>
                    <h6 class="card-subtitle"></h6>

                    <table class="table">
                        <thead class="thead-light">
                        <tr>
                            <th>Anliegen</th>
                            <th>Anzahl</th>
                        </tr>
                        </thead>
                        <tbody>

                        {% for label, amount in charts.privateAttendant %}
                            <tr>
                                <td>{{ label }}</td>
                                <td>{{ amount }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Anliegen von Organisationen</h4>
                    <h6 class="card-subtitle"></h6>

                    <table class="table">
                        <thead class="thead-light">
                        <tr>
                            <th>Anliegen</th>
                            <th>Anzahl</th>
                        </tr>
                        </thead>
                        <tbody>

                        {% for label, amount in charts.organizationConcernMap %}
                            <tr>
                                <td>{{ label }}</td>
                                <td>{{ amount }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    {#% include 'footer.html.twig' %#}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('resources/vendors/flot/jquery.flot.js') }}"></script>
    <script src="{{ asset('resources/vendors/flot/jquery.flot.pie.js') }}"></script>
    <script src="{{ asset('resources/vendors/flot/jquery.flot.resize.js') }}"></script>

    <script>
        $.plot('#flot-pie-anfragen', [
            {data: {{ charts.amountOfPrivateForms }}, color: 'rgba(255,255,255,0.25)', label: 'Privatpersonen ({{ charts.amountOfPrivateForms }})'},
            {data: {{ charts.amountOfOrganizationForms }}, color: '#fff', label: 'Organisationen ({{ charts.amountOfOrganizationForms }})'}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-anfragen',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

        $.plot('#flot-pie-art-der-anfragen', [
            {% for requestType, amount in charts.requestTypeData %}
                {data: {{ amount }}, label: '{{ requestType }} ({{ amount }})'},
            {% endfor %}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-art-der-anfragen',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

        $.plot('#flot-pie-erstkontakt', [
            {% for contactType, amount in charts.firstcontactData %}
            {data: {{ amount }}, label: '{{ contactType }} ({{ amount }})'},
            {% endfor %}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-erstkontakt',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

        $.plot('#flot-pie-umgebung', [
            {% for contactType, amount in charts.location %}
            {data: {{ amount }}, label: '{{ contactType }} ({{ amount }})'},
            {% endfor %}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-umgebung',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

        $.plot('#flot-pie-starnberg', [
            {% for contactType, amount in charts.starnberg %}
            {data: {{ amount }}, label: '{{ contactType }} ({{ amount }})'},
            {% endfor %}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-starnberg',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

        $.plot('#flot-pie-herkunftshintergrund', [
            {% for contactType, amount in charts.nationality %}
            {data: {{ amount }}, label: '{{ contactType }} ({{ amount }})'},
            {% endfor %}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-herkunftshintergrund',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

        $.plot('#flot-pie-agegroups', [
            {% for contactType, amount in charts.ageGroups %}
            {data: {{ amount }}, label: '{{ contactType }} ({{ amount }})'},
            {% endfor %}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-agegroups',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

        $.plot('#flot-pie-conversation', [
            {% for contactType, amount in charts.conversation %}
            {data: {{ amount }}, label: '{{ contactType }} ({{ amount }})'},
            {% endfor %}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-conversation',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

        $.plot('#flot-pie-gender', [
            {% for contactType, amount in charts.gender %}
            {data: {{ amount }}, label: '{{ contactType }} ({{ amount }})'},
            {% endfor %}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-gender',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

        $.plot('#flot-pie-contact-concern', [
            {% for concern, amount in charts.contactConcerns %}
            {data: {{ amount }}, label: '{{ concern }} ({{ amount }})'},
            {% endfor %}
        ], {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie-contact-concern',
                noColumns: 0,
                lineWidth: 0,
                labelBoxBorderColor: 'rgba(255,255,255,0)'
            }
        });

    </script>

{% endblock %}