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

{% block title %}{{ 'menu.dashboard'|trans }}{% endblock %}

{% block page_title %}
    <span class="mr-6">
        <i class="fad fa-layer-group text-dark mr-2"></i>
        <span class="plus bold">{{ 'menu.dashboard'|trans }}</span>
    </span>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    {{ encore_entry_link_tags('dashboard') }}
{% endblock %}

{% block content %}
    {% if is_granted(constant('App\\Entity\\User::ROLE_USER_ORDER')) %}
        <div class="row">
            <div class="col-12" id="sales-chart">
                <div class="card card-custom card-stretch gutter-b">
                    <div class="card-header pt-5 border-0 pb-0">
                        <h5 class="card-title bold">{{ 'label.sales'|trans }}</h5>
                    </div>

                    <div id="sales-filters" class="card-header border-0 pt-0 justify-content-start w-50"
                         data-filters="">
                        <div class="mr-2" id="sales-dates">
                            <div class="input-group" id="sales-dates-datepicker">
                                <input type="text" class="form-control" readonly="readonly"
                                       placeholder="Selecciona una fecha" data-sales-filter="dates">
                                <div class="input-group-append">
                                <span class="input-group-text">
                                    <i class="la la-calendar-check-o"></i>
                                </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body py-0 px-5" style="height: 365px!important;">
                        <div class="spinner spinner-center spinner-lg py-20"></div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {% if is_granted(constant('App\\Entity\\User::ROLE_USER_CATALOG')) %}
        <div class="alert alert-custom alert-white alert-shadow fade show">
            <div class="alert-icon">
                <i class="la la-calendar-check-o"></i>
            </div>
            <div class="alert-text">
                <div class="mr-2 w-50" id="published-dates">
                    <div class="input-group" id="published-dates-datepicker">
                        <input type="text" class="form-control" readonly="readonly"
                               placeholder="Selecciona una fecha" data-published-filter="dates">
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="la la-calendar-check-o"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="published-products-charts" data-filters="">
            <div class="col-xl-6" id="published-products-chart">
                <div class="card card-custom card-stretch gutter-b">
                    <div class="card-header pt-5 border-0 pb-0">
                        <h5 class="card-title bold mb-7">{{ 'label.published_products'|trans }}</h5>
                        <p class="medium"><span class="grey-4">{{ 'label.published_products'|trans }}:</span> <span
                                    class="total-published">0</span></p>
                        <p class="medium"><span class="grey-4">{{ 'label.not_published_products'|trans }}:</span> <span
                                    class="total-not-published">0</span></p>
                    </div>

                    <div class="card-body py-0 px-5">
                        <div class="spinner spinner-center spinner-lg py-20"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6" id="published-value-chart">
                <div class="card card-custom card-stretch gutter-b">
                    <div class="card-header pt-5 border-0 pb-0">
                        <h5 class="card-title bold mb-7">{{ 'label.published_value'|trans }}</h5>
                        <p class="medium"><span class="grey-4">{{ 'label.total_published_value'|trans }}:</span> <span
                                    class="total-published">0</span></p>
                        <p class="medium"><span class="grey-4">{{ 'label.total_not_published_value'|trans }}:</span>
                            <span class="total-not-published">0</span></p>
                    </div>

                    <div class="card-body py-0 px-5">
                        <div class="spinner spinner-center spinner-lg py-20"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="products-status-charts" data-filters="">
            <div class="col-xl-6" id="products-status-chart">
                <div class="card card-custom card-stretch gutter-b">
                    <div class="card-header pt-5 border-0 pb-0">
                        <h5 class="card-title bold mb-7">{{ 'label.products_status'|trans }}</h5>
                    </div>
                    <div class="card-body py-0 px-5">
                        <div class="spinner spinner-center spinner-lg py-20"></div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

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

    <script>
        {% if is_granted(constant('App\\Entity\\User::ROLE_USER_CATALOG')) %}
        const publishedChartsUrl = '{{ path('dashboard_published_widget') }}';
        const productsStatusUrl = '{{ path('dashboard_products_status_widget') }}';
        {% endif %}
        {% if is_granted(constant('App\\Entity\\User::ROLE_USER_ORDER')) %}
        const salesChartUrl = '{{ path('dashboard_sales_widget') }}';
        {% endif %}
    </script>

    {{ encore_entry_script_tags('dashboard-js') }}
{% endblock %}