@extends('operations.layout.mainlayout')

@section('content')
    <style>
        .jstree-node {
            font-size: 15pt;
        }

        #jstree_demo .jstree-open > .jstree-anchor > .jstree-checkbox,
        #jstree_demo .jstree-closed > .jstree-anchor > .jstree-checkbox {
            display: none;
        }
    </style>

    <script src="/bower_components/admin-lte/plugins/jquery/jquery.min.js"></script>

    <script>

        $(document).ready(function () {
            var array = [];

            function arrayLocations() {
                array = @json($locations);
            }

            arrayLocations();
            // Create an jstree instance
            $('#jstree_demo').jstree({ // config object start

                "core": {                    // core config object
                    "mulitple": false,         // disallow multiple selection
                    "animation": 100,          // 200ms is default value
                    "check_callback": true,   // this make contextmenu plugin to work
                    "themes": {
                        "variant": "large",
                    },

                    "data": array

                }, // core end

                // Types plugin
                "types": {
                    "default": {
                        "icon": "glyphicon glyphicon-flash"
                    },
                    "demo": {
                        "icon": "glyphicon glyphicon-th-large"
                    }
                },

                // config object for Checkbox plugin (declared below at plugins options)
                "checkbox": {
                    "keep_selected_style": false,  // default: false
                    "three_state": false,           // default: true
                    "whole_node": true             // default: true
                },

                "conditionalselect": function (node, event) {
                    return false;
                },
                // injecting plugins
                "plugins": [
                    //"checkbox",
                    "contextmenu",
                    // "dnd",
                    // "massload",
                    // "search",
                    // "sort",
                    // "state",
                    "types",
                    // Unique plugin has no options, it just prevents renaming and moving nodes
                    // to a parent, which already contains a node with the same name.
                    "unique",
                    // "wholerow",
                    // "conditionalselect",
                    "changed"
                ],
                "contextmenu": {
                    "items": function ($node) {

                        var tree = $("#jstree_demo").jstree(true);
                        @permission('warehouse_settings_manage_locations')
                        return {
                            "Create": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Create",
                                "action": function (obj) {
                                    $node = tree.create_node($node);
                                    tree.edit($node);
                                }
                            },
                            "Rename": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Rename",
                                "action": function (obj) {
                                    tree.edit($node);
                                }
                            },
                            "Sortable": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": $node.original.IS_STORABLE === 1 ? "Storable <i style='padding-left: 40px; color: green' class='fa fa-check'></i>" : "Storable <i style='padding-left: 40px; color: red' class='fa fa-times-circle'></i>",
                                "action": function (obj) {
                                    if ($node.original.IS_CONSUMABLE === 1 || $node.original.IS_DISPOSABLE === 1) {
                                        alert('Location cant be multiple type')
                                        return;
                                    }
                                    $.get('/operations/warehouse/locations/makeStorable/' + $node.id)
                                        .done(function (d) {
                                            tree.settings.core.data = d.response;
                                            tree.refresh();
                                        })
                                        .fail(function () {
                                            tree.refresh();
                                        });
                                    //$node = tree.create_node($node, {text: 'Make Sortable', type: 'glyphicon glyphicon-file'});
                                    //tree.edit($node);
                                }
                            },
                            "Consumable": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": $node.original.IS_CONSUMABLE === 1 ? "Consumable <i style='padding-left: 40px; color: green' class='fa fa-check'></i>" : "Consumable <i style='padding-left: 40px; color: red' class='fa fa-times-circle'></i>",
                                "action": function (obj) {
                                    if ($node.original.IS_STORABLE === 1 || $node.original.IS_DISPOSABLE === 1) {
                                        alert('Location cant be multiple type')
                                        return;
                                    }
                                    $.get('/operations/warehouse/locations/makeConsumable/' + $node.id)
                                        .done(function (d) {
                                            tree.settings.core.data = d.response;
                                            tree.refresh();
                                        })
                                        .fail(function () {
                                            tree.refresh();
                                        });
                                }
                            },
                            "Disposable": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": $node.original.IS_DISPOSABLE === 1 ? "Disposable <i style='padding-left: 40px; color: green' class='fa fa-check'></i>" : "Disposable <i style='padding-left: 40px; color: red' class='fa fa-times-circle'></i>",
                                "action": function (obj) {
                                    if ($node.original.IS_STORABLE === 1 || $node.original.IS_CONSUMABLE === 1) {
                                        alert('Location cant be multiple type')
                                        return;
                                    }
                                    $.get('/operations/warehouse/locations/makeDisposable/' + $node.id)
                                        .done(function (d) {
                                            tree.settings.core.data = d.response;
                                            tree.refresh();
                                        })
                                        .fail(function () {
                                            tree.refresh();
                                        });
                                }
                            },
                            "Remove": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Remove",
                                "action": function (obj) {
                                    tree.delete_node($node);
                                }
                            }
                        };
                        @else
                            return {};
                        @endpermission
                    }
                }
            }).bind("loaded.jstree", function (event, data) {
                $(this).jstree("open_all");
            }).on('create_node.jstree', function (e, data) {
                $.get('/operations/warehouse/locations/create', {'parents': data.node.parents, 'text': data.node.text})
                    .done(function (d) {
                        data.instance.set_id(data.node, d.response.id);
                    })
                    .fail(function () {
                        data.instance.refresh();
                    });
            }).on('rename_node.jstree', function (e, data) {
                $.get('/operations/warehouse/locations/rename', {'id': data.node.id, 'text': data.text})
                    .fail(function () {
                        data.instance.refresh();
                    });
            }).on('delete_node.jstree', function (e, data) {
                $.post('/operations/warehouse/locations/remove', {'id': data.node.id})
                    .fail(function () {
                        data.instance.refresh();
                    });
            });

        });

    </script>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Location Unit List</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="mx-auto" style="width:500px">

                        <!-- /.card -->

                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">

                                <div id="jstree_demo"></div>

                                <div class="row">
                                    <div class="col" style="text-align: center;margin-top:60px;">
                                        @if(!empty(session('role')) && (session('role') == 4))
                                            <button id="create-hospital-location" type="button" class="btn btn-info">
                                                Create
                                                Location Unit
                                            </button>
                                        @endif
                                    </div>
                                </div>

                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('warehouse_scripts')
    <script>
        $("#create-hospital-location").on("click", function () {
            $('#create-hospital-location').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            $.ajax({
                type: "GET",
                url: "/operations/warehouse/locations/create",
                contentType: "application/json; charset=utf-8",
            }).done(function (data) {
                $('#create-hospital-location').html('Create Storage Unit').attr('disabled', false);
                location.reload();
            }).fail(function (jqXHR, textStatus, errorThrown) {
                $('#create-hospital-location').html('Create Storage Unit').attr('disabled', false);
            });
        });
    </script>
@endsection