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

{% block stylesheets %}
<style>
    

    
</style>
{% endblock %}


{% block body %}

<div class="container-fluid">

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

                <!-- Pretitle -->
                <h6 class="header-pretitle">
                  {{date}}
                </h6>

                <!-- Title -->
                <h2 class="header-title">
                  Santé
                </h2>

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

                <ul class="nav">
                    {# SELECTOR #}
                    {% for date in selector %} 
                    <li class="nav-item">
                    <small>  <a class="nav-link switch nb-1" aria-current="page"  href="{{ path('app_sante', {insertion: date.insertion|date('Y-m-d')}) }}">{{ date.periode }}</a> </small>
                    </li>                   
                    {% endfor %}
                </ul>

            </div>
        </div> <!-- / .row -->
    </div> <!-- / .header-body -->
</div>
<br>

<div class="container-fluid">

    <div class="row">
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Contrats</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ total[1] }}
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Contrats individuels</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ nbcontratindiv[1] }}
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Contrats collectifs</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ nbcontratcollectif[1] }}
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Assurés clients</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ nbassureclient[1] }}
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Assurés MMG</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ nbassuremmg[1] }}
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Assurés Collectifs</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ nbassure[1]}}
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
    </div>

    
    <br>
    <div class="row">
        <div class="col-sm">
            {# TAB #}
            <div class="small" id="sante">Chargement des données en cours..</div>
        </div>
    </div>
</div>   

{% endblock %}


{% block javascripts %}
    <script>
        var table = $('#sante').initDataTables({{ datatable_settings(datatable) }}, 
        { 
            searching: true,
            serverSide : true,
            responsive: true,
            processing : true,
            ordering : true,
            autoWidth: false,
            dom:"<'row'<'col-sm-2'B><'col-sm-3'l><'col-sm-4'i><'col-sm-3'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12'p>>",
            lengthMenu: [[25, 50, 100, 500, 1000, 5000, 10000, -1], [25, 50, 100, 500, 1000, 5000, 10000, "All"]],
            pageLength: 25,
            buttons: [
                {
                    extend: 'excel',
                    text: 'Export Excel',
                    className: 'btn-sm',
                    exportOptions: {
                        modifier: {
                            search: 'applied',
                            order: 'applied'
                        }
                    }
                }
            ],
            initComplete: function () {
                    {# this.api().columns().every(function () {
                        let that = this;
                        $('input', this.footer()).on('keyup change clear', function () {
                            if (that.search() !== this.value) {
                                that
                                    .search(this.value)
                                    .draw();
                            }
                        });
                    });

                    let r = $('thead tr');
                    r.find('th').each(function () {
                        $(this).css('padding', 7);
                    });
                    $('thead').append(r);
                    $('#search_0').css('text-align', 'center'); #}
                },
        } ).then(function (dt) {
                {# $('thead th').each(function () {
                    let title = $(this).text();
                    $(this).html('<input type="search" class="form-control form-control-sm" placeholder="' + title + '" />');
                }); #}
            });
    </script>
{% endblock %}