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

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

{% block title %}{{ 'registry.request.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>
        {{ 'registry.request.title.list'|trans }}
        <small>
            {% if app.request.query.get('archive') == 'true' %}
                {{ 'registry.request.title.list_archived'|trans }}
            {% else %}
                {{ 'registry.request.title.list_not_archived'|trans }}
            {% endif %}
        </small>
    </h1>
{% endblock %}

{% block breadcrumb %}
    {% set breadcrumb = [
        { 'name': 'registry.request.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_USER') %}
                <a href="{{ path('registry_request_create') }}" class="btn btn-default">
                    <i aria-hidden="true" class="fa fa-plus"></i>
                    {{ 'registry.request.action.new'|trans }}
                </a>
            {% endif %}
            {% if app.request.query.get('archive') == 'true' %}
                <a href="{{ path('registry_request_list', {'archive' : 'false'}) }}" class="btn btn-default">
                    <i aria-hidden="true" class="fa fa-archive"></i>
                    {{ 'registry.request.action.not_archived'|trans }}
                </a>
            {% else %}
                <a href="{{ path('registry_request_report') }}" class="btn btn-default">
                    <i aria-hidden="true" class="fa fa-clipboard-list"></i>
                    {{ 'global.action.report'|trans }}
                </a>
                <a href="{{ path('registry_request_list', {'archive' : 'true'}) }}" class="btn btn-default">
                    <i aria-hidden="true" class="fa fa-archive"></i>
                    {{ 'registry.request.action.archived'|trans }}
                </a>
            {% endif %}
            {% 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">
                    <div id="custom-buttons" style="float:left">
                        {# <a id="delete-all"  href="{{ path('registry_request_delete_all', { }) }}" class="dt-button buttons-collection buttons-colvis">
                            {{ 'global.action.archive'|trans }}
                        </a> #}
                        <a id="print-all" aria-controls="table" href="{{ path('registry_request_print_all', { }) }}" class="dt-button buttons-collection buttons-colvis">
                            {{ 'global.action.print'|trans }}
                        </a>
                    </div>
                    <table id="table" class="table table-bordered table-hover">
                        <caption class="sr-only">{{ 'registry.request.title.list'|trans }} {% if app.request.query.get('archive') == 'true' %}{{ 'registry.request.title.list_archived'|trans }}{% else %}{{ 'registry.request.title.list_not_archived'|trans }}{% endif %}</caption>
                        <thead>
                            <tr>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_personne_concernee" placeholder="{{ 'registry.request.label.concerned_people'|trans }}" style="width: 100%;">
                                </th>
                                {% if is_granted('ROLE_REFERENT') %}
                                    <th scope="col">
                                        <input class="form-control" type="text" id="search_collectivite" placeholder="{{ 'global.label.organization'|trans }}" style="width: 100%;">
                                    </th>
                                {% endif %}
                                {% if app.user.hasServices %}
                                    <th scope="col">
                                        <input class="form-control" type="text" id="search_service" placeholder="{{ 'global.label.service'|trans }}" style="width: 100%;">
                                    </th>
                                {% endif %}
                                <th scope="col" style="min-width:130px;position:relative;">
                                    <input class="daterangepicker form-control" type="text" id="search_date_demande" 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">
                                    <select class="form-control" id="search_objet" style="width: 100%;">
                                        <option value="">{{ 'registry.request.label.object'|trans }}</option>
                                        {% for key, subject in dictionary('registry_request_object') %}
                                            <option value="{{ key }}">{{ subject }}</option>
                                        {% endfor %}
                                    </select>
                                </th>
                                <th scope="col">
                                    <select class="form-control" id="search_complete" style="width: 100%;">
                                        <option value="">{{ 'registry.request.label.complete'|trans }}</option>
                                        <option value="1">{{ 'global.label.yes'|trans }}</option>
                                        <option value="0">{{ 'global.label.no'|trans }}</option>
                                    </select>
                                </th>
                                <th scope="col">
                                    <select class="form-control" id="search_demandeur" style="width: 100%;">
                                        <option value="">{{ 'registry.request.label.legitimate_applicant'|trans }}</option>
                                        <option value="1">{{ 'global.label.yes'|trans }}</option>
                                        <option value="0">{{ 'global.label.no'|trans }}</option>
                                    </select>
                                </th>
                                <th scope="col">
                                    <select class="form-control" id="search_legitime" style="width: 100%;">
                                        <option value="">{{ 'registry.request.label.legitimate_request'|trans }}</option>
                                        <option value="1">{{ 'global.label.yes'|trans }}</option>
                                        <option value="0">{{ 'global.label.no'|trans }}</option>
                                    </select>
                                </th>
                                <th scope="col" style="min-width:130px;position:relative;">
                                    <input class="daterangepicker form-control" type="text" id="search_date_traitement" 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">
                                    <select class="form-control" id="search_etat" style="width: 100%;">
                                        <option value="">{{ 'registry.request.label.state'|trans }}</option>
                                        {% for key, subject in dictionary('registry_request_state') %}
                                            <option value="{{ key }}">{{ subject }}</option>
                                        {% endfor %}
                                    </select>
                                </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">{{ 'registry.request.label.concerned_people'|trans }}</th>
                                {% if is_granted('ROLE_REFERENT') %}
                                    <th scope="col">{{ 'global.label.organization'|trans }}</th>
                                {% endif %}
                                {% if app.user.hasServices %}
                                    <th scope="col">{{ 'global.label.service'|trans }}</th>
                                {% endif %}
                                <th scope="col">{{ 'registry.request.label.date'|trans }}</th>
                                <th scope="col">{{ 'registry.request.label.object'|trans }}</th>
                                <th scope="col">{{ 'registry.request.label.complete'|trans }}</th>
                                <th scope="col">{{ 'registry.request.label.legitimate_applicant'|trans }}</th>
                                <th scope="col">{{ 'registry.request.label.legitimate_request'|trans }}</th>
                                <th scope="col">{{ 'registry.request.label.answer_date'|trans }}</th>
                                <th scope="col">{{ 'registry.request.label.state'|trans }}</th>
                                <th scope="col" style="max-width: 60px;">{{ 'global.label.created_at'|trans }}</th>
                                <th scope="col" style="max-width: 60px;">{{ '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 = is_granted('ROLE_USER') and false == app.request.query.boolean('archive')  %}

    {% set collectiviteIsVisible = false %}
    {% set collectiviteClassname = "noVis" %}
    {% if is_granted('ROLE_REFERENT') %}
        {% set collectiviteIsVisible = true %}
        {% set collectiviteClassname = "" %}
    {% endif %}

    {% set cols = [
        {"data": "personne_concernee", "className": "noVis"},
        {"data": "date_demande"},
        {"data": "objet_demande"},
        {"data": "demande_complete"},
        {"data": "demandeur_legitime"},
        {"data": "demande_legitime"},
        {"data": "date_traitement", "orderable": true, 'type': 'date'},
        {"data": "etat_demande"},
        {"data": "createdAt", "visible": false},
        {"data": "updatedAt", "visible": false},
        {"data": "actions", "visible": actionsIsVisible, "className": "noVis", "orderable": false},
    ] %}
    {% if app.user.hasServices %}
        {% set cols = [
            {"data": "personne_concernee", "className": "noVis"},
            {"data": "service", "visible": false},
            {"data": "date_demande"},
            {"data": "objet_demande"},
            {"data": "demande_complete"},
            {"data": "demandeur_legitime"},
            {"data": "demande_legitime"},
            {"data": "date_traitement", "orderable": true, 'type': 'date'},
            {"data": "etat_demande"},
            {"data": "createdAt", "visible": false},
            {"data": "updatedAt", "visible": false},
            {"data": "actions", "visible": actionsIsVisible, "className": "noVis", "orderable": false},
        ] %}
    {%  endif %}
    {% if is_granted('ROLE_REFERENT') %}
        {% set cols = [
            {"data": "personne_concernee", "className": "noVis"},
            {"data": "collectivite", "visible": collectiviteIsVisible, "className": collectiviteClassname},
            {"data": "service", "visible": false},
            {"data": "date_demande"},
            {"data": "objet_demande"},
            {"data": "demande_complete"},
            {"data": "demandeur_legitime"},
            {"data": "demande_legitime"},
            {"data": "date_traitement", "orderable": true, 'type': 'date'},
            {"data": "etat_demande"},
            {"data": "createdAt", "visible": false},
            {"data": "updatedAt", "visible": false},
            {"data": "actions", "visible": actionsIsVisible, "className": "noVis", "orderable": false},
        ] %}
    {%  endif %}

    {% set dataTableOptions = {
        columns: cols
    } %}

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


    <script>
        function setEvents() {
            var oTable = $('#table').DataTable();
            var col = 0;
            {% if is_granted('ROLE_REFERENT') %}
                col = 1;
            {% endif %}
            {% if app.user.hasServices %}
                col += 1
            {% endif %}

            oTable.on( 'draw', function () {
                const printButton = $('#print-all')
                let printLink = "{{ path('registry_request_print_all', { }) }}";
                let count = oTable.data().rows().count();

                if (count) {
                    printButton.attr("href", printLink);
                    printButton.removeClass("disabled");
                } else {
                    printButton.addClass("disabled");
                    printButton.removeAttr("href");
                }
            });

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

            $('#search_personne_concernee').off('keyup');
            $('#search_personne_concernee').keyup($.debounce(250, function(){
                oTable.column('0').search($(this).val()).draw();
            }));
            {% if is_granted('ROLE_REFERENT') %}
            $('#search_collectivite').off('keyup');
            $('#search_collectivite').keyup($.debounce(250, function(){
                oTable.column(1).search($(this).val()).draw();
            }));

            $('#search_service').off('keyup');
            $('#search_service').keyup($.debounce(250, function(){
                oTable.column(2).search($(this).val()).draw();
            }));
            {% endif %}

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

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

            $('#search_complete').off('change');
            $('#search_complete').change(function(){
                oTable.column(col + 3).search($(this).val()).draw();
            });

            $('#search_demandeur').off('change');
            $('#search_demandeur').change(function(){
                oTable.column(col + 4).search($(this).val()).draw();
            });

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

            $('#search_date_traitement').off('change');
            $('#search_date_traitement').change(function(){
                oTable.column(col + 6).search($(this).val()).draw();
            });

            $('#search_etat').off('change');
            $('#search_etat').change(function(){
                oTable.column(col + 7).search($(this).val()).draw();
            });

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

            $('#search_created_at').off('change');
            $('#search_created_at').change(function(){
                oTable.column(col + 9).search($(this).val()).draw();

            });
        }

        $(document).ready(function() {
            $('#table_filter').hide();
            setEvents();

            let columnButton = $("button.dt-button > span:contains('Colonnes')").parent();
            $( "#custom-buttons" ).prepend( columnButton.css("float", "left").css("margin-right", "0.5em"));

        } );
        $('#table').on('column-visibility.dt', function() {
            setEvents();
        } );
    </script>
{% endblock %}