@extends('admin.layout.master')
@section('title')
    {{ $current_route->{'name_' . trans('admin.lang')} }}
@stop
@section('page-breadcrumb')
    @include('admin.layout.breadcrumb_view')
@stop
@section('css')
    <link rel="stylesheet" href="{{ url('default/style.min.css') }}">
    <style>
        .jstree-icon {
            font-family: 'Font Awesome 5 Free';
        }

        .jstree-open>.jstree-anchor>.fa-folder::before {
            margin-left: 2px;
            content: "\f07c";
        }

        #html {
            border: 1px solid #ddd;
            margin-top: 6px;
            padding-top: 5px;
        }
    </style>
@stop
@section('page-content')
    @can('admin.journals.add')
        <a href="{{ route('accounts.add', ['id' => 0]) }}" class="btn btn-default btn-primary mb-3" id="add_btn">
            <i class="fa fa-plus"></i> @Lang('admin.add')
        </a>
    @endcan
    <a id='refresh_btn' class="btn btn-dark btn-primary mb-3">
        <i class="mdi mdi-reload"></i> @Lang('admin.refresh')
    </a>
    <a id='expand-collaps' class="btn btn-dark btn-primary mb-3">
        <i class="far fa-square-plus"></i> <span>@Lang('admin.expand_all')</span>
    </a>
    <div class="table-rep-plugin">
        @include('admin.layout.error')
        <div class="row">
            <div class="col-lg-4 col-sm-12">
                <input type="text" autocomplete="off" id="plugins4_q" value="" class="form-control">
                <div id="html" class="demo" style="direction: {{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }};"></div>
            </div>
            <div class="col-lg-8 col-sm-12 table-responsive">
                <table id="accounts_table" class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>@Lang('admin.name_ar')</th>
                            <th>@Lang('admin.name_en')</th>
                            <th>@Lang('admin.code')</th>
                            <th>@Lang('admin.financial_list')</th>
                            <th>@Lang('admin.actions')</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@stop
@section('modal')
    @include('admin.layout.ajax')
