{% extends '@!EasyAdmin/page/content.html.twig' %}

{% block page_title %}
    {{ 'stats.labelInPlural' |trans({}, 'messages',  app.user.locale) }}
{% endblock page_title %}

{% block head_stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('stats') }}
{% endblock %}

{% block main %}
    <script>
        {% if token is not null %}
		    localStorage.setItem('token', '{{ token }}');
        {% endif %}
    </script>
    <!--suppress CheckEmptyScriptTag -->
    <section id="stats">
        <header class="row card-stat">
            <section class="col-xs-12 col-sm-3">
                <label>Fecha Inicio:</label>
                <input v-model="filters.from" type="date" class="form-control">
            </section>
            <section class="col-xs-12 col-sm-3">
                <label>Fecha Fin:</label>
                <input v-model="filters.to" type="date" class="form-control">
            </section>
            <section class="col-xs-12 col-sm-6">
                <button class="btn btn-primary p-2 m-2 float-start" @click="listData">
                    <i class="fa fa-filter me-3"></i>Aplicar Filtros
                </button>
                <button class="btn btn-primary p-2 m-2 float-end" @click="downloadStats">
                    <i class="fa fa-download me-3"></i>Descargar
                </button>
            </section>
        </header>
        <main>
            <section class="row">
                <section class="col-xs-12 col-md-4">
                    <section class="card-stat">
                        <section class="col-xs-12 col-sm-6">
                            <pie-chart :series-data="users" :enable-legend="false" :size="185" :colors="genColors(242, 2)"></pie-chart>
                        </section>
                        <section class="col-xs-12 col-sm-6">
                            <p class="title">${ suma(users) } Usuarios</p>
                            <p class="item" v-for="(item, index) in users" :key="index">${ item.y } ${ item.name }</p>
                        </section>
                        <i class="icon fa fa-user"></i>
                    </section>
                </section>

                <section class="col-xs-12 col-md-4">
                    <section class="card-stat">
                        <section class="col-xs-12 col-sm-6">
                            <pie-chart :series-data="events" :enable-legend="false" :size="185" :colors="genColors(224, 2)"></pie-chart>
                        </section>
                        <section class="col-xs-12 col-sm-6">
                            <p class="title">${ suma(events) } Eventos</p>
                            <p class="item" v-for="(item, index) in events" :key="index">${ item.y } ${ item.name }</p>
                        </section>
                        <i class="icon fa fa-calendar"></i>
                    </section>
                </section>
                <section class="col-xs-12 col-md-4">
                    <section class="card-stat">
                        <section class="col-xs-12 col-sm-6">
                            <pie-chart :series-data="jobs" :enable-legend="false" :size="185" :colors="genColors(201, 2)"></pie-chart>
                        </section>
                        <section class="col-xs-12 col-sm-6">
                            <p class="title">${ suma(jobs) } Ofertas</p>
                            <p class="item" v-for="(item, index) in jobs" :key="index">${ item.y } ${ item.name }</p>
                        </section>
                        <i class="icon fa fa-briefcase"></i>
                    </section>
                </section>
            </section>

            <section class="row">
                <section class="col-xs-12 col-sm-6 col-md-3">
                    <Indicator tag="forum-channels" :text="forum.channels.text" :total="forum.channels.total" icon="fa-tags" bg-color="var(--indigo-800)"></Indicator>
                </section>
                <section class="col-xs-12 col-sm-6 col-md-3">
                    <Indicator tag="forum-threads" :text="forum.threads.text" :total="forum.threads.total" icon="fa-sitemap" bg-color="var(--indigo-700)"></Indicator>
                </section>
                <section class="col-xs-12 col-sm-6 col-md-3">
                    <Indicator tag="mentoring" :text="mentoring.text" :total="mentoring.total" icon="fa-graduation-cap" bg-color="var(--indigo-600)"></Indicator>
                </section>
                <section class="col-xs-12 col-sm-6 col-md-3">
                    <Indicator tag="mentors" :text="news.text" :total="news.total" icon="fa-newspaper" bg-color="var(--indigo-500)"></Indicator>
                </section>

                <section class="col-xs-12 col-md-4">
                    <section class="card-stat">
                        <pie-chart title="Usuarios por categoría profesional" :series-data="usersCategories"></pie-chart>
                        <i class="icon fa fa-address-card-o"></i>
                    </section>
                </section>

                <section class="col-xs-12 col-md-4">
                    <section class="card-stat">
                        <pie-chart title="Usuarios por países" :series-data="usersCountries"></pie-chart>
                        <i class="icon fa fa-map-o"></i>
                    </section>
                </section>

                <section class="col-xs-12 col-md-4">
                    <section class="card-stat">
                        <pie-chart title="Actividad de Usuarios" :series-data="usersActivity"></pie-chart>
                        <i class="icon fa fa-crosshairs"></i>
                    </section>
                </section>

                <section class="col-sm-12 col-md-6">
                    <section class="card-stat">
                        <bar-chart class="col-12" title="Ofertas con mayor demanda" :enable-legend="false" :series-data="jobsDemand"></bar-chart>
                        <i class="icon fa fa-search"></i>
                    </section>
                </section>

                <section class="col-sm-12 col-md-6">
                    <section class="card-stat">
                        <bar-chart class="col-12" title="Hilos con mayor actividad" :enable-legend="false" :series-data="forum.demand"></bar-chart>
                        <i class="icon fa fa-info-circle"></i>
                    </section>
                </section>

                <section class="col-12">
                    <section class="card-stat">
                        <line-chart
                                class="col-12"
                                title="Inicio de sesion diario"
                                :categories="usersSessions.categories"
                                :tooltip-title="usersSessions.tooltip"
                                :series-data="usersSessions.data"
                                color="hsla(239, 100%, 50%, 0.3)">
                        </line-chart>
                        <i class="icon fa fa-star"></i>
                    </section>
                </section>
            </section>
        </main>
    </section>
{% endblock %}

{% block body_javascript %}
    {{ parent() }}
    {{ encore_entry_script_tags('stats') }}
{% endblock %}