{% extends "default/base.html.twig" %}
{% block custom_css %}
    <link href="{{asset('assets/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
    <link href="{{asset('assets/node_modules/datatables.net-bs4/css/responsive.dataTables.min.css')}}" rel="stylesheet">
{% endblock %}

{% block content %}
    <!-- Table Toolbars -->
    <div class="table-toolbar">
        {% block ajout %}
        {% if right_add is not defined %}{% set right_add = 'OOO' %}{% endif %}
        {% if app.user.hasright(right_add) %}
            <a href="{{ path(add) }}" class="btn btn-success">{{ 'Table.Add' | trans }}</a>
        {% endif %}
        {% endblock %}
        {% block actionAll %}
        <div class="btn-group pull-right">
            {# Definition de boutton par défaut, au cas où l'utilité n'est pas explicitement définie dans le contrôleur #}
            {% if right_import is not defined %}{% set right_import = 'OOO' %}{% set import = 'dashboard' %}{% endif %}
            {% if app.user.hasright(right_import) %}
                <a href="{{ path(import) }}" class="btn btn-info">{{ 'Table.Import' | trans }}</a>&nbsp;&nbsp;
            {% endif %}
            {% if right_delete_all is not defined %}{% set right_delete_all = 'OOO' %}{% endif %}
            {% if app.user.hasright(right_delete_all) %}
                <button id="action_all" class="btn btn-danger">{{ 'Table.DeleteAll' | trans }}</button>
            {% endif %}
        </div>
        {% endblock %}
    </div>
    <!-- End Table Toolbars -->
    <div class="table-responsive m-t-30">               
        {% block datatable %}{% endblock %}
    </div>
    <!-- Debut du MODAL d'erreur -->
    <div id="db-protection-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{'Table.DbIntegrity' | trans}}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body">
                    <blockquote>
                        <div class="alert alert-warning alert-dismissible">
                            <h4 class="text-warning"><i class="fa fa-exclamation-triangle"></i> {{'Message.Warning' | trans}}</h4> 
                            {{'Table.DbIntegrityMessage' | trans}}
                        </div>
                    </blockquote>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info waves-effect text-white" data-bs-dismiss="modal">{{ 'Form.Close' | trans }}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Fin du modal d'erreur -->
{% endblock %}

{% block custom_js %}
    <script type="text/javascript" src="{{asset('assets/node_modules/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/node_modules/datatables.net-bs4/js/dataTables.responsive.min.js')}}"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <!-- end - This is for export functionality only -->

    {% block initialisation %}
        <script type="text/javascript">
            $(function () {
                $('#myTable').DataTable({
                    responsive: true,
                    stateSave: true,
                    //dom: 'Bfrtip',
                    dom: 'B<"m-b-30 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>r<"m-t-30 m-b-20"t><"m-t-40 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                    buttons: [ //Tout TH avec la classe "export" sera prise en compte lors de l'exportation
                        {
                            extend: 'copy', text: '{{'Table.Copy' | trans}}',
                            exportOptions: {
                                    columns: '.export'
                            }
                        },
                        { 
                            extend: 'csv', text: '{{'Table.CSV' | trans}}',
                            exportOptions: {
                                    columns: '.export'
                            }
                        },
                        { 
                            extend: 'excel', text: '{{'Table.Excel' | trans}}',
                            exportOptions: {
                                    columns: '.export'
                            }
                        },
                        { 
                            extend: 'pdf', text: '{{'Table.PDF' | trans}}',
                            exportOptions: {
                                    columns: '.export'
                            }
                        },
                        { 
                            extend: 'print', text: '{{'Table.Print' | trans}}',
                            exportOptions: {
                                    columns: '.export'
                            }
                        }
                    ],
                    "columnDefs": [ //Tout TH avec la classe "targets" sera prise en compte par la propriété
                        {
                            "targets": 'size-15',
                            "width": '15px'
                        },
                        {
                            "targets": 'size-30',
                            "width": '30px'
                        },
                        {
                            "targets": 'size-40',
                            "width": '40px'
                        },
                        {
                            "targets": 'size-50',
                            "width": '50px'
                        },
                        {
                            "targets": 'nosort',
                            "orderable": false
                        },
                        { 
                            "targets": 'size-100',
                            "width": '100px'
                        },
                        { 
                            "targets": 'size-150',
                            "width": '150px'
                        },

                        { 
                            "targets": 'hidden', //Permet de cacher une colonne. Pratique lorsqu'on ne veut pas afficher la colonne ID, mais l'avoir à portée pour le Action_All
                            "visible": false,
                        },
                    ],
                    "order": [
                        [1, 'asc']
                    ],
                    "displayLength": 50,
                    "lengthMenu": [ [50, 100, 250, -1], [50, 100, 250, "{{'Table.All' | trans}}"] ],
                    "language": {
                        "decimal":        ",",
                        "emptyTable":     "{{'Table.Empty' | trans}}",
                        "info":           "{{'Table.Showing' | trans}} _START_ {{'Table.To' | trans}} _END_ {{'Table.Of' | trans}} _TOTAL_ {{'Table.Entries' | trans}}",
                        "infoEmpty":      "{{'Table.Showing' | trans}} 0 {{'Table.To' | trans}} 0 {{'Table.Of' | trans}} 0 {{'Table.Entries' | trans}}",
                        "infoFiltered":   "({{'Table.Filtered' | trans}} _MAX_ {{'Table.TotalEntries' | trans}})",
                        "infoPostFix":    "",
                        "thousands":      " ",
                        "lengthMenu":     "{{'Table.Show' | trans}} _MENU_ {{'Table.Entries' | trans}}",
                        "loadingRecords": "{{'Table.Loading' | trans}}...",
                        "processing":     "{{'Table.Processing' | trans}}...",
                        "search":         "{{'Search' | trans}}:",
                        "zeroRecords":    "{{'Table.NoMatch' | trans}}",
                        "paginate": {
                            "first":      "{{'Table.First' | trans}}",
                            "last":       "{{'Table.Last' | trans}}",
                            "next":       "{{'Table.Next' | trans}}",
                            "previous":   "{{'Table.Previous' | trans}}"
                        },
                        "aria": {
                            "sortAscending":  ": {{'Table.SortAscending' | trans}}",
                            "sortDescending": ": {{'Table.SortDescending' | trans}}"
                        }
                    },
                });
                $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass('dt-button buttons-html5 btn btn-sm waves-effect waves-light btn-outline-dark me-1');
                $('#myTable_wrapper').addClass('p-0');
            });    
        </script>
    {% endblock %}


    {% block action %}
    <script type="text/javascript">
        $(document).ready(function() {
            //Check All button
            $('#myTable thead th input[type=checkbox]').change(function() {
                var set = $("#myTable tbody tr input[type=checkbox]");
                var checked = $(this).is(":checked");
                $(set).each(function() {
                    if (checked) {
                        $(this).prop("checked", true);
                        $(this).parents('tr').addClass("active");
                    } else {
                        $(this).prop("checked", false);
                        $(this).parents('tr').removeClass("active");
                    }
                });
            });
            $('#myTable tbody tr input[type=checkbox]').change(function() {
                $(this).parents('tr').toggleClass("active");
            });   
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            //All action
            $('#action_all').click( function () {
                var selectedIds = [];   
                var nRow = [];
                if (confirm( "{{'Table.Confirm' | trans}}" )) {
                    $("input:checked", $("#myTable").dataTable().fnGetNodes()).each(function(){
                        var tr = $(this).closest('tr');
                        var data = $("#myTable").dataTable().fnGetData(tr);
                        selectedIds.push(data[1]);
                        nRow.push(tr[0]);
                    });
                    if(selectedIds.length > 0){
                        $.ajax({
                            "url": "{{ path(action_all)}}",
                            "data": { "ids": selectedIds },
                            "dataType": "json",
                            "type": "post",
                            "success": function () {
                                for(var i = 0; i < nRow.length; i++){
                                    if ('{{process}}' == 'deletion'){
                                        $('#myTable').dataTable().fnDeleteRow(nRow[i]);
                                    }
                                }
                                $.toast({
                                    heading: "{{ 'Message.Success' | trans}}",
                                    text: "{{ 'Table.Done' | trans}}",
                                    showHideTransition: 'plain',
                                    position: 'top-center',
                                    loaderBg: '#cfcfd2',
                                    icon: 'success',
                                    hideAfter: 6000,
                                    stack: 2,
                                });
                            },
                            "error": function(){
                                $('#db-protection-modal').modal('show');
                            }
                        });
                    }  
                }
            });//End of action_all    
            
            //Action one ---> Faire une délégation de confirmation sinon ne fonctionne pas avec $('button[id^="action_one"]').click( function () {
            $("#myTable").dataTable().on( 'click', 'button[id^="action_one"]', function (){
                var id = $(this).attr('value-id'); 
                var tr;
                if (confirm( "{{'Table.Confirm' | trans}}" )) {
                    $("button[id='action_one_"+id+"']", $("#myTable").dataTable().fnGetNodes()).each(function(){
                        tr = $(this).closest('tr');
                    });
                    $.ajax({
                        "url": "{{ path(action)}}",
                        "data": { "id": id },
                        "dataType": "json",
                        "type": "post",
                        "success": function (response) {
                            if ('{{process}}' == 'deletion'){
                                $('#myTable').dataTable().fnDeleteRow(tr[0]);
                            }
                            {# 07 Mars 2022: Function added to change status for "activate" / "deactivate"#}
                            else if ('{{process}}' == 'activate'){
                                if (response == 'Active'){
                                    var html_active = "<button type='button' class='btn btn-sm waves-effect waves-light btn-outline-danger' id='action_one_"+id+"' value-id='"+id+"'><i class='ti-na'></i> {{'Table.Deactive' | trans}}</button>"
                                    $('#action_one_'+id).replaceWith(html_active);
                                    $('#statut_'+id).html("{{ 'Form.Active' | trans}}");
                                } else {
                                    var html_deactive = "<button type='button' class='btn btn-sm waves-effect waves-light btn-outline-success' id='action_one_"+id+"' value-id='"+id+"'><i class='ti-check'></i> {{'Table.Active' | trans}}</button>"
                                    $('#action_one_'+id).replaceWith(html_deactive);
                                    $('#statut_'+id).html("{{ 'Form.NoActive' | trans}}");
                                }
                            }
                            $.toast({
                                    heading: "{{ 'Message.Success' | trans}}",
                                    text: "{{ 'Table.Done' | trans}}",
                                    showHideTransition: 'plain',
                                    position: 'top-center',
                                    loaderBg: '#cfcfd2',
                                    icon: 'success',
                                    hideAfter: 3000,
                                    stack: 2,
                                });
                        },
                        "error": function(){
                            $('#db-protection-modal').modal('show');
                        },
                    });  
                }
            });//End of Action_one
         });
    </script>
    {% endblock %}
    
{% endblock %}