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

{% set bodyClass = 'user_collectivity list' %}
{% set menuItem = 'user_collectivity' %}

{% block title %}{{ 'user.organization.title.list'|trans }} - {{ parent() }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
{% endblock %}

{% block body_head %}
    <h1>{{ 'user.organization.title.list'|trans }}</h1>
{% endblock %}

{% block breadcrumb %}
    {% set breadcrumb = [
        { 'name': 'user.organization.title.list'|trans }
    ] %}
    {% include '_breadcrumb.html.twig' with {'breadcrumb': breadcrumb} %}
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-xs-12 mb-1">
            {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('user_collectivity_create') }}" class="btn btn-default">
                    <i aria-hidden="true" class="fa fa-plus"></i>
                    {{ 'user.organization.action.new'|trans }}
                </a>
            {% endif %}
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="box box-solid">
                <div class="box-body overflow-x-auto">
                    <table id="table" class="table table-bordered table-hover">
                        <caption class="sr-only">{{ 'user.organization.title.list'|trans }}</caption>
                        <thead>
                            <tr>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_nom" placeholder="{{ 'user.organization.label.name'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_nom_court" placeholder="{{ 'user.organization.label.short_name'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <select class="form-control" id="search_type" style="width: 100%;">
                                        <option value="">{{ 'user.organization.label.type'|trans }}</option>
                                        {% for key, subject in dictionary('user_collectivity_type') %}
                                            <option value="{{ key }}">{{ subject }}</option>
                                        {% endfor %}
                                    </select>
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_informations_complementaires" placeholder="{{ 'user.organization.label.other_information'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_siren" placeholder="{{ 'user.organization.label.siren'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <select class="form-control" id="search_actif" style="width: 100%;">
                                        <option value="">{{ 'user.organization.label.active'|trans }}</option>
                                        <option value="1">{{ 'global.label.active'|trans }}</option>
                                        <option value="0">{{ 'global.label.inactive'|trans }}</option>
                                    </select>
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_nbr_cnil" placeholder="{{ 'user.organization.list.nbr_cnil'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_nbr_agents" placeholder="{{ 'user.organization.label.nbr_agents'|trans }}" style="width: 100%;">
                                </th>
                                <th>
                                    <input class="form-control" type="text" id="search_population" placeholder="{{ 'user.organization.label.population'|trans }}" style="width: 100%;">
                                </th>

                                <th scope="col" style="min-width:130px;position:relative;">
                                    <input class="daterangepicker form-control" type="text" id="search_created_at" placeholder="{{ 'global.placeholder.date'|trans }}" style="max-width: 130px;left: inherit!important;top: 0;font-size: 14px;border-radius: 0;padding: 0 5px;">
                                </th>
                                <th scope="col" style="min-width:130px;position:relative;">
                                    <input class="daterangepicker form-control" type="text" id="search_updated_at" placeholder="{{ 'global.placeholder.date'|trans }}" style="max-width: 130px;left: inherit!important;top: 0;font-size: 14px;border-radius: 0;padding: 0 5px;">
                                </th>
                                <th scope="col"></th> <!-- Actions -->
                            </tr>
                            <tr>
                                <th scope="col">{{ 'user.organization.label.name'|trans }}</th>
                                <th scope="col">{{ 'user.organization.label.short_name'|trans }}</th>
                                <th scope="col">{{ 'user.organization.label.type'|trans }}</th>
                                <th scope="col">{{ 'user.organization.label.other_information'|trans }}</th>
                                <th scope="col">{{ 'user.organization.label.siren'|trans }}</th>
                                <th scope="col">{{ 'user.organization.label.active'|trans }}</th>
                                <th scope="col">{{ 'user.organization.label.nbr_cnil'|trans }}</th>
                                <th scope="col">{{ 'user.organization.label.nbr_agents'|trans }}</th>
                                <th scope="col">{{ 'user.organization.label.population'|trans }}</th>
                                <th scope="col">{{ 'global.label.created_at'|trans }}</th>
                                <th scope="col">{{ 'global.label.updated_at'|trans }}</th>
                                <th scope="col">{{ 'global.label.actions'|trans }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.js"></script>

    {% set actionsIsVisible = false %}
    {% if is_granted('ROLE_ADMIN') %}
        {% set actionsIsVisible = true %}
    {% endif %}
    {% set dataTableOptions = {
        columns: [
            {"data": "nom"},
            {"data": "nom_court"},
            {"data": "type"},
            {"data": "informations_complementaires", "visible": false},
            {"data": "siren"},
            {"data": "statut"},
            {"data": "nbr_cnil", "visible": false},
            {"data": "nbr_agents", "visible": false},
            {"data": "population", "visible": false},
            {"data": "createdAt", "visible": false},
            {"data": "updatedAt", "visible": false},
            {"data": "actions", "className": "noVis", "orderable": false, "visible": actionsIsVisible},
            {"data": "id", "orderable": false, "visible": false, "className": "noVis"},
        ],
        excludeButtons: true,
        order:  [
            [0, 'asc' ]
        ],
        buttons: [
            {
                extend: "colvis",
                columns: ":not(.noVis)"
            },
            {
                extend: "excelHtml5",
                text: 'Exporter',
                exportOptions: {
                autoFilter: true,
                columns:  [':visible :not(:last-child)'],
            }
            },
            {
                text: 'Générer les bilans',
                attr: {
                title: 'Copy',
                id: 'bilanButton'
            },
            },
        ],
    } %}

    {{ include('_Utils/_serverside_datatable.html.twig') }}


    <script>
        function createQueryString (data) {
            return Object.keys(data).map(key => {
                let val = data[key]
                if (val !== null && typeof val === 'object') val = createQueryString(val)
                return `${key}=${encodeURIComponent(val)}`
            }).join('&')
        }
        function setEvents() {
            var oTable = $('#table').DataTable();

            $('#search_created_at').show('slide',function(){
                $('input#search_created_at').val('');
            });
            $('#search_updated_at').show('slide',function(){
                $('input#search_updated_at').val('');
            });

            $('#search_nom').off('keyup');
            $('#search_nom').keyup($.debounce(250, function(){
                oTable.column('0').search($(this).val()).draw() ;
            }));

            $('#search_nom_court').off('keyup');
            $('#search_nom_court').keyup($.debounce(250, function(){
                oTable.column('1').search($(this).val()).draw() ;
            }));

            $('#search_type').off('change');
            $('#search_type').change(function(){
                oTable.column('2').search($(this).val()).draw() ;
            });

            $('#search_informations_complementaires').off('keyup');
            $('#search_informations_complementaires').keyup($.debounce(250, function(){
                oTable.column('3').search($(this).val()).draw() ;
            }));

            $('#search_siren').off('keyup');
            $('#search_siren').keyup($.debounce(250, function(){
                oTable.column('4').search($(this).val()).draw() ;
            }));

            $('#search_actif').off('change');
            $('#search_actif').change(function(){
                oTable.column('5').search($(this).val()).draw() ;
            });

            $('#search_nbr_cnil').off('keyup');
            $('#search_nbr_cnil').keyup($.debounce(250, function(){
                oTable.column('6').search($(this).val()).draw() ;
            }));

            $('#search_nbr_agents').off('keyup');
            $('#search_nbr_agents').keyup($.debounce(250, function(){
                oTable.column('7').search($(this).val()).draw() ;
            }));

            $('#search_population').off('keyup');
            $('#search_population').keyup($.debounce(250, function(){
                oTable.column('8').search($(this).val()).draw() ;
            }));
            $('#search_created_at').off('change');
            $('#search_created_at').change(function(){
                oTable.column('9').search($(this).val()).draw() ;
            });

            $('#search_updated_at').off('change');
            $('#search_updated_at').change(function(){
                oTable.column('10').search($(this).val()).draw() ;
            });

            $("#bilanButton").on('click', function() {
                // redirect to server with filters
                var params = oTable.ajax.params()
                params.length=9999;
                var url = '{{ url('user_collectivity_list_datatables') }}';
                //get list from datatables
                jQuery.ajaxSetup({
                    xhrFields: {
                        withCredentials: true
                    },
                });
                jQuery.post(url, params, function(data) {
                    var ids = data.data.map(function(row) { return row.id; })
                    var url = '{{ url('reporting_review_confirm_zip') }}';
                    var formdata = '<form action="' + url + '" method="post">'
                    var fields = ids.map(function(id) {
                        return '<input type="hidden" value="' + id + '" name="ids[]" />'
                    }).join('')
                    var form = $(formdata + fields + '</form>');
                    $('body').append(form);
                    form.submit();
                }).fail(function(err) {
                    // console.log(err)
                })
            })
        }


        $(document).ready(function() {
            $('#table_filter').hide();
            setEvents();
        } );
        $('#table').on('column-visibility.dt', function() {
            setEvents();
        } );
    </script>

{% endblock %}