@stop
@section('js')
    <script src="{{ url('jstree.min.js') }}"></script>
    <script src="{{ url('jstree.search.js') }}"></script>
    <script>
        $(document).ready(function() {
            // html demo
             var $tree =$('#html').jstree({
                "plugins": ["search"],
               'search': {
            'ajax': {
                'url': '/admin/accounts/searchAccounts',
                'data': function (str) {
                    return { 'q': str };
                },
                'success': function(response) {
                    console.log("Search response:", response);

                    var tree = $tree.jstree(true);
                    tree.clear_search();
                    tree.deselect_all();
                    tree.close_all();

                    var searchResults = Object.values(response);
                    if (searchResults.length === 0) {
                        console.log("No search results found");
                        return;
                    }

                    // Function to get all parents of a node
                    function getParents(node, allNodes) {
                        var parents = [];
                        var currentNode = node;
                        while (currentNode && currentNode.parent !== '#') {
                            var parentNode = allNodes.find(n => n.id == currentNode.parent);
                            if (parentNode) {
                                parents.unshift(parentNode); // Add to the beginning of the array
                                currentNode = parentNode;
                            } else {
                                break;
                            }
                        }
                        return parents;
                    }

                    // Get all unique nodes that need to be opened, sorted from root to leaves
                    var nodesToOpen = [];
                    searchResults.forEach(function(node) {
                        var parents = getParents(node, searchResults);
                        parents.forEach(function(parent) {
                            if (!nodesToOpen.some(n => n.id === parent.id)) {
                                nodesToOpen.push(parent);
                            }
                        });
                        if (!nodesToOpen.some(n => n.id === node.id)) {
                            nodesToOpen.push(node);
                        }
                    });

                    console.log("Nodes to open:", nodesToOpen);

                    // Function to open nodes sequentially
                    function openNodesSequentially(index) {
                        if (index >= nodesToOpen.length) {
                            console.log("All nodes opened");
                            // Select all search result nodes
                            searchResults.forEach(node => tree.select_node(node.id, true));
                            // Scroll to the first result
                            if (searchResults[0]) {
                                var firstNode = tree.get_node(searchResults[0].id, true);
                                if (firstNode && firstNode.length) {
                                    firstNode[0].scrollIntoView({behavior: "smooth", block: "center"});
                                }
                            }
                            return;
                        }

                        var nodeData = nodesToOpen[index];
                        console.log("Opening node:", nodeData.id);

                        if (!tree.get_node(nodeData.id)) {
                            tree.create_node(nodeData.parent, nodeData);
                        }

                        tree.open_node(nodeData.id, function() {
                            console.log("Node opened:", nodeData.id);
                            setTimeout(() => openNodesSequentially(index + 1), 100);
                        }, function() {
                            console.log("Failed to open node:", nodeData.id);
                            setTimeout(() => openNodesSequentially(index + 1), 100);
                        });
                    }

                    // Start opening nodes
                    openNodesSequentially(0);
                }
            }
        },
                'core': {
                    'data': {
                            'url': function (node) {
                                return node.id === '#' ?
                                    "{{ route('accounts.list') }}" :  // URL to load root nodes
                                    '/admin/accounts/listchild/' + node.id;  // URL to load child nodes
                            },
                            'data': function (node) {
                                return { 'id': node.id };
                            },
                            'dataType': 'json'
                    }
                }
            });
             var to = false;
            $('#plugins4_q').keyup(function() {
                if (to) {
                    clearTimeout(to);
                }
                to = setTimeout(function() {
                    var v = $('#plugins4_q').val();
                    $tree.jstree(true).search(v);
                }, 250);
            });
            $("#html").on('loaded.jstree', function(e, data) {
                if(data){
                var node = data.node;
                $('#html').jstree('toggle_node', node);
                }
            });
           
            $('#html').on('activate_node.jstree', function(e, data) {
                // Get the activated node
                var node = data.node;
                // Open the node
                $('#html').jstree('toggle_node', node);

            });
            var newUrl = '{{ route('accounts.listaccount', ':id') }}'.replace(':id', 0);
            $('#html').on("select_node.jstree", function(e, data) {

                $('#mycontent').text(data.node.text);
                var newUrl = '{{ route('accounts.listaccount', ':id') }}'.replace(':id', data.node.id);
                var addUrl = '{{ route('accounts.add', ':id') }}'.replace(':id', data.node.id);
                $('#add_btn').attr('href', addUrl);
                oTable.ajax.url(newUrl).load();
            });
            $('#refresh_btn').click(function() {
                $('#html').jstree('close_all');
                var addUrl = '{{ route('accounts.add', ':id') }}'.replace(':id', 0);
                $('#add_btn').attr('href', addUrl);
                var newUrl = '{{ route('accounts.listaccount', ':id') }}'.replace(':id', 0);
                oTable.ajax.url(newUrl).load();
            });
            var isTreeOpen = false;
            $('#expand-collaps').click(function() {
                var btn = $(this);
                if (isTreeOpen) {
                    $(".jstree").jstree('close_all');
                    btn.find("span").html("{{ __('admin.expand_all') }}")
                    btn.find("i").removeClass("fa-square-minus").addClass("fa-square-plus");
                } else {
                    $(".jstree").jstree('open_all');
                    btn.find("span").html("{{ __('admin.collaps_all') }}")
                    btn.find("i").removeClass("fa-square-plus").addClass("fa-square-minus");
                }
                isTreeOpen = !isTreeOpen;
            });
            var oTable = $('#accounts_table').DataTable({
                "processing": true,
                "serverSide": true,
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "searching": false,
                "ajax": {
                    url: newUrl
                },
                "order": [
                    [0, 'asc']
                ],
                "columnDefs": [{
                    "targets": "_all",
                    "defaultContent": ""
                }],
                "columns": [{
                        "data": ""
                    },
                    {
                        "data": "account_name_ar"
                    },
                    {
                        "data": "account_name_en"
                    },
                    {
                        "data": "account_code"
                    },
                    {
                        "data": "account_type"
                    },
                    {
                        "data": "actions"
                    }
                ],
                "fnDrawCallback": function(oSettings) {
                    $('.tooltips').tooltip();
                    oTable.column(0).nodes().each(function(cell, i) {
                        cell.innerHTML = (parseInt(oTable.page.info().start)) + i + 1;
                    });
                }
            });

            $('#confirm').on('show.bs.modal', function(e) {
                $("#delete_id").val($(e.relatedTarget).data('href'));
            });
            $(document).on('click', ".delete", function() {
                var id = $("#delete_id").val();
                $.ajax({
                    type: "POST",
                    url: "{{ route('accounts.delete') }}",
                    data: {
                        'id': id,
                        '_token': $('meta[name="csrf-token"]').attr('content')
                    },
                beforeSend:function(){
                    $(".ezdan_loading").show();
                },
                complete:function(){
                    $(".ezdan_loading").hide();
                },
                    success: function(data) {
                        toastr[data.status](data.message);
                        oTable.draw();
                        $('#html').jstree(true).refresh(false, true);
                        $('#html').trigger("loaded.jstree");
                    }
                });
            });
        });
    </script>
@stop