<script>
    // var current_editor = DataTableEditor();
    var current_editor =  null;

    var globalBtnCreate = {
        extend: "create",
        className: 'btn-success',
        text : '<i class="fa fa-plus"></i>',
        formTitle : "{{__("New record")}}",
        action: function (e, dt, button, config) {
            this.submit()
        },
    };

    (function ($, DataTable) {
        "use strict";


        $.fn.dataTable.ext.errMode = (settings,helpage,message) => {
            let debug = '{{env('APP_DEBUG',false)}}';
            let msg = '<strong>{{__("Erreur")}}<strong>';

            if(debug && message !==""){
                msg += ' <br><span class="fs-10 text-danger">'+message+'</span>';
            }
            console.log(settings)

            toast({
                //title:msg,
                title : `<span class="fs-10 text-danger">${message}</span>`,
                // html : `<span class="fs-10 text-danger">${message}</span>`,
                type:'error',
                timer: 10000,
                ok_button:true
            });
        };
        // $.extend( $.fn.dataTable.Editor.display.envelope.conf, {
        //     windowPadding: 50,
        //     attach:        "head"
        // } );


        $.extend( $.fn.dataTable.Editor.defaults, {
            events : {
                open : function (e,type,c) {
                    // alert( 'Editor '+type+' form shown' );
                    console.log('[dt Editor] "'+type+'" form open')
                    init_bsMultiselect();
                    init_datepicker();
                },
                opened : function () {
                    $("div[data-dte-e='msg-info']")
                        .removeClass("text-secondary small")
                        //.addClass("text-muted")
                        .css({
                            "font-size" : "10px",
                            "font-weight" : "italic",
                        });
                    $('div.modal[role=dialog]')
                        .closest('.show')
                        .find('.modal-dialog')
                        .removeClass("modal-dialog-scrollable");
                    //Enleve l'effet de scrool sur la modal courramment ouverte
                    // $('div.modal[role=dialog]')
                    //     .closest('.show')
                    //     .find('.modal-dialog')
                    //     .removeClass("modal-dialog-scrollable");
                },
                // preOpen : () => {},
                // preBlur : () => {},
                // close : () => {},
                initSubmit : () => {
                    $(".DTE_Form_Error").show();
                    $(".DTE_Form_Error").html("<div class='loader'></div>");
                    $(".DTE_Form_Buttons button").attr("disabled","true");
                   // $(".DTE_Form_Error").css("display","none");
                },
                // submitSuccess : (e,response) => {
                //     if("message" in response && "success" in response){
                //         toast({title : response.message , type : (response.success) ? "success":"error" });
                //     }
                // },
                submitComplete: (response) => {
                    $(".DTE_Form_Error").hide();
                    $(".DTE_Form_Error").html("");
                    $(".DTE_Form_Buttons button").removeAttr("disabled")
                },
                // submitError : function(response) {
                //     console.log("[dt Editor] --> submit error")
                //     if("message" in response){
                //         $(".DTE_Form_Error").css("display","block").html(response.message+"SUn");
                //     }
                // },
            },
        } );

        //Cofiguration par défaut des champs 'datetime' d'Editor
        $.extend( $.fn.dataTable.Editor.DateTime.defaults, {
            format : "DD-MM-YYYY",
            buttons: {
                today: false,
                clear: false
            },
            i18n: {
                previous: '{{__("Précédent")}}',
                next:     '{{__("Premier")}}',
                months:   [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
                weekdays: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ]
            },

        } );



        //Initialisation des textes par défauts visibles sur le DataTable
        $.extend($.fn.dataTable.defaults, {
            {{--language: {--}}
            {{--    "decimal":        " ",--}}
            {{--    "emptyTable":     "{{__("Aucun résultat pour le moment.")}}",--}}
            {{--    "info":           "{{__('Affichage _START_ à _END_ sur _TOTAL_ ligne(s)')}}",--}}
            {{--    "infoEmpty":      "{{__('Affichage 0 à 0 sur 0 ligne(s)')}}",--}}
            {{--    "infoFiltered":   "({{__("filtré à partir de _MAX_ ligne(s) totales.")}})",--}}
            {{--    "infoPostFix":    "",--}}
            {{--    "thousands":      " ",--}}
            {{--    "lengthMenu":     "{{__('Afficher _MENU_ ligne(s)')}}",--}}
            {{--    "loadingRecords": "{{__("Affichage des données...")}}",--}}
            {{--    "processing":     "{{__('Chargement...')}}",--}}
            {{--    "search":         "{{__('Rechercher:')}}",--}}
            {{--    "zeroRecords":    "{{__('No data found actually.')}}",--}}
            {{--    "paginate": {--}}
            {{--        "first":      "{{__("Premier")}}",--}}
            {{--        "last":       "{{__('Dernier')}}",--}}
            {{--        "next":       "{{__('Suivant')}}",--}}
            {{--        "previous":   "{{__("Précédent")}}"--}}
            {{--    },--}}
            {{--    "aria": {--}}
            {{--        "sortAscending":  "{{__(": activer pour trier les colonnes par ordre croissant")}}",--}}
            {{--        "sortDescending": "{{__(': activer pour trier les colonnes par ordre déccroissant')}}"--}}
            {{--    }--}}
            // },
            lengthMenu : [ [10, 25, 50, -1], [10, 50,100, "All"] ],
        });
        $.extend($.fn.dataTable.buttons, {
            exportData : {
                title : 'Title',
            }
        });

    })(jQuery, jQuery.fn.dataTable);


    /**
     * Fonction permttant de raffraichir manuellement un DataTable
     * @param tableId
     * @param url
     * @returns {*|void}
     */
    var refresh_datatable = function (tableId,url = "") {
        if ($.fn.dataTable.isDataTable('#'+tableId)){
            let table = $('#'+tableId).DataTable();
            // recharge le tableau
            return  (url !== "")
                ? table.clear().ajax.url(url).load()
                : table.draw().clear();
        }
    };

    /**
     * Afiiche une icone de "crayon" dans une cellue datattable
     * @param data
     * @param type
     * @param row
     * @returns {string|*}
     */
    var editIcon = function ( data, type, row ) {
        if ( type === 'display' ) {
            return data + ' <small class="fa fa-pencil-alt fa-pencils"></small>';
        }
        return data;
    };

    var dtRenderCheckbox = function ( data, type, row ) {
        if ( type === 'display' ) {
            return '<label class="kt-checkbox kt-checkbox--single kt-checkbox--solid">' +
                '                            <input type="checkbox" class="dt-custom-row-checkbox">' +
                '                            <span></span>' +
                '                        </label>';
        }
        return data;
    };

    /**
     * Selectionne toutes les lignes actuellent affichées dans un DataTable
     */
    var select_all_td = function(){
        $('table thead,table tfoot').on( 'click', 'tr th:first-child', function () {
            let table_html = $(this).parent().parent().parent(); //
            let id_table = table_html.attr('id');

            if ($.fn.dataTable.isDataTable('#'+id_table)){
                let table = $("#"+id_table).DataTable();
                if ($(this).find("input.dt-checkbox-all[type=checkbox]").is(':checked')) {
                    table.rows().select();
                } else {
                    table.rows().deselect();
                }
            }
        } );
    };

    /**
     *  Rajoute le footer sur un DataTable
     * @param id_table
     */
    var append_dt_footer = function (id_table) {
        let table = $('#'+id_table);
        if( table.find("tfoot").length === 0){
            table.append("<tfoot></tfoot>")
        }
        table.find("tfoot").html(table.find("thead").html());
    };

    var initDataTable = (table_id, options = {})=>{
        const def = {
            lengthChange: true,
            processing: true,
            serverSide: true,
            dom : "Bfrtilp",
            // select : {style: 'multi', selector: 'td:first-child.select-checkbox'},
            searching: true,
            info: true,
            ordering: true,
            paging: true,
            // paginate : false,
            responsive: true,
        }
        return  ($.fn.dataTable.isDataTable('#'+table_id))
            ? $("#"+table_id).DataTable()
            : new DataTable("#"+table_id,{...def, ...options})
    }


    var addTfooter = function (id_table,columns = []) {
        let $table = $('#'+id_table);
        if( $table.find("tfoot").length === 0){
            $table.append("<tfoot style='display:none'></tfoot>")
        }
        if($.fn.dataTable.isDataTable('#'+id_table)){

            const table = $("#"+id_table).DataTable();
            let cells = "";
            table.columns().every(function() {
                const that = this;
                cells += "<th></th>"

                // $('input', this.footer()).on('keyup change', function() {
                //     if (that.search() !== this.value) {
                //         that
                //             .search(this.value)
                //             .draw();
                //     }
                // });
            });
            $table.find("tfoot").append("<tr>"+cells+"</tr>")
        }

    };

    var checkAllTd = (elt)=>{
        const $table_selected = $(elt).parent().closest("table");
        const table_id = $table_selected.attr("id");

        console.log("table => ",$table_selected)
        console.log("table_id => ",table_id)

        if ($.fn.dataTable.isDataTable('#'+table_id)){
            const dt = $("#"+table_id).DataTable();
            if ($(elt).is(':checked')) {
                dt.rows(".selectable").select();
            } else {
                dt.rows(".selectable").deselect();
            }
        }
    }

    var headerCheckAll = (id = "{{uniqid("check-all-")}}")=> {
        return `<div class='custom-control custom-checkbox small'>
                    <input type="checkbox"
                            name='${id}'
                            id='${id}'
                            class="custom-control-input table-checkbox-alls"
                            onclick="checkAllTd(this)">
                <label class="custom-control-label" for='${id}'> </label>
                </div> `;
    }

    $(function () {
        $("[data-dte-e='msg-message']").removeClass("text-secondary");

        $('.popover-dismiss').popover({
            trigger: 'focus'
        });
        //Ecoute  les evenements (draw.dt et processing.dt)  d'un "DatatTable" branché sur un <table class='table'>
        $('tablssse.tabless').on('error.dt', function(e,settings,helpage,message) {

            console.log(e.detail)
            console.log(helpage)
            console.log(message)
            let debug = '{{env('APP_DEBUG',false)}}';
            let msg = '<strong>{{__("Erreur")}}<strong>';
            toast({
                //title:msg,
                html : `<span class="fs-10 text-danger">${message}</span>`,
                type:'error',
                timer: 10000,
                ok_button:true
            });
        })
        $('table.table').on('draw.dt', function(e,context) {
            $('[data-toggle="tooltip"]').tooltip({html:true,});
            $('[data-toggle="popover"]').popover({html:true,});

            const api = new $.fn.dataTable.Api(context);
            const editor = api.table().editor(); // EditorDataTable

            const table_id = api.table().node().id;
            const $table = $('#'+table_id);

            const $wrapper_block =  $table.parent(".dataTables_wrapper");
            $wrapper_block.addClass("row")
            const $children = $wrapper_block.children()

            $children.eq(0).addClass("col-auto");
            $children.eq(1).addClass("col");
            // let tableId = $(this).attr("id");
            // let table = $('#'+tableId).DataTable();
            // new $.fn.dataTable.SearchPanes(table, {});
            // table.searchPanes.container().prependTo(table.table().container());
            // table.searchPanes.resizePanes();

            console.log('[draw.dt]table-id  : ', table_id);
            // console.log('[draw.dt]datas: ', api.ajax.json());
            console.log('[draw.dt]table-editor: ', editor);

            //append_dt_footer(tableId);

            $('[data-toggle="tooltip"]').tooltip("hide");
            $('[data-toggle="popover"]').popover("hide");

        });

        //Lorsqu'un Tab est en cours d'ouverture
        $('.nav a[data-toggle="tab"]').on('shown.bs.tab', function(e){
            $('[data-toggle="tooltip"]').tooltip("hide");
            $('[data-toggle="popover"]').popover("hide");

            let $activeTab = $(e.target); // active tab <a>
            let tabPaneID = $activeTab.attr("href"); // "#tab-cont-1"
            let $tabPane = $(tabPaneID); // tab-content <div id="ab-cont-1" class='tab-pane'>
            // let dt_url = $activeTab.attr("data-url");

            //Pour Chaque <table class='table'> se trouvant dans le tab-content
            $tabPane.find("table.table").each(function () {
                let tableId = $(this).attr("id");
                refresh_datatable(tableId); // refresh le tableau
            });
        });

        $('table.table').on('click', 'td .editor-action', function (e) {
            e.preventDefault();

            let $button = $(this);
            let $td = $button.closest('td'); // 1er parent '<td>'

            // let $td = $button.parent();
            // let $table = $td.parent() // <tr>
            //                  .parent() // <tbody>
            //                  .parent(); // <table>
            const $table = $td.closest("table"); // 1er parent '<table>'
            const tableId = $table.attr('id');
            const table = $('#'+tableId).DataTable();
            const editor = table.editor();
            const index = $td.index(); // l'index de la colonne (Ex : 2)
            const rowData = table.row($td).data();

            if (typeof editor !== "undefined") {

                if ($button.hasClass("button-edit")) { //Si le boutton "edit" existe
                    editor.edit( $button.closest('tr'), {
                        title: '{{__("Updating row")}}',
                        buttons: {
                            className : "btn-success",
                            text : "{{__('Update')}}"+' <i class="fas fa-pencil-alt"></i>',
                            action : function() { this.submit(); },
                        }
                    } );
                }

                if($button.hasClass("button-remove")){ //Si le boutton "remove" existe
                    editor.remove( $button.closest('tr'), {
                        title   : '{{__("Deleting row")}}',
                        message : '{{__("Delete the row")}} ?',
                        buttons : {
                            className : "btn-danger",
                            text : "{{__('Delete')}}"+' <i class="fas fa-trash"></i>',
                            action : function() { this.submit(); },
                        }
                    } );
                }
            }
        } );


        $('.table-checkbox-all, .dt-checkbox-all').click(function (e) {
            let $table_selected = $(this).parent().closest("table");
            let table_id = $table_selected.attr("id");

            console.log($table_selected,table_id)
            console.log($.fn.dataTable.isDataTable('#'+table_id))

            if ($.fn.dataTable.isDataTable('#'+table_id)){
                let dt = $("#"+table_id).DataTable();
                if ($(this).is(':checked')) {
                    dt.rows(".selectable").select();
                } else {
                    dt.rows(".selectable").deselect();
                }
            }
            // $table_selected.find("tbody tr td:first-child input[type=checkbox]").attr('checked' , $(this).is(':checked'))
        });
    })
</script>
