{% extends "Global/layout.html.twig" %}

{% set pagetitle = 'Dashboard' | trans %}

{% block title %}{{pagetitle}}{% endblock %}

{% block content %}

    {% set navigation = [{"current":(pagetitle)}] %}
    {% include "Global/navigation.html.twig" with navigation %}

    <section class="section-content padding-y bg-white">
        <div class="{{ services.getSetting("app_layout") }}">
            <div class="row">
                <aside class="col-lg-3 pt-3 pt-lg-0">
                    {% include "Dashboard/sidebar.html.twig" %}
                </aside>
                <div class="col-lg-9 mt-4 mt-lg-0">
                    <div class="card box">
                        <div class="card-body">

                            <header class="section-heading mb-3">
                                <h4 class="title-section float-left"><i class="fas fa-calendar-alt"></i> {{ "Events summary"|trans }}</h4>
                                <a href="{{ path('dashboard_administrator_event') }}" class="float-right"><i class="fas fa-cog"></i> {{ "Manage events"|trans }}</a>
                                <div class="clearfix"></div>
                            </header>
                            <div class="row mb-3 pl-2 pr-2">
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-calendar-alt"></i>
                                        <h4>{{ services.getEvents({"count": true, "published": "all", "elapsed": "all"}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Events added"|trans }}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-calendar-alt"></i>
                                        <h4>{{ services.getEvents({"count": true, "published": true, "elapsed": "all"}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Published events"|trans }}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-calendar-alt"></i>
                                        <h4>{{ services.getEvents({"count": true, "published": true, "elapsed": false}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Upcoming events"|trans }}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-calendar-alt"></i>
                                        <h4>{{ services.getEventDates({"count": true}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Event dates"|trans }}</h5>
                                    </div>
                                </div>
                            </div>
                            {% set events = services.getEvents({"published": "all", "elapsed": "all", "limit": 3}).getQuery().getResult() %}
                            {% if events|length > 0 %}
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            {% include "Dashboard/Shared/Event/manage-events-table.html.twig" with {events: events} %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            <header class="section-heading mb-3 mt-5">
                                <h4 class="title-section float-left"><i class="fas fa-cart-arrow-down"></i> {{ "Orders summary"|trans }}</h4>
                                <a href="{{ path('dashboard_administrator_orders') }}" class="float-right"><i class="fas fa-cog"></i> {{ "Manage orders"|trans }}</a>
                                <div class="clearfix"></div>
                            </header>
                            <div class="row mb-3 pl-2 pr-2">
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-cart-arrow-down"></i>
                                        <h4>{{ services.getOrders({"count": true, "status": "all"}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Orders placed"|trans }}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-cart-arrow-down"></i>
                                        <h4>{{ services.getOrders({"count": true, "status": 1}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Paid orders"|trans }}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-cart-arrow-down"></i>
                                        <h4>{{ services.getOrders({"count": true, "status": 0}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Awaiting payment"|trans }}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-ticket-alt"></i>
                                        {% set ticketsSold = services.getOrders({"sumOrderElements": true, "status": 1}).getQuery().getSingleScalarResult() %}
                                        <h4>{{ ticketsSold ? ticketsSold : 0 }}</h4>
                                        <h5 class="mb-0">{{ "Tickets sold"|trans }}</h5>
                                    </div>
                                </div>
                            </div>

                            {% set orders = services.getOrders({"status": "all", "limit": 3}).getQuery().getResult() %}
                            {% if orders|length > 0 %}
                                <div class="row mb-5">
                                    <div class="col-12">
                                        <div id="ticketsSalesByDateLineChart">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            {% include "Dashboard/Shared/Order/manage-orders-table.html.twig" with {orders: orders} %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            <header class="section-heading mb-3 mt-5">
                                <h4 class="title-section float-left"><i class="fas fa-users-cog"></i> {{ "Users summary"|trans }}</h4>
                                <a href="{{ path('dashboard_administrator_user') }}" class="float-right"><i class="fas fa-cog"></i> {{ "Manage users"|trans }}</a>
                                <div class="clearfix"></div>
                            </header>
                            <div class="row mb-3 pl-2 pr-2">
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-user-check"></i>
                                        <h4>{{ services.getUsers({"role": "attendee", "count": true, "enabled": true}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Active attendees"|trans }}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-id-card"></i>
                                        <h4>{{ services.getUsers({"role": "organizer", "count": true, "enabled": true}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Active organizers"|trans }}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-qrcode"></i>
                                        <h4>{{ services.getUsers({"role": "scanner", "count": true, "enabled": "all"}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Scanners"|trans }}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-12 p-1">
                                    <div class="bg-primary rounded p-4 text-center text-white position-relative counter-box">
                                        <i class="fas fa-print"></i>
                                        <h4>{{ services.getUsers({"role": "pointofsale", "count": true, "enabled": "all"}).getQuery().getSingleScalarResult() }}</h4>
                                        <h5 class="mb-0">{{ "Points of sale"|trans }}</h5>
                                    </div>
                                </div>
                            </div>
                            {% set users = services.getUsers({"enabled": "all", "limit": 3}).getQuery().getResult() %}
                            {% if users|length > 0 %}
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            {% include "Dashboard/Administrator/User/manage-users-table.html.twig" with {users: users} %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        {{ gc_language(app.request.locale) }}
        {% if ticketsSalesByDateLineChart is not null %}
            {{ gc_draw(ticketsSalesByDateLineChart, 'ticketsSalesByDateLineChart') }}
        {% endif %}
    </script>
{% endblock %}