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

{% block title %}Statistics{% endblock %}
{% block stylesheets %}

    {{ parent() }}
    <style>
        .select2-search__field {
            padding-left: 10px !important;
        }

        .height-block-curve {
            height: 315px !important;
        }

        canvas {
            width: 100%;
            height: 100%;
            position: relative;
        }

        /*#download-chart{*/
        /*    margin-right: 20px !important;*/
        /*}*/
    </style>
{% endblock stylesheets %}

{% block breadcrumbs %}
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-sm-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ path('home') }}">
                                <i data-feather="home"></i>
                            </a>
                        </li>
                        <li class="breadcrumb-item active">Statistics</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block body %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="text-primary">Statistics</h5>
                        <div class="card-header-right card-header-right-btn">
                            <span class="text-right"><a class="btn btn-primary" href="{{ path('home') }}"><i
                                            class="fas fa-undo"></i> Back</a></span>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item"><a class="nav-link active" id="viruses-tab" data-bs-toggle="tab"
                                                    href="#curve-distribution-viruses" role="tab"
                                                    aria-controls="viruses" aria-selected="true">Distribution of
                                    viruses</a></li>
                            <li class="nav-item"><a class="nav-link" id="influenza-tab" data-bs-toggle="tab"
                                                    href="#curve-distribution-influenza" role="tab"
                                                    aria-controls="influenza" aria-selected="false">Distribution of
                                    influenza strains</a></li>
                            <li class="nav-item"><a class="nav-link" id="laboratory-confirmed-influenza-tab"
                                                    data-bs-toggle="tab" href="#curve-distribution-lci" role="tab"
                                                    aria-controls="Laboratory-confirmed-influenza"
                                                    aria-selected="false">Distribution laboratory confirmed
                                    influenza</a></li>
                            <li class="nav-item"><a class="nav-link" id="icu-tab" data-bs-toggle="tab"
                                                    href="#curve-distribution-icu" role="tab" aria-controls="icu"
                                                    aria-selected="false">Distribution Intensive care unit</a></li>
                            <li class="nav-item"><a class="nav-link" id="epa-tab" data-bs-toggle="tab"
                                                    href="#curve-distribution-epa" role="tab" aria-controls="epa"
                                                    aria-selected="false">Distribution of enrolled patients by age - by
                                    sites</a></li>
                            <li class="nav-item"><a class="nav-link" id="epa-tab" data-bs-toggle="tab"
                                                    href="#curve-distribution-epaas" role="tab" aria-controls="epaas"
                                                    aria-selected="false">Distribution of enrolled patients by age - all
                                    sites</a></li>
                        </ul>
                        <div class="tab-content" id="statistics-distribution-tab">
                            <div class="tab-pane fade show active" id="curve-distribution-viruses" role="tabpanel"
                                 aria-labelledby="viruses-tab">
                                <div class="col-sm-12 distribution-viruses-block">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="default-according style-1" id="virusesAccordion">
                                                <div class="card">
                                                    <div class="card-header bg-primary">
                                                        <h5 class="mb-0">
                                                            <button class="btn btn-link collapsed text-white accordion-collapse-btn"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#virusesAccordionBloc"
                                                                    aria-expanded="false"><i
                                                                        class="fa fa-filter"></i>Filter
                                                            </button>
                                                        </h5>
                                                    </div>
                                                    <div class="collapse " id="virusesAccordionBloc"
                                                         data-bs-parent="#virusesAccordionBloc">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-viruses-season">Seasons
                                                                            (select desired seasons) </label>
                                                                        <select class="select2-multiple statistics-distribution-viruses-season distribution-viruses-season"
                                                                                id="distribution-viruses-season"
                                                                                data-placeholder="Seasons (select desired seasons)"
                                                                                multiple>
                                                                            <option value="all">All</option>
                                                                            {% for item in seasons %}
                                                                                <option value="{{ item.season }}">{{ item.season }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-viruses-site">Sites
                                                                            (select desired sites) </label>
                                                                        <select class="select2-multiple statistics-distribution-viruses-site distribution-viruses-site"
                                                                                id="distribution-viruses-site"
                                                                                data-placeholder="Sites (select desired sites)"
                                                                                multiple>
                                                                            <option value="all">All</option>
                                                                            {% for site in listSites %}
                                                                                <option value="{{ site.zone }}">{{ site.zone }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-2">
                                                                <div class="col-xl-12 col-lg-12 col-sm-12 text-right">
                                                                    <button class="btn btn-primary distribution-viruses-action-filter  mb-2">
                                                                        <i class="fa fa-filter"></i> Filter
                                                                    </button>
                                                                    <button class="btn btn-outline-primary intialiser-distribution-viruses-action-filter mb-2"
                                                                            onclick="restFilterDistributionViruses()">
                                                                        <i class="fas fa-times"></i> Reset the filter
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-4">
                                                <div class="col-8 offset-2 text-center">
                                                    <h6 class="text-primary">Distribution of viruses by sites</h6>
                                                </div>
                                                <div class="col-2 d-flex justify-content-end">
                                                    <button class="btn btn-primary px-4 mb-4" id="download-chart"
                                                            graph-id="statistics-distribution-viruses-block"><i
                                                                class="fas fa-download"></i> Export graph
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="height-block-curve">
                                                <canvas title="Distribution of viruses by sites"
                                                        id="statistics-distribution-viruses-block"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="curve-distribution-influenza" role="tabpanel"
                                 aria-labelledby="influenza-tab">
                                <div class="col-sm-12 distribution-influenza-block">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="default-according style-1" id="influenzaAccordion">
                                                <div class="card">
                                                    <div class="card-header bg-primary">
                                                        <h5 class="mb-0">
                                                            <button class="btn btn-link collapsed text-white accordion-collapse-btn"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#influenzaAccordionBloc"
                                                                    aria-expanded="false"><i
                                                                        class="fa fa-filter"></i>Filter
                                                            </button>
                                                        </h5>
                                                    </div>
                                                    <div class="collapse " id="influenzaAccordionBloc"
                                                         data-bs-parent="#influenzaAccordionBloc">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-influenza-season">Seasons
                                                                            (select desired seasons) </label>
                                                                        <select class="select2-multiple statistics-distribution-influenza-season distribution-influenza-season"
                                                                                id="distribution-influenza-season"
                                                                                data-placeholder="Seasons (select desired seasons)"
                                                                                multiple="multiple">
                                                                            <option value="all">All</option>
                                                                            {% for item in seasons %}
                                                                                <option value="{{ item.season }}">{{ item.season }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-influenza-site">Sites
                                                                            (select desired sites) </label>
                                                                        <select class="select2-multiple statistics-distribution-influenza-site distribution-influenza-site"
                                                                                id="distribution-influenza-site"
                                                                                multiple="multiple"
                                                                                data-placeholder="Sites (select desired sites)">
                                                                            <option value="all">All</option>
                                                                            {% for site in listSites %}
                                                                                <option value="{{ site.zone }}">{{ site.zone }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-influenza-week">Weeks
                                                                            (select desired weeks)</label>
                                                                        <select class="select2-multiple statistics-distribution-influenza-week distribution-influenza-week"
                                                                                id="distribution-influenza-week"
                                                                                multiple="multiple"
                                                                                data-placeholder="Weeks (select desired weeks)">
                                                                            <option value="all">All</option>
                                                                            {% for week in number_week %}
                                                                                <option value="{{ week }}">{{ week }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-2">
                                                                <div class="col-xl-12 col-lg-12 col-sm-12 text-right">
                                                                    <button class="btn btn-primary distribution-influenza-action-filter mb-2">
                                                                        <i class="fa fa-filter"></i> Filter
                                                                    </button>
                                                                    <button class="btn btn-outline-primary intialiser-distribution-influenza-action-filter mb-2"
                                                                            onclick="restFilterDistributionInfluenza()">
                                                                        <i class="fas fa-times"></i> Reset the filter
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-4">
                                                <div class="col-8 offset-2 text-center">
                                                    <h6 class="text-primary">Distribution of influenza strains per
                                                        week</h6>
                                                </div>
                                                <div class="col-2 d-flex justify-content-end">
                                                    <button class="btn btn-primary px-4 mb-4" id="download-chart"
                                                            graph-id="statistics-distribution-influenza-block"><i
                                                                class="fas fa-download"></i> Export graph
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="height-block-curve">
                                                <canvas title="Distribution of influenza strains per week"
                                                        id="statistics-distribution-influenza-block"></canvas>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="curve-distribution-lci" role="tabpanel"
                                 aria-labelledby="laboratory-confirmed-influenza-tab">
                                <div class="col-sm-12 distribution-laboratory-confirmed-influenza-block">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="default-according style-1"
                                                 id="laboratory-confirmed-influenza-accordion">
                                                <div class="card">
                                                    <div class="card-header bg-primary">
                                                        <h5 class="mb-0">
                                                            <button class="btn btn-link collapsed text-white accordion-collapse-btn"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#laboratoryConfirmedInfluenzaAccordionBloc"
                                                                    aria-expanded="false"><i
                                                                        class="fa fa-filter"></i>Filter
                                                            </button>
                                                        </h5>
                                                    </div>
                                                    <div class="collapse "
                                                         id="laboratoryConfirmedInfluenzaAccordionBloc"
                                                         data-bs-parent="#laboratoryConfirmedInfluenzaAccordionBloc">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-lci-season">Seasons
                                                                            (select desired seasons) </label>
                                                                        <select class="select2-multiple statistics-distribution-lci-season distribution-lci-season"
                                                                                id="distribution-lci-season"
                                                                                data-placeholder="Seasons (select desired seasons)"
                                                                                multiple>
                                                                            <option value="all">All</option>
                                                                            {% for item in seasons %}
                                                                                <option value="{{ item.season }}">{{ item.season }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-lci-site">Sites (select
                                                                            desired sites) </label>
                                                                        <select class="select2-multiple statistics-distribution-lci-site distribution-lci-site"
                                                                                id="distribution-lci-site"
                                                                                multiple="multiple"
                                                                                data-placeholder="Sites (select desired sites)">
                                                                            <option value="all">All</option>
                                                                            {% for site in listSites %}
                                                                                <option value="{{ site.zone }}">{{ site.zone }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-2">
                                                                <div class="col-xl-12 col-lg-12 col-sm-12 text-right">
                                                                    <button class="btn btn-primary distribution-lci-action-filter mb-2">
                                                                        <i class="fa fa-filter"></i> Filter
                                                                    </button>
                                                                    <button class="btn btn-outline-primary intialiser-distribution-lci-action-filter mb-2"
                                                                            onclick="restFilterDistributionLCI()">
                                                                        <i class="fas fa-times"></i> Reset the filter
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-4">
                                                <div class="col-8 offset-2 text-center">
                                                    <h6 class="text-primary">Distribution of laboratory confirmed
                                                        influenza cases by influenza virus subtype – by sites</h6>
                                                </div>
                                                <div class="col-2 d-flex justify-content-end">
                                                    <button class="btn btn-primary px-4 mb-4" id="download-chart"
                                                            graph-id="statistics-distribution-lci-block"><i
                                                                class="fas fa-download"></i> Export graph
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="chart-container">
                                                <canvas title="Distribution of laboratory confirmed influenza cases by influenza virus subtype – by sites"
                                                        id="statistics-distribution-lci-block"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="curve-distribution-icu" role="tabpanel"
                                 aria-labelledby="icu-tab">
                                <div class="col-sm-12 distribution-icu-block">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="default-according style-1" id="icu-accordion">
                                                <div class="card">
                                                    <div class="card-header bg-primary">
                                                        <h5 class="mb-0">
                                                            <button class="btn btn-link collapsed text-white accordion-collapse-btn"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#icuAccordionBloc"
                                                                    aria-expanded="false"><i
                                                                        class="fa fa-filter"></i>Filter
                                                            </button>
                                                        </h5>
                                                    </div>
                                                    <div class="collapse " id="icuAccordionBloc"
                                                         data-bs-parent="#icuAccordionBloc">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-icu-season">Seasons
                                                                            (select desired seasons) </label>
                                                                        <select class="select2-multiple statistics-distribution-icu-season distribution-icu-season"
                                                                                id="distribution-icu-season"
                                                                                data-placeholder="Seasons (select desired seasons)"
                                                                                multiple>
                                                                            <option value="all">All</option>
                                                                            {% for item in seasons %}
                                                                                <option value="{{ item.season }}">{{ item.season }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-icu-site">Sites (select
                                                                            desired sites) </label>
                                                                        <select class="select2-multiple statistics-distribution-icu-site distribution-icu-site"
                                                                                id="distribution-icu-site"
                                                                                multiple="multiple"
                                                                                data-placeholder="Sites (select desired sites)">
                                                                            <option value="all">All</option>
                                                                            {% for site in listSites %}
                                                                                <option value="{{ site.zone }}">{{ site.zone }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-2">
                                                                <div class="col-xl-12 col-lg-12 col-sm-12 text-right">
                                                                    <button class="btn btn-primary distribution-icu-action-filter mb-2">
                                                                        <i class="fa fa-filter"></i> Filter
                                                                    </button>
                                                                    <button class="btn btn-outline-primary intialiser-distribution-icu-action-filter mb-2"
                                                                            onclick="restFilterDistributionICU()">
                                                                        <i class="fas fa-times"></i> Reset the filter
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-4">
                                                <div class="col-8 offset-2 text-center">
                                                    <h6 class="text-primary">Distribution of Intensive care unit (ICU)
                                                        admissions and deaths among laboratory confirmed influenza
                                                        cases</h6>
                                                </div>
                                                <div class="col-2 d-flex justify-content-end">
                                                    <button class="btn btn-primary px-4 mb-4" id="download-chart"
                                                            graph-id="statistics-distribution-icu-block"><i
                                                                class="fas fa-download"></i> Export graph
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="height-block-curve">
                                                <canvas title="Distribution of Intensive care unit (ICU) admissions and deaths among laboratory confirmed influenza cases"
                                                        id="statistics-distribution-icu-block"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="curve-distribution-epa" role="tabpanel"
                                 aria-labelledby="epa-tab">
                                <div class="col-sm-12 distribution-epa-block">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="default-according style-1" id="epa-accordion">
                                                <div class="card">
                                                    <div class="card-header bg-primary">
                                                        <h5 class="mb-0">
                                                            <button class="btn btn-link collapsed text-white accordion-collapse-btn"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#epaAccordionBloc"
                                                                    aria-expanded="false"><i
                                                                        class="fa fa-filter"></i>Filter
                                                            </button>
                                                        </h5>
                                                    </div>
                                                    <div class="collapse " id="epaAccordionBloc"
                                                         data-bs-parent="#epaAccordionBloc">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-epa-season">Seasons
                                                                            (select desired seasons) </label>
                                                                        <select class="select2-multiple statistics-distribution-epa-season distribution-epa-season"
                                                                                id="distribution-epa-season"
                                                                                data-placeholder="Seasons (select desired seasons)"
                                                                                multiple>
                                                                            <option value="all">All</option>
                                                                            {% for item in seasons %}
                                                                                <option value="{{ item.season }}">{{ item.season }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-epa-site">Sites (select
                                                                            desired sites) </label>
                                                                        <select class="select2-multiple statistics-distribution-epa-site distribution-epa-site"
                                                                                id="distribution-epa-site"
                                                                                multiple="multiple"
                                                                                data-placeholder="Sites (select desired sites)">
                                                                            <option value="all">All</option>
                                                                            {% for site in listSites %}
                                                                                <option value="{{ site.zone }}">{{ site.zone }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-2">
                                                                <div class="col-xl-12 col-lg-12 col-sm-12 text-right">
                                                                    <button class="btn btn-primary distribution-epa-action-filter mb-2">
                                                                        <i class="fa fa-filter"></i> Filter
                                                                    </button>
                                                                    <button class="btn btn-outline-primary intialiser-distribution-epa-action-filter mb-2"
                                                                            onclick="restFilterDistributionEPA()">
                                                                        <i class="fas fa-times"></i> Reset the filter
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-4">
                                                <div class="col-8 offset-2 text-center">
                                                    <h6 class="text-primary">Distribution of enrolled patients by age
                                                        groups - by sites</h6>
                                                </div>
                                                <div class="col-2 d-flex justify-content-end">
                                                    <button class="btn btn-primary px-4 mb-4" id="download-chart"
                                                            graph-id="statistics-distribution-epa-block"><i
                                                                class="fas fa-download"></i> Export graph
                                                    </button>
                                                </div>
                                            </div>
                                            <div>
                                                <canvas title="Distribution of enrolled patients by age groups - by sites"
                                                        id="statistics-distribution-epa-block"
                                                        style="height: 800px!important;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="curve-distribution-epaas" role="tabpanel"
                                 aria-labelledby="epaas-tab">
                                <div class="col-sm-12 distribution-epaas-block">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="default-according style-1" id="epaas-accordion">
                                                <div class="card">
                                                    <div class="card-header bg-primary">
                                                        <h5 class="mb-0">
                                                            <button class="btn btn-link collapsed text-white accordion-collapse-btn"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#epaasAccordionBloc"
                                                                    aria-expanded="false"><i
                                                                        class="fa fa-filter"></i>Filter
                                                            </button>
                                                        </h5>
                                                    </div>
                                                    <div class="collapse " id="epaasAccordionBloc"
                                                         data-bs-parent="#epaasAccordionBloc">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-epaas-season">Seasons
                                                                            (select desired seasons) </label>
                                                                        <select class="select2-multiple statistics-distribution-epaas-season distribution-epaas-season"
                                                                                id="distribution-epaas-season"
                                                                                data-placeholder="Seasons (select desired seasons)"
                                                                                multiple>
                                                                            <option value="all">All</option>
                                                                            {% for item in seasons %}
                                                                                <option value="{{ item.season }}">{{ item.season }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                                                                    <div class="mb-2">
                                                                        <label for="distribution-epaas-site">Sites
                                                                            (select desired sites) </label>
                                                                        <select class="select2-multiple statistics-distribution-epaas-site distribution-epaas-site"
                                                                                id="distribution-epaas-site"
                                                                                multiple="multiple"
                                                                                data-placeholder="Sites (select desired sites)">
                                                                            <option value="all">All</option>
                                                                            {% for site in listSites %}
                                                                                <option value="{{ site.zone }}">{{ site.zone }}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-2">
                                                                <div class="col-xl-12 col-lg-12 col-sm-12 text-right">
                                                                    <button class="btn btn-primary distribution-epaas-action-filter mb-2">
                                                                        <i class="fa fa-filter"></i> Filter
                                                                    </button>
                                                                    <button class="btn btn-outline-primary intialiser-distribution-epaas-action-filter mb-2"
                                                                            onclick="restFilterDistributionEPAAS()">
                                                                        <i class="fas fa-times"></i> Reset the filter
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-4">
                                                <div class="col-8 offset-2 text-center">
                                                    <h6 class="text-primary">Distribution of enrolled patients by age
                                                        groups – all sites</h6>
                                                </div>
                                                <div class="col-2 d-flex justify-content-end">
                                                    <button class="btn btn-primary px-4 mb-4" id="download-chart"
                                                            graph-id="statistics-distribution-epaas-block"><i
                                                                class="fas fa-download"></i> Export graph
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="height-block-curve">
                                                <canvas title="Distribution of enrolled patients by age groups – all sites"
                                                        id="statistics-distribution-epaas-block"
                                                        style="position:relative;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}

    {{ parent() }}

    <script src="{{ asset('assets/js/chartJs/chart.js') }}"></script>
    <script src="{{ asset('assets/js/chartJs/chart.min.js') }}"></script>

    <script>
        // global variable
        var sitesDataDistributionViruses,
            seasonsDataDistributionInfluenza,
            seasonsDataDistributionViruses,
            seasonsDataDistributionLCI,
            sitesDataDistributionLCI,
            sitesDataDistributionEPA,
            seasonsDataDistributionEPA,
            sitesDataDistributionEPAAS,
            seasonsDataDistributionEPAAS,
            seasonsDataDistributionICU,
            sitesDataDistributionICU,
            sitesDataDistributionInfluenza,
            weeksDataDistributionInfluenza = [];

        /* ------------------------------------------------- start statistics distribution of viruses by season JS  -------------------------------------------------------------- */
        // CHANGE THE STYLE OF THE CURSOR WHEN WE HOVER ON THE COLOER OF THE CHART
        // Chart.defaults.plugins.legend.onHover = function() {
        //     document.body.style.cursor = 'pointer';
        // };
        // Chart.defaults.plugins.legend.onLeave = function() {
        //     document.body.style.cursor = 'unset';
        // };

        // definition of option of the chart
        var distributionVirusesOptions = {
            type: 'bar',
            data: {
                labels: [],
                datasets: [
                    {
                        label: 'Enrolled',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#44546A',
                        yAxisID: 'left-y-axis',
                        stacked: false,
                        borderWidth: 0, // Set the borderWidth option to 0
                    },
                    {
                        label: '#Influenza+',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#D9144C',
                        yAxisID: 'left-y-axis',
                        stacked: false,
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: '#SARS-CoV-2+',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#6E9890',
                        yAxisID: 'left-y-axis',
                        stacked: false,
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: '#RSV+',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#D9D632',
                        yAxisID: 'left-y-axis',
                        stacked: false,
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: '#ORV+',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#8E477D',
                        yAxisID: 'left-y-axis',
                        stacked: false,
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: '#EVD68',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#FFA298',
                        yAxisID: 'left-y-axis',
                        stacked: false,
                        borderWidth: 0, // Set the borderWidth option to 0
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                // height: 200,
                layout: {
                    padding: {
                        left: 20,
                        right: 20
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        align: 'end',
                        color: '#000000',
                        padding: {
                            bottom: 5,
                        },
                        font: {
                            weight: 'bold',
                        }
                    },
                    legend: {
                        position: 'bottom',
                        onClick: function (event, legendItem) {
                        }
                    },
                },
                barThickness: 'flex',// set the bar width to 20 pixels
                scales: {
                    x: {
                        // type: 'category',
                        stacked: false,
                        grid: {
                            display: false,
                        },
                        title: {
                            display: true,
                            text: 'Sites',
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                    },
                    'left-y-axis': {
                        type: 'linear',
                        position: 'left',
                        ticks: {
                            beginAtZero: true,
                            align: 'center'
                        },
                        title: {
                            display: true,
                            text: 'Count',
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },

                    }
                }
            }
        };

        /* init chart of distribution of viruses by season */
        var initChartDistributionViruses = document.getElementById('statistics-distribution-viruses-block');
        var chartDistributionViruses = new Chart(initChartDistributionViruses, distributionVirusesOptions);
        chartDistributionViruses.render();

        // here if we change the season we gonna send a request ajax to get all the necessary information to draw the chart
        $(document).on('change', '.statistics-distribution-viruses-season', function () {
            seasonsDataDistributionViruses = $(".statistics-distribution-viruses-season").val();
            $("#distribution-viruses-site").val(" ").trigger("change");
            restChartDistributionViruses();
            showHideBlockFilterDistributionInViruses();
            if (seasonsDataDistributionViruses.includes("all")) {
                let allSeasonsDistributionViruses = [];
                const selectElement = document.getElementById("distribution-viruses-season");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSeasonsDistributionViruses.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-viruses-season").val(allSeasonsDistributionViruses);
                $("#distribution-viruses-season").trigger("change");
            }

            if (seasonsDataDistributionViruses.length < 1) {
                $('#distribution-viruses-site').find('option').attr('disabled', 'disabled');
                $('#distribution-viruses-site').select2().trigger("change");
                $(".intialiser-distribution-viruses-action-filter").hide();
            }
            if (seasonsDataDistributionViruses && seasonsDataDistributionViruses.length > 0) {
                let formData = new FormData();
                formData.append('data[seasons]', seasonsDataDistributionViruses);
                $.ajax({
                    method: "POST",
                    url: "{{ path('valid_site_distribution_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            let listSiteOptions = $("#distribution-viruses-site").find('option');
                            let listValidSites = response.valid_sites;
                            listSiteOptions.each(function () {
                                let value = $(this).text();
                                if (listValidSites.includes(value)) {
                                    $('#distribution-viruses-site').find('option[value="' + value + '"]').attr('disabled', false);
                                } else {
                                    $('#distribution-viruses-site').find('option[value="' + value + '"]').attr('disabled', 'disabled');
                                }
                                $('#distribution-viruses-site').find('option[value="all"]').attr('disabled', false);
                                $('#distribution-viruses-site').select2().trigger("change.select2");
                            });
                        }
                    }
                });
            }
        });

        $(document).on('change', '.statistics-distribution-viruses-site', function () {
            sitesDataDistributionViruses = $(".statistics-distribution-viruses-site").val();
            showHideBlockFilterDistributionInViruses();
            if (sitesDataDistributionViruses.includes("all")) {
                var allSitesDistributionViruses = [];
                const selectElement = document.getElementById("distribution-viruses-site");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSitesDistributionViruses.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-viruses-site").val(allSitesDistributionViruses);
                $('#distribution-viruses-site').trigger("change");
            }
            if (sitesDataDistributionViruses && sitesDataDistributionViruses.length < 1) {
                restChartDistributionViruses();
            } else {
                $(".distribution-viruses-action-filter").show();
            }
        });

        //  get data to draw the curve of statistics
        // first we verify if we have a data for the season and the sites if true we send a request to statistics_ajax and we retrieve all data
        // if no data for season and sites we display the message "You must choose at least one season and one site"
        $(document).on('click', '.distribution-viruses-action-filter', function () {
            if ((seasonsDataDistributionViruses && seasonsDataDistributionViruses.length > 0) && (sitesDataDistributionViruses && sitesDataDistributionViruses.length > 0)) {
                let formData = new FormData();
                formData.append('data[seasons]', seasonsDataDistributionViruses);
                formData.append('data[sites]', sitesDataDistributionViruses);
                $('#load_screen').show();
                $.ajax({
                    method: "POST",
                    url: "{{ path('statistics_distribution_viruses_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            // here we gonna update the series data in the chart
                            chartDistributionViruses.options.plugins.title.text = "N = " + response["data"].totalIncluded;
                            chartDistributionViruses.data.labels = response["data"].sites;
                            chartDistributionViruses.data.datasets[0].data = response["data"].enrolled;
                            chartDistributionViruses.data.datasets[1].data = response["data"].influenza;
                            chartDistributionViruses.data.datasets[2].data = response["data"].SARSCoV2;
                            chartDistributionViruses.data.datasets[3].data = response["data"].RSV;
                            chartDistributionViruses.data.datasets[4].data = response["data"].ORV;
                            chartDistributionViruses.data.datasets[5].data = response["data"].EVD68;
                            chartDistributionViruses.update();
                        }
                    }
                });
            }
        });

        // reset the curve of statistics distribution of viruses by site
        function restChartDistributionViruses() {
            chartDistributionViruses.data.labels = [];
            chartDistributionViruses.options.plugins.title.text = "";
            chartDistributionViruses.data.datasets[0].data = [];
            chartDistributionViruses.data.datasets[1].data = [];
            chartDistributionViruses.data.datasets[2].data = [];
            chartDistributionViruses.data.datasets[3].data = [];
            chartDistributionViruses.data.datasets[4].data = [];
            chartDistributionViruses.data.datasets[5].data = [];
            chartDistributionViruses.update();
        }

        // reset the filter of statistics distribution of viruses by site
        function restFilterDistributionViruses() {
            restChartDistributionViruses();
            $("#distribution-viruses-season").val("").trigger("change");
            $("#distribution-viruses-site").val("").trigger("change");
            $(".distribution-viruses-action-filter").hide();
            $(".intialiser-distribution-viruses-action-filter ").hide();
        }

        function showHideBlockFilterDistributionInViruses() {
            if ((sitesDataDistributionViruses && sitesDataDistributionViruses.length > 0) && (seasonsDataDistributionViruses && seasonsDataDistributionViruses.length > 0)) {
                $(".distribution-viruses-action-filter").show();
                $(".intialiser-distribution-viruses-action-filter ").show();
            } else {
                $(".distribution-viruses-action-filter").hide();
                $(".intialiser-distribution-viruses-action-filter ").show();
            }
        }

        /* ------------------------------------------------- end statistics distribution of viruses by season JS  -------------------------------------------------------------- */

        /* ------------------------------------------------- start statistics distribution of influenza by site JS  -------------------------------------------------------------- */

        // Options of chart distribution of Influenza by site
        var distributionInfluenzaOptions = {
            type: 'bar',
            data: {
                labels: [],
                datasets: [
                    {
                        label: 'Enrolled',
                        data: [],
                        type: 'scatter',
                        backgroundColor: '#44546A',
                        yAxisID: 'right-y-axis',
                        borderWidth: 0, // Set the borderWidth option to 0
                    },
                    {
                        label: 'A(H1N1)pdm09',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#afeeee',
                        yAxisID: 'left-y-axis',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    },
                    {
                        label: 'H1Nother',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#bebebe',
                        yAxisID: 'left-y-axis',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }
                    , {
                        label: 'A(H3)',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#48d1cc',
                        yAxisID: 'left-y-axis',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'H3Nother',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#3aa7a3',
                        yAxisID: 'left-y-axis',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'B(Yamagata lineage)',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#ffdead',
                        yAxisID: 'left-y-axis',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'B(Victoria lineage)',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#ffa500',
                        yAxisID: 'left-y-axis',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'A(Not subtyped)',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#008080',
                        yAxisID: 'left-y-axis',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'B(Lineage not determined)',
                        data: [],
                        type: 'bar',
                        backgroundColor: '#d2691e',
                        yAxisID: 'left-y-axis',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    },
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        align: 'end',
                        color: '#000000',
                        padding: {
                            bottom: 20,
                        },
                        font: {
                            weight: 'bold',
                        }
                    },
                    legend: {
                        position: 'bottom',
                        onClick: function (event, legendItem) {
                        }
                    },
                    colors: {
                        forceOverride: true
                    }
                },
                barThickness: 60,// set the bar width to 60 pixels // or there is an option "flex" we can make it
                scales: {
                    x: {
                        stacked: true,
                        grid: {
                            display: false,
                        },
                        title: {
                            display: true,
                            text: 'Weeks',
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                    },
                    'left-y-axis': {
                        type: 'linear',
                        position: 'left',
                        title: {
                            text: 'Distribution of strains',
                            display: true,
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                        ticks: {
                            beginAtZero: true,
                            // color : '#000000',
                            stepSize: 10
                        },
                    },
                    'right-y-axis': {
                        type: 'linear',
                        position: 'right',
                        title: {
                            text: 'Included/enrolled patients',
                            display: true,
                            color: '#cfd1d2',
                            font: {
                                weight: 'bold'
                            },
                        },
                        ticks: {
                            beginAtZero: true,
                            // color : '#cfd1d2',
                            stepSize: 50
                        },
                    }
                }
            }
        };

        /* init chart of distribution of influenza by site */
        var initChartDistributionInfluenza = document.getElementById('statistics-distribution-influenza-block');
        var chartDistributionInfluenza = new Chart(initChartDistributionInfluenza, distributionInfluenzaOptions);
        chartDistributionInfluenza.render();

        // here if we change the season we gonna send a request ajax to get all the necessary information to draw the chart
        $(document).on('change', '.statistics-distribution-influenza-season', function () {
            seasonsDataDistributionInfluenza = $(".statistics-distribution-influenza-season").val();
            $("#distribution-influenza-site").val(" ").trigger("change");
            $("#distribution-influenza-week").val(" ").trigger("change");
            restChartDistributionInfluenza();
            showHideBlockFilterDistributionInfluenza();
            if (seasonsDataDistributionInfluenza.includes("all")) {
                let allSeasonsDistributionInfluenza = [];
                const selectElement = document.getElementById("distribution-influenza-season");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSeasonsDistributionInfluenza.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-influenza-season").val(allSeasonsDistributionInfluenza);
                $("#distribution-influenza-season").trigger("change");
            }

            if (seasonsDataDistributionInfluenza.length < 1) {
                $('#distribution-influenza-site').find('option').attr('disabled', 'disabled');
                $('#distribution-influenza-site').select2().trigger("change");
                $('#distribution-influenza-week').find('option').attr('disabled', 'disabled');
                $('#distribution-influenza-week').select2().trigger("change");
                $(".intialiser-distribution-influenza-action-filter").hide();
            }
            if (seasonsDataDistributionInfluenza && seasonsDataDistributionInfluenza.length > 0) {
                let formData = new FormData();
                formData.append('data[seasons]', seasonsDataDistributionInfluenza);
                $.ajax({
                    method: "POST",
                    url: "{{ path('valid_site_distribution_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            let listSiteOptions = $("#distribution-influenza-site").find('option');
                            let listValidSites = response.valid_sites;
                            let allWeeksDistributionInfluenza = response.valid_weeks;

                            const selectElement = document.getElementById("distribution-influenza-week");
                            // reset list actuels of options  to add only valid week number for the given season
                            selectElement.innerHTML = '';
                            // Add the default option all
                            const defaultOption = document.createElement('option');
                            defaultOption.value = 'all';
                            defaultOption.text = 'All';
                            defaultOption.disabled = true;
                            selectElement.add(defaultOption);

                            for (let i = 0; i < allWeeksDistributionInfluenza.length; i++) {
                                const option = document.createElement('option');
                                option.value = allWeeksDistributionInfluenza[i];
                                option.text = allWeeksDistributionInfluenza[i];
                                option.selected = false;
                                option.disabled = true;
                                selectElement.add(option);
                            }
                            $("#distribution-influenza-week").val("").trigger("change");

                            listSiteOptions.each(function () {
                                let value = $(this).text();
                                if (listValidSites.includes(value)) {
                                    $('#distribution-influenza-site').find('option[value="' + value + '"]').attr('disabled', false);
                                } else {
                                    $('#distribution-influenza-site').find('option[value="' + value + '"]').attr('disabled', 'disabled');
                                }
                                $('#distribution-influenza-site').find('option[value="all"]').attr('disabled', false);
                                $('#distribution-influenza-site').select2().trigger("change.select2");
                            });
                        }
                    }
                });
            }
        });

        $(document).on('change', '.statistics-distribution-influenza-site', function () {
            sitesDataDistributionInfluenza = $("#distribution-influenza-site").val();
            $("#distribution-influenza-week").val(" ").trigger("change");
            restChartDistributionInfluenza();
            showHideBlockFilterDistributionInfluenza();
            if (sitesDataDistributionInfluenza.includes("all")) {
                let allSitesDistributionInfluenza = [];
                const selectElement = document.getElementById("distribution-influenza-site");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSitesDistributionInfluenza.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-influenza-site").val(allSitesDistributionInfluenza);
                $("#distribution-influenza-site").trigger("change");
            }
            if (sitesDataDistributionInfluenza.length < 1) {
                $('#distribution-influenza-week').find('option').attr('disabled', 'disabled');
                $('#distribution-influenza-week').select2().trigger("change");
                $(".intialiser-distribution-influenza-action-filter").hide();
            }
            if ((sitesDataDistributionInfluenza && sitesDataDistributionInfluenza.length > 0) && (seasonsDataDistributionInfluenza && seasonsDataDistributionInfluenza.length > 0)) {
                let formData = new FormData();
                formData.append('data[sites]', sitesDataDistributionInfluenza);
                formData.append('data[seasons]', seasonsDataDistributionInfluenza);
                $.ajax({
                    method: "POST",
                    url: "{{ path('valid_week_number_distribution_influenza_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            let listWeeksOptions = $("#distribution-influenza-week").find('option');
                            let listOptions = response.valid_weeks;
                            listWeeksOptions.each(function () {
                                let value = $(this).text();
                                if (listOptions.includes(value)) {
                                    $('#distribution-influenza-week').find('option[value="' + value + '"]').attr('disabled', false);
                                } else {
                                    $('#distribution-influenza-week').find('option[value="' + value + '"]').attr('disabled', 'disabled');
                                }
                                $('#distribution-influenza-week').find('option[value="all"]').attr('disabled', false);
                                $('#distribution-influenza-week').select2().trigger("change.select2");
                            });
                        }
                    }
                });
            }

        });

        $(document).on('change', '.statistics-distribution-influenza-week', function () {
            weeksDataDistributionInfluenza = $(".statistics-distribution-influenza-week").val();
            showHideBlockFilterDistributionInfluenza();
            if (weeksDataDistributionInfluenza.includes("all")) {
                let allWeeksDistributionInfluenza = [];
                const selectElement = document.getElementById("distribution-influenza-week");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allWeeksDistributionInfluenza.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-influenza-week").val(allWeeksDistributionInfluenza);
                $("#distribution-influenza-week").trigger("change");
            }
            if (weeksDataDistributionInfluenza && weeksDataDistributionInfluenza.length < 1) {
                restChartDistributionInfluenza();
            } else {
                $(".distribution-influenza-action-filter").show();
            }
        });

        // if the user selects at least one site the filter button is automatically displayed else we hide it and we reset the chart data
        function showHideBlockFilterDistributionInfluenza() {
            if ((weeksDataDistributionInfluenza && weeksDataDistributionInfluenza.length > 0) && (sitesDataDistributionInfluenza && sitesDataDistributionInfluenza.length > 0) && (seasonsDataDistributionInfluenza && seasonsDataDistributionInfluenza.length > 0)) {
                $(".distribution-influenza-action-filter").show();
                $(".intialiser-distribution-influenza-action-filter").show();
            } else {
                restChartDistributionInfluenza();
                $(".distribution-influenza-action-filter").hide();
                $(".intialiser-distribution-influenza-action-filter").show();
            }
        }

        // reset chart when there is no site selected
        function restChartDistributionInfluenza() {
            chartDistributionInfluenza.data.labels = [];
            chartDistributionInfluenza.options.plugins.title.text = "";
            chartDistributionInfluenza.data.datasets[0].data = [];
            chartDistributionInfluenza.data.datasets[1].data = [];
            chartDistributionInfluenza.data.datasets[2].data = [];
            chartDistributionInfluenza.data.datasets[3].data = [];
            chartDistributionInfluenza.data.datasets[4].data = [];
            chartDistributionInfluenza.data.datasets[5].data = [];
            chartDistributionInfluenza.data.datasets[6].data = [];
            chartDistributionInfluenza.update();
        }

        // reset the filter of statistics distribution of influenza by site
        function restFilterDistributionInfluenza() {
            restChartDistributionInfluenza();
            $("#distribution-influenza-season").val("").trigger("change");
            $("#distribution-influenza-site").val("").trigger("change");
            $("#distribution-influenza-week").val("").trigger("change");
            $(".distribution-influenza-action-filter").hide();
            $(".intialiser-distribution-influenza-action-filter").hide();
        }

        // click to the button filter to get all data and render the chart with the result we get it
        $(document).on('click', '.distribution-influenza-action-filter', function () {
            if ((weeksDataDistributionInfluenza && weeksDataDistributionInfluenza.length > 0) && (sitesDataDistributionInfluenza && sitesDataDistributionInfluenza.length > 0) && (seasonsDataDistributionInfluenza && seasonsDataDistributionInfluenza.length > 0)) {
                let formData = new FormData();
                formData.append('data[seasons]', seasonsDataDistributionInfluenza);
                formData.append('data[sites]', sitesDataDistributionInfluenza);
                formData.append('data[weeks]', weeksDataDistributionInfluenza);
                $('#load_screen').show();
                $.ajax({
                    method: "POST",
                    url: "{{ path('statistics_distribution_influenza_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            console.log(response);
                            // here we gonna update the series data in the chart
                            chartDistributionInfluenza.data.labels = response["data"].listNumberWeeks;
                            chartDistributionInfluenza.options.plugins.title.text = "N = " + response["data"].totalIncluded;
                            chartDistributionInfluenza.data.datasets[0].data = response["data"].enrolledDataInfluenza;
                            chartDistributionInfluenza.data.datasets[1].data = response["data"].AH1N1pdm09;
                            chartDistributionInfluenza.data.datasets[2].data = response["data"].H1NotherLineage;
                            chartDistributionInfluenza.data.datasets[3].data = response["data"].AH3;
                            chartDistributionInfluenza.data.datasets[4].data = response["data"].H3NotherLineage;
                            chartDistributionInfluenza.data.datasets[5].data = response["data"].BYamagataLineage;
                            chartDistributionInfluenza.data.datasets[6].data = response["data"].BVictoriaLineage;
                            chartDistributionInfluenza.data.datasets[7].data = response["data"].ANotSubtyped;
                            chartDistributionInfluenza.data.datasets[8].data = response["data"].BLineageNotDetermined;
                            chartDistributionInfluenza.update();
                        }
                    }
                });
            }
        });

        /* ------------------------------------------------- end statistics distribution of influenza by site JS  -------------------------------------------------------------- */

        /* ------------------------------------------------- start statistics Distribution of Laboratory-confirmed influenza cases by influenza virus subtype – By site JS  -------------------------------------------------------------- */

        // init a global array of values for the right axe Y of the Distribution of Laboratory-confirmed influenza
        var YAxisValuesLCI = [];
        // Options of chart DistributionLaboratory-confirmed influenza
        var distributionLCIOptions = {
            type: 'bar',
            data: {
                labels: [],
                datasets: [
                    {
                        label: 'A(H1N1)pdm09',
                        data: [],
                        backgroundColor: '#afeeee',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'A(H3)',
                        data: [],
                        backgroundColor: '#48d1cc',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'B(Yamagata lineage)',
                        data: [],
                        backgroundColor: '#ffdead',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'B(Victoria lineage)',
                        data: [],
                        backgroundColor: '#ffa500',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'A(Not subtyped)',
                        data: [],
                        backgroundColor: '#008080',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }, {
                        label: 'B(Lineage not determined)',
                        data: [],
                        backgroundColor: '#d2691e',
                        stack: 'combined',
                        borderWidth: 0, // Set the borderWidth option to 0
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    title: {
                        display: true,
                        align: 'end',
                        color: '#000000',
                        padding: {
                            bottom: 20,
                        },
                        font: {
                            weight: 'bold',
                        }
                    },
                    legend: {
                        position: 'bottom',
                        onClick: function (event, legendItem) {
                        }
                    },
                    colors: {
                        forceOverride: true
                    },
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                return context.dataset.label + ': ' + context.formattedValue + '%';
                            }
                        }
                    }
                },
                barThickness: 'flex',// set the bar width to 60 pixels // or there is an option "flex" we can make it
                scales: {
                    x: {
                        stacked: true,
                        grid: {
                            display: false,
                        },
                        type: 'linear',
                        min: 0,
                        max: 100,
                        title: {
                            display: true,
                            text: 'Percent',
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                        ticks: {
                            callback: (value) => {
                                return value + '%';
                            }
                        },
                    },
                    Y1: {
                        position: 'left',
                        title: {
                            text: 'Sites',
                            display: true,
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                    },
                    Y2: {
                        position: 'right',
                        ticks: {
                            callback: function (value, index, values) {
                                for (let i = 0; i < YAxisValuesLCI.length; i++) {
                                    if (index === i) {
                                        return ('N = ' + YAxisValuesLCI[i]);
                                    }
                                }
                            },
                        }
                    },
                },
            }
        };
        /* init chart of Distribution Laboratory-confirmed influenza */
        var initChartDistributionLCI = document.getElementById('statistics-distribution-lci-block');
        var chartLCI = new Chart(initChartDistributionLCI, distributionLCIOptions);
        chartLCI.render();

        // here if we change the season we gonna send a request ajax to get all the necessary information to draw the chart
        $(document).on('change', '.statistics-distribution-lci-season', function () {
            seasonsDataDistributionLCI = $(".statistics-distribution-lci-season").val();
            $("#distribution-lci-site").val(" ").trigger("change");
            restChartDistributionLCI();
            showHideBlockFilterDistributionLCI();
            if (seasonsDataDistributionLCI.includes("all")) {
                let allSeasonsDistributionLCI = [];
                const selectElement = document.getElementById("distribution-lci-season");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSeasonsDistributionLCI.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-lci-season").val(allSeasonsDistributionLCI);
                $("#distribution-lci-season").trigger("change");
            }

            if (seasonsDataDistributionLCI.length < 1) {
                $('#distribution-lci-site').find('option').attr('disabled', 'disabled');
                $('#distribution-lci-site').select2().trigger("change");
                $(".intialiser-distribution-lci-action-filter").hide();
            }
            if (seasonsDataDistributionLCI && seasonsDataDistributionLCI.length > 0) {
                let formData = new FormData();
                formData.append('data[seasons]', seasonsDataDistributionLCI);
                $.ajax({
                    method: "POST",
                    url: "{{ path('valid_site_distribution_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            let listSiteOptions = $("#distribution-lci-site").find('option');
                            let listValidSites = response.valid_sites;
                            listSiteOptions.each(function () {
                                let value = $(this).text();
                                if (listValidSites.includes(value)) {
                                    $('#distribution-lci-site').find('option[value="' + value + '"]').attr('disabled', false);
                                } else {
                                    $('#distribution-lci-site').find('option[value="' + value + '"]').attr('disabled', 'disabled');
                                }
                                $('#distribution-lci-site').find('option[value="all"]').attr('disabled', false);
                                $('#distribution-lci-site').select2().trigger("change.select2");
                            });
                        }
                    }
                });
            }
        });

        $(document).on('change', '.statistics-distribution-lci-site', function () {
            sitesDataDistributionLCI = $("#distribution-lci-site").val();
            showHideBlockFilterDistributionLCI();
            if (sitesDataDistributionLCI.includes("all")) {
                let allSitesDistributionLCI = [];
                const selectElement = document.getElementById("distribution-lci-site");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSitesDistributionLCI.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-lci-site").val(allSitesDistributionLCI);
                $('#distribution-lci-site').trigger("change");
            }
            if (sitesDataDistributionLCI && sitesDataDistributionLCI.length < 1) {
                restChartDistributionLCI();
            } else {
                $(".distribution-lci-action-filter").show();
            }
        });

        // reset the filter of statistics distribution of LCI by site
        function restFilterDistributionLCI() {
            restChartDistributionLCI();
            $("#distribution-lci-season").val("").trigger("change");
            $("#distribution-lci-site").val("").trigger("change");
            $(".distribution-lci-action-filter").hide();
            $(".intialiser-distribution-lci-action-filter ").hide();
        }

        // reset the curve of statistics distribution of viruses by site
        function restChartDistributionLCI() {
            chartLCI.data.labels = [];
            chartLCI.options.plugins.title.text = "";
            chartLCI.data.datasets[0].data = [];
            chartLCI.data.datasets[1].data = [];
            chartLCI.data.datasets[2].data = [];
            chartLCI.data.datasets[3].data = [];
            chartLCI.data.datasets[4].data = [];
            chartLCI.data.datasets[5].data = [];
            YAxisValuesLCI = [];
            chartLCI.update();
        }

        function showHideBlockFilterDistributionLCI() {
            if ((seasonsDataDistributionLCI && seasonsDataDistributionLCI.length > 0) && (sitesDataDistributionLCI && sitesDataDistributionLCI.length > 0)) {
                $(".distribution-lci-action-filter").show();
                $(".intialiser-distribution-lci-action-filter").show();
            } else {
                restChartDistributionLCI();
                $(".distribution-lci-action-filter").hide();
                $(".intialiser-distribution-lci-action-filter").show();
            }
        }

        $(document).on('click', '.distribution-lci-action-filter', function () {
            if ((seasonsDataDistributionLCI && seasonsDataDistributionLCI.length > 0) && (sitesDataDistributionLCI && sitesDataDistributionLCI.length > 0)) {
                let formData = new FormData();
                formData.append('data[sites]', sitesDataDistributionLCI);
                formData.append('data[seasons]', seasonsDataDistributionLCI);
                $('#load_screen').show();
                $.ajax({
                    method: "POST",
                    url: "{{ path('statistics_distribution_lci_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            // here we gonna update the chart DLCI
                            chartLCI.data.labels = response["data"].sitesChart;
                            chartLCI.data.datasets[0].data = response["data"].AH1N1pdm09;
                            chartLCI.options.plugins.title.text = "N = " + response["data"].totalLciPplus;
                            chartLCI.data.datasets[1].data = response["data"].AH3;
                            chartLCI.data.datasets[2].data = response["data"].BYamagataLineage;
                            chartLCI.data.datasets[3].data = response["data"].BVictoriaLineage;
                            chartLCI.data.datasets[4].data = response["data"].ANotSubtyped;
                            chartLCI.data.datasets[5].data = response["data"].BLineageNotDetermined;
                            YAxisValuesLCI = response["data"].lci_plus;
                            chartLCI.update();
                        }
                    }
                });
            }
        });

        /* ------------------------------------------------- end statistics Distribution of Laboratory-confirmed influenza cases by influenza virus subtype – By site JS  -------------------------------------------------------------- */



        /* ------------------------------------------------- start statistics Distribution Intensive care unit (ICU) admissions and deaths among laboratory-confirmed influenza cases JS  -------------------------------------------------------------- */

        // Options of chart Distribution Intensive care unit
        var distributionICUOptions = {
            type: 'bar',
            data: {
                labels: [' '],
                datasets: [
                    {
                        label: '#Influenza+',
                        data: [],
                        backgroundColor: '#D9144C',
                        borderWidth: 1, // Set the borderWidth option to 0
                    }, {
                        label: '#ICU admissions',
                        data: [],
                        backgroundColor: '#4FA500',
                        borderWidth: 1, // Set the borderWidth option to 0
                    }, {
                        label: '#Deaths',
                        data: [],
                        backgroundColor: '#3498DB',
                        borderWidth: 1, // Set the borderWidth option to 0
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        align: 'end',
                        color: '#000000',
                        padding: {
                            bottom: 10
                        },
                        font: {
                            weight: 'bold',
                        }
                    },
                    tooltip: {
                        enabled: false,
                    },
                    legend: {
                        position: 'bottom',
                        onClick: function (event, legendItem) {
                        }
                    },
                    colors: {
                        forceOverride: true
                    },

                },
                animation: {
                    onComplete: function () {
                        var chart = this;
                        var ctx = chart.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.font.size, Chart.defaults.font.style, Chart.defaults.font.family);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        chart.data.datasets.forEach(function (dataset, i) {
                            if (chart.getDatasetMeta(i).hidden) {
                                return;
                            }
                            var meta = chart.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var dataPerPercent = ((dataset.data[index] / chart.data.datasets[0].data) * 100);
                                if ((i !== 0) && (dataPerPercent !== 0) && (!isNaN(dataPerPercent)) && (dataPerPercent !== Infinity)) {
                                    ctx.fillText(dataset.data[index] + ' - ' + Math.round(dataPerPercent) + '%', bar.x, bar.y - 5);
                                }
                            });
                        });
                    },
                },
                hover: {
                    mode: 'single',
                    intersect: true,
                },
                barThickness: "flex",// set the bar width to 60 pixels // or there is an option "flex" we can make it
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Count',
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                    }
                },
            }
        };
        /* init chart of Distribution Intensive care unit  */
        var initChartDistributionICU = document.getElementById('statistics-distribution-icu-block');
        var chartDICU = new Chart(initChartDistributionICU, distributionICUOptions);
        chartDICU.render();
        chartDICU.canvas.addEventListener('mousemove', (event) => {
            event.target.style.animationDuration = '0s';
        });
        // here if we change the season we gonna send a request ajax to get all the necessary information to draw the chart
        $(document).on('change', '.statistics-distribution-icu-season', function () {
            seasonsDataDistributionICU = $(".statistics-distribution-icu-season").val();
            $("#distribution-icu-site").val(" ").trigger("change");
            restChartDistributionICU();
            showHideBlockFilterDistributionICU();
            if (seasonsDataDistributionICU.includes("all")) {
                let allSeasonsDistributionICU = [];
                const selectElement = document.getElementById("distribution-icu-season");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSeasonsDistributionICU.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-icu-season").val(allSeasonsDistributionICU);
                $("#distribution-icu-season").trigger("change");
            }

            if (seasonsDataDistributionICU.length < 1) {
                $('#distribution-icu-site').find('option').attr('disabled', 'disabled');
                $('#distribution-icu-site').select2().trigger("change");
                $(".intialiser-distribution-icu-action-filter").hide();
            }
            if (seasonsDataDistributionICU && seasonsDataDistributionICU.length > 0) {
                let formData = new FormData();
                formData.append('data[seasons]', seasonsDataDistributionICU);
                $.ajax({
                    method: "POST",
                    url: "{{ path('valid_site_distribution_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            var listSiteOptions = $("#distribution-icu-site").find('option');
                            var listValidSites = response.valid_sites;
                            listSiteOptions.each(function () {
                                let value = $(this).text();
                                if (listValidSites.includes(value)) {
                                    $('#distribution-icu-site').find('option[value="' + value + '"]').attr('disabled', false);
                                } else {
                                    $('#distribution-icu-site').find('option[value="' + value + '"]').attr('disabled', 'disabled');
                                }
                                $('#distribution-icu-site').find('option[value="all"]').attr('disabled', false);
                                $('#distribution-icu-site').select2().trigger("change.select2");
                            });
                        }
                    }
                });
            }
        });

        $(document).on('change', '.statistics-distribution-icu-site', function () {
            sitesDataDistributionICU = $("#distribution-icu-site").val();
            showHideBlockFilterDistributionICU();
            if (sitesDataDistributionICU.includes("all")) {
                let allSitesDistributionICU = [];
                const selectElement = document.getElementById("distribution-icu-site");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSitesDistributionICU.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-icu-site").val(allSitesDistributionICU);
                $('#distribution-icu-site').trigger("change");
            }
            if (sitesDataDistributionICU && sitesDataDistributionICU.length < 1) {
                restChartDistributionICU();
            } else {
                $(".distribution-icu-action-filter").show();
            }
        });

        // reset the filter of statistics distribution of ICU by site
        function restFilterDistributionICU() {
            restChartDistributionICU();
            $("#distribution-icu-season").val("").trigger("change");
            $("#distribution-icu-site").val("").trigger("change");
            $(".distribution-icu-action-filter").hide();
            $(".intialiser-distribution-icu-action-filter ").hide();
        }

        // reset the curve of statistics distribution of ICU by site
        function restChartDistributionICU() {
            chartDICU.data.labels = [];
            chartDICU.options.plugins.title.text = "";
            chartDICU.data.datasets[0].data = [];
            chartDICU.data.datasets[1].data = [];
            chartDICU.data.datasets[2].data = [];
            chartDICU.update();
        }

        function showHideBlockFilterDistributionICU() {
            if ((seasonsDataDistributionICU && seasonsDataDistributionICU.length > 0) && (sitesDataDistributionICU && sitesDataDistributionICU.length > 0)) {
                $(".distribution-icu-action-filter").show();
                $(".intialiser-distribution-icu-action-filter").show();
            } else {
                restChartDistributionICU();
                $(".distribution-icu-action-filter").hide();
                $(".intialiser-distribution-icu-action-filter").show();
            }
        }

        $(document).on('click', '.distribution-icu-action-filter', function () {
            if ((seasonsDataDistributionICU && seasonsDataDistributionICU.length > 0) && (sitesDataDistributionICU && sitesDataDistributionICU.length > 0)) {
                let formData = new FormData();
                formData.append('data[sites]', sitesDataDistributionICU);
                formData.append('data[seasons]', seasonsDataDistributionICU);
                $('#load_screen').show();
                $.ajax({
                    method: "POST",
                    url: "{{ path('statistics_distribution_icu_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            // here we gonna update the chart DLCI
                            chartDICU.data.labels = [''];
                            chartDICU.options.plugins.title.text = "N = " + response["data"].lci_plus;
                            chartDICU.data.datasets[0].data = response["data"].lci_plus;
                            chartDICU.data.datasets[1].data = response["data"].both_icu_adm;
                            chartDICU.data.datasets[2].data = response["data"].both_death_hosp;
                            chartDICU.update();
                        }
                    }
                });
            }
        });

        /* ------------------------------------------------- end statistics Distribution Intensive care unit (ICU) admissions and deaths among laboratory-confirmed influenza cases JS -------------------------------------------------------------- */

        /* ------------------------------------------------- start statistics Distribution of enrolled patients by age group – By sites JS  -------------------------------------------------------------- */

        // init a global array of values for the right axe Y of the Distribution of enrolled patients by age group
        var YAxisValuesEPA = [];
        // Options of chart enrolled patients by age group
        var distributionEPAOptions = {
            type: 'bar',
            data: {
                labels: [' '],
                datasets: [
                    {
                        label: '< 5y',
                        data: [],
                        backgroundColor: '#4472c4',
                        stack: 'combined',
                        borderWidth: 1, // Set the borderWidth option to 0
                    }, {
                        label: '5-49y',
                        data: [],
                        backgroundColor: '#ed7d31',
                        stack: 'combined',
                        borderWidth: 1, // Set the borderWidth option to 0
                    }, {
                        label: '50-64y',
                        data: [],
                        backgroundColor: '#a5a5a5',
                        stack: 'combined',
                        borderWidth: 1, // Set the borderWidth option to 0
                    }, {
                        label: '+65y',
                        data: [],
                        backgroundColor: '#ffc000',
                        stack: 'combined',
                        borderWidth: 1, // Set the borderWidth option to 0
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                plugins: {
                    title: {
                        display: true,
                        align: 'end',
                        color: '#000000',
                        padding: {
                            bottom: 5,
                        },
                        font: {
                            weight: 'bold',
                        }
                    },
                    legend: {
                        position: 'bottom',
                        onClick: function (event, legendItem) {
                        }
                    },
                    colors: {
                        forceOverride: true
                    },
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                return context.dataset.label + ': ' + context.formattedValue + '%';
                            }
                        }
                    }
                },
                barThickness: 'flex',// set the bar width to 60 pixels // or there is an option "flex" we can make it
                scales: {
                    x: {
                        stacked: true,
                        grid: {
                            display: false,
                        },
                        type: 'linear',
                        min: 0,
                        max: 100,
                        title: {
                            display: true,
                            text: 'Percent',
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                        ticks: {
                            callback: (value) => {
                                return value + '%';
                            }
                        },
                    },
                    Y1: {
                        position: 'left',
                        title: {
                            text: 'Sites',
                            display: true,
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                    },
                    Y2: {
                        position: 'right',
                        ticks: {
                            callback: function (value, index, values) {
                                for (let i = 0; i < YAxisValuesEPA.length; i++) {
                                    if (index === i) {
                                        return ('N = ' + YAxisValuesEPA[i]);
                                    }
                                }
                            },
                        }
                    },
                },
            }
        };
        /* init chart of Distribution enrolled patients by age group */
        var initChartDistributionEPA = document.getElementById('statistics-distribution-epa-block');
        var chartDEPA = new Chart(initChartDistributionEPA, distributionEPAOptions);
        chartDEPA.render();

        // here if we change the season we gonna send a request ajax to get all the necessary information to draw the chart
        $(document).on('change', '.statistics-distribution-epa-season', function () {
            seasonsDataDistributionEPA = $(".statistics-distribution-epa-season").val();
            $("#distribution-epa-site").val(" ").trigger("change");
            restChartDistributionEPA();
            showHideBlockFilterDistributionEPA();
            if (seasonsDataDistributionEPA.includes("all")) {
                let allSeasonsDistributionEPA = [];
                const selectElement = document.getElementById("distribution-epa-season");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSeasonsDistributionEPA.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-epa-season").val(allSeasonsDistributionEPA);
                $("#distribution-epa-season").trigger("change");
            }

            if (seasonsDataDistributionEPA.length < 1) {
                $('#distribution-epa-site').find('option').attr('disabled', 'disabled');
                $('#distribution-epa-site').select2().trigger("change");
                $(".intialiser-distribution-epa-action-filter").hide();
            }
            if (seasonsDataDistributionEPA && seasonsDataDistributionEPA.length > 0) {
                let formData = new FormData();
                formData.append('data[seasons]', seasonsDataDistributionEPA);
                $.ajax({
                    method: "POST",
                    url: "{{ path('valid_site_distribution_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            let listSiteOptions = $("#distribution-epa-site").find('option');
                            let listValidSites = response.valid_sites;
                            listSiteOptions.each(function () {
                                let value = $(this).text();
                                if (listValidSites.includes(value)) {
                                    $('#distribution-epa-site').find('option[value="' + value + '"]').attr('disabled', false);
                                } else {
                                    $('#distribution-epa-site').find('option[value="' + value + '"]').attr('disabled', 'disabled');
                                }
                                $('#distribution-epa-site').find('option[value="all"]').attr('disabled', false);
                                $('#distribution-epa-site').select2().trigger("change.select2");
                            });
                        }
                    }
                });
            }
        });

        $(document).on('change', '.statistics-distribution-epa-site', function () {
            sitesDataDistributionEPA = $("#distribution-epa-site").val();
            showHideBlockFilterDistributionEPA();
            if (sitesDataDistributionEPA.includes("all")) {
                let allSitesDistributionEPA = [];
                const selectElement = document.getElementById("distribution-epa-site");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSitesDistributionEPA.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-epa-site").val(allSitesDistributionEPA);
                $('#distribution-epa-site').trigger("change");
            }
            if (sitesDataDistributionEPA && sitesDataDistributionEPA.length < 1) {
                restChartDistributionEPA();
            } else {
                $(".distribution-epa-action-filter").show();
            }
        });

        // reset the filter of statistics distribution of LCI by site
        function restFilterDistributionEPA() {
            restChartDistributionEPA();
            $("#distribution-epa-season").val("").trigger("change");
            $("#distribution-epa-site").val("").trigger("change");
            $(".distribution-epa-action-filter").hide();
            $(".intialiser-distribution-epa-action-filter ").hide();
        }

        // reset the curve of statistics distribution of viruses by site
        function restChartDistributionEPA() {
            chartDEPA.data.labels = [];
            chartDEPA.options.plugins.title.text = "";
            chartDEPA.data.datasets[0].data = [];
            chartDEPA.data.datasets[1].data = [];
            chartDEPA.data.datasets[2].data = [];
            chartDEPA.data.datasets[3].data = [];
            YAxisValuesEPA = [];
            chartDEPA.update();
        }

        function showHideBlockFilterDistributionEPA() {
            if ((seasonsDataDistributionEPA && seasonsDataDistributionEPA.length > 0) && (sitesDataDistributionEPA && sitesDataDistributionEPA.length > 0)) {
                $(".distribution-epa-action-filter").show();
                $(".intialiser-distribution-epa-action-filter").show();
            } else {
                restChartDistributionEPA();
                $(".distribution-epa-action-filter").hide();
                $(".intialiser-distribution-epa-action-filter").show();
            }
        }

        $(document).on('click', '.distribution-epa-action-filter', function () {
            if ((seasonsDataDistributionEPA && seasonsDataDistributionEPA.length > 0) && (sitesDataDistributionEPA && sitesDataDistributionEPA.length > 0)) {
                let formData = new FormData();
                formData.append('data[sites]', sitesDataDistributionEPA);
                formData.append('data[seasons]', seasonsDataDistributionEPA);
                $('#load_screen').show();
                $.ajax({
                    method: "POST",
                    url: "{{ path('statistics_distribution_epa_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            // here we gonna update the chart EPA
                            chartDEPA.options.plugins.title.text = "N = " + response["data"].totalIncluded;
                            chartDEPA.data.labels = response["data"].sitesChart;
                            chartDEPA.data.datasets[0].data = response["data"].ageLessThan5;
                            chartDEPA.data.datasets[1].data = response["data"].ageBetween5And49;
                            chartDEPA.data.datasets[2].data = response["data"].ageBetween50And64;
                            chartDEPA.data.datasets[3].data = response["data"].ageMoreThan65;
                            YAxisValuesEPA = response["data"].included;
                            chartDEPA.update();
                        }
                    }
                });
            }
        });

        /* ------------------------------------------------- end statistics Distribution of Laboratory-confirmed influenza cases by influenza virus subtype – By site JS  -------------------------------------------------------------- */

        /* ------------------------------------------------- start statistics Distribution of enrolled patients by age group – ALL sites JS  -------------------------------------------------------------- */

        // Options of chart enrolled patients by age group ALL sites
        // EPAAS : Distribution of enrolled patients by age group – ALL sites
        var distributionEPAASOptions = {
            type: 'bar',
            data: {
                labels: [' '],
                datasets: [
                    {
                        label: '< 5y',
                        data: [],
                        backgroundColor: '#4472c4',
                        borderWidth: 1,
                    }, {
                        label: '5-49y',
                        data: [],
                        backgroundColor: '#ed7d31',
                        borderWidth: 1,
                    }, {
                        label: '50-64y',
                        data: [],
                        backgroundColor: '#a5a5a5',
                        borderWidth: 1,
                    }, {
                        label: '+65y',
                        data: [],
                        backgroundColor: '#ffc000',
                        borderWidth: 1,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                barPercentage: 0.8,
                // barThickness: 60,
                maxBarThickness: 140,
                categoryPercentage: 0.5,// set the bar width to 60 pixels // or there is an option "flex" we can make it
                plugins: {
                    title: {
                        display: true,
                        align: 'end',
                        color: '#000000',
                        padding: {
                            bottom: 10
                        },
                        font: {
                            weight: 'bold',
                        }
                    },
                    tooltip: {
                        enabled: false
                    },
                    legend: {
                        position: 'bottom',
                        onClick: function (event, legendItem) {
                        }
                    },
                    colors: {
                        forceOverride: true
                    },
                },
                hover: {
                    mode: 'single',
                    intersect: true,
                },
                animation: {
                    onComplete: function () {
                        var chart = this;
                        var ctx = chart.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.font.size, Chart.defaults.font.style, Chart.defaults.font.family);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        var total = 0;
                        var totalPercent = 0;
                        var arrayValues = [];
                        var biggestValue;
                        var indexBiggestValue;
                        chart.data.datasets.forEach(function (dataset, i) {
                            if (chart.getDatasetMeta(i).hidden) {
                                chart.getDatasetMeta(i).data.forEach(function (bar, index) {
                                    total = total - dataset.data[index];
                                });
                            }
                            chart.getDatasetMeta(i).data.forEach(function (bar, index) {
                                arrayValues.push(dataset.data[index]);
                                total = total + dataset.data[index];
                            });
                        });
                        // foreach to get the total of % , and the index and the max value of bar in the chart
                        chart.data.datasets.forEach(function (dataset, i) {
                            var meta = chart.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                totalPercent += ((dataset.data[index] / total) * 100);
                            });
                            biggestValue = Math.max(...arrayValues);
                            indexBiggestValue = arrayValues.indexOf(biggestValue, 0);
                        });
                        //end forech
                        chart.data.datasets.forEach(function (dataset, i) {
                            if (chart.getDatasetMeta(i).hidden) {
                                return;
                            }
                            var meta = chart.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var dataPerPercent = ((dataset.data[index] / total) * 100);
                                // here we gonna check the index and the percent if the percent == 99 we going to add 1 to the biggest value else if the percent
                                // is more than 101 we gonna substr -1 from the biggest value
                                if ((totalPercent === 99) && (i === indexBiggestValue)) {
                                    ctx.fillText(dataset.data[index] + ' - ' + (Math.round(dataPerPercent) + 1) + '%', bar.x, bar.y - 5);
                                } else if ((totalPercent === 101) && (i === indexBiggestValue)) {
                                    ctx.fillText(dataset.data[index] + ' - ' + (Math.round(dataPerPercent) - 1) + '%', bar.x, bar.y - 5);
                                } else if ((dataPerPercent !== 0) && (!isNaN(dataPerPercent)) && (dataPerPercent !== Infinity)) {
                                    ctx.fillText(dataset.data[index] + ' - ' + (Math.round(dataPerPercent)) + '%', bar.x, bar.y - 5);
                                }
                            });
                        });
                    },
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Age groups',
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Count',
                            color: '#000000',
                            font: {
                                weight: 'bold'
                            },
                        },
                    }
                },
            }
        };
        /* init chart of Distribution enrolled patients by age group */
        var initChartDistributionEPAAS = document.getElementById('statistics-distribution-epaas-block');
        var chartDEPAAS = new Chart(initChartDistributionEPAAS, distributionEPAASOptions);
        chartDEPAAS.render();

        // here if we change the season we gonna send a request ajax to get all the necessary information to draw the chart
        $(document).on('change', '.statistics-distribution-epaas-season', function () {
            seasonsDataDistributionEPAAS = $(".statistics-distribution-epaas-season").val();
            $("#distribution-epaas-site").val(" ").trigger("change");
            restChartDistributionEPAAS();
            showHideBlockFilterDistributionEPAAS();
            if (seasonsDataDistributionEPAAS.includes("all")) {
                let allSeasonsDistributionEPAAS = [];
                const selectElement = document.getElementById("distribution-epaas-season");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSeasonsDistributionEPAAS.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-epaas-season").val(allSeasonsDistributionEPAAS);
                $("#distribution-epaas-season").trigger("change");
            }

            if (seasonsDataDistributionEPAAS.length < 1) {
                $('#distribution-epaas-site').find('option').attr('disabled', 'disabled');
                $('#distribution-epaas-site').select2().trigger("change");
                $(".intialiser-distribution-epaas-action-filter").hide();
            }
            if (seasonsDataDistributionEPAAS && seasonsDataDistributionEPAAS.length > 0) {
                let formData = new FormData();
                formData.append('data[seasons]', seasonsDataDistributionEPAAS);
                $.ajax({
                    method: "POST",
                    url: "{{ path('valid_site_distribution_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            var listSiteOptions = $("#distribution-epaas-site").find('option');
                            var listValidSites = response.valid_sites;
                            listSiteOptions.each(function () {
                                let value = $(this).text();
                                if (listValidSites.includes(value)) {
                                    $('#distribution-epaas-site').find('option[value="' + value + '"]').attr('disabled', false);
                                } else {
                                    $('#distribution-epaas-site').find('option[value="' + value + '"]').attr('disabled', 'disabled');
                                }
                                $('#distribution-epaas-site').find('option[value="all"]').attr('disabled', false);
                                $('#distribution-epaas-site').select2().trigger("change.select2");
                            });
                        }
                    }
                });
            }
        });

        $(document).on('change', '.statistics-distribution-epaas-site', function () {
            sitesDataDistributionEPAAS = $("#distribution-epaas-site").val();
            showHideBlockFilterDistributionEPAAS();
            if (sitesDataDistributionEPAAS.includes("all")) {
                let allSitesDistributionEPAAS = [];
                const selectElement = document.getElementById("distribution-epaas-site");
                const options = selectElement.options;
                for (let i = 0; i < options.length; i++) {
                    const option = options[i];
                    if (!option.disabled && option.value !== "all") {
                        allSitesDistributionEPAAS.push(option.value);
                        option.selected = true;
                    }
                }
                $("#distribution-epaas-site").val(allSitesDistributionEPAAS);
                $('#distribution-epaas-site').trigger("change");
            }
            if (sitesDataDistributionEPAAS && sitesDataDistributionEPAAS.length < 1) {
                restChartDistributionEPAAS();
            } else {
                $(".distribution-epaas-action-filter").show();
            }
        });

        // reset the filter of statistics distribution of EPAAS
        function restFilterDistributionEPAAS() {
            restChartDistributionEPAAS();
            $("#distribution-epaas-season").val("").trigger("change");
            $("#distribution-epaas-site").val("").trigger("change");
            $(".distribution-epaas-action-filter").hide();
            $(".intialiser-distribution-epaas-action-filter ").hide();
        }

        // reset the curve of statistics distribution of EPAAS
        function restChartDistributionEPAAS() {
            chartDEPAAS.data.labels = [];
            chartDEPAAS.options.plugins.title.text = " ";
            chartDEPAAS.data.datasets[0].data = [];
            chartDEPAAS.data.datasets[1].data = [];
            chartDEPAAS.data.datasets[2].data = [];
            chartDEPAAS.data.datasets[3].data = [];
            chartDEPAAS.update();
        }

        function showHideBlockFilterDistributionEPAAS() {
            if ((seasonsDataDistributionEPAAS && seasonsDataDistributionEPAAS.length > 0) && (sitesDataDistributionEPAAS && sitesDataDistributionEPAAS.length > 0)) {
                $(".distribution-epaas-action-filter").show();
                $(".intialiser-distribution-epaas-action-filter").show();
            } else {
                restChartDistributionEPAAS();
                $(".distribution-epaas-action-filter").hide();
                $(".intialiser-distribution-epaas-action-filter").show();
            }
        }

        $(document).on('click', '.distribution-epaas-action-filter', function () {
            if ((seasonsDataDistributionEPAAS && seasonsDataDistributionEPAAS.length > 0) && (sitesDataDistributionEPAAS && sitesDataDistributionEPAAS.length > 0)) {
                let formData = new FormData();
                formData.append('data[sites]', sitesDataDistributionEPAAS);
                formData.append('data[seasons]', seasonsDataDistributionEPAAS);
                $('#load_screen').show();
                $.ajax({
                    method: "POST",
                    url: "{{ path('statistics_distribution_epaas_ajax') }}",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200) {
                            // here we gonna update the chart EPAAS
                            chartDEPAAS.data.labels = [' '];
                            chartDEPAAS.options.plugins.title.text = "N = " + response["data"].totalIncluded;
                            chartDEPAAS.data.datasets[0].data = response["data"].ageLessThan5;
                            chartDEPAAS.data.datasets[1].data = response["data"].ageBetween5And49;
                            chartDEPAAS.data.datasets[2].data = response["data"].ageBetween50And64;
                            chartDEPAAS.data.datasets[3].data = response["data"].ageMoreThan65;
                            chartDEPAAS.update();
                        }
                    }
                });
            }
        });

        /* ------------------------------------------------- end statistics Distribution of Laboratory-confirmed influenza cases by influenza virus subtype – By site JS  -------------------------------------------------------------- */

        // A global function we call  when we navigate between tabs to reset all curve data
        function restAllData() {
            restFilterDistributionInfluenza();
            restFilterDistributionViruses();
            restFilterDistributionLCI();
            restFilterDistributionICU();
            restFilterDistributionEPA();
            restFilterDistributionEPAAS();
        }

        // init curve of distribution of viruses
        $("a[href='#curve-distribution-viruses']").on('show.bs.tab', function (e) {
            restAllData();
            initCurveDistributionViruses();
        });

        function initCurveDistributionViruses() {
            $(".distribution-viruses-action-filter").show();
            $(".intialiser-distribution-viruses-action-filter ").show();
            $('#load_screen').show();
            $.ajax({
                url: "{{ path('init_data_distribution_viruses_ajax') }}",
                method: "GET",
                async: true,
                success: function (response) {
                    if (response.status === 200) {
                        let season = response.current_season;
                        let sites = response.sites;
                        // here we gonna update the series data in the chart
                        chartDistributionViruses.data.labels = sites;
                        chartDistributionViruses.options.plugins.title.text = "N = " + response.totalIncluded;
                        chartDistributionViruses.data.datasets[0].data = response.enrolled;
                        chartDistributionViruses.data.datasets[1].data = response.influenza;
                        chartDistributionViruses.data.datasets[2].data = response.SARSCoV2;
                        chartDistributionViruses.data.datasets[3].data = response.RSV;
                        chartDistributionViruses.data.datasets[4].data = response.ORV;
                        chartDistributionViruses.data.datasets[5].data = response.EVD68;
                        chartDistributionViruses.update();
                        if (season) {
                            $("#distribution-viruses-season").select2().val(season).trigger("change.select2");
                            seasonsDataDistributionViruses = season;
                        }
                        if (sites) {
                            let siteOptions = $("#distribution-viruses-site").find('option');
                            siteOptions.each(function () {
                                let valueOption = $(this).text();
                                if (!sites.includes(valueOption)) {
                                    $('#distribution-viruses-site option[value="' + valueOption + '"]').prop('disabled', true);
                                } else {
                                    $('#distribution-viruses-site option[value="' + valueOption + '"]').prop('disabled', false);
                                }
                            });
                            $('#distribution-viruses-site option[value="all"]').prop('disabled', false);
                            $("#distribution-viruses-site").select2().val(sites).trigger("change.select2");
                            sitesDataDistributionViruses = sites;
                        }
                    }
                }
            });
        }

        // init curve of distribution of influenza
        $("a[href='#curve-distribution-influenza']").on('show.bs.tab', function (e) {
            restAllData();
            initDistributionInfluenza();
        });

        function initDistributionInfluenza() {
            $(".distribution-influenza-action-filter").show();
            $(".intialiser-distribution-influenza-action-filter").show();
            $('#load_screen').show();
            $.ajax({
                url: "{{ path('init_data_distribution_influenza_ajax') }}",
                method: "GET",
                async: true,
                success: function (response) {
                    if (response.status === 200) {
                        let season = response.current_season;
                        let sitesInfluenza = response.sites;
                        let listNumberWeeks = response.listNumberWeeks;
                        chartDistributionInfluenza.data.labels = listNumberWeeks;
                        chartDistributionInfluenza.data.datasets[0].data = response.enrolledDataInfluenza;
                        chartDistributionInfluenza.data.datasets[1].data = response.AH1N1pdm09;
                        chartDistributionInfluenza.data.datasets[2].data = response.H1NotherLineage;
                        chartDistributionInfluenza.options.plugins.title.text = "N = " + response.totalIncluded;
                        chartDistributionInfluenza.data.datasets[3].data = response.AH3;
                        chartDistributionInfluenza.data.datasets[4].data = response.H3NotherLineage;
                        chartDistributionInfluenza.data.datasets[5].data = response.BYamagataLineage;
                        chartDistributionInfluenza.data.datasets[6].data = response.BVictoriaLineage;
                        chartDistributionInfluenza.data.datasets[7].data = response.ANotSubtyped;
                        chartDistributionInfluenza.data.datasets[8].data = response.BLineageNotDetermined;
                        chartDistributionInfluenza.update();
                        if (season) {
                            $("#distribution-influenza-season").select2().val(season).trigger("change.select2");
                            seasonsDataDistributionInfluenza = season;
                        }
                        if (listNumberWeeks) {
                            let NumberWeeksOptions = $("#distribution-influenza-week").find('option');
                            NumberWeeksOptions.each(function () {
                                let value = $(this).text();
                                if (!listNumberWeeks.includes(value)) {
                                    $('#distribution-influenza-week option[value="' + value + '"]').prop('disabled', true);
                                } else {
                                    $('#distribution-influenza-week option[value="' + value + '"]').prop('disabled', false);
                                }
                            });
                            $('#distribution-influenza-week option[value="all"]').prop('disabled', false);
                            $("#distribution-influenza-week").select2().val(listNumberWeeks).trigger("change.select2");
                            weeksDataDistributionInfluenza = listNumberWeeks;
                        }
                        if (sitesInfluenza) {
                            let siteOptions = $("#distribution-influenza-site").find('option');
                            siteOptions.each(function () {
                                let value = $(this).text();
                                if (!sitesInfluenza.includes(value)) {
                                    $('#distribution-influenza-site option[value="' + value + '"]').prop('disabled', true);
                                } else {
                                    $('#distribution-influenza-site option[value="' + value + '"]').prop('disabled', false);
                                }
                            });
                            $('#distribution-influenza-site option[value="all"]').prop('disabled', false);
                            $("#distribution-influenza-site").select2().val(sitesInfluenza).trigger("change.select2");
                            sitesDataDistributionInfluenza = sitesInfluenza;
                        }
                    }
                }
            });
        }

        // init curve of Distribution Laboratory-confirmed influenza
        $("a[href='#curve-distribution-lci']").on('show.bs.tab', function (e) {
            restAllData();
            initDistributionLCI();
        });

        function initDistributionLCI() {
            $(".distribution-lci-action-filter").show();
            $(".intialiser-distribution-lci-action-filter").show();
            $('#load_screen').show();
            $.ajax({
                url: "{{ path('init_data_distribution_lci_ajax') }}",
                method: "GET",
                async: true,
                success: function (response) {
                    if (response.status === 200) {
                        let sitesDLCI = response.sites;
                        let seasonDLCI = response.current_season;
                        chartLCI.data.labels = response.sitesChart;
                        chartLCI.options.plugins.title.text = "N = " + response.totalLciPplus;
                        chartLCI.data.datasets[0].data = response.AH1N1pdm09;
                        chartLCI.data.datasets[1].data = response.AH3;
                        chartLCI.data.datasets[2].data = response.BYamagataLineage;
                        chartLCI.data.datasets[3].data = response.BVictoriaLineage;
                        chartLCI.data.datasets[4].data = response.ANotSubtyped;
                        chartLCI.data.datasets[5].data = response.BLineageNotDetermined;
                        YAxisValuesLCI = response.lci_plus;
                        chartLCI.update();

                        if (sitesDLCI) {
                            let sitesOptions = $("#distribution-lci-site").find('option');
                            sitesOptions.each(function () {
                                let value = $(this).text();
                                if (!sitesDLCI.includes(value)) {
                                    $('#distribution-lci-site option[value="' + value + '"]').prop('disabled', true);
                                } else {
                                    $('#distribution-lci-site option[value="' + value + '"]').prop('disabled', false);
                                }
                            });
                            $('#distribution-lci-site option[value="all"]').prop('disabled', false);
                            $('#distribution-lci-site').select2().val(sitesDLCI).trigger("change.select2");
                            sitesDataDistributionLCI = sitesDLCI;
                        }
                        if (seasonDLCI) {
                            $("#distribution-lci-season").select2().val(seasonDLCI).trigger("change.select2");
                            seasonsDataDistributionLCI = seasonDLCI;
                        }
                    }
                }
            });
        }

        // init curve of Distribution icu
        $("a[href='#curve-distribution-icu']").on('show.bs.tab', function (e) {
            restAllData();
            initDistributionICU();
        });

        function initDistributionICU() {
            $(".distribution-icu-action-filter").show();
            $(".intialiser-distribution-icu-action-filter").show();
            $('#load_screen').show();
            $.ajax({
                url: "{{ path('init_data_distribution_icu_ajax') }}",
                method: "GET",
                async: true,
                success: function (response) {
                    if (response.status === 200) {
                        let sitesDICU = response.sites;
                        let seasonDICU = response.current_season;
                        chartDICU.data.labels = [' '];
                        chartDICU.options.plugins.title.text = "N = " + response.lci_plus[0];
                        chartDICU.data.datasets[0].data = response.lci_plus;
                        chartDICU.data.datasets[1].data = response.both_icu_adm;
                        chartDICU.data.datasets[2].data = response.both_death_hosp;
                        chartDICU.update();

                        if (sitesDICU) {
                            let sitesOptions = $("#distribution-icu-site").find('option');
                            sitesOptions.each(function () {
                                let value = $(this).text();
                                if (!sitesDICU.includes(value)) {
                                    $('#distribution-icu-site option[value="' + value + '"]').prop('disabled', true);
                                } else {
                                    $('#distribution-icu-site option[value="' + value + '"]').prop('disabled', false);
                                }
                            });
                            $('#distribution-icu-site option[value="all"]').prop('disabled', false);
                            $('#distribution-icu-site').select2().val(sitesDICU).trigger("change.select2");
                            sitesDataDistributionICU = sitesDICU;
                        }
                        if (seasonDICU) {
                            $("#distribution-icu-season").select2().val(seasonDICU).trigger("change.select2");
                            seasonsDataDistributionICU = seasonDICU;
                        }
                    }
                }
            });
        }

        // init curve of Distribution epa
        $("a[href='#curve-distribution-epa']").on('show.bs.tab', function (e) {
            restAllData();
            initDistributionEPA();
        });

        function initDistributionEPA() {
            $(".distribution-epa-action-filter").show();
            $(".intialiser-distribution-epa-action-filter").show();
            $('#load_screen').show();
            $.ajax({
                url: "{{ path('init_data_distribution_epa_ajax') }}",
                method: "GET",
                async: true,
                success: function (response) {
                    if (response.status === 200) {
                        let sitesDEPA = response.sites;
                        let seasonDEPA = response.current_season;
                        chartDEPA.data.labels = response.sitesChart;
                        chartDEPA.options.plugins.title.text = "N = " + response.totalIncluded;
                        chartDEPA.data.datasets[0].data = response.ageLessThan5;
                        chartDEPA.data.datasets[1].data = response.ageBetween5And49;
                        chartDEPA.data.datasets[2].data = response.ageBetween50And64;
                        chartDEPA.data.datasets[3].data = response.ageMoreThan65;
                        YAxisValuesEPA = response.included;
                        chartDEPA.update();

                        if (sitesDEPA) {
                            let sitesOptions = $("#distribution-epa-site").find('option');
                            sitesOptions.each(function () {
                                let value = $(this).text();
                                if (!sitesDEPA.includes(value)) {
                                    $('#distribution-epa-site option[value="' + value + '"]').prop('disabled', true);
                                } else {
                                    $('#distribution-epa-site option[value="' + value + '"]').prop('disabled', false);
                                }
                            });
                            $('#distribution-epa-site option[value="all"]').prop('disabled', false);
                            $('#distribution-epa-site').select2().val(sitesDEPA).trigger("change.select2");
                            sitesDataDistributionEPA = sitesDEPA;
                        }
                        if (seasonDEPA) {
                            $("#distribution-epa-season").select2().val(seasonDEPA).trigger("change.select2");
                            seasonsDataDistributionEPA = seasonDEPA;
                        }
                    }
                }
            });
        }

        // init curve of Distribution epaas
        $("a[href='#curve-distribution-epaas']").on('show.bs.tab', function (e) {
            restAllData();
            initDistributionEPAAS();
        });

        function initDistributionEPAAS() {
            $(".distribution-epaas-action-filter").show();
            $(".intialiser-distribution-epaas-action-filter").show();
            $('#load_screen').show();
            $.ajax({
                url: "{{ path('init_data_distribution_epaas_ajax') }}",
                method: "GET",
                async: true,
                success: function (response) {
                    if (response.status === 200) {
                        let sitesDEPAAS = response.sites;
                        let seasonDEPAAS = response.current_season;
                        chartDEPAAS.data.labels = [' '];
                        chartDEPAAS.options.plugins.title.text = "N = " + response.totalIncluded;
                        chartDEPAAS.data.datasets[0].data = response.ageLessThan5;
                        chartDEPAAS.data.datasets[1].data = response.ageBetween5And49;
                        chartDEPAAS.data.datasets[2].data = response.ageBetween50And64;
                        chartDEPAAS.data.datasets[3].data = response.ageMoreThan65;
                        chartDEPAAS.update();

                        if (sitesDEPAAS) {
                            let sitesOptions = $("#distribution-epaas-site").find('option');
                            sitesOptions.each(function () {
                                let value = $(this).text();
                                if (!sitesDEPAAS.includes(value)) {
                                    $('#distribution-epaas-site option[value="' + value + '"]').prop('disabled', true);
                                } else {
                                    $('#distribution-epaas-site option[value="' + value + '"]').prop('disabled', false);
                                }
                            });
                            $('#distribution-epaas-site option[value="all"]').prop('disabled', false);
                            $('#distribution-epaas-site').select2().val(sitesDEPAAS).trigger("change.select2");
                            sitesDataDistributionEPAAS = sitesDEPAAS;
                        }
                        if (seasonDEPAAS) {
                            $("#distribution-epaas-season").select2().val(seasonDEPAAS).trigger("change.select2");
                            seasonsDataDistributionEPAAS = seasonDEPAAS;
                        }
                    }
                }
            });
        }

        // global function to export graph to an image
        $(document).on('click', '#download-chart', function () {
            const idGraph = this.getAttribute('graph-id');
            const mainCanvas = document.getElementById(idGraph);
            const graphName = mainCanvas.getAttribute("title");

            // Set padding for each direction
            const paddingTop = 25;
            const paddingRight = 25;
            const paddingBottom = 50;
            const paddingLeft = 25;
            const marginTop = 40;

            // Create a temporary canvas with padding
            const tempCanvas = document.createElement('canvas');
            tempCanvas.width = mainCanvas.width + paddingRight + paddingLeft;
            tempCanvas.height = mainCanvas.height + paddingTop + paddingBottom;

            // Draw on the temporary canvas with background color white
            const tempCtx = tempCanvas.getContext('2d');
            tempCtx.fillStyle = '#ffffff';
            tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);

            // Calculate the maximum allowable title width based on canvas width
            const maxTitleWidth = tempCanvas.width - paddingRight - paddingLeft;

            // Style and draw the title with dynamic width
            let titleFontSize = 18;
            tempCtx.font = `bold ${titleFontSize}px Rubik, sans-serif`;

            // Adjust the font size to fit the title within the maximum allowable width
            while (tempCtx.measureText(graphName).width > maxTitleWidth) {
                titleFontSize--;
                tempCtx.font = `bold ${titleFontSize}px Rubik, sans-serif`;
            }

            tempCtx.fillStyle = '#002e5f';
            tempCtx.textAlign = 'center';
            tempCtx.fillText(graphName, tempCanvas.width / 2, paddingTop + 10 + titleFontSize);

            // Draw the main chart on the temporary canvas with padding
            tempCtx.drawImage(mainCanvas, paddingLeft, paddingTop + marginTop);

            // Convert the canvas to a Blob and create a download link
            tempCanvas.toBlob(function (blob) {
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = graphName + '.png';
                // Append the link, trigger click, and remove it
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        });

    </script>
    <script>
        $(document).ready(function () {
            // load the first curve distribution of viruses when opening the statistics page
            initCurveDistributionViruses();
        });
    </script>

{% endblock %}