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

{% block body %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>

<div class="container-fluid">

          <!-- Body -->
    <div class="header-body">
        <div class="row align-items-end">
            <div class="col">

                <!-- Title -->
                <span class="text-muted">Tableau de bord</span> <span class="text-muted"><small>/ {{ "now"|date("M Y") }}</small></span>
                <h2 class="header-title">
                  Mutuelle MARE-GAILLARD
                </h2>

            </div>
            <div class="col-auto">

            </div>
        </div> <!-- / .row -->
    </div> <!-- / .header-body -->
</div>
<br>
<div class="container-fluid">
  <div class="row mt-3">
      <div class="col-4 col-lg-6 col-xl-4 col-md-6">
          <div class="card">
              <div class="card-header d-flex flex-between-center bg-light py-3">
                <h6 class="mb-0">Analyse Contrat Annuel - Viager PP</h6>
              </div>
              <div class="card-body">
                  <canvas id="chartViagerAnnuel" height="100"></canvas>
              </div>
          </div>
      </div>
      <div class="col-4 col-lg-6 col-xl-4 col-md-6">
          <div class="card">
              <div class="card-header d-flex flex-between-center bg-light py-3">
                <h6 class="mb-0">Analyse des effectifs PP</h6>
              </div>
              <div class="card-body">
                  <canvas id="chartPp" height="300"></canvas>
              </div>
          </div>
      </div>
      <div class="col-4 col-lg-6 col-xl-4 col-md-6">
          <div class="card">
              <div class="card-header d-flex flex-between-center bg-light py-3">
                <h6 class="mb-0">Analyse des effectifs cotisants</h6>
              </div>
              <div class="card-body">
                  <canvas id="chartContratTotal" height="300"></canvas>
              </div>
          </div>
      </div>
  </div>
    <div class="row mt-2">
        <div class="col-12 col-lg-12 col-xl-12">
            <div class="card">
                <div class="card-header d-flex flex-between-center bg-light py-3">
                  <h6 class="mb-0">Analyse des Radiations</h6>
                </div>
                <div class="card-body">
                    <canvas id="chartRadiation" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-12 col-lg-6 col-xl">
            <div class="card">
                <div class="card-header d-flex flex-between-center bg-light py-3">
                  <h6 class="mb-0">Tracking NON VIE</h6>
                </div>
                <div class="card-body">
                    <canvas id="chartSante" width="400" height="180"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl">
            <div class="card">
                <div class="card-header d-flex flex-between-center bg-light py-3">
                  <h6 class="mb-0">Tracking VIE</h6>
                </div>
                <div class="card-body">
                    <canvas id="chartPrev" width="400" height="180"></canvas>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-12 col-lg-12 col-xl">
            <div class="card">
                <div class="card-header d-flex flex-between-center bg-light py-2">
                    <h6 class="mb-0">INDICATEURS</h6>
                    <!-- Button trigger modal -->
                    <span>
                    <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#exampleModal">
                    Sélectionnez les périodes
                    </button>
                    <button type="button" class="btn btn-secondary btn-sm saveAsExcel">
                     Télécharger
                    </button>
                    </span>

                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Sélectionnez les mois</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            {% for mois in totalsante %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="{{mois.kpidate|date("MY")}}" name="{{mois.kpidate|date("MY")}}" checked="checked">
                                    <label class="form-check-label" for="{{mois.kpidate|date("MY")}}">
                                        {{mois.kpidate|date("M Y")}}
                                    </label>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" data-dismiss="modal">Fermer</button>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <small>
                        <table id="indicateurs" class="table table-sm table-hover table-bordered">
                            <thead>
                                <tr>
                                <th scope="col" class="p-2" style="font-size:20px; font-weight:300">EFFECTIFS</th>
                                    {% for mois in totalsante %}
                                        <th scope="col" class="p-3 {{mois.kpidate|date("MY")}}">{{mois.kpidate|date("M Y")}}</th>
                                    {% endfor %}
                                      <th scope="col" class="p-3 }}">Variation</th>
                                      <th scope="col" class="p-3 ">Pourcentage</th>
                                </tr>
                            </thead>
                            <tbody>
<!-- ========================================================= Effectifs PP ============================================================= -->
                                {% for titre, ligne in effectifs %}
                                  {% if titre == "CSS" or titre == "CMU" or titre == "ACS" %}
                                    <tr class="table-info">
                                  {% elseif titre == "NON VIE (Hors ACS Hors CSS Hors CMU)" or titre == "VIE" %}
                                    <tr class="table-warning">
                                      {% elseif titre == "NOMBRE DE PP (HORS ACS)" %}
                                        <tr class="table-primary">
                                  {% else %}
                                    <tr>
                                  {% endif %}
                                      <th scope="row">{{titre}}</th>
                                      {% for key, value in ligne %}
                                           <td class="{{key}}">
                                             {{value}} {% if key == 'variationPctg'%}{{' %'}}{% endif %}
                                           </td>
                                      {% endfor %}
                                  </tr>
                                {% endfor %}

<!-- ========================================================= Effectifs Cotisants ============================================================= -->
                                {% for titre, ligne in effectifsCot %}
                                  {% if titre == "CSS" or titre == "CMU" or titre == "ACS" %}
                                    <tr class="table-info">
                                  {% elseif titre == "NON VIE (Hors ACS Hors CSS Hors CMU)" or titre == "VIE" %}
                                    <tr class="table-warning">
                                      {% elseif titre == "EFFECTIF COTISANT (HORS ACS)" or titre == "NOMBRE ENTREPRISES" %}
                                        <tr class="table-primary">
                                  {% else %}
                                    <tr>
                                  {% endif %}
                                      <th scope="row">{{titre}}</th>
                                      {% for key, value in ligne %}
                                           <td class="{{key}}">
                                             {{value}} {% if key == 'variationPctg'%}{{' %'}}{% endif %}
                                           </td>
                                      {% endfor %}
                                  </tr>
                                {% endfor %}
                            </tbody>

<!-- ========================================================= Adhésions ============================================================= -->
                            <thead>
                                <tr>
                                <th scope="col" class="p-2" style="font-size:20px; font-weight:300">ADHESIONS</th>
                                    {% for mois in totalsante %}
                                        <th scope="col" class="p-3 {{mois.kpidate|date("MY")}}">{{mois.kpidate|date("M Y")}}</th>
                                    {% endfor %}
                                    <th scope="col" class="p-3 }}">Variation</th>
                                    <th scope="col" class="p-3 ">Pourcentage</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for titre, ligne in adhesions %}
                                  {% if titre == "CSS" or titre == "CMU" or titre == "ACS" %}
                                    <tr class="table-info">
                                  {% elseif titre == "NON VIE (Hors ACS Hors CSS Hors CMU)" or titre == "VIE" or titre == "CONTRAT ANNUEL" or titre == "VIAGER" %}
                                    <tr class="table-warning">
                                  {% elseif titre == "EFFECTIF COTISANT (HORS ACS)" or titre == "NOMBRE ENTREPRISES" or titre == "VIE Nombre de contrats" or titre == "ADHESIONS HORS ACS (VIE + NON VIE)" or titre == "SECTEURS PARTICULIERS : Adhésions nombre de contrat"%}
                                    <tr class="table-primary">
                                  {% elseif titre == "- dont Secteur des PROFESSIONNELS : Contrats salariés" or titre == "- dont Secteur des PARTICULIERS : Contrats hors ACS" %}
                                  <tr class="table-secondary">
                                  {% else %}
                                    <tr>
                                  {% endif %}
                                      <th scope="row">{{titre}}</th>
                                      {% for key, value in ligne %}
                                           <td class="{{key}}">
                                             {{value}} {% if key == 'variationPctg' or titre == '% Atteinte NON VIE' or titre == '% Atteinte VIE' %}{{' %'}}{% endif %}
                                           </td>
                                      {% endfor %}
                                  </tr>
                                {% endfor %}
                                <tr class="table-primary">
                                    <th scope="row">SECTEUR ENTREPRISES : Adhésions nombre d'entreprise</th>
                                    {% for data in newCompanies %}
                                      {% if data[1]|date("Y") != '2020' %}
                                         <td class="{{data[1]|date("MY")}}">{{data[0][1]}}</td>
                                      {% else %}
                                         <td class="{{data[1]|date("MY")}}"></td>
                                      {% endif %}
                                    {% endfor %}
                                </tr>
                            </tbody>
<!-- ========================================================= Radiations ============================================================= -->
                            <thead>
                                <tr>
                                <th scope="col" class="p-2" style="font-size:20px; font-weight:300">RADIATION - DECES (CUMUL ANNUEL)</th>
                                    {% for mois in totalsante %}
                                        <th scope="col" class="p-3 {{mois.kpidate|date("MY")}}">{{mois.kpidate|date("M Y")}}</th>
                                    {% endfor %}
                                    <th scope="col" class="p-3 }}">Variation</th>
                                    <th scope="col" class="p-3 ">Pourcentage</th>
                                </tr>
                            </thead>
                            <tbody>
                              {% for titre, ligne in radiations %}
                                {% if titre == "Radiation (TT motif)" or titre == "Nombre de décès" or titre == "Radiation (Hors Décès)" %}
                                <tr class="table-secondary">
                                {% else %}
                                  <tr>
                                {% endif %}
                                    <th scope="row">{{titre}}</th>
                                    {% for key, value in ligne %}
                                         <td class="{{key}}">
                                           {{value}} {% if key == 'variationPctg' %}{{' %'}}{% endif %}
                                         </td>
                                    {% endfor %}
                                </tr>
                              {% endfor %}
                            </tbody>
                        </table>
                    </small>
                </div>
            </div>
        </div>
    </div>
    <br>
    {# <div class="row">
        <div class="col-12 col-lg-6 col-xl">
            <ul class="list-group list-group-horizontal">
                <li class="list-group-item"><a href="{{ path('app_sante', {insertion: "now"|date_modify("-1 month")|date('Y-m-01')}) }}">Consulter les contrats santé</a></li>
                <li class="list-group-item"><a href="{{ path('app_prevention', {insertion: "now"|date_modify("-1 month")|date('Y-m-01')}) }}">Consulter les contrats prévoyance</a></li>
                <li class="list-group-item"><a href="{{ path('app_bi', {insertion: "now"|date_modify("-1 month")|date('Y-m-01')}) }}">Trouver les adhérents au deux formules</a></li>
                <li class="list-group-item"><a href="{{ path('app_bisante', {insertion: "now"|date_modify("-1 month")|date('Y-m-01')}) }}">Adhérents en prévoyance uniquement</a></li>
                <li class="list-group-item"><a href="{{ path('app_biprev', {insertion: "now"|date_modify("-1 month")|date('Y-m-01')}) }}">Adhérents en santé uniquement</a></li>
            </ul>
        </div>
    </div> #}
</div>
{% endblock %}

{% block javascripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.min.js"></script>

    <script>

    $(document).ready(function(){
        $(".saveAsExcel").click(function(){
                $("#indicateurs").table2excel({
                exclude: ".excludeThisClass",
                name: "MMG TDB Activités",
				filename: "MMG TDB Activités" + new Date().toISOString().replace(/[\-\:\.]/g, "") + ".xls",
				fileext: ".xls",
				exclude_img: true,
				exclude_links: true,
				exclude_inputs: true
            });
        });
    })



     var ctx = document.getElementById('chartSante');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'Contrats santé',
                    data: [{% for mois in totalsante %}{{mois.kpi}},{% endfor %}],
                    fill: true,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                },
                {
                    label: 'NON VIE (Hors ACS Hors CSS Hors CMU)',
                    data: [{% set su = '' %}{% set nbcollectif = '' %} {% set nbph = '' %}  {% set nbcss = '' %} {% set nbcmu = '' %} {% set nbacs = '' %}{% set nbmmg = '' %}
                        {% for mois in totalsante %}
                        {% for collect in collectif  %}{% if collect.kpidate == mois.kpidate%}{% set nbcollectif = collect.kpidistinct %}{% endif %} {% endfor %}
                        {% for p in ph  %}{% if p.kpidate == mois.kpidate%}{% set  nbph = p.kpidistinct %}{% endif %} {% endfor %}
                        {% for p in css  %}{% if p.kpidate == mois.kpidate%}{% set  nbcss = p.kpidistinct %}{% endif %} {% endfor %}
                        {% for p in cmu  %}{% if p.kpidate == mois.kpidate%}{% set  nbcmu = p.kpidistinct %}{% endif %} {% endfor %}
                        {% for p in acs  %}{% if p.kpidate == mois.kpidate%}{% set  nbacs = p.kpidistinct %}{% endif %} {% endfor %}
                        {% for p in mmg  %}{% if p.kpidate == mois.kpidate%}{% set  nbmmg = p.kpidistinct %}{% endif %} {% endfor %}
                        {% set  su = mois.kpidistinct - nbcollectif - nbph - nbcss - nbcmu - nbacs %}{{su + nbcollectif + nbph}},
                        {% endfor %}],
                    fill: true,
                    borderColor: 'rgb(0, 146, 227)',
                    tension: 0.1
                }],
                labels: [{% for mois in totalsante %}'{{mois.kpidate|date("M Y")}}',{% endfor %}]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
    <script>
     var ctx = document.getElementById('chartPrev');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                datasets: [{
                    label: 'Contrats prévoyance',
                    data: [{% for mois in totalprev %}{{mois.value}},{% endfor %}],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }],
                labels: [{% for mois in totalprev %}'{{mois.date|date("M Y")}}',{% endfor %}]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
    <script>
     var ctx = document.getElementById('chartViagerAnnuel');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                datasets: [{
                    data: ['{{chartViager}}','{{chartContratAnnuel}}'],
                    backgroundColor:['rgb(75, 192, 192)','rgb(0, 146, 227)']
                }],
                labels: ['Viager ({{(chartViager / (chartViager + chartContratAnnuel) * 100)|round }} %)', 'Contrat annuel ({{(chartContratAnnuel / (chartViager + chartContratAnnuel) * 100)|round }} %)']
            },
            options: {
                plugins: {
                    legend: {
                        labels: {
                            // This more specific font property overrides the global property
                            font: {
                                size: 16
                            }
                        }
                    }
                }
            }
        });
    </script>
    <script>
     var ctx = document.getElementById('chartPp');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                datasets: [{
                    label: '{{chartPpTotal[0][0]|date("M Y")}}',
                    data: [{{chartPpTotal[1][0]}},{{chartPpTotal[2][0]}},{{chartPpTotal[3][0]}}],
                    backgroundColor: 'rgb(75, 192, 192)'
                },
                {
                    label: '{{chartPpTotal[0][1]|date("M Y")}}',
                    data: [{{chartPpTotal[1][1]}},{{chartPpTotal[2][1]}},{{chartPpTotal[3][1]}}],
                    backgroundColor: 'rgb(0, 146, 227)'
                },
                {
                    label: '{{chartPpTotal[0][2]|date("M Y")}}',
                    data: [{{chartPpTotal[1][2]}},{{chartPpTotal[2][2]}},{{chartPpTotal[3][2]}}],
                    backgroundColor: 'rgb(129, 199, 132)'
                }],
                labels: [['Nombre de PP','(HORS ACS)'], 'VIE', ['NON VIE','(HORS ACS, CSS, CMU)']]
            },
            options: {
              scales: {
                  x:{
                    ticks: {
                        font:{
                          size: 14
                        }
                    }
                  },
                  y:{
                    ticks: {
                        font:{
                          size: 16
                        }
                    },
                    beginAtZero: true
                  }
              },
              plugins: {
                  legend: {
                      labels: {
                          // This more specific font property overrides the global property
                          font: {
                              size: 16
                          }
                      }
                  }
              }
            }
        });
    </script>
    <script>
     var ctx = document.getElementById('chartContratTotal');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                datasets: [{
                    label: '{{chartContratTotal[0][0]|date("M Y")}}',
                    data: [{{chartContratTotal[1][0]}},{{chartContratTotal[2][0]}},{{chartContratTotal[3][0]}}],
                    backgroundColor: 'rgb(75, 192, 192)'
                },
                {
                    label: '{{chartContratTotal[0][1]|date("M Y")}}',
                    data: [{{chartContratTotal[1][1]}},{{chartContratTotal[2][1]}},{{chartContratTotal[3][1]}}],
                    backgroundColor: 'rgb(0, 146, 227)'
                },
                {
                    label: '{{chartContratTotal[0][2]|date("M Y")}}',
                    data: [{{chartContratTotal[1][2]}},{{chartContratTotal[2][2]}},{{chartContratTotal[3][2]}}],
                    backgroundColor: 'rgb(129, 199, 132)'
                }],
                labels: [['Effectif Cotisant','(HORS ACS)'], 'VIE', ['NON VIE','(HORS ACS, CSS, CMU)']]
            },
            options: {
                scales: {
                    x:{
                      ticks: {
                          font:{
                            size: 14
                          }
                      }
                    },
                    y:{
                      ticks: {
                          font:{
                            size: 16
                          }
                      },
                      beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        labels: {
                            // This more specific font property overrides the global property
                            font: {
                                size: 16
                            }
                        }
                    }
                }
            }
        });
    </script>
    <script>
     var ctx = document.getElementById('chartRadiation');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                datasets: [{
                    label: '{{chartContratTotal[0][0]|date("M Y")}}',
                    data: [{{chartRadiations[4][0]}},{{chartRadiations[3][0]}},{{chartRadiations[0][0]}},{{chartRadiations[1][0]}},{{chartRadiations[2][0]}}],
                    backgroundColor: 'rgb(75, 192, 192)'
                },
                {
                    label: '{{chartContratTotal[0][1]|date("M Y")}}',
                    data: [{{chartRadiations[4][1]}},{{chartRadiations[3][1]}},{{chartRadiations[0][1]}},{{chartRadiations[1][1]}},{{chartRadiations[2][1]}}],
                    backgroundColor: 'rgb(0, 146, 227)'
                },
                {
                    label: '{{chartContratTotal[0][2]|date("M Y")}}',
                    data: [{{chartRadiations[4][2]}},{{chartRadiations[3][2]}},{{chartRadiations[0][2]}},{{chartRadiations[1][2]}},{{chartRadiations[2][2]}}],
                    backgroundColor: 'rgb(129, 199, 132)'
                }],
                labels: ['Radiations (Hors Décès)','Nombre de déces', 'VIE (TT Motif)', 'NON VIE (TT Motif)', 'Radiation (TT Motif)']
            },
            options: {
                indexAxis: 'y',
                scales: {
                    x:{
                      ticks: {
                          font:{
                            size: 16
                          }
                      }
                    },
                    y:{
                      ticks: {
                          font:{
                            size: 14
                          }
                      },
                      beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        labels: {
                            // This more specific font property overrides the global property
                            font: {
                                size: 16
                            }
                        }
                    }
                }
            }
        });

        var variation = document.getElementById('indicateurs');

    </script>
{% endblock %}