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

{% block title %} GIHSN Database {% endblock %}

{% block stylesheets %}

    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/icofont.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        .data_count{    background-color: #0c9cce;
            opacity: 1;
            color: #fff;
        }
        .filtere-action,.intialiser-filtere-action{
            display:none;
        }
        .bloc_recap, .body-recap, .header-recap{
            display:none;
        }

        .table-bordered thead, .table-bordered tbody, .table-bordered tfoot, .table-bordered tr, .table-bordered td, .table-bordered th {
            border-color: #002e5f;
        }
    </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">GIHSN Database </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="text-primary">GIHSN Database</h5>
					<div class="card-header-right card-header-right-btn">
                        <span class="text-right"><button class="btn btn-primary completness-database-export">Completeness of the GIHSN database </button></span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="filtreDatatable mb-2">
                        <div class="default-according style-1" id="filterAccordion">
                            <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="#filterAccordionBloc" aria-expanded="false"><i class="fa fa-filter"></i>Filter
                                        </button>
                                    </h5>
                                </div>
                                <div class="collapse show" id="filterAccordionBloc" data-bs-parent="#filterAccordion">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-xl-6 col-lg-8 col-md-12 col-sm-12 filter-field-bloc">
                                                <div class="mb-2">
                                                    <label class="form-check-label">Influenza season </label>
                                                    <select class="select2-multiple filter_season data-filter" multiple="multiple" name="filter[season]">
                                                        <option value="all">All</option>
                                                        {% for season in seasons %}
                                                            <option value="{{ season.season }}">{{ season.season }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-lg-8 col-md-12 col-sm-12 filter-field-bloc">
                                                <div class="mb-2">
                                                    <label class="form-check-label" for="u-range-02">Age group</label>
                                                    <input id="u-range-02" type="text" class="data-filter filter_age_group">
                                                </div>
                                            </div>

                                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 filter-field-bloc">
                                                <div class="row">
                                                    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12">
                                                        <label><input type="checkbox" class="checkbox_animated mt-2 data-filter all_zone">
                                                            All geographical zones
                                                        </label>
                                                    </div>
                                                    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12">
                                                        <label><input type="checkbox" class=" checkbox_animated mt-2 data-filter nothern_hemisphere">
                                                            Northern Hemisphere
                                                        </label>
                                                    </div>
                                                    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12">
                                                        <label><input type="checkbox" class="checkbox_animated mt-2 data-filter southern_hemisphere">
                                                             Southern Hemisphere 
                                                        </label>
                                                    </div>
{#                                                     <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12">#}
{#                                                        <label><input type="checkbox" class="checkbox_animated mt-2 data-filter intertropical_zone">#}
{#                                                             Intertropical zone #}
{#                                                        </label>#}
{#                                                    </div>#}
                                                    <hr>
                                                    {% for site in sites  %}
                                                        {% if site.category == 'Hemisphère Nord'%}
                                                            {% set class = "nothern_hemisphere_zone" %}
                                                        {% elseif site.category == 'Hemisphère Sud' %}
                                                            {% set class = "southern_hemisphere_zone" %}
                                                        {% elseif site.category == '' %}
                                                            {% set class = "" %}
                                                        {% else %}
                                                            {% set class = "intertropical_zone_zone nothern_hemisphere_zone" %}
                                                        {% endif %}
                                                    <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12">
                                                        <label><input type="checkbox" class="checkbox_animated mt-2 data-filter filter_zone {{ class }}" value="{{ site.id }}" >
                                                            {{ site.zone }}
                                                        </label>
                                                    </div>
                                                    {% endfor %}
                                                </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 filtere-action mb-2"
                                                        onclick="filter()">
                                                    <i class="fa fa-filter"></i> Filter
                                                </button>
                                                <button class="btn btn-outline-primary intialiser-filtere-action mb-2"
                                                        onclick="initialiseFilterData()">
                                                    <i class="fas fa-times"></i> Reset the filter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 bloc_recap ">
                        <div class="mb-3 table-responsive">
                            <table class="table-bordered table-striped" width="100%">
                                <thead class="header_recap">
                                </thead>
                                <tbody class="body_recap">
                                </tbody>
                            </table>
                        </div>
                        <div class="row ">
                            <div class="col-12">
                                <div class="text-center mt-2">
                                    {% if app.user and app.user.manager %}<a href="javascript:;"
                                                                             class="btn btn-primary export-data"><i
                                                class="fas fa-file-download"></i> Export result</a>{% endif %}
                                    {% if app.user and app.user.visitor %}
                                        <button class="btn btn-primary request-data" type="button">Request data
                                        </button>{% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block javascripts %}

    {{ parent() }}


    <script src="{{ asset('assets/js/range-slider/ion.rangeSlider.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $("#u-range-02").ionRangeSlider({
                type: "double",
                min: 0,
                max: 120,
                from: {% if app.request.get('filter')['age'] is defined and app.request.get('filter')['age'] != '' %}{{ app.request.get('filter')['age']|split(',')[0] }}{% else %}0{% endif %},
                to: {% if app.request.get('filter')['age'] is defined and app.request.get('filter')['age'] != '' %}{{ app.request.get('filter')['age']|split(',')[1] }}{% else %}0{% endif %},
            })
        });

        $(document).on('change','.nothern_hemisphere',function(){
            if($(this).is(':checked')){
                $('.nothern_hemisphere_zone').prop('checked',true);
            } else {
                $('.nothern_hemisphere_zone').prop('checked',false);
                $('.all_zone').prop('checked',false);
            }
        });

        $(document).on('change','.southern_hemisphere',function(){
            if($(this).is(':checked')){
                $('.southern_hemisphere_zone').prop('checked',true);
            } else {
                $('.southern_hemisphere_zone').prop('checked',false);
                $('.all_zone').prop('checked',false);
            }
        });

        // $(document).on('change','.intertropical_zone',function(){
        //     if($(this).is(':checked')){
        //         $('.intertropical_zone_zone').prop('checked',true);
        //     } else {
        //         $('.intertropical_zone_zone').prop('checked',false);
        //         $('.all_zone').prop('checked',false);
        //     }
        // });

        $(document).on('change','.all_zone',function(){
            if($(this).is(':checked')){
                $('.checkbox_animated').prop('checked',true);
            } else {
                $('.checkbox_animated').prop('checked',false);
            }
        });

        $(document).on('change','.data-filter',function(){
            $('.intialiser-filtere-action, .filtere-action').show();
            $('.recap-checkbox').prop('checked',false);
            $('.bloc_recap, .request-data, .export-data').hide();
        });

        $(document).on('click','.export-data',function(){
            let formData = new FormData(),
                seasonFilter = $('.filter_season').val(),
                ageFilter = ($("#u-range-02").val()).split(";"),
                zoneFilter = [],
                all_checked = [],
                seasons = [],
                zones = [];
            $(".filter_zone:checked").each(function(){
                zoneFilter.push($(this).val());
            });
            $('.recap-checkbox:checked').each(function(key,value){
                let checked = [],
                    season = $(this).attr('data-season'),
                    zone = $(this).attr('data-id-zone');

                if(seasons.indexOf(season) === -1){ seasons.push(season); }
                if(zones.indexOf(zone) === -1){ zones.push(zone); }
                checked.push(season);
                checked.push(zone);
                all_checked.push(checked);
            });

            if(all_checked.length > 0){
                formData.set('filters[checked]', JSON.stringify(all_checked));
                formData.set('filters[age]', ageFilter[1] > 0 ? ageFilter : "")
                formData.set('filters[season]', seasonFilter);
                formData.set('filters[zone]', zoneFilter);
                $.ajax({
                    url:  "{{ path('export_request') }}",
                    method: 'POST',
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        // console.log('********************')
                        // console.log(response)
                        // $.notify({title: 'Success', message: response.message}, {type: 'info', delay: 30000, placement: {align: "center", from: "top"}});
                        showNotify('Success', response.message, "info", 5000);
                    }
                });
            }else{
                showNotify("Warning", "No data to export!", 'warning', 5000);
            }
        });

        $(document).on('click','.request-data',function(){
            let formData = new FormData(),
                seasonFilter = $('.filter_season').val(),
                ageFilter = ($("#u-range-02").val()).split(";"),
                zoneFilter = [],
                all_checked = [],
                seasons = [],
                zones = [];
            $(".filter_zone:checked").each(function(){
                zoneFilter.push($(this).val());
            });
            $('.recap-checkbox:checked').each(function(key,value){
                let checked = [],
                    season = $(this).attr('data-season'),
                    zone = $(this).attr('data-id-zone');

                if(seasons.indexOf(season) === -1){ seasons.push(season); }
                if(zones.indexOf(zone) === -1){ zones.push(zone); }
                checked.push(season);
                checked.push(zone);
                all_checked.push(checked);
            });
            if(all_checked.length > 0){
                formData.set('recap[age]', ageFilter[1] > 0 ? ageFilter : "");
                formData.set('recap[season]', seasonFilter);
                formData.set('recap[zone]', zoneFilter);
                formData.set('recap[checked]', JSON.stringify(all_checked));
                $.ajax({
                    url: "{{ path('request_data_ajax') }}",
                    method: 'POST',
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if(response.status == 200){
                            {% if app.user.visitor %} location.href = ("{{ path('export_request_data') }}");{% endif %}
                            // showNotify("Success", response.message, 'success',5000);
                            {#setTimeout(function(){location.href = ("{{ path('export_request_data') }}");}, 5000);#}

                        }else {
                            showNotify("Error", 'Thank you for contacting the admin!', 'danger', 5000);
                        }
                    }
                });
            } else{
                showNotify("Warning", "No line selected!", 'warning', 5000);
            }

        });

        $(document).on('change','.all_zone_recap',function(){
            if($(this).is(':checked')){
                $('.zone_header, .season_header, .zone_recap, .season_recap').prop('checked',true);
            } else {
                $('.zone_header, .season_header, .zone_recap, .season_recap').prop('checked',false);

            }
        });

        $(document).on('change','.season_header',function(){
            let season = $(this).attr('data-season');
            if($(this).is(':checked')){
                $('.season_recap[data-season="'+season+'"]').prop('checked',true);
            } else {
                $('.season_recap[data-season="'+season+'"]').prop('checked',false);
            }
        });

        $(document).on('change','.zone_header',function(){
            let zone = $(this).attr('data-zone');
            if($(this).is(':checked')){
                $('.zone_recap[data-id-zone="'+zone+'"]').prop('checked',true);
            } else {
                $('.zone_recap[data-id-zone="'+zone+'"]').prop('checked',false);
            }
        });


    </script>
    <script>
        function initialiseFilterData() {
            $("#filterAccordion select").val('').trigger('change');
            var rangeSlider = $("#u-range-02").data("ionRangeSlider");
            rangeSlider.update({
                from: 0,
                to: 0,
            });
            $('.checkbox_animated').prop('checked',false);
            $('.bloc_recap, .filtere-action, .intialiser-filtere-action').hide();
        }

        function filter() {

            $('.recap-body').html("");
            let formData = new FormData(),
                season = String($(".filter_season").val()),
                zone = [],
                age = ($("#u-range-02").val()).split(";");
            $(".filter_zone:checked").each(function(){
                zone.push(String($(this).val()));
            });

            if(season.length > 0  || age[1] > 0  || zone.length > 0  ){
                formData.set('filter[age]', age[1] > 0 ? age : "");
                formData.set('filter[season]', season);
                formData.set('filter[zone]', zone);
                $.ajax({
                    url: "{{ path('filter_data_ajax') }}",
                    method: 'POST',
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (response) {
                        if (response.status === 200 && response.recap) {
                            $('.bloc_recap, .body_recap, .header-recap, .request-data, .export-data').show();
                            $('.header_recap').empty();
                            $('.body_recap').empty();

                            let totalAll = 0;
                            $.each(response.recap, function (index, value) {
                                totalAll = totalAll + (value["total"]*1)
                            })

                            if(totalAll == 0){
                                $('.header_recap').html( '<tr><td style="height: 40px;" class="alert"><b>&nbsp;<i class="fa-solid fa-triangle-exclamation"></i>&nbsp;No data available for these criteria</b></td></tr>');
                                $('.export-data').hide();
                                return true
                            }

                            let seasonArray = [],
                            htmlHeader = '';

                            htmlHeader += '<tr>' +
                                '<td>' +
                                '<label class="m-r-20 m-l-10"><input type="checkbox" class="checkbox_animated mt-2 all_zone_recap"  checked><b>All ('+totalAll+')</b></label>\n' +
                                '</td> <td>';


                            $.each(response.recap, function (index, value) {
                                value["age"] == null ? age = "" : age = value["age"];
                                let htmlBody = '<tr>' +
                                    '<td>' +
                                    '<label class="m-r-20 m-l-10"><input type="checkbox" class="checkbox_animated mt-2  zone_header" data-zone="' + value["id"] + '"  checked>' + value["zone"] + ' (' + value["total"] + ')</label>' +
                                    '</td><td>\n';
                                $.each(value[0], function (item, element) {
                                    htmlBody += '<label class="m-r-20 m-l-10"><input type="checkbox" data-season="' + element["season"] + '" data-id-zone="' + element["id"] + '"  data-age="' + response.age + '" class="checkbox_animated mt-2 season_recap zone_recap recap-checkbox" checked> ' + element["season"] + ' (' + element["nbr_patient"] + ')</label><br>\n';
                                    seasonArray.indexOf(element["season"]) === -1 ? seasonArray.push(element["season"]):null
                                });
                                htmlBody += '</td></tr>';
                                $('.body_recap').append(htmlBody);

                            });

                            $.each(response.season, function (index, value) {
                                htmlHeader += '<label class="m-r-20 m-l-10"><input type="checkbox" class="checkbox_animated mt-2 season_header " data-season="' + value.season + '" checked><b>' + value.season + '</b></label>\n';
                            });

                            htmlHeader += '</td></tr>' ;
                            $('.header_recap').append(htmlHeader);
                        }
                    }
                });
            }else{
                showNotify("Warning", "Empty filter!", 'warning');
            }
        }



        $(function(){

            let showbouton = false;
            {# initialisattion du filter saison avec les données pre-enregister #}
            {% if app.request.get('filter')['season'] is defined and app.request.get('filter')['season'] != '' %}
            $(".select2-multiple").val(["{{ app.request.get('filter')['season']|split(',')|join('","')|raw }}"]).trigger("change");
            $('.intialiser-filtere-action, .filtere-action').show();
            {% endif %}

            {# initialisattion du filter saison avec les données pre-enregister #}
            {% if app.request.get('filter')['zone'] is defined and app.request.get('filter')['zone'] != '' %}
            const zones = [{{ app.request.get('filter')['zone']|raw }}];

            $('.filter_zone').each(function(){
                var valeurencours = $(this).val()*1;
                if(zones.includes(valeurencours)){
                    $(this).prop('checked', true)
                }
            })
            $('.intialiser-filtere-action, .filtere-action').show();

            if($('.nothern_hemisphere_zone').is(':checked')){
                $('.nothern_hemisphere').prop('checked', true);
            }

            if($('.southern_hemisphere_zone').is(':checked')){
                $('.southern_hemisphere').prop('checked', true);
            }

            // if($('.intertropical_zone_zone').is(':checked')){
            //     $('.intertropical_zone').prop('checked', true);
            // }
            {% endif %}


            {% if app.request.get('filter')['age'] is defined and app.request.get('filter')['age'] != '' %}
            $('.intialiser-filtere-action, .filtere-action').show();
            {% endif %}
        });
		 $(document).on('click','.completness-database-export',function (){
            $.ajax({
                url:  "{{ path('completness_database_export') }}",
                method: 'POST',
                success: function (response) {
                    if (response.status === 200) {
                        showNotify('Success', response.message, "info");
                    } else {
                        showNotify("Error", 'Thank you for contacting the admin!', 'danger');
                    }
                }
            });
        });


    </script>
{% endblock %}