@extends('admin.master')

@section('pageCsCode')
    <link href="{{URL('admin-themes/assets/plugins/custom/jstree/jstree.bundle.css')}}" rel="stylesheet"
          type="text/css"/>

    <style>
        #map {
            height: 400px;
            /* The height is 400 pixels */
            width: 100%;
            /* The width is the width of the web page */
        }
    </style>
@stop

@section('pageContent')

    <div class="d-flex flex-column flex-column-fluid">

        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                        {{__("admin.system.lookups.Lookups")}}
                    </h1>
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{route('admin')}}"
                               class="text-muted text-hover-primary">{{__("admin.users.Home")}}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">{{__("admin.users.Users")}}</li>
                    </ul>
                </div>
                <div class="d-flex align-items-center gap-2 gap-lg-3">
                    <div class="d-flex ">
                        <a href="{{route('translations.publish')}}" class="btn btn-default btn-bold">
                            <em class="fas fa-upload"></em> {{__("admin.system.translations.Publish translations")}}
                        </a>
                    </div>

                </div>
            </div>

        </div>

        <div class="row app-container container-xxl">
            <div class="col-lg-3">
                <div class="card shadow-sm app-content d-flex h-100 flex-column">
                    <div class="card-body">
                        <div class="kt-portlet__body">
                            <div id="kt_tree_lookup" class="tree-demo">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9">
                <div id="formData" class="col-lg-12">

                </div>
            </div>
        </div>
    </div>

@stop

@section('pageJsCode')

    <script type="text/javascript">
        "use strict";
        jQuery(document).ready(function() {
            $("#kt_tree_lookup").jstree({
                "core" : {
                    'data' : {
                        'url' : function (node) {
                            return '{{route('jsonLookup')}}';
                        },
                        'data' : function (node) {
                            return { 'parent' : node.id };
                        }
                    },
                    "themes" : {
                        "responsive": false
                    },
                    "check_callback" : true,
                },
                "contextmenu":{
                    "items": function($node) {
                        var tree = $("#tree").jstree(true);
                        return {
                            "Create": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "{{__("admin.system.lookups.Create new item")}}",
                                "action": function (obj) {
                                    ajaxSubmit('{{route('lookups.create')}}?parent_id=' + $node.id,'formData','GET')
                                }
                            }
                        };
                    }
                },
                "state" : { "key" : "{{Request::url()}}" },
                "themes" : {
                    "responsive": true
                },
                "plugins" : ["wholerow","state","contextmenu"]
            });
        });

        $('#kt_tree_lookup').on("select_node.jstree", function (e, data) {
            ajaxSubmit('{{route('lookups.index')}}/' + data.node.id,'formData','GET')
        });
    </script>

@stop