{% if is_granted('ROLE_DDD') %}
    {% set extendedTemplate = '@AdminLTE/layout/ddd-layout.html.twig' %}
{% else %}
    {% set extendedTemplate = '@AdminLTE/layout/communeodd-layout.html.twig' %}
{% endif %}

{% extends extendedTemplate %}

{% block page_title %}{% trans %}dashboard.title{% endtrans %} - {{departement.name}}{% endblock %}


{% block page_content %}
<div class="container-fluid">
  <section>
    {% if not is_granted('ROLE_MANAGER') and not is_granted('ROLE_INSTAD') %}
    <div class="row">
      <div class="col-xl-12 col-sm-12 col-12 mb-4">
        {% if fin %}
          <div class="alert alert-success">
            Les communes ont jusqu'au {{ fin |date('d/m/Y')  }} pour envoyer les données de votre ministère.
          </div>
        {% else %}
          <div class="alert alert-danger">
            Les communes ne peuvent plus envoyés leurs données. Pour toute modification, elles doivent contacter la DGCS-ODD.
          </div>     
        {% endif %}
        </div>
      </div>
    </div>
    {% endif %}
    <div class="row">
      <div class="col-xl-4 col-sm-6 col-12 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between px-md-1">
              <div class="align-self-center">
                <i class="fas fa-pencil-alt text-info fa-3x"></i>
              </div>
              <div class="text-end">
                <h3>{{odds}}</h3>
                <a href="{{ path('app_goals') }}"><p class="mb-0">ODD</p></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-sm-6 col-12 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between px-md-1">
              <div class="align-self-center">
                <i class="far fa-comment-alt text-warning fa-3x"></i>
              </div>
              <div class="text-end">
                <h3>{{cibles}}</h3>
                <a href="{{ path('app_targets') }}"><p class="mb-0">Cibles</p></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-sm-6 col-12 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between px-md-1">
              <div class="align-self-center">
                <i class="fas fa-chart-line text-success fa-3x"></i>
              </div>
              <div class="text-end">
                <h3>{{indicateurs}}</h3>
                <a href="{{ path('app_indicators') }}"><p class="mb-0">Indicateurs</p></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>

    <div class="row">

      <div class="col-xl-4 col-sm-6 col-12 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between px-md-1">
              <div class="align-self-center">
                <i class="fas fa-map-marker-alt text-danger fa-3x"></i>
              </div>
              <div class="text-end">
                <h3>{{indicateurscommunaux}}</h3>
                <a href="{{ path('app_indicators_renseignables') }}"><p class="mb-0">Indicateurs communaux</p></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      
      <div class="col-xl-4 col-12 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between px-md-1">
              <div class="text-end">
                <h3>{{communes | length}}</h3>
                <p class="mb-0">Communes </p>
              </div>
              <div class="align-self-center">
                <i class="fas fa-rocket text-danger fa-3x"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-4 col-12 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between px-md-1">
              <div class="text-end">
                <h3>{{all}} communes</h3>
                <p class="mb-0">ont rempli tous les indicateurs</p>
              </div>
              <div class="align-self-center">
                <i class="far fa-life-ring text-info fa-3x"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    </div>

<div class="row">
        <div class="col-sm-12">
            <div class="text-right">
                  <a href="{{ path('all_data_communes', { 'id': departement.id }) }}" class="mb-2 mr-2 btn-shadow  btn btn-info text-right">
                      <i class="fa fa-plus"></i> Télécharger toutes les données du département
                  </a>
            </div>
        </div>
    </div>

{% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}

    <h2 class="m-0 text-dark" style="margin-top : 20px;">
        Points du renseignement des communes du département
    </h2>

    <table id="communeTable" class="table table-striped">
                <thead>
                    <tr>
                            <th>Commune</th>
                            <th>Nombre</th>
                            <th>Renseignés</th>
                            <th>Reste</th>
                            <th>Etat</th>
                            <th>Avis</th>
                            <th>Observation</th>
                            <th>Actions</th>
                    </tr>
                </thead>

                {% for commune in communes %}

                {% set structure = settingsManager.getStructureYear(year.name,null,commune) %}
                <tr>
                            <td>{{ commune.name }}</td>
                            <td>{{indicateurscommunaux }}</td>
                            <td>{{ settingsManager.getRIndicateursByCommune(year, commune)}}</td>
                            <td><strong>{{ settingsManager.getNoIndicateursByCommune(year, commune) | length}}</strong></td>
                            
                            {% if structure and structure.dpp2 %}
                                <td><span class="float-center badge" style="color: white; background-color: green;">Validé</span></td>
                            {% else %}
                                <td><span class="float-center badge" style="color: white; background-color: red;">Non Validé</span></td>
                            {% endif %}

                            <td>{{ structure  ? structure.avis : '' }}</td>
                            <td>{{ structure  ? structure.observation : '' }}</td>

                            <td>
                                <a  class="btn btn-sm btn-success" href="{{ path('annoter_commune', { 'id': commune.id }) }}" style="color : #ffffff !important;">Annoter</a>
                                {% if structure and structure.dpp2 %}
                                  <a  class="btn btn-sm btn-primary" href="{{ path('export_commune', { 'id': commune.id }) }}">Télécharger</a>
                                {% endif %}
                            </td>
                </tr>
                {% endfor %}
                </table>

                
        {% endblock %}
        
    {% endembed %}
  </section>
</div>
{% endblock %}

{% block javascripts %}
    <script>
        $(function () {
            $("#ministereTable").DataTable({
                "pageLength": 10
            });
        });
    </script>

    <script>
        $(function () {
            $("#ptaTable").DataTable({
                "pageLength": 10
            });
        });
    </script>

    <script>
        $(function () {
            $("#communeTable").DataTable({
                "pageLength": 10
            });
        });
    </script>

    <script src="{{ asset('plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
{% endblock %}

{% block stylesheets %}
     <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/dashboard/css/mdb.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/dashboard/css/style.css') }}">
{% endblock %}