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

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

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

{% block breadcrumb %}
    {% set breadcrumb = [
        { 'name': 'registry.tool.breadcrumb.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') and app.user.collectivity.hasModuleTools) %}
                <a href="{{ path('registry_tool_create') }}" class="btn btn-default">
                    <i aria-hidden="true" class="fa fa-plus"></i>
                    {{ 'registry.tool.action.new'|trans }}
                </a>
            {% endif %}
            {% if app.user.collectivity.hasModuleTools %}
                <a href="{{ path('registry_tool_report') }}" class="btn btn-default">
                    <i aria-hidden="true" class="fa fa-clipboard-list"></i>
                    {{ 'global.action.report'|trans }}
                </a>
            {% endif %}
            {% if category is defined and 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" style="clear: both;">
                        <caption class="sr-only">{{ 'registry.tool.title.list'|trans }}</caption>
                        <thead>
                            <tr>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_nom" placeholder="{{ 'registry.tool.label.name'|trans }}" style="width: 100%;">
                                </th>
                                {% if is_granted('ROLE_REFERENT') %}
                                    <th scope="col">
                                        <input class="form-control" type="text" id="search_collectivity" 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">
                                    <select class="form-control" id="search_type" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.type'|trans }}</option>
                                        {% for key, subject in dictionary('registry_tool_type') %}
                                            <option value="{{ key }}">{{ subject }}</option>
                                        {% endfor %}
                                    </select>
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_editor" placeholder="{{ 'registry.tool.label.editor'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <select class="form-control" id="search_archival" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.archival'|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_encrypted" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.encrypted'|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_access_control" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.access_control'|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_update" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.update'|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_backup" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.backup'|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_deletion" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.deletion'|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_tracking" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.tracking'|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_has_comment" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.has_comment'|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_other" style="width: 100%;">
                                        <option value="">{{ 'registry.tool.label.other'|trans }}</option>
                                        <option value="1">{{ 'global.label.yes'|trans }}</option>
                                        <option value="0">{{ 'global.label.no'|trans }}</option>
                                    </select>
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_treatment" placeholder="{{ 'global.label.linked_treatment'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_contractor" placeholder="{{ 'global.label.linked_contractor'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_document" placeholder="{{ 'global.label.linked_proof'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_action" placeholder="{{ 'global.label.linked_mesurement'|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" >{{ 'registry.tool.label.name'|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.tool.label.type'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.editor'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.archival'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.encrypted'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.access_control'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.update'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.backup'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.deletion'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.tracking'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.has_comment'|trans }}</th>
                                <th scope="col" >{{ 'registry.tool.label.other'|trans }}</th>
                                <th scope="col" >{{ 'global.label.linked_treatment'|trans }}</th>
                                <th scope="col" >{{ 'global.label.linked_contractor'|trans }}</th>
                                <th scope="col" >{{ 'global.label.linked_proof'|trans }}</th>
                                <th scope="col" >{{ 'global.label.linked_mesurement'|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 collectivityIsVisible = false %}
    {% set collectivityClassname = "noVis" %}
    {% set actionIsVisible = false %}
    {% if is_granted('ROLE_REFERENT') %}
        {% set collectivityIsVisible = true %}
        {% set collectivityClassname = "" %}
    {% endif %}

    {% if is_granted('ROLE_USER') %}
        {% set actionIsVisible = true %}
    {% endif %}

    {% set dataTableOptions = {
        columns: [
            {"data": "name", "className": "noVis"},
            {"data": "type"},
            {"data": "editor", "visible": false},
            {"data": "archival"},
            {"data": "encrypted"},
            {"data": "access_control", "visible": false},
            {"data": "update"},
            {"data": "backup"},
            {"data": "deletion", "visible": false},
            {"data": "tracking", "visible": false},
            {"data": "has_comment", "visible": false},
            {"data": "other"},
            {"data": "treatments", "visible": false, "orderable": false},
            {"data": "contractors", "visible": false, "orderable": false},
            {"data": "proofs", "visible": false, "orderable": false},
            {"data": "mesurements", "visible": false, "orderable": false},
            {"data": "createdAt", "visible": false},
            {"data": "updatedAt", "visible": false},
            {"data": "actions", "orderable": false, "className": "noVis action", "visible": actionIsVisible},
        ],
        order:  [
            [0, 'desc' ]
        ],
    } %}

    {% if app.user.hasServices %}
        {% set dataTableOptions = {
            columns: [
                {"data": "name", "className": "noVis"},
                {"data": "service", "visible": false},
                {"data": "type"},
                {"data": "editor", "visible": false},
                {"data": "archival"},
                {"data": "encrypted"},
                {"data": "access_control", "visible": false},
                {"data": "update"},
                {"data": "backup"},
                {"data": "deletion", "visible": false},
                {"data": "tracking", "visible": false},
                {"data": "has_comment", "visible": false},
                {"data": "other"},
                {"data": "treatments", "visible": false},
                {"data": "contractors", "visible": false},
                {"data": "proofs", "visible": false},
                {"data": "mesurements", "visible": false},
                {"data": "createdAt", "visible": false},
                {"data": "updatedAt", "visible": false},
                {"data": "actions", "orderable": false, "className": "noVis action", "visible": actionIsVisible},
            ],
            order:  [
                [0, 'asc' ]
            ],
        } %}
    {% endif %}

    {% if is_granted('ROLE_REFERENT') %}
        {% set dataTableOptions = {
            columns: [
                {"data": "name", "className": "noVis"},
                {"data": "collectivity", "className": collectivityClassname, "visible": collectivityIsVisible},
                {"data": "service", "visible": false},
                {"data": "type"},
                {"data": "editor", "visible": false},
                {"data": "archival"},
                {"data": "encrypted"},
                {"data": "access_control", "visible": false},
                {"data": "update"},
                {"data": "backup"},
                {"data": "deletion", "visible": false},
                {"data": "tracking", "visible": false},
                {"data": "has_comment", "visible": false},
                {"data": "other"},
                {"data": "treatments", "visible": false},
                {"data": "contractors", "visible": false},
                {"data": "proofs", "visible": false},
                {"data": "mesurements", "visible": false},
                {"data": "createdAt", "visible": false},
                {"data": "updatedAt", "visible": false},
                {"data": "actions", "orderable": false, "className": "noVis action", "visible": actionIsVisible},
            ],
            order:  [
                [0, 'asc' ]
            ],
        } %}
    {% endif %}

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


    <script>
        function setEvents() {
            var col = 0
            {% if is_granted('ROLE_REFERENT') %}
            col = 1
            {% endif %}
            {% if app.user.hasServices %}
            col += 1
            {% endif %}
            $('#table_filter').hide();
            var oTable = $('#table').DataTable();
            $('input#search_created_at').val('');
            $('input#search_updated_at').val('');
            $('#table').on( 'column-visibility.dt', function ( e, settings, column, state ) {
                if (column === 16+col && state) {
                    $('input#search_created_at').val('');
                }
                if (column === 17+col && state) {
                    $('input#search_updated_at').val('');
                }
            } );

            // Move buttons
            var btns = $('.dt-buttons')
            $('#custom-buttons').append(btns)

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

            $('#search_nom').keyup($.debounce(250, function(){
                oTable.column('0').search($(this).val()).draw() ;
            }));
            {% if is_granted('ROLE_REFERENT') %}
            $('#search_collectivity').keyup($.debounce(250, function(){
                oTable.column('1').search($(this).val()).draw() ;
            }));
            $('#search_service').keyup($.debounce(250, function(){
                oTable.column('2').search($(this).val()).draw() ;
            }));
            {% endif %}
            $('#search_type').change(function(){
                oTable.column(1+col).search($(this).val()).draw() ;
            });
            $('#search_editor').keyup($.debounce(250, function(){
                oTable.column(2+col).search($(this).val()).draw() ;
            }));
            $('#search_archival').change(function(){
                oTable.column(3+col).search($(this).val()).draw() ;
            });
            $('#search_encrypted').change(function(){
                oTable.column(4+col).search($(this).val()).draw() ;
            });
            $('#search_access_control').change(function(){
                oTable.column(5+col).search($(this).val()).draw() ;
            });
            $('#search_update').change(function(){
                oTable.column(6+col).search($(this).val()).draw() ;
            });
            $('#search_backup').change(function(){
                oTable.column(7+col).search($(this).val()).draw() ;
            });
            $('#search_deletion').change(function(){
                oTable.column(8+col).search($(this).val()).draw() ;
            });
            $('#search_tracking').change(function(){
                oTable.column(9+col).search($(this).val()).draw() ;
            });
            $('#search_has_comment').change(function(){
                oTable.column(10+col).search($(this).val()).draw() ;
            });
            $('#search_other').change(function(){
                oTable.column(11+col).search($(this).val()).draw() ;
            });
            $('#search_treatment').keyup($.debounce(250, function(){
                oTable.column(12+col).search($(this).val()).draw() ;
            }));
            $('#search_contractor').keyup($.debounce(250, function(){
                oTable.column(13+col).search($(this).val()).draw() ;
            }));
            $('#search_document').keyup($.debounce(250, function(){
                oTable.column(14+col).search($(this).val()).draw() ;
            }));
            $('#search_action').keyup($.debounce(250, function(){
                oTable.column(15+col).search($(this).val()).draw() ;
            }));
            $(document).on('change', '#search_created_at', function(){
                oTable.column(16+col).search($(this).val()).draw();
            });
            $(document).on('change', '#search_updated_at', function(){
                oTable.column(17+col).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 %}