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

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

{% block title %}{{ 'aipd.analyse_impact.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>{{ 'aipd.analyse_impact.title.list'|trans }}</h1>
{% endblock %}

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


{% block body %}
    <div class="row">
        <div class="col-xs-12 mb-1">
            {% if category and category.documents|length > 0 %}
                <a href="{{ path('documentation_document_index') }}?category={{ category.id }}" class="btn btn-default pull-right">
                    <i aria-hidden="true" class="fa fa-circle-info"></i>
                    {{ 'global.action.documentation'|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">{{ 'aipd.analyse_impact.title.list'|trans }}</caption>
                        <thead>
                            <tr>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_traitement" placeholder="{{ 'aipd.analyse_impact.list.traitement'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col" style="min-width:130px;position:relative;">
                                    <input class="daterangepicker form-control" type="text" id="search_date_de_creation" 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_date_de_validation" 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">
                                    <input class="form-control" type="text" id="search_modele" placeholder="{{ 'aipd.analyse_impact.list.modele'|trans }}" style="width: 100%;">
                                </th>
                                {% if is_granted('ROLE_REFERENT') %}
                                    <th scope="col"></th> <!-- Structure -->
                                {% endif %}
                                {% if app.user.hasServices %}
                                    <th scope="col"></th> <!-- Service -->
                                {% endif %}
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th> <!-- Actions -->
                            </tr>
                            <tr>
                                <th scope="col">{{ 'aipd.analyse_impact.list.traitement'|trans }}</th>
                                <th scope="col">{{ 'global.label.created_at'|trans }}</th>
                                <th scope="col">{{ 'aipd.analyse_impact.list.date_validation'|trans }}</th>
                                <th scope="col" style="width: 15%">{{ 'aipd.analyse_impact.list.modele'|trans }}</th>
                                {% if is_granted('ROLE_REFERENT') %}
                                    <th>{{ 'global.label.organization'|trans }}</th>
                                {% endif %}
                                {% if app.user.hasServices %}
                                    <th>{{ 'global.label.service'|trans }}</th>
                                {% endif %}
                                <th scope="col">{{ 'aipd.analyse_impact.label.avis_referent'|trans }}</th>
                                <th scope="col">{{ 'aipd.analyse_impact.label.avis_dpd'|trans }}</th>
                                <th scope="col">{{ 'aipd.analyse_impact.label.avis_representant'|trans }}</th>
                                <th scope="col">{{ 'aipd.analyse_impact.label.avis_responsable'|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 collectivityIsVisible = false %}
    {% if is_granted('ROLE_REFERENT') %}
        {% set collectivityIsVisible = true %}
    {% endif %}

    {% set cols = [
        {"data": "traitement", "className": "noVis"},
        {"data": "dateDeCreation"},
        {"data": "dateDeValidation"},
        {"data": "modele"},
        {"data": "avisReferent"},
        {"data": "avisDpd"},
        {"data": "avisRepresentant"},
        {"data": "avisResponsable"},
        {"data": "actions", "className": "noVis", "orderable": false}
    ]%}

    {% if app.user.hasServices %}
        {% set cols = [
            {"data": "traitement", "className": "noVis"},
            {"data": "dateDeCreation"},
            {"data": "dateDeValidation"},
            {"data": "modele"},
            {"data": "service", "visible":false},
            {"data": "avisReferent"},
            {"data": "avisDpd"},
            {"data": "avisRepresentant"},
            {"data": "avisResponsable"},
            {"data": "actions", "className": "noVis", "orderable": false}
        ] %}
    {% endif %}

    {% if is_granted('ROLE_REFERENT') %}
        {% set cols = [
            {"data": "traitement", "className": "noVis"},
            {"data": "dateDeCreation"},
            {"data": "dateDeValidation"},
            {"data": "modele"},
            {"data": "collectivite"},
            {"data": "service", "visible":false},
            {"data": "avisReferent"},
            {"data": "avisDpd"},
            {"data": "avisRepresentant"},
            {"data": "avisResponsable"},
            {"data": "actions", "className": "noVis", "orderable": false}
        ] %}
    {% endif %}

    {% set dataTableOptions = {
        columns: cols,
        order:  [
            [0, 'asc' ]
        ],
    } %}

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

    <script>
        $(document).ready(function () {
            $('#table_filter').hide();
            var oTable = $('#table').DataTable();
            function setEvents() {
                $('#search_date_de_creation').show('slide',function(){
                    $('input#search_date_de_creation').val('');
                });
                $('#search_date_de_validation').show('slide',function(){
                    $('input#search_date_de_validation').val('');
                });

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

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

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

                $('#search_modele').off('keyup');
                $('#search_modele').keyup($.debounce(250, function(){
                    oTable.column('3').search($(this).val()).draw() ;
                }));
            }
           setEvents();
            $('#table').on('column-visibility.dt', function() {
                setEvents();
            } );
        })
    </script>

{% endblock %}