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

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

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

{% block title %}
    {{ 'main.customer.breadcrumbs.gestion.clientes' | trans }}
{% endblock %}

{% block breadcrumbs_current %}{{ 'main.customer.breadcrumbs.gestion.clientes' | trans }}{% endblock %}

{% block breadcrumbs %}
    <li class="c-breadcrumbs__item"><a class="c-breadcrumbs__link" href="{{ path('dashboard') }}">{{ 'main.app.name' | trans }}</a></li>
    <li class="c-breadcrumbs__item">DashBoard</li>
{% endblock %}

{% block wrapper -%}

    {% include 'customer/menu/menu.html.twig' with {'menu': 'dashboard'}  %}

    <div class="o-panel__content o-panel__content-filter">
        {{ form_start(filter, {'attr': {'class': 'o-filter o-form'} }) }}

        <div class="o-gallery o-gallery--filter">
            <div class="o-filter__input">
                {{ form_label(filter.children.keywords.children.keyword) }}
                {{ form_widget(filter.children.keywords.children.keyword, { 'attr': {'placeholder': 'url.filter.name' | trans } }) }}
            </div>

            <div class="o-filter__input">
                {{ form_widget(filter.children.keywords.children.keywordGroups, { 'attr': {'placeholder': 'url.filter.name' | trans } }) }}
            </div>

            <div class="o-filter__input">
                {{ form_label(filter.children.keywords.children.keywordHistories.children.fetched_at) }}
                {{ form_widget(filter.children.keywords.children.keywordHistories.children.fetched_at, { 'attr': {'placeholder': 'url.filter.name' | trans } }) }}
            </div>

            <div class="o-filter__input">
                {{ form_widget(filter.children.keywords.children.keywordHistories.children.keywordHasUrlHistories.children.Url, { 'attr': {'placeholder': 'url.filter.name' | trans } }) }}
            </div>
            <div class="o-filter__submit {% if (app.request.query is not empty) %}o-filter__submit--active{% endif %}">
                {{ form_row(filter.save, { 'label': 'main.default.filtrar' | trans, 'attr': {'class': 'o-filter__submit o-button o-button--inline'} }) }}
            </div>
        </div>

        {{ form_rest(filter) }}
        {{ form_end(filter) }}
    </div>

    <div id="dashboard" class="o-tabs__content">
        <div class="o-panel o-panel--full">
            <div class="o-panel__header o-panel__header--color-primary">
                <h4 class="o-panel__title">{{ 'main.customer.dashboard' | trans }}</h4>
            </div>
            <div class="o-panel__content" style="display: flex; width: 100%;">
                <div style="flex: 1 1; margin-right: 20px">
                    <canvas id="myChart" width="400" height="100"></canvas>

                </div>
                <div>
                    <div style="margin-bottom: 20px">
                        <p style="margin-bottom: 0">Positividad: {{ positivity  | number_format(2, '.', ',')}}</p>
                        <p>Positividad Anteriror: {{ pastPositivity | number_format(2, '.', ',') }}</p>
                    </div>
                    <div>
                        <p style="margin-bottom: 0">Negatividad: {{ negativity  | number_format(2, '.', ',')}}</p>
                        <p>Negatividad Anteriror: {{ pastNegativity  | number_format(2, '.', ',')}}</p>
                    </div>
                </div>
            </div>
        </div>

  <div class="o-grid o-grid--no-margin o-grid--columns-2">
      <div class="o-panel o-panel--half">
          <div class="o-panel__header o-panel__header--color-primary">
              <h4 class="o-panel__title">{{ 'main.customer.dashboard.negative' | trans }}</h4>
          </div>
          <div class="o-panel__content" style="display: flex; width: 100%;">
              {% if negativeUrls %}
                  {% include 'customer/tables/urlDistribution.html.twig' with {'urls': negativeUrls, 'pagination': negativeUrls, 'label': 'Negative'}  %}
              {% endif %}

          </div>
      </div>

      <div class="o-panel o-panel--half">
          <div class="o-panel__header o-panel__header--color-primary">
              <h4 class="o-panel__title">{{ 'main.customer.dashboard.positive' | trans }}</h4>
          </div>
          <div class="o-panel__content" style="display: flex; width: 100%;">
              {% if positiveUrls %}
                  {% include 'customer/tables/urlDistribution.html.twig' with {'urls': positiveUrls, 'pagination': positiveUrls, 'label': 'Positive'}  %}
              {% endif %}

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

  <div class="o-grid o-grid--no-margin o-grid--columns-2">
      <div class="o-panel o-panel--half">
          <div class="o-panel__header o-panel__header--color-primary">
              <h4 class="o-panel__title">{{ 'main.customer.dashboard.negative' | trans }}</h4>
          </div>
          <div class="o-panel__content" style="display: flex; width: 100%;">
              {% if listNegativeKw %}
                  {% include 'customer/tables/keywordDistribution.html.twig' with {'urls': listNegativeKw, 'pagination': listNegativeKw, 'label': 'Negative'}  %}
              {% endif %}

          </div>
      </div>

      <div class="o-panel o-panel--half">
          <div class="o-panel__header o-panel__header--color-primary">
              <h4 class="o-panel__title">{{ 'main.customer.dashboard.positive' | trans }}</h4>
          </div>
          <div class="o-panel__content" style="display: flex; width: 100%;">
              {% if listPositiveKw %}
                  {% include 'customer/tables/keywordDistribution.html.twig' with {'urls': listPositiveKw, 'pagination': listPositiveKw, 'label': 'Positive'}  %}
              {% endif %}

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



{% endblock %}

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

<script>
  var positivity = {{  positivityData | json_encode | raw}};
  var negativity = {{  negativityData | json_encode | raw}};
  var labels = {{ labels | json_encode | raw }};
</script>

{{ encore_entry_script_tags('forms') }}
{{ encore_entry_script_tags('dashboard') }}
{% endblock %}