@extends('layouts.backend.master')
@section('title', 'Archived Menu')
@section('breadcrumbs')
<div class="content-header">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="page-title">Archived Menu</h3>
        </div>
    </div>
</div>
@endsection
@section('content')
<div class="row">
    <div class="col-12">
        <div class="box">
            <div class="box-body">
                <div id="custom_toolbar" class="float-right">
                    <div class="btn-group float-right" role="group" data-toggle="tooltip" data-placement="top" title="Export Data">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-download"></i>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                            <li><a class="dropdown-item" href="#" onclick="exportTasks('menus_archived',['id','role','name'],'csv')">CSV</a></li>
                            <li><a class="dropdown-item" href="#" onclick="exportTasks('menus_archived',['id','role','name'],'zip')">ZIP</a></li>
                        </ul>
                    </div>
                    <a data-toggle="tooltip" data-placement="top" title="{{__('Back to Menu') }}" class="btn btn-secondary float-right ml-1" href="{{route('super-user.menu')}}">
                        <i class="fa fa-undo"></i>
                    </a>
                </div>

                <div class="table-responsive su_tables">
                    <table id="bstable" class="table-striped" data-show-export="false" data-filter-control="true" data-show-search-clear-button="false" data-pagination="true" data-search="false" data-toggle="table" data-show-columns="true" data-show-columns-toggle-all="true" data-show-toggle="false" table-for="tbl_super_menus" data-unique-id="id" data-toolbar="#custom_toolbar" data-export-options='{"fileName": "{{ config('app.name')." - Archived Menu - ".date('d/m/Y-H:m:s')}}"}' data-search-time-out="2000">
                        <thead>
                            <tr>
                                <th title="#" data-field="id" data-sortable="true" data-width="65" data-width-unit="px" data-sortable="true">#</th>
                                <th title="Name" data-field="name" data-filter-control="input" data-sortable="true">{{__('Name') }}</th>
                                <th title="Role" data-field="role" data-filter-control="input" data-sortable="true">{{__('Role') }}</th>
                                <th data-width="150" data-width-unit="px" data-force-hide="true">{{__('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach($getMenuData as $key => $menu)
                            <tr>
                                <td>{{$loop->iteration}}</td>
                                <td>{{ $menu->name ? $menu->name : '' }}</td>
                                <td>{{ $menu->roleName ? $menu->roleName : '' }}</td>
                                <td>
                                    <a onclick="restore_archived({{$menu->id}}, {{ $loop->iteration}})" class="btn btn-sm btn-info btnEditAction" data-toggle="tooltip" data-placement="top" title="Restore"><i class="fa fa-undo"></i>
                                    </a>
                                    <!--                                    <a onclick="return confirm('Are you sure want to delete ?')" href="{{ url('super-user/menu/remove',
                                                    ['menuId' =>  base64_encode($menu->id)]) }}"
                                        class="btn btn-sm btn-danger btnDeleteAction"><i class="fa fa-trash"></i>
                                    </a>-->

                                    <a href="javascript:void(0);" onclick="menu_plan({{$menu->id}}, {{ $loop->iteration}})" class="waves-effect waves-light btn btn-sm btn-primary delete-btn" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('backend/vendor/dropdown/jquery-menu-editor.js')}}"></script>
<script type="text/javascript" src="{{ asset('backend/vendor/dropdown/bootstrap-iconpicker/js/iconset/fontawesome5-3-1.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('backend/vendor/dropdown/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js')}}"></script>
<script>
    var editor = "";

    function checkBoxChange(event) {

        var str = editor.getString();
        const menuList = JSON.parse(str);
        const target = event.target;
        const id = target.dataset.id;

        if (!event.target.checked) {
            for (let i = 0; i < menuList.length; i++) {
                const ele = menuList[i];
                if (ele.menuId == id) {
                    menuList.splice(i, 1);
                    break;
                }
                if (ele.children && Array.isArray(ele.children)) {
                    for (let j = 0; j < ele.children.length; j++) {
                        const
                            che = ele.children[j];
                        if (che.menuId == id) {
                            ele.children.splice(j, 1);
                            break;
                        }
                    }
                }
            }
        } else {
            menuList.push({
                menuName: target.dataset.name,
                menuId: target.dataset.id
            })
        }
        editor.setData(menuList);
        var
            str = editor.getString();
        $("#out").text(str);
    }
    jQuery(document).ready(function() {



        var iconPickerOptions = {
            searchText: "Buscar...",
            labelHeader: "{0}/{1}"
        };

        var sortableListOptions = {
            placeholderCss: {
                'background-color': "#cccccc"
            }
        };

        editor = new MenuEditor('myEditor', {
            listOptions: sortableListOptions,
            iconPicker: iconPickerOptions
        });
        var arrayjson1 = [];
                editor.setData(arrayjson1);
        editor.setForm($('#frmEdit'));
        editor.setUpdateButton($('#btnUpdate'));
        $('#btnReload').on('click', function() {
            editor.setData(arrayjson);
        });

        $('#btnOutput').on('click', function() {

            var menuId = $("#menuId").val();
            var menuName = $("#name").val();
            var rolesId = $("#roles_id").val();
            if (menuName.trim() != '' && rolesId.trim() != '') {
                if (menuId != 0) {
                    $("#btnOutput").attr("disabled", true);
                    $("#btnOutput").html('<i class="fa fa-spinner fa-spin"></i>&nbsp;&nbsp;Updating..');
                } else {
                    $("#btnOutput").attr("disabled", true);
                    $("#btnOutput").html('<i class="fa fa-spinner fa-spin"></i>&nbsp;&nbsp;Saving..');

                }
            }

            var str = editor.getString();
            const menuList = JSON.parse(str);
            createMenus(menuList, menuId)
        });

        $("#btnUpdate").click(function() {
            editor.update();
        });

        $('#btnAdd').click(function() {

            var arrayItem = [];

            let $this = this;

            var str = editor.getString();
            const menuList = JSON.parse(str);

            $('input.routeslist:checked').each(function() {

                arrayItem.push({
                    menuName: $(this).data('name'),
                    menuId: $(this).data('id')
                })

            });

            if (arrayItem.length > 0) {
                $("#menuBoxList").show();
                editor.setData(arrayItem);
                var str = editor.getString();

                $("#out").text(str);

            } else {
                $("#menuBoxList").hide();
            }

        });

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

    });

    function deleteRecord(id) {
        var url = "{{url('super-user/menu/remove/')}}/" + btoa(id);
        Swal.fire({
            title: 'Are you sure?',
            text: "Are you sure want to delete this record?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Sure!',
            position: 'bottom',
        }).then((result) => {
            if (result.isConfirmed) {

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': "{{csrf_token()}}",
                    }
                });
                $.ajax({
                    url: url,
                    success: function(response) {
                        window.location.href = "{{url('super-user/menu/')}}";
                    }
                });
            }

        });

    }

    function restore_archived(route_id, current_id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You want to restore this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Restore it!',
            showClass: {
                popup: 'animated fadeInUp faster',
                icon: 'animated heartBeat delay-1s'
            },
            hideClass: {
                popup: 'animated fadeOutDown faster',
            },
            position: 'center-bottom',

        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('super-user.menu_is_archived') }}",
                    type: 'POST',
                    data: {
                        is_archived: 1,
                        route_id: route_id
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            swalMsg('success', 'Menu restored successfully.');
                            var $showTable = $('#bstable');
                            $showTable.bootstrapTable('removeByUniqueId', current_id);
                        } else {
                            swalMsg('danger', 'Something went wrong try again.');
                        }
                    }
                });
            }
        })
    }

    function menu_plan(route_id, current_id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Delete it!',
            showClass: {
                popup: 'animated fadeInUp faster',
                icon: 'animated heartBeat delay-1s'
            },
            hideClass: {
                popup: 'animated fadeOutDown faster',
            },
            position: 'center-bottom',
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('super-user.menu_remove_category') }}",
                    type: 'POST',
                    data: {
                        route_id: route_id
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            swalMsg('success', 'Menu deleted successfully.');
                            var $showTable = $('#bstable');
                            $showTable.bootstrapTable('removeByUniqueId', current_id);
                        } else {
                            swalMsg('danger', 'Something went wrong try again.');
                        }
                    }
                });
            }
        })
    }
</script>
@endpush