{% extends 'site/base.html' %}
{% load widget_tweaks %}
{% load user_agents %}

{% block title %}{{ block.super }} | {{ app_name }}{% endblock title %}

{% block content %}
<section class="content-header">
  <h1>{{ app_name }}</h1>
  {% include 'core/breadcrumb.html' with level=1 %}
</section>

<section class="content">
  <div class="row">
    <div class="col-md-3">
      <div class="box">
        <div class="box-header">
          <h3 class="box-title">Menu</h3>
        </div>
        <div class="box-body">
          {% if perms.customer.add_profile or perms.customer.change_profile or perms.customer.delete_profile or perms.customer.can_view_profile %}
          <a href="{% url 'customer:profile-list' %}" class="btn btn-app">
            <i class="fa fa-users"></i> Perfils
          </a>
          {% endif %}
          {% if perms.customer.add_customer or perms.customer.change_customer or perms.customer.delete_customer or perms.customer.can_view_customer %}
          <a href="{% url 'customer:customer-list' %}" class="btn btn-app">
            <i class="fa fa-user-tag"></i> Clientes
          </a>
          {% endif %}
        </div>
        <!-- /.box-body -->
      </div>
    </div>
    {% if request.user.is_superuser %}
    <div class="col-lg-3 col-md-6">
      <!-- small box -->
      <div class="small-box bg-red">
        <div class="inner">
          <h3>{{ blocked_customers }}</h3>
          <p>Clientes Bloqueados</p>
        </div>
        <div class="icon">
          <i class="fas fa-user-times"></i>
        </div>
        <a href="{% url 'customer:customer-list' %}?status=B" class="small-box-footer">Mais detalhes <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <div class="col-lg-3 col-md-6">
      <!-- small box -->
      <div class="small-box bg-green">
        <div class="inner">
          <h3>{{ physical_person }}</h3>
          <p>Clientes PF</p>
        </div>
        <div class="icon">
          <i class="fas fa-user"></i>
        </div>
        <a href="{% url 'customer:customer-list' %}?type=F" class="small-box-footer">Mais detalhes <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <div class="col-lg-3 col-md-6">
      <!-- small box -->
      <div class="small-box bg-blue">
        <div class="inner">
          <h3>{{ legal_person }}</h3>
          <p>Clientes PJ</p>
        </div>
        <div class="icon">
          <i class="fas fa-user-tie"></i>
        </div>
        <a href="{% url 'customer:customer-list' %}?type=J" class="small-box-footer">Mais detalhes <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    {% endif %}
  </div>
  {% if request.user.is_superuser %}
  <div class="row">
    <div class="col-md-4">
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">Clientes por perfil</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="box-body">
          <div class="chart">
            <canvas id="chartProfile" width="400" height="400"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
</section>
{% endblock content %}

{% block script %}
  {{ block.super }}
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
  <script>
    var chartProfile = new Chart($('#chartProfile').get(0).getContext('2d'), {
      type: 'doughnut',
      data: {
        datasets: [{
          backgroundColor: [{% for item in chart_provider %}'#{{ item.color }}',{% endfor %}],
          data: [{% for item in chart_provider %}'{{ item.count }}',{% endfor %}]
        }],
        labels: [{% for item in chart_provider %}'{{ item.label }}',{% endfor %}],
      }
    });
  </script>
{% endblock script %}