{% extends 'Backend/_layout.html.twig' %}

{% block page_title %}
    <h3 class="page-title"> Panélistes
        <small>liste des panélistes</small>
    </h3>
{% endblock %}

{% block stylesheet %}
    <link href="{{ asset('backend/assets/global/plugins/datatables/datatables.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/layouts/layout/css/override.css') }}" rel="stylesheet" type="text/css" />

{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="portlet-body">
                <div class="table-toolbar">
                    <div class="row">
                        <div class="col-xs-12">
                            {#
                            <div class="btn-group">
                                <a id="sample_editable_1_new" class="btn sbold green" href="{{ path('admin_user_new') }}">{{ 'add' }}
                                    <i class="fa fa-plus"></i>
                                </a>
                            </div>
                            #}
                            <div class="btn-group">
                                <a id="sample_editable_1_new" class="btn sbold green" href="{{ path('admin_user_import') }}">
                                    import
                                    <i class="fa fa-file"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="tables" class="table table-striped table-bordered table-hover table-checkable order-column loading_table">
                    <thead>
                        <tr>
                            <th>ID Panéliste</th>
                            <th>{{ 'title'}}</th>
                            <th>{{ 'firstname'}}</th>
                            <th>{{ 'name'}}</th>
                            <th>{{ 'birthdate'}}</th>
                            <th>{{ 'email'}}</th>
                            <th>{{ 'state' }}</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>

                    {% for entity in userIndex %}
                        <tr class="odd gradeX">
                            <td><a href="{{ path('admin_user_show', { 'id': entity.id }) }}">{{ entity.idPaneliste }}</a></td>
                            <td>{{ entity.title }}</td>
                            <td>{{ entity.lastname }}</td>
                            <td>{{ entity.firstname }}</td>
                            <td>{{ entity.birthdate | date('d/m/Y') }}</td>
                            <td>{{ entity.email }}</td>
                            <td>{{ entity.enabled ? 'Activé' : 'Désactivé' }}</td>
                            <td>
                                <a href="{{ path('admin_user_show', { 'id': entity.id }) }}" class="label label-success">afficher</a>
                               {#
                               <a href="{{ path('admin_user_edit', { 'id': entity.id }) }}" class="label label-success">éditer</a>
                                #}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>


        <script
            src="https://code.jquery.com/jquery-3.5.0.js"
            integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
            crossorigin="anonymous"></script>

{% endblock %}

{% block javascript %}
    <script src="{{ asset('backend/assets/global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('backend/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>

    <script type="text/javascript">
        var custom_path_show =  "{{ path('admin_user_show', { 'id': 0 }) }}"
        var custom_path_edit =  "{{ path('admin_user_edit', { 'id': 0 }) }}"

        $(document).ready(function() {
            var table = $('#tables').dataTable({
                "order": [[ 0, "desc" ]]
            });

           {#
            var table = $('#table')
                .on('preXhr.dt', function ( e, settings, data ) {
                    $('#table').addClass("loading_table");
                })
                .dataTable({
                    "order": [[ 0, "desc" ]],
                    {#"ajax": "{{ path('get_users', {'draw': 0, 'start': 0}) }}",# }

                    "ajax": "{{ path('admin_user_index', {'draw': 0, 'start': 0}) }}",
                    "columns": [
                        { "data": "id_paneliste" },
                        { "data": "title" },
                        { "data": "firstname" },
                        { "data": "lastname" },
                        { "data": "birthdate" },
                        { "data": "email" },
                        { "data": "enabled" }
                    ],
                    "columnDefs": [
                      {
                        "targets": 0,
                        "width": "10%"
                      },
                      {
                        "targets": 7,
                        "render": function ( data, type, full, meta ) {
                            var display = "<a href='" + custom_path_show.replace("0", full.id) + "' class=\"label label-success\">{{ 'show_lowercase' |trans({}, 'bo_user') }}</a> ";
                            var edit    = "<a href='" + custom_path_edit.replace("0", full.id) + "' class=\"label label-success\">{{ 'edit' |trans({}, 'bo_user') }}</a>";

                            return display + edit;
                        }
                      },
                      {
                        "targets": 5,
                        "render": function ( data, type, full, meta ) {
                            return (typeof full.email === 'undefined' ? "" : full.email);
                        }
                      },
                      {
                        "targets": 4,
                        "render": function ( data, type, full, meta ) {
                          var date = new Date(full.birthdate);
                          return date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
                        }
                      }],
                    "processing": true,
                    "serverSide": true,
                    "fnInitComplete" : function() {
                        $('#table').removeClass("loading_table");
                    },
                    "fnDrawCallback": function () {
                        $('#table').removeClass("loading_table");
                    },
                    "paginationType": "custom_bootstrap_number",
                    "oLanguage": {
                      "sSearch": "{{ 'search' |trans({}, 'bo_user') }}",
                      "sLengthMenu": "{{ 'show' |trans({}, 'bo_user') }} _MENU_ {{ 'items' |trans({}, 'bo_user') }}",
                      },
            });
            #}
        });
    </script>
{% endblock %}