<!-- Form -->
<div class="content-animation animated">
    <div class="row clearfix  ">
        <!-- Advanced Form Example With Validation -->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header text-center">
                        <h2 class="content-title">ثبت دسته بندی جدید</h2>
                    </div>
                    <div class="body">
                        <form id="wizard_with_validation" method="POST">
                            <h3>مشخصات عمومی</h3>
                            <fieldset>
                                <div class="col-md-6">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="text" class="form-control cat-img rtl" id="cat-img"
                                                   name="cat-img"
                                                   minlength="2" title="" required>
                                            <label class="form-label">آدرس تصویر*</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="text" class="form-control cat-name rtl" id="cat-name"
                                                   name="cat-name"
                                                   title="" required>
                                            <label class="form-label">نام صنف*</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Exportable Table -->
        <div class="row clearfix text-center">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                <div class="card ">
                    <div class="header">
                        <h2>جستوجو کاربر</h2>
                        <ul class="header-dropdown m-r--5">
                            <li class="dropdown">
                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"
                                   role="button" aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">more_vert</i>
                                </a>

                            </li>
                        </ul>
                    </div>
                    <div class="body ">
                        <div class="row">
                            <div class="col-md-12 ">
                                <div class="table-responsive text-center p-t-20 align-center no-overflow-y">
                                    <table class="table table-bordered table-striped table-hover dataTable js-exportable text-center full_width">
                                        <thead>
                                        <tr>
                                            <td class="text-center">ویرایش کارت</td>
                                            <td class="text-center">تصویر</td>
                                            <td class="text-center">#</td>
                                            <td class="text-center">نام دسته بندی</td>
                                            <td class="text-center">شماره دسته بندی</td>
                                            <td class="text-center">شماره</td>
                                        </tr>
                                        </thead>
                                        <tbody class="bordered">


                                        </tbody>
                                        <tfoot>
                                        <tr>
                                            <td class="text-center">ویرایش کارت</td>
                                            <td class="text-center">تصویر</td>
                                            <td class="text-center">#</td>
                                            <td class="text-center">نام دسته بندی</td>
                                            <td class="text-center">شماره دسته بندی</td>
                                            <td class="text-center">شماره</td>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- #END# Exportable Table -->
        <!-- #END# Advanced Form Example With Validation -->
        <!-- Draggable Handles -->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header">
                        <div class="row ">
                            <div class="col-md-12 category-nestable-state"></div>
                        </div>
                    </div>
                    <div class="body ">
                        <div class="row category-nestable">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- #END# Draggable Handles -->
    </div>
</div>

<script type="text/javascript">
    let table = null, category_list = null, form = null;
    let contentTitle = $(".content-title"), flag = true;

    $(function () {
        $(document).ready(function () {
            $("body").tooltip({selector: '[data-toggle=tooltip]'});
            contentTitle.text("ثبت دسته بندی جدید");
            LoadPageOne();
            LoadDataInTable();

        });
    }(jQuery));

    function LoadDataInTable() {
        LoadData({request: 'proxy', action: 'load-category', object: 'load'}, null, true, function (data) {
            category_list = data;
            if (table !== null)
                table.destroy();
            table = $('.js-exportable').DataTable({
                "data": data,
                "fnInitComplete": function (e) {
                    OnEventListener();
                },
                "fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
                    OnEventListener();
                },
                "columns": [
                    {"data": "button-edit"},
                    {"data": "img"},
                    {"data": "count"},
                    {"data": "name"},
                    {"data": "id"},
                    {"data": "counter"}
                ],
                dom: 'Bfrtip',
                responsive: true,
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],//  to _END_ of _TOTAL_ entries
                "language": {
                    "lengthMenu": "Display _MENU_ records per page",
                    "zeroRecords": " چیزی یافت نشد",
                    "info": "نمایش از _START_ تا _END_ در _TOTAL_ رکورد",
                    "infoEmpty": "<center>رکوردی پیدا نشد</center>",
                    "infoFiltered": "(filtered from _MAX_ total records)",
                    "paginate": {
                        "next": "بعدی",
                        "previous": "قبلی"
                    }
                }
            });
        });

        LoadData({
            request: 'proxy',
            action: 'load-category',
            object: 'guild-master-control',
            r: 'load'
        }, null, true, function (data) {
            if (data.error === 0) {
                let SNestable = ObjectNestable(data).nestable({
                    maxDepth: 1
                }).on('change', updateOutput);
                updateOutput(SNestable.data('output', $('#nestable-output')));

            }

        });
    }

    let updateOutput = function (e) {
        let list = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
//                    output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
            updateGuildIndex(window.JSON.stringify(list.nestable('serialize')));
        } else {
//                    output.val('JSON browser support required for this demo.');
        }
    };

    function updateGuildIndex(e) {
        let updateFlag = false;
        if (lastUpdate.length > 0) {
            if (lastUpdate === e) {
                updateFlag = false;
            } else {
                updateFlag = true;
                lastUpdate = e;
            }
        } else {
            updateFlag = true;
            lastUpdate = e;
        }
        if (updateFlag) {
            let container = $('.category-nestable-state');
            container.empty().append('<button class="btn btn-block btn-warning">' + state.i2 + '</button>');

            LoadData({
                request: 'proxy',
                action: 'load-category',
                object: 'guild-master-control',
                r: 'update',
                string: e
            }, null, false, function (data) {
                if (data === '1') {
                    container.empty().append('<button class="btn btn-block btn-success">' + state.i4 + '</button>');
                }
                if (data === '0') {
                    container.empty().append('<button class="btn btn-block btn-danger">' + state.i3 + '</button>');
                }
            });
        }
    }

    let state = {i1: 'دسته بندی', i2: 'در حال بروز رسانی', i3: 'خطا در بروز رسانی', i4: 'بروز رسانی شد'};
    let lastUpdate = '';

    function LoadPageOne() {
        form = $('#wizard_with_validation').show();
        form.steps({
            headerTag: 'h3',
            bodyTag: 'fieldset',
            transitionEffect: 'slideLeft',
            onInit: function (event, currentIndex) {
                $.AdminBSB.input.activate();

                //Set tab width
                let $tab = $(event.currentTarget).find('ul[role="tablist"] li');
                let tabCount = $tab.length;
                $tab.css('width', (100 / tabCount) + '%');

                //set button waves effect
                setButtonWavesEffect(event);
            },
            onStepChanging: function (event, currentIndex, newIndex) {
                if (currentIndex > newIndex) {
                    return true;
                }

                if (currentIndex < newIndex) {
                    form.find('.body:eq(' + newIndex + ') label.error').remove();
                    form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
                }

                form.validate().settings.ignore = ':disabled,:hidden';
                return form.valid();
            },
            onStepChanged: function (event, currentIndex, priorIndex) {
                setButtonWavesEffect(event);
            },
            onFinishing: function (event, currentIndex) {
                form.validate().settings.ignore = ':disabled';
                return form.valid();
            },
            onFinished: function (event, currentIndex) {
                let text = "";
                if (flag) {
                    text = "اضافه";
                } else {
                    text = "ویرایش";
                }
                swal({
                    title: "آیا این مورد " + text + " شود؟",
                    text: " این مورد " + text + " می شود ",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "بله " + text + " شود",
                    cancelButtonText: "نه " + text + " نشود",
                    closeOnConfirm: false,
                    closeOnCancel: false
                }, function (isConfirm) {
                    if (isConfirm) {
                        let action = ['add', 'edit'];
                        LoadData({
                            request: 'proxy',
                            action: (flag ? action[0] : action[1]) + "-category",
                            object: construct(true)
                        }, null, false, function (data) {
                            if (data === '1') {
                                flag = true;
                                contentTitle.text("ثبت دسته بندی جدید");
                                swal(text + " شد", "این مورد " + text + " شد", "success");
                                // OnRestartForm();
                            } else {
                                if (data === '200')
                                    swal("خطا", "اعتبار سنجی به درستی انجام نشد", "error");
                                if (data === '100')
                                    swal("خطا", "این دسته بندی در سیستم موجود است", "error");
                                if (data === '0')
                                    swal("خطا", "این درخواست انجام نشد", "error");
                            }
                        });
                    } else {
                        swal("لغو شد", "این درخواست لغو شد", "error");
                    }
                });
            }
        });

    }

    function OnEventListener() {
        $(".js-exportable tbody").find("button").bind("tap", function (e) {
            let btn = $(this),
                mode = btn.attr("data-mod");
            switch (mode) {
                case "category":
                    let action = btn.attr("data-action"),
                        id = btn.attr("data-id");
                    switch (action) {
                        case "delete-item":
                            OnDeleteButton(id, btn.parents('tr'));
                            break;
                        case "edit-item":
                            OnEditButton(id, btn.attr("data-index"));
                            break;
                        case "show-item":
                            OnDeActiveButton(id, btn);
                            break;
                        default:
                            break;
                    }
                    break;
                default:
                    break;
            }
        });
    }

    function OnDeActiveButton(id, btn) {
        let data_value = btn.attr("data-value"), text = "";
        if (data_value === '0') {
            text = "غیر قابل نمایش";
        } else {
            text = "قابل نمایش";
        }
        swal({
            title: "آیا نمایش این مورد ویرایش شود؟",
            text: " این مورد " + text + " می شود ",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "بله " + text + " شود",
            cancelButtonText: "نه " + text + " نشود",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm) {
            if (isConfirm) {

                LoadData({
                    request: 'proxy',
                    action: 'active-category',
                    id: id,
                    show: data_value
                }, null, false, function (data) {
                    if (data === '1') {
                        if (data_value === '1') {
                            btn.attr('data-value', 0);
                            btn.removeClass('btn-warning').addClass('btn-info');
                            btn.find('i').empty().append('visibility');
                        } else {
                            btn.attr('data-value', 1);
                            btn.removeClass('btn-info').addClass('btn-warning');
                            btn.find('i').empty().append('visibility_off');
                        }
                        swal(text + " شد", "این مورد " + text + " شد", "success");
                    } else {
                        swal("خطا", "این درخواست انجام نشد", "error");
                    }
                });
            } else {
                swal("لغو شد", "این درخواست لغو شد", "error");
            }
        });
    }

    function OnDeleteButton(id, tr) {
        swal({
            title: "آیا این مورد حذف شود؟",
            text: "شما قادر به بازگردانی این مورد نخواهید بود",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "بله حذف شود",
            cancelButtonText: "نه حذف نشود",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm) {
            if (isConfirm) {

                LoadData({
                    request: 'proxy',
                    action: 'remove-category',
                    id: id
                }, null, false, function (data) {
                    if (data === '1') {
                        tr.fadeOut(function (e) {
                            table.row(tr)
                                .remove()
                                .draw();
                        });
                        swal("حذف شد", "این مورد حذف شد", "success");
                    } else {
                        swal("خطا", "این درخواست انجام نشد", "error");
                    }
                });
            } else {
                swal("لغو شد", "این درخواست لغو شد", "error");
            }
        });
    }

    function OnEditButton(id, index) {
        if (category_list[index]['id'] === id) {
            contentTitle.text("ویرایش دسته بندی");
            flag = false;
            construct(false, category_list[index]);
        } else {
            swal({
                title: "اخطار",
                text: "<span style=\"color: #CC0000\">خطا در یافتن کاربر <span>",
                html: true
            });
        }
    }

    let ITEM_ID = 0;

    function construct(get = false, object = null) {
        let form = $('#wizard_with_validation');
        /***
         * fieldset 1
         */
        let cat_name = form.find('.cat-name'),
            cat_url = form.find('.cat-img');
        if (get && object == null) {
            try {
                return {
                    /***
                     * fieldset 1
                     */
                    ID: ITEM_ID,
                    cat_name: cat_name.val(),
                    cat_url: cat_url.val(),
                }
            } catch (e) {
                return e;
            }
        } else {
            try {
                ITEM_ID = object.id;
                /***
                 * fieldset 1
                 */
                cat_name.val(object.name).focus();
                cat_url.val(object.url).focus();
                return true;
            } catch (e) {
                return e;
            }

        }
    }


    function ObjectNestable(data) {
        let Container = $('div.category-nestable');
        let html = '';
        html += '<div class="dd" id="nestable">';
        html += '<ol class="dd-list">';
        if (data.list.length > 0) {
            for (let i = 0; i < data.list.length; i += 1) {
                if (data.list[i]['error'] === 0) {
                    let e = data.list[i];
                    let cat = '';
                    cat += '<li class="dd-item" data-id="' + e.cat_id + '">';
                    cat += '<div class="dd-handle ">' + e.cat_name;
                    cat += '<span> [code : ' + e.cat_id + '] </span>';
                    cat += '</div>';
                    /*if (e.cat_child.length > 0) {
                        cat += '<ol class="dd-list">';
                        for (let c = 0; c < e.cat_child.length; c += 1) {
                            let ch = e.cat_child[c];
                            cat += '<li class="dd-item" data-id="' + ch.child_id + '">';
                            cat += '<div class="dd-handle">' + ch.child_name;
                            cat += '<span> [code : ' + ch.child_id + '] </span>';

                            cat += '</div>';
                            cat += '</li>';
                        }
                        cat += '</ol>';
                    }*/

                    cat += '</li>';
                    html += cat;
                }
            }
        }

        html += '<button class="btn btn-warning btn-block">بدون دسته بندی</button>';

        if (data['non-list'].length > 0) {
            for (let ii = 0; ii < data['non-list'].length; ii += 1) {
                let xx = data['non-list'][ii];
                html += '<li class="dd-item" data-id="' + xx.child_id + '">';
                html += '<div class="dd-handle">' + xx.child_name;
                html += '<span>' + xx.child_id + '</span>';
                html += '</div>';
                html += '</li>';
            }
        }
        html += '</ol>';
        html += '</div>';
        Container.empty().append(html);
        return $('#nestable');
    }
</script>