{#
    /**
     * This file is part of FacturaScripts
     * Copyright (C) 2017-2019 Carlos Garcia Gomez <carlos@facturascripts.com>
     *
     * This program is free software: you can redistribute it and/or modify
     * it under the terms of the GNU Lesser General Public License as
     * published by the Free Software Foundation, either version 3 of the
     * License, or (at your option) any later version.
     *
     * This program is distributed in the hope that it will be useful,
     * but WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
     * GNU Lesser General Public License for more details.
     *
     * You should have received a copy of the GNU Lesser General Public License
     * along with this program. If not, see http://www.gnu.org/licenses/.
     */
#}
{% extends "Master/MenuTemplate.html.twig" %}

{% block css %}
    {{ parent() }}
    <style>
        [data-toggle="collapse"] i:before{
            content: "\f139";
        }

        [data-toggle="collapse"].collapsed i:before{
            content: "\f13a";
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('node_modules/chart.js/dist/Chart.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ctx = document.getElementById('documentChart').getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',

                // The data for our dataset
                data: {
                    labels: [{{ fsc.getLabels() | raw }}],
                    datasets: [
                            {% for source in fsc.sources %}
                            {
                                label: '{{ i18n.trans(source.source) }}',
                                borderColor: 'rgb({{ source.color }})',
                                backgroundColor: 'rgb({{ source.color }})',
                                fill: false,
                                data: [{{ fsc.getDataTable(source.source) | raw }}]
                            },
                            {% endfor %}
                        ]
                    },

                    // Configuration options go here
                    options: {}
                });
            });
    </script>
{% endblock %}

{% block body %}
    {# Calculate texts according to language #}
    {% set refresh = i18n.trans('refresh-page') %}
    {% set defaultT, defaultF = i18n.trans('mark-as-homepage'), i18n.trans('marked-as-homepage') %}
    {% set title = i18n.trans(fsc.getPageData()['title']) | capitalize %}
    {% set dataSource, othersFilters = i18n.trans('data-source'), i18n.trans('others-filters') %}

    {# Macros Template Imports #}
    {% import 'Macro/Forms.html.twig' as forms %}

    {# Others working values #}
    {% set select_source_attr = {onchange: 'this.form.submit()'} %}
    {% set select_filter_attr = {onchange: 'this.form.submit()'} %}
    {% set input_date_attr = {class: 'form-control datepicker', onchange: 'this.form.submit()', style: 'font-size: 90%;'} %}

    {# Page Header #}
    <div class="container-fluid d-print-none">
        {{ parent() }}

        {# Header Row #}
        <div class="row">
            <div class="col-sm-7 col-6">
                <div class="btn-group d-xs-none">
                    <a class="btn btn-sm btn-outline-secondary" href="{{ fsc.url() }}" title="{{ i18n.trans('refresh') }}">
                        <i class="fas fa-redo" aria-hidden="true"></i>
                    </a>
                    {% if fsc.getPageData()['name'] == fsc.user.homepage %}
                        <a class="btn btn-sm btn-outline-secondary active" href="{{ fsc.url() }}?defaultPage=FALSE" title="{{ i18n.trans('marked-as-homepage') }}">
                            <i class="fas fa-bookmark" aria-hidden="true"></i>
                        </a>
                    {% else %}
                        <a class="btn btn-sm btn-outline-secondary" href="{{ fsc.url() }}?defaultPage=TRUE" title="{{ i18n.trans('mark-as-homepage') }}">
                            <i class="far fa-bookmark" aria-hidden="true"></i>
                        </a>
                    {% endif %}
                </div>
            </div>
            <div class="col-sm-5 col-6 text-right">
                <h1 style="margin-top: 0px; margin-bottom: 0px;">
                    <i class="{{ fsc.getPageData()['icon'] }}" aria-hidden="true"></i> {{ title }}
                </h1>
            </div>
        </div>
    </div>

    <br />

    <div class="container-fluid">
        <div class="row">
            {# Filters for Data #}
            <div class="col-4">
                <form name="f_search" id="formSearch" action="{{ fsc.url() }}" method="post" class="form">
                    <input name="action" id="action" type="hidden" value="reload"/>

                    {# Sources Filters #}
                    {% for index, source in fsc.sources %}
                        {% set is_first = (index == 0) %}
                        {% set id_card, id_collapse = 'source-header' ~ index, 'source-body' ~ index %}
                        <div class="card mb-2">
                            {# Header Card #}
                            <div class="card-header" id="{{ id_card }}">
                                <a class="{{ is_first ? '' : 'collapsed' }}" href="#{{ id_collapse }}" data-toggle="collapse" aria-controls="{{ id_collapse }}" aria-expanded="{{ is_first }}">
                                    {{ dataSource ~ ' ' ~ (index + 1) }}
                                </a>
                                <a class="pull-right{{ is_first ? '' : ' collapsed' }}" href="#{{ id_collapse }}" data-toggle="collapse" aria-expanded="{{ is_first }}" role="button">
                                    <i class="fa" aria-hidden="true"></i>
                                </a>
                            </div>

                            {# Body Card #}
                            <div id="{{ id_collapse }}" class="collapse{{ is_first ? ' show' : '' }}" aria-labelledby="{{ id_card }}">
                                <div class="card-body pb-0">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group">
                                                {{ forms.simpleSelect('source' ~ index, 'source' ~ index, source.source, fsc.getDocumentTypes(), NULL, 'fas fa-copy', select_source_attr) }}
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                {{ forms.simpleInput('date-from' ~ index, 'date-from' ~ index, source.dateFrom.format('d-m-Y'), 'text', NULL, 'fas fa-calendar', input_date_attr) }}
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                {{ forms.simpleInput('date-to' ~ index, 'date-to' ~ index, source.dateTo.format('d-m-Y'), 'text', NULL, 'fas fa-calendar', input_date_attr) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

                    {# Others Filters #}
                    <div class="card">
                        {# Header Card #}
                        <div class="card-header" id="filters-header">
                            <a class="collapsed" href="#filters-body" data-toggle="collapse" aria-controls="filters-body" aria-expanded="false">
                                {{ othersFilters }}
                            </a>
                            <a class="pull-right collapsed" href="#filters-body" data-toggle="collapse" aria-expanded="false" role="button">
                                <i class="fa" aria-hidden="true"></i>
                            </a>
                        </div>

                        {# Body Card #}
                        <div id="filters-body" class="collapse" aria-labelledby="filters-header">
                            <div class="card-body pb-0">
                                <div class="row">
                                    {% for index, filter in fsc.filters %}
                                        <div class="col-12">
                                            <div class="form-group">
                                                {{ forms.simpleSelect(index, index, filter.selectedValue, filter.listValues, i18n.trans(index), filter.icon, select_filter_attr) }}
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="col-8">
                <div class="row">
                    <div class="col-6">
                        {# -- Nav tabs -- #}
                        <div class="nav nav-pills" id="mainTabs" role="tablist">
                            <a class="nav-link nav-pills-sm active" id="chart-tab" data-toggle="pill" href="#chart" role="tab" aria-controls="chart" aria-expanded="true">
                                <i class="fas fa-chart-line fa-fw" aria-hidden="true"></i>
                                &nbsp;{{ i18n.trans('chart') }}
                            </a>
                            <a class="nav-link nav-pills-sm" id="data-tab" data-toggle="pill" href="#detail" role="tab" aria-controls="detail" aria-expanded="false">
                                <i class="fas fa-table fa-fw" aria-hidden="true"></i>
                                &nbsp;{{ i18n.trans('detail') }}
                            </a>
                        </div>
                    </div>

                    <div class="col-6">
                        <h3>{{ i18n.trans(fsc.grouped) }}</h3>
                    </div>
                </div>

                {# -- Tab panes -- #}
                <div class="tab-content" id="mainTabsContent">
                    <div class="tab-pane fade show active" id="chart" role="tabpanel" aria-labelledby="chart-tab">
                        <canvas id="documentChart"></canvas>
                    </div>
                    <div class="tab-pane fade" id="detail" role="tabpanel" aria-labelledby="detail-tab">
                        {# Data Table #}
                        <div class="row">
                            {% for source in fsc.sources %}
                                <div class="col">
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    {# Data Group Title #}
                                                    <th class="text-left" colspan="3">
                                                        {{ i18n.trans(source.source) }} <br />
                                                        <small>(
                                                            {{source.dateFrom.format('d-m-Y') }}
                                                            &nbsp;&nbsp;-&nbsp;&nbsp;
                                                            {{ source.dateTo.format('d-m-Y') }})
                                                        </small>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th class="text-left">Code</th>
                                                    <th class="text-left">Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {# Data #}
                                                {% for code, total in fsc.dataTable[source.source] %}
                                                    <tr class="table-light">
                                                        <td class="text-left">{{ code }}</td>
                                                        <td class="text-left">{{ total }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}