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

{% set bodyClass = 'registry_mesurement action_plan' %}
{% set menuItem = 'registry_mesurement_action_plan' %}

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

{% block breadcrumb %}
    {% set breadcrumb = [
        { 'name': 'registry.mesurement.title.action_plan'|trans }
    ] %}
    {% include '_breadcrumb.html.twig' with {'breadcrumb': breadcrumb} %}
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-xs-12 mb-1">
            <div>
                {% 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 %}
                {% if app.user.roles[0] != 'ROLE_REFERENT' %}
                    <a href="{{ path('registry_mesurement_action_plan_report') }}" class="btn btn-default">
                        <i aria-hidden="true" class="fa fa-clipboard-list"></i>
                        {{ 'global.action.report'|trans }}
                    </a>
                {% endif %}
            </div>
        </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">{{ 'registry.mesurement.title.list'|trans }} planifiées</caption>
                        <thead>
                            <tr>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_nom" placeholder="{{ 'registry.mesurement.label.name'|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_planification" 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_cout" placeholder="{{ 'registry.mesurement.label.cost'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_charge" placeholder="{{ 'registry.mesurement.label.charge'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <select class="form-control" id="search_priorite" style="width: 100%;">
                                        <option value="">{{ 'registry.mesurement.label.priority'|trans }}</option>
                                        {% for key, subject in dictionary('registry_mesurement_priority') %}
                                            <option value="{{ key }}">{{ subject }}</option>
                                        {% endfor %}
                                    </select>
                                </th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_responsable_action" placeholder="{{ 'registry.mesurement.label.manager'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col"></th>
                                <th scope="col"></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.mesurement.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.mesurement.label.planification_date'|trans }}</th>
                                <th scope="col">{{ 'registry.mesurement.label.cost'|trans }}</th>
                                <th scope="col">{{ 'registry.mesurement.label.charge'|trans }}</th>
                                <th scope="col">{{ 'registry.mesurement.label.priority'|trans }}</th>
                                <th scope="col">{{ 'registry.mesurement.label.manager'|trans }}</th>
                                <th scope="col">{{ 'registry.mesurement.label.description'|trans }}</th>
                                <th scope="col">{{ 'registry.mesurement.label.comment'|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 cols = [
        {"data": "nom", "className": "noVis"},
        {"data": "date_planification"},
        {"data": "cout", "visible": false},
        {"data": "charge", "visible": false},
        {"data": "priorite"},
        {"data": "responsable_action"},
        {"data": "description", "visible": false, "orderable": true},
        {"data": "observation", "visible": false, "orderable": true},
        {"data": "createdAt", "visible": false},
        {"data": "updatedAt", "visible": false},
        {"data": "actions", "orderable": false, "className": "noVis", "visible": actionIsVisible},
    ] %}
    {% set orders = [
        [1, 'asc' ]
    ] %}
    {% if app.user.hasServices %}
        {% set cols = [
            {"data": "nom", "className": "noVis"},
            {"data": "service", "visible": false},
            {"data": "date_planification"},
            {"data": "cout", "visible": false},
            {"data": "charge", "visible": false},
            {"data": "priorite"},
            {"data": "responsable_action"},
            {"data": "description", "visible": false, "orderable": true},
            {"data": "observation", "visible": false, "orderable": true},
            {"data": "createdAt", "visible": false},
            {"data": "updatedAt", "visible": false},
            {"data": "actions", "orderable": false, "className": "noVis", "visible": actionIsVisible},
        ] %}
        {% set orders = [
            [2, 'asc' ]
        ] %}
    {% endif %}
    {% if is_granted('ROLE_REFERENT') %}
        {% set cols = [
            {"data": "nom", "className": "noVis"},
            {"data": "collectivite", "className": collectivityClassname, "visible": collectivityIsVisible},
            {"data": "service", "visible": false},
            {"data": "date_planification"},
            {"data": "cout", "visible": false},
            {"data": "charge", "visible": false},
            {"data": "priorite"},
            {"data": "responsable_action"},
            {"data": "description", "visible": false, "orderable": true},
            {"data": "observation", "visible": false, "orderable": true},
            {"data": "createdAt", "visible": false},
            {"data": "updatedAt", "visible": false},
            {"data": "actions", "orderable": false, "className": "noVis", "visible": actionIsVisible},
        ] %}
        {% set orders = [
            [3, 'asc' ]
        ] %}
    {% endif %}

    {% set dataTableOptions = {
        columns: cols,
        order: orders,
    } %}

    <script>
        function substrColRenderFunction (data, type, full, meta) {
            let content = data && data.length > 105 ? `<span data-toggle="tooltip" data-placement="bottom" title="${data}">${data.substring(0, 105)}...</span>` : data
            return content;
        }
    </script>

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

    <script>
        $(document).ready(function() {
            $('#table_filter').hide();

            var oTable = $('#table').DataTable();

            function setEvents() {

                var col = 0;
                {% if is_granted('ROLE_REFERENT') %}
                    col += 1;
                {% endif %}
                {% if app.user.hasServices %}
                    col += 1;
                {% endif %}

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

                $('#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_collectivite').keyup($.debounce(250, function () {
                        oTable.column('1').search($(this).val()).draw();
                    }));
                {% endif %}
                {% if app.user.hasServices %}
                $('#search_service').keyup($.debounce(250, function () {
                    oTable.column(col).search($(this).val()).draw();
                }));
                {% endif %}

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

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

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

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

                $('#search_responsable_action').keyup($.debounce(250, function () {
                    oTable.column(col+5).search($(this).val()).draw();
                }));

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

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

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

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

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