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

{% set bodyClass = 'reporting_journalisation show' %}
{% set menuItem = 'reporting_journalisation' %}

{% block title %}{{ 'reporting.journalisation.title'|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>
        {{ 'reporting.journalisation.title'|trans }}
    </h1>
{% endblock %}

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

{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body overflow-x-auto">
                    <table id="table" class="table table-bordered table-hover">
                        <caption class="sr-only">Liste des actions</caption>
                        <thead>
                            <tr>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_subject_id" placeholder="{{ 'reporting.journalisation.list.id'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_user_fullname" placeholder="{{ 'reporting.journalisation.list.user_name'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_user_email" placeholder="{{ 'reporting.journalisation.list.email'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_collectivite" placeholder="{{ 'global.label.organization'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col" style="min-width:130px;position:relative;">
                                    <input class="daterangepicker form-control" type="text" id="search_date" 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_sujet" style="width: 100%;">
                                        <option value="">{{ 'reporting.journalisation.list.subject'|trans }}</option>
                                        {% for key, subject in dictionary('reporting_log_journal_subject') %}
                                            <option value="{{ key }}">{{ subject }}</option>
                                        {% endfor %}
                                    </select>
                                </th>
                                <th scope="col">
                                    <select class="form-control" id="search_action" style="width: 100%;">
                                        <option value="">{{ 'reporting.journalisation.list.action'|trans }}</option>
                                        {% for key, action in dictionary('reporting_log_journal_action') %}
                                            <option value="{{ key }}">{{ action }}</option>
                                        {% endfor %}
                                    </select>
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_subject_name" placeholder="{{ 'reporting.journalisation.list.action_name'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col"></th> <!-- Actions -->
                            </tr>
                            <tr>
                                <th scope="col">{{ 'reporting.journalisation.list.id'|trans }}</th>
                                <th scope="col">{{ 'reporting.journalisation.list.user_name'|trans }}</th>
                                <th scope="col">{{ 'reporting.journalisation.list.email'|trans }}</th>
                                <th scope="col">{{ 'global.label.organization'|trans }}</th>
                                <th scope="col">{{ 'reporting.journalisation.list.date'|trans }}</th>
                                <th scope="col">{{ 'reporting.journalisation.list.subject'|trans }}</th>
                                <th scope="col">{{ 'reporting.journalisation.list.action'|trans }}</th>
                                <th scope="col">{{ 'reporting.journalisation.list.action_name'|trans }}</th>
                                <th scope="col">{{ 'reporting.journalisation.list.link'|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 dataTableOptions = {
        columns: [
            {"data": "subjectId"},
            {"data": "userFullName"},
            {"data": "userEmail"},
            {"data": "collectivite"},
            {"data": "date"},
            {"data": "subject"},
            {"data": "action"},
            {"data": "subjectName"},
            {"data": "link", "className": "noVis"}
        ],
        order: [
            [4, 'desc']
        ],
    } %}

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

    <script>
        function setEvents() {
            var oTable = $('#table').DataTable();

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

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

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

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

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

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

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

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

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

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