{% extends 'App/_include/_layout.main.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {#<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/af-2.3.4/b-1.6.0/b-colvis-1.6.0/b-html5-1.6.0/b-print-1.6.0/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sl-1.3.1/datatables.min.css"/>#}
{% endblock %}
{% block page_content %}
    <div class="cell small-12">
        <h1 class="underlined">{{ 'article.list.title'|trans }}</h1>
    </div>
    <div class="cell small-12">
        <div class="dt-custom-tb">
            <div class="tb-group-title">Filtre</div>
            <div class="tb-action"><i class="fa fa-filter"></i></div>
            <div class="tb-action" data-toggle="visibility-dropdown" ><i class="fa fa-eye"></i></div>
            <div class="tb-action" data-toggle="advance-filter-dropdown"><i class="fa fa-magic"></i></div>
            <div class="tb-separator"></div>
            <div class="tb-group-title">Favoris</div>
            <div class="tb-action" data-toggle="save-dropdown"> <i class="fa fa-star"></i></div>
            <div class="tb-action{% if screen_settings.settings|length == 0 %} disabled{% endif %}"{% if screen_settings.settings|length > 0 %} data-toggle="filters-dropdown"{% endif %}><i class="fa fa-folder"></i></div>
            <div class="tb-separator"></div>
            <div class="tb-group-title">Export</div>
            <div class="tb-action"><i class="fa fa-file-excel-o no-mr"></i></div>
            <div class="dt-search"><span><input type="text" id="dt-input-search"></span></div>
        </div>

    </div>
    {#<div id="test-toolbar" class="cell small-12">#}
        {#<div class="grid-x grid-padding-x align-spaced"> <!-- Aligned to the space around -->#}
            {#<div class="cell shrink">#}
                {#<div class="button-group no-mb">#}
                    {#<button class="button small" type="button"><i class="fa fa-filter no-mr"></i></button>#}
                    {#<button class="button small" type="button" data-toggle="visibility-dropdown"><i class="fa fa-eye no-mr"></i></button>#}
                    {#<button class="button small" type="button" data-toggle="advance-filter-dropdown" ><i class="fa fa-magic no-mr"></i></button>#}
                {#</div>#}
            {#</div>#}
            {#<div class="cell shrink">#}
                {#<div class="button-group no-mb">#}
                    {#<button class="button small save" type="button" data-toggle="save-dropdown"><i class="fa fa-save no-mr"></i></button>#}
                    {#<button class="button small orange" type="button" {% if screen_settings.settings|length > 0 %}data-toggle="filters-dropdown"{% else %} disabled="disabled"{% endif %}><i class="fa fa-folder no-mr"></i></button>#}
                {#</div>#}
            {#</div>#}
            {#<div class="cell small-4">#}
                {#<input type="text" class="no-mb" id="test-search">#}
            {#</div>#}
            {#<div class="cell auto">#}
                {#<div class="button-group no-mb">#}
                    {#<button class="button small download" type="button" ><i class="fa fa-download no-mr"></i></button>#}
                    {#<button class="button small excel" type="button" ><i class="fa fa-file-excel-o no-mr"></i></button>#}
                {#</div>#}
            {#</div>#}
        {#</div>#}
        {#<div id="dt-toolbar">#}
            {#<div class="button-group">#}
                {#<button class="button small" type="button"><i class="fa fa-filter no-mr"></i></button>#}
                {#<button class="button small" type="button" data-toggle="visibility-dropdown"><i class="fa fa-eye no-mr"></i></button>#}
                {#<button class="button small" data-toggle="advance-filter-dropdown" ><i class="fa fa-magic no-mr"></i></button>#}
            {#</div>#}
            {##}
        {#</div>#}


        <div class="dropdown-pane w200 pd7" id="visibility-dropdown" data-dropdown data-hover="true" data-hover-pane="true">
            <div class="title">Affichage des colonnes</div>
        </div>
        <div class="dropdown-pane" id="save-dropdown" data-dropdown data-auto-focus="true">
            <div class="title mb-0-5">Enregistrer les règlages</div>
            <form action="#" id="form_add_screen_settings">
                <div class="grid-x">
                    <div class="cell small-12">
                        {#<label for="add_screen_settings_name">Nom</label>#}
                        <input type="text" name="add_screen_settings_name"  placeholder="Nom du filtre" id="add_screen_settings_name">
                    </div>
                    <div class="cell shrink mr-0-5">
                        <input type="checkbox" id="add_screen_settings_default" name="add_screen_settings_default">
                        <label for="add_screen_settings_default" >Par défaut</label>
                    </div>
                    <div class="cell auto">
                        <input type="checkbox" id="add_screen_settings_share" name="add_screen_settings_share">
                        <label for="add_screen_settings_share" >Partagé à tous</label>
                    </div>
                    <div class="cell small-12 text-right">
                        <button type="button" data-close class="button small cancel no-mb">{{ 'cancel'|trans }}</button>
                        <button type="button" class="button small save no-mb" id="btn_submit_add_screen_settings">{{ 'save'|trans }}</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="dropdown-pane" id="filters-dropdown" data-dropdown data-hover="true" data-hover-pane="true">
            <div class="title mb-0-5">Filtres disponibles</div>
            <ul id="avalaible_screens_settings" class="ul-with-actions">
                {% for setting in screen_settings.settings %}
                <li>
                    {#<span class="filter-label{% if setting.id ==  screen_settings.default.id %} fw-500{% endif %}"><i class="fa {% if setting.scope =="customer" %}fa-users{% else %}fa-user{% endif %} no-mb"></i>{{ setting.name }}</span>#}
                    <span class="filter-label{% if setting.id ==  screen_settings.default.id %} fw-500{% endif %}">{{ setting.name }}</span>
                    <span class="action" data-dt="{{ setting.dt|json_encode|raw  }}">
                        <i class="fa fa-bolt fa-border azur"></i>
                        <i class="fa fa-edit fa-border orange"></i>
                        <i class="fa fa-trash fa-border red"></i>
                    </span>
                </li>
                {% endfor %}
            </ul>
        </div>
        <div class="dropdown-pane w450" id="advance-filter-dropdown" data-dropdown data-auto-focus="true">
            <div class="title mb-0-5">Affichage des colonnes</div>
            <div class="body">
                <form action="" id="form_add_row_filter">
                    <div class="grid-x">
                        <div class="cell shrink mr-0-5">
                            <select name="row_filter_column" id="row_filter_column">
                                {#<option value="1">Code</option>#}
                            </select>
                        </div>
                        <div class="cell shrink mr-0-5">
                            <select name="row_filter_condition" id="row_filter_condition">
                                <option value="like">Contient</option>
                                <option value="start">Commence par</option>
                                <option value="end">Fini par</option>
                                <option value="not">Ne contient pas</option>
                                <option value="equal">Est égal</option>
                                <option value="diff">Est différent</option>
                                <option value="sup">Supérieur</option>
                                <option value="inf">Inférieur</option>
                            </select>
                        </div>
                        <div class="cell auto">
                            <input id="row_filter_value" type="text">
                        </div>
                        <div class="cell small-12 text-right">
                            <button id="btn_add_row_filter" type="button" class="button small orange no-mb">Ajouter</button>
                        </div>
                    </div>
                </form>
                <hr>
                <ul id="row_filter_container" class="ul-with-actions"></ul>
            </div>
        </div>
        {#{{ dump(screen_settings.settings) }}#}
    {#</div>#}
    <div class="cell small-12">
        <table class="display dataTable responsive nowrap" role="grid" style="width: 100%;" >
            <thead>
                <tr role="row">
                    <th>Code</th>
                    <th>Désignation Courte</th>
                    <th>Code ABC</th>
                    <th>Famille</th>
                    <th>Unité</th>
                    <th>Commentaires</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Code</th>
                    <th>Désignation Courte</th>
                    <th>Code ABC</th>
                    <th>Famille</th>
                    <th>Unité</th>
                    <th>Commentaires</th>
                </tr>
            </tfoot>
            <tbody>
            {% for article in articles %}
                <tr role="row" data-href="#">
                    <td>{{ article.code }}</td>
                    <td>{{ article.designationCourte }}</td>
                    <td>{% if article.codeABC in ['A','B','C'] %}{{ article.codeABC }}{% endif %}</td>
                    <td>{% if article.famille %}{{ article.famille }}{% endif %}</td>
                    <td>{% if article.unite %}{{ article.unite }}{% endif %}</td>
                    <td>{% if article.commentaire %}{{ article.commentaire|raw }}{% endif %}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="dtTest"></div>
    {# MODAL SAVE SETTINGS #}
    {# Modal Add unit #}
    <div class="reveal tiny" id="modal_save_settings" data-reveal>
        <div class="reveal-title">{{ 'modal.screen.settings.save'|trans }}</div>
        <div class="reveal-body">
            {#<form action="#" id="form_add_screen_settings">#}
            {#<div class="grid-x grid-padding-x">#}
                {#<div class="cell small-3"><label for="add_screen_settings_name">Nom</label></div>#}
                {#<div class="cell small-9">#}
                    {#<input type="text" name="add_screen_settings_name"  id="add_screen_settings_name">#}
                {#</div>#}

                {#<div class="cell small-9 small-offset-3">#}
                    {#<input type="checkbox" id="add_screen_settings_default" name="add_screen_settings_default">#}
                    {#<label for="add_screen_settings_default" >Par défaut</label>#}
                {#</div>#}
                {#<div class="cell small-9 small-offset-3">#}
                    {#<input type="checkbox" id="add_screen_settings_share" name="add_screen_settings_share">#}
                    {#<label for="add_screen_settings_share" >Partagé à tous</label>#}
                {#</div>#}
            {#</div>#}
            {#</form>#}
        </div>
        <div class="reveal-footer">
            <button type="button" data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button type="button" class="button small save" id="btn_submit_add_screen_settings">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){
            let dtToolbar_test = new dtToolbar(document.getElementById('dtTest'),{
                table_id : 'etoile',
                settings : {
                    default : {},
                },
                data : {
                    columns :[
                        {label : 'Code'},
                        {label : 'Désignation'}
                    ],
                    data:[]
                }
            });
            let dt_settings = {},
                all_settings = {{ screen_settings|json_encode|raw }},
                btn_add_row_filter = $('#btn_add_row_filter'),
                row_filter_column = $('#row_filter_column'),
                row_filter_condition = $('#row_filter_condition'),
                row_filter_value = $('#row_filter_value'),
                row_filter_container = $('#row_filter_container');


            let dt_list = $('.dataTable').dataTable({
                dom:            "rtip",
                paging:         true,
                fixedColumns:   {
                    leftColumns: 1
                },
                colReorder: true,
                responsive: true,
                initComplete: function (a) {
                    let dt = this.api();
                    {% if screen_settings.default %}
                        let default_settings = {{ screen_settings.default.dt|json_encode|raw }};
                        setPreferedFilter(dt,default_settings);
                    {% else %}
                        this.api().buttons('save_screen:name').disable();
                    {% endif %}

                    parseDt(dt, (dt, settings)=>{
                        return initializeToolbar(dt, settings);
                    });

                }
            });


            function saveSettings(dt, form_data, code, callback){
                let page_info = dt.page.info();
                let visibility_raw = $(dt.columns().visible());
                let visibilty = [];
                for (let i=0; i < visibility_raw.length; i++){
                    visibilty[i] = visibility_raw[i];
                }

                data = {
                    token: "{{ csrf_token('app_screen_settings_save') }}",
                    settings :{
                        dt: {
                            colReorder: dt.colReorder.order(),
                            visibility: visibilty,
                            order: dt.order(),
                            page_length: page_info.length
                        },
                        code: code
                    }
                };

                form_data.map((element)=>{
                    data.settings[element.name] = element.value;
                });

                let url = "{{ url('app_screen_settings_save') }}";
                $.ajax({
                    url:url,
                    method:'POST',
                    data:{data:JSON.stringify(data)},
                    dataType: 'json',
                    success:function(response){
                        return callback(response);
                    }
                });
            }

            function setPreferedFilter(dt, dt_settings){
                dt.colReorder.order(dt_settings.colReorder);
                dt.order(dt_settings.order);
                let hidden_columns = [];
                dt_settings.visibility.map(
                    (item,index)=> {
                    if(!item) hidden_columns.push(index);
                    });
                dt.columns(hidden_columns).visible(false);
                dt.columns.adjust().draw( false );
                if(dt_settings.hasOwnProperty('advance_filter') && dt_settings.advance_filter.length > 0)  applyAdvanceFilters();
            }

            function parseDt(dt, callback){
                let settings = {
                    columns:[],
                    visibility:[],
                    colReorder: dt.colReorder.order(),
                    order:dt.order(),
                    page_length: dt.page.info().length
                };
                let col_indexes = $(dt.columns());
                col_indexes[0].map(function(idx){
                    settings.columns.push({
                        index: idx,
                        label: dt.column(idx).header().innerHTML,
                        visible: dt.column(idx).visible()
                    });
                    settings.visibility.push(dt.column(idx).visible());
                });
                dt_settings = settings;
                return callback(dt, settings);
            }

            function initializeToolbar(dt, settings){
                // build dropdown visibility
                let visibilityDropdown = $('#visibility-dropdown');
                settings.columns.map((col)=>{
                    let btn = document.createElement('button');
                    btn.setAttribute('type','button');
                    btn.setAttribute('data-idx',col.index);
                    btn.classList.add('button','small');
                    btn.classList.add((col.visible) ? 'col-show':'col-hide');
                    btn.innerHTML = col.label;
                    btn.onclick = function(){
                        let self = this;
                        let idx = self.getAttribute('data-idx');
                        if(self.classList.contains('col-show')){
                            self.classList.remove('col-show');
                            self.classList.add('col-hide');
                            dt.columns(idx).visible(false);
                        }
                        else{
                            self.classList.add('col-show');
                            self.classList.remove('col-hide');
                            dt.columns(idx).visible(true);
                        }
                    };
                    visibilityDropdown.append(btn);
                });

                // build columns select for advance filter
                settings.columns.map((col)=>{
                    let option = document.createElement('option');
                    option.setAttribute('value', col.index);
                    option.innerHTML = col.label;
                    row_filter_column.append(option);
                });

                $('#dt-input-search').on('input',function(e){
                    let string = $(this).val();
                    dt.columns().cache('search').search(string).draw();
                });
            }




            $(btn_add_row_filter).click(function(){
                //return ($(row_filter_value).val()) ? parseFormAddRowFilter((row)=>{ return displayFilterRow(row, ()=>{return applyAdvanceFilters(null)})}) : false;
                return ($(row_filter_value).val()) ? parseFormAddRowFilter((row)=>{ return displayFilterRow(row,()=>{parseAllFilterRow()})}) : false;
            });

            function parseFormAddRowFilter(callback){
                let row = {
                    column :{
                        index: $(row_filter_column).val(),
                        name: $('#row_filter_column option:selected').html()
                    },
                    condition:$(row_filter_condition).val(),
                    value:$(row_filter_value).val()
                };

                if(!dt_settings.hasOwnProperty('advance_filter')){
                    dt_settings.advance_filter = [];
                }
                dt_settings.advance_filter.push(row);
                return callback(row);
            }

            function displayFilterRow(advance_filter_row, callback){
                let li_row_filter = document.createElement('li'),
                    span_filter_label = document.createElement('span'),
                    span_filter_action = document.createElement('span'),
                    btn_delete_row =  document.createElement('button'),
                    icon_delete = document.createElement('i');
                li_row_filter.setAttribute('data-config',JSON.stringify(advance_filter_row));
                span_filter_label.classList.add('filter-label');
                span_filter_label.innerHTML = advance_filter_row.column.name + ' ' + advance_filter_row.condition + ' "' + advance_filter_row.value +'"';
                span_filter_action.classList.add('action');
                // btn_delete_row.classList.add('button','tiny','red','no-mb');
                // btn_delete_row.setAttribute('type','button');
                // btn_delete_row.innerHTML = '<i class="fa fa-trash no-mr no-mb"></i>';
                icon_delete.classList.add('fa','fa-trash','fa-border','red');
                icon_delete.onclick = function(){
                    let self = this;
                    self.parentNode.parentNode.remove();
                    parseAllFilterRow();
                };
                span_filter_action.append(icon_delete);
                li_row_filter.append(span_filter_label);
                li_row_filter.append(span_filter_action);
                row_filter_container.append(li_row_filter);
                parseAllFilterRow();
               // return (callback) ? callback(advance_filter_row) : true;
            }

            function applyAdvanceFilters(){
                let dt = dt_list.api();
                dt.columns().search('').draw();
                {# TODO sup and inf #}
                if(dt_settings.advance_filter.length > 0) {
                    dt_settings.advance_filter.map(function (row) {
                        let regex = null;
                        let regValue = $.fn.dataTable.util.escapeRegex(row.value);
                        switch (row.condition) {
                            case 'like':
                                regex = regValue;
                                break;
                            case 'start':
                                regex = '^' + regValue;
                                break;
                            case 'end':
                                regex = regValue + '$';
                                break;
                            case 'not':
                                regex = '(?!' + regValue + ')';
                                break;
                            case 'equal':
                                regex = '^' + regValue + '$';
                                break;
                            case 'diff':
                                regex = '^(?!' + regValue + ')$';
                                break;
                        }

                        if (regex) dt.column(row.column.index).search(regex, true, false);
                    });

                }
                dt.draw();
                return  true;
            }

            function parseAllFilterRow(){
                let children = row_filter_container.children();
                dt_settings.advance_filter = [];
                Object.keys(children).map(function(key) {
                    let element = children[key];
                    if(element.tagName === 'LI'){
                        dt_settings.advance_filter.push(JSON.parse(element.getAttribute('data-config')));
                    }
                });

               return applyAdvanceFilters();
            }

            $('#btn_submit_add_screen_settings').click(function(){
                let formDataSent = false;
                let input_screen_settings_name = $('#add_screen_settings_name');
                if($(input_screen_settings_name).val()){
                    $(input_screen_settings_name).removeClass('is-invalid-input');
                    if(!formDataSent){
                        let form_data = [
                            {name:'name', value: $(input_screen_settings_name).val()},
                            {name:'default', value: $('#add_screen_settings_default').is(':checked')},
                            {name:'share', value: $('#add_screen_settings_share').is(':checked') }
                        ];
                        saveSettings(dt_list.api(),form_data, 'article_list');
                    }

                }
                else{
                    $(input_screen_settings_name).addClass('is-invalid-input');
                }
                $(input_screen_settings_name).on('input',function(){
                    if($(input_screen_settings_name).val()){
                        $(input_screen_settings_name).removeClass('is-invalid-input');
                    }
                    else{
                        $(input_screen_settings_name).addClass('is-invalid-input');
                    }
                });
            });

            function applyAvailableScreen(){
                let avalaible_screens_settings = document.getElementById('avalaible_screens_settings');
                if(dt_settings.settings.length > 0) {
                    dt_settings.settings.map(function(id, filter){
                    })
                }
            }

        });




    </script>
{% endblock %}