@extends('layouts.dashboard.app')

@section('content')

    <div class="content-wrapper">

        <section class="content-header">

            <h1>@lang('site.departments')</h1>

            <ol class="breadcrumb">
                <li>
                    <a href="{{ route('dashboard.welcome') }}">
                        <i class="fa fa-dashboard"></i> @lang('site.dashboard')
                    </a>
                </li>
                <li class="active">@lang('site.departments')</li>
            </ol>
        </section>

        <section class="content">
            <div class="row">

                <div class="col-md-4">
                    <div class="box box-primary">
                        <div class="box-body">
                            <style type="text/css">
                                span.drag-source {
                                    border: 1px solid grey;
                                    border-radius: 3px;
                                    padding: 2px;
                                    background-color: silver;
                                }

                                ul.fancytree-container {
                                    max-height: 650px;
                                    overflow-y: scroll;
                                    width: 99%;
                                    display: inline-block;
                                }

                                #tree ul.fancytree-container {
                                    float: left;
                                }

                                span.fancytree-node.fancytree-drag-source {
                                    outline: 1px dotted grey;
                                }

                                span.fancytree-node.fancytree-drop-accept {
                                    outline: 1px dotted green;
                                }

                                span.fancytree-node.fancytree-drop-reject {
                                    outline: 1px dotted red;
                                }

                                span.trashcan {
                                    border: 1px solid #f5c6cb;
                                    background-color: #f8d7da;
                                    color: #721c24;
                                    padding: 1px 3px;
                                }
                            </style>
                            <script type="text/javascript">
                                let CLIPBOARD = null;

                                $(function () {
                                    let isRTL = '{!! (config('app.locale') == 'ar') !!}';
                                    let overlay = $('#overlay-details');

                                    /*console.log(lang)*/
                                    $("#tree").fancytree({
                                        activeVisible: true, // Make sure, active nodes are visible (expanded)
                                        aria: true, // Enable WAI-ARIA support
                                        autoActivate: true, // Automatically activate a node when it is focused using keyboard
                                        autoCollapse: true, // Automatically collapse all siblings, when a node is expanded
                                        autoScroll: true, // Automatically scroll nodes into visible area
                                        clickFolderMode: 3, // 1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)
                                        checkbox: true, // Show check boxes
                                        // unselectable: function(event, data) {
                                        //     return data.node.isFolder();
                                        // },
                                        checkboxAutoHide: false, // Display check boxes on hover only
                                        debugLevel: 4, // 0:quiet, 1:errors, 2:warnings, 3:infos, 4:debug
                                        disabled: false, // Disable control
                                        focusOnSelect: true, // Set focus when node is checked by a mouse click
                                        escapeTitles: false, // Escape `node.title` content for display
                                        generateIds: true, // Generate id attributes like <span id='fancytree-id-KEY'>
                                        idPrefix: "", // Used to generate node id´s like <span id='fancytree-id-<key>'>
                                        icon: true, // Display node icons
                                        keyboard: true, // Support keyboard navigation
                                        keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath()
                                        minExpandLevel: 2, // 1: root node is not collapsible
                                        quicksearch: true, // Navigate to next node by typing the first letters
                                        rtl: isRTL, // Enable RTL (right-to-left) mode
                                        selectMode: 2, // 1:single, 2:multi, 3:multi-hier
                                        tabindex: "0", // Whole tree behaves as one single control
                                        titlesTabbable: false, // Node titles can receive keyboard focus
                                        tooltip: false, // Use title as tooltip (also a callback could be specified)
                                        // source: SOURCE,
                                        source: {url: '{{ route('dashboard.departments.index') }}'},
                                        extensions: ["dnd5", "filter", "multi"],
                                        // extensions: ["edit", "dnd5", "table", "gridnav"],
                                        dnd5: {
                                            preventVoidMoves: true,
                                            preventRecursion: false,
                                            preventNonNodes: true,
                                            autoExpandMS: 1000,
                                            multiSource: true,  // drag all selected nodes (plus current node)
                                            dragStart: function (node, data) {
                                                data.effectAllowed = "all";
                                                data.dropEffect = data.dropEffectSuggested;  //"link";
                                                return true;
                                            },
                                            dragEnter: function (node, data) {
                                                // return ["before", "after"];
                                                data.node.info("dragEnter", data);
                                                return node.isFolder();
                                                //return true;
                                            },
                                            dragOver: function (node, data) {
                                                // data.node.info("dragOver", data);
                                                data.dropEffect = data.dropEffectSuggested;  //"link";
                                                return true;
                                            },
                                            dragEnd: function (node, data) {
                                                data.node.info("dragEnd", data);
                                            },
                                            dragDrop: function (node, data) {
                                                // console.log('node',node)
                                                // console.log('data',data)
                                                // console.log('hitMode','|',data.hitMode)

                                                console.log(data.dropEffect);
                                                if (node.isFolder()/* && data.hitMode === 'over'*/) {
                                                    if ((!!data.otherNodeData.folder)) {
                                                        console.log('update dept', data.otherNodeData.key, 'setParent', node.key)
                                                    } else {
                                                        console.log('update user', data.otherNodeData.key, 'setParent', node.key)
                                                    }
                                                    // individual
                                                    {{--data.otherNode.moveTo(node, data.hitMode);--}}
                                                    {{--overlay.css('display', 'flex');--}}

                                                    {{--let main_data = new FormData();--}}
                                                    {{--main_data.append('id', data.otherNodeData.key);--}}
                                                    {{--main_data.append('parent', node.key);--}}
                                                    {{--main_data.append('type', (!!data.otherNodeData.folder) ? 'updateDept' : 'updateUser');--}}
                                                    {{--main_data.append('_token', '{{ csrf_token() }}');--}}

                                                    {{--let url = '{{ route('dashboard.departments.getData') }}';--}}
                                                    {{--let method = 'post';--}}

                                                    {{--callApi(url, method, main_data);--}}

                                                    // multi
                                                    let sourceNodes = data.otherNodeList;
                                                    if (data.hitMode === "after") sourceNodes.reverse();

                                                    $.each(sourceNodes, function (i, o) {
                                                        // o.info("move to " + node + ": " + data.hitMode);
                                                        o.moveTo(node, data.hitMode);

                                                        overlay.css('display', 'flex');
                                                        let main_data = new FormData();
                                                        main_data.append('id', o.key);
                                                        main_data.append('parent', node.key);
                                                        main_data.append('type', (!!o.folder) ? 'updateDept' : 'updateUser');
                                                        main_data.append('_token', '{{ csrf_token() }}');

                                                        let url = '{{ route('dashboard.departments.getData') }}';
                                                        let method = 'post';

                                                        callApi(url, method, main_data);
                                                    });

                                                    node.debug("drop", data);
                                                    node.setExpanded();
                                                }
                                            },
                                        },
                                        edit: {
                                            triggerStart: ["f2", "shift+click", "mac+enter"],
                                            close: function (event, data) {
                                                if (data.save && data.isNew) {
                                                    // Quick-enter: add new nodes until we hit [enter] on an empty title
                                                    $("#tree").trigger("nodeCommand", {
                                                        cmd: "addSibling",
                                                    });
                                                }
                                            },
                                        },
                                        table: {
                                            indentation: 20,
                                            nodeColumnIdx: 2,
                                            checkboxColumnIdx: 0,
                                        },
                                        gridnav: {
                                            autofocusInput: false,
                                            handleCursorKeys: true,
                                        },
                                        lazyLoad: function (event, data) {
                                            data.result = {url: "../demo/ajax-sub2.json"};
                                        },
                                        createNode: function (event, data) {
                                            var node = data.node,
                                                $tdList = $(node.tr).find(">td");

                                            // Span the remaining columns if it's a folder.
                                            // We can do this in createNode instead of renderColumns, because
                                            // the `isFolder` status is unlikely to change later
                                            if (node.isFolder()) {
                                                $tdList
                                                    .eq(2)
                                                    .prop("colspan", 6)
                                                    .nextAll()
                                                    .remove();
                                            }
                                        },
                                        renderColumns: function (event, data) {
                                            var node = data.node,
                                                $tdList = $(node.tr).find(">td");

                                            // (Index #0 is rendered by fancytree by adding the checkbox)
                                            // Set column #1 info from node data:
                                            $tdList.eq(1).text(node.getIndexHier());
                                            // (Index #2 is rendered by fancytree)
                                            // Set column #3 info from node data:
                                            $tdList
                                                .eq(3)
                                                .find("input")
                                                .val(node.key);
                                            $tdList
                                                .eq(4)
                                                .find("input")
                                                .val(node.data.foo);

                                            // Static markup (more efficiently defined as html row template):
                                            // $tdList.eq(3).html("<input type='input' value='"  "" + "'>");
                                            // ...
                                        },
                                        modifyChild: function (event, data) {
                                            data.tree.info(event.type, data);
                                        },
                                        init: function (event, data) {
                                        },
                                        keydown: function (event, data) {
                                            var KC = $.ui.keyCode,
                                                oe = event.originalEvent;

                                            // Swap LEFT/RIGHT keys
                                            switch (event.which) {
                                                case KC.LEFT:
                                                    oe.keyCode = KC.RIGHT;
                                                    oe.which = KC.RIGHT;
                                                    break;
                                                case KC.RIGHT:
                                                    oe.keyCode = KC.LEFT;
                                                    oe.which = KC.LEFT;
                                                    break;
                                            }
                                        },
                                        activate: function (event, data) {
                                            var node = data.node;
                                            // Use <a> href and target attributes to load the content:
                                            // console.log('isCat:',(!!node.folder),node.key)

                                            // if( (!!node.folder)){ }

                                            // Open target
                                            // window.open(node.data.href, node.data.target);
                                            // or open target in iframe
                                            //                $("[name=contentFrame]").attr("src", node.data.href);

                                            console.log('display', ((!!node.folder) ? 'dept' : 'user'), node.key)

                                            overlay.css('display', 'flex');

                                            let main_data = new FormData();
                                            main_data.append('id', node.key);
                                            main_data.append('type', (!!node.folder) ? 'dept' : 'user');
                                            main_data.append('_token', '{{ csrf_token() }}');

                                            let url = '{{ route('dashboard.departments.getData') }}';
                                            let method = 'post';

                                            callApi(url, method, main_data)

                                        },
                                    });

                                    function callApi(url, method, data) {
                                        $.ajax({
                                            url: url,
                                            method: method,
                                            data: data,
                                            processData: false,
                                            contentType: false,
                                            success: function (data) {

                                                overlay.css('display', 'none');
                                                $('#dept-area-data').empty().append(data);
                                                let my_element = document.getElementById("display-dept-area");

                                                my_element.scrollIntoView({
                                                    behavior: "smooth",
                                                    block: "start",
                                                    inline: "nearest"
                                                });
                                            },
                                            error: function (xhr, status, error) {
                                                overlay.css('display', 'none');
                                                console.log('error');
                                            }
                                        });
                                    }

                                    $("input[name=search]").on("change search", function (e) {
                                        if (e.type === "change" && e.target.onsearch !== undefined) {
                                            // We fall back to handling the change event only if the search event is not supported.
                                            return;
                                        }
                                        var n,
                                            tree = $.ui.fancytree.getTree(),
                                            match = $.trim($(this).val());

                                        // Pass a string to perform case insensitive matching
                                        n = tree.filterNodes(match, {mode: "hide"});
                                        // This will adjust the start value in case the filtered row set
                                        // is not inside the current viewport
                                        // tree.setViewport();

                                        $("span.matches").text(n ? "(" + n + " matches)" : "");
                                    });

                                    $("#expandAll").on("click", function (e) {
                                        $.ui.fancytree.getTree().expandAll();
                                    });

                                    $("#collapseAll").on("click", function (e) {
                                        $.ui.fancytree.getTree().expandAll(false);
                                    });

                                    $('.create-category').on('click', function (e) {
                                        e.preventDefault();

                                        let overlay = $('#overlay-details');
                                        overlay.css('display', 'flex');

                                        let data = new FormData();
                                        data.append('id', '1');
                                        data.append('type', 'addDept');
                                        data.append('_token', '{{ csrf_token() }}');

                                        $.ajax({
                                            url: '{{ route('dashboard.departments.getData') }}',
                                            method: "post",
                                            data: data,
                                            processData: false,
                                            contentType: false,
                                            success: function (data) {
                                                overlay.css('display', 'none');
                                                $('#dept-area-data').empty().append(data);
                                            },
                                            error: function (xhr, status, error) {
                                                overlay.css('display', 'none');
                                                console.log('error');
                                            }
                                        })

                                    });
                                });
                            </script>

                            <div class="flexbox-item">

                                <div class="box-body">
                                    <div>
                                        <button type="button" class="btn btn-primary"
                                                id="expandAll">@lang('فتح الكل')</button>
                                        <button type="button" class="btn btn-primary"
                                                id="collapseAll">@lang('طي الكل')</button>
                                        <a type="button"
                                           class="btn btn-primary pull-right create-category">@lang('اضف جديد')</a>
                                    </div>
                                </div>
                                <div class="box-body">
                                    <div>
                                        <label for="filter">@lang('البحث'):</label>
                                        <input type="search" name="search" id="filter" placeholder="@lang('كلمة البحث')"
                                               autocomplete="off">
                                        <span class="matches"></span>
                                    </div>
                                </div>

                            </div>
                            <fieldset id="tree" data-source="ajax" class="sampletree">
                            </fieldset>

                        </div>

                    </div>
                </div>

                <div class="col-md-8" id="display-dept-area">

                    <div class="box box-primary">
                        @include('dashboard.partials._errors')

                        <div class="box-body" style="min-height: 430px">

                            <div style="display: none; flex-direction: column; align-items: center;" id="loading">
                                <div class="loader"></div>
                                <p style="margin-top: 10px">@lang('site.loading')</p>
                            </div>

                            <div id="dept-area-data">
                                <div
                                    style="min-height: 430px;display: flex;align-items: center;align-content: center;flex-direction: row;justify-content: center;">
                                    <span class="text-center">data goes here ...</span>
                                </div><!-- end of order product list -->
                            </div><!-- end of order product list -->


                        </div><!-- end of box body -->
                        <div id="overlay-details" class="overlay" style="display: none">
                            <i class="fa fa-refresh fa-spin text-green"></i>
                        </div>
                    </div><!-- end of box -->

                </div><!-- end of col -->

            </div>
        </section><!-- end of content -->

    </div><!-- end of content wrapper -->


@endsection