@extends(config('admin_theme.layout', 'admin.modern.layout.master'))
@section('title')
    {{ $current_route->{'name_' . trans('admin.lang')} }}
@stop
@section('page-breadcrumb')
    @include(config('admin_theme.view_prefix', 'admin.modern').'.layout.breadcrumb_view')
@stop
@section('page-content')
    <div class="dashboard__section__overview d-md-flex justify-content-between pt-4">
        <div class="dashboard__section-tile">
            <h3>{{ $current_route->{'name_' . trans('admin.lang')} }}</h3>
        </div>
    </div>
    <div class="vat__report pt-2">
        <div class="account__management__tab-form d-md-flex justify-content-between align-items-center pt-3">
            <div class="form__input__field">
                <label>Search</label>
                <input type="text" id="custom-search"/>
            </div>

            <!-- Action Buttons -->
            <div class="d-flex gap-3 justify-content-end">
                <div class="dashboard__btn-outline">
                    <a href="javascript:void(0)" id="custom-pdf">
                        <img src="/assets/modern/images/pdf-icon.svg" alt="pdf-icon"/>
                        PDF</a>
                </div>
                <div class="dashboard__btn-outline">
                    <a href="#" id="custom-excel">
                        <img src="/assets/modern/images/excel-icon.svg" alt="excel-icon"/>
                        Excel</a>
                </div>
                <div class="dashboard__btn-outline">
                    <a href="#" id="custom-print">
                        <img src="/assets/modern/images/print-icon.svg" alt="print-icon"/>
                        Print</a>
                </div>
            </div>
        </div>
        <div class="tax__return__table pt-4 pt-md-0">
            <div class="table__container">
                <div class="table__responsive">
                    <table id="datatable-buttons">
                        <thead>
                        <tr>
                            <th>@Lang('admin.code')</th>
                            <th>@Lang('admin.name_ar')</th>
                            <th>@Lang('admin.name_en')</th>
                            <th>@Lang('admin.financial_list')</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop
@section('js')
    <script src="{{ asset('assets/lexa/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"
            type="text/javascript"></script>
    <script src="{{ asset('assets/lexa/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"
            type="text/javascript"></script>
    <script src="{{ asset('assets/lexa/libs/jszip/jszip.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('asse…2570 tokens truncated…003e

    <div class="accounts pt-4">
        <!-- Accounts Order Table -->

        @include(config('admin_theme.view_prefix', 'admin.modern').'.layout.error')
        <div class="row">
            <!-- Accounts Tree -->
            <div class="col-lg-6 col-xl-5">
                <div class="account__tree__container">
                    <div class="account__tree__top d-flex justify-content-between align-items-end gap-3">
                        <div class="form__input__field">
                            <label>Search</label>
                            <input type="text" autocomplete="off" id="plugins4_q" value="">
                        </div>
                        <div class="expand__btn">
                            <div class="dashboard__btn-outline">
                                <a id='expand-collaps'>
                                    <img src="/assets/modern/images/expand-icon.svg" alt="expand-icon"/>
                                    @Lang('admin.expand_all')
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="accounts__tree">
                        <div class="accounts__tree__container">
                            <div id="html" class="jstree-default"
                                 style="direction: {{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }};"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-xl-7 pt-4 pt-xl-0">
                <div class="accounts__table">
                    <div class="table__container">
                        <div class="table__responsive">
                            <table id="accounts_table">
                                <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></th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
@section('modal')
    @include(config('admin_theme.view_prefix', 'admin.modern').'.layout.ajax')
@stop
@section('css')
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css"
    />
@stop
@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
    <script>
        var table = null
        $(document).ready(function () {
            // html demo
            var $tree = $('#html').jstree({
                "plugins": ["search"],
                themes: {
                    icons: true,
                },
                '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);
                table.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);
                table.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;
            });
            table = $('#accounts_table').DataTable({
                "dom":
                    "<'row mb-0'<'col-sm-6'f><'col-sm-6 text-end'B>>" +
                    "<'table__responsive't>" +
                    "<'pagination__strech d-flex flex-column flex-md-row justify-content-between align-items-center'<'page__numbers'i><'d-flex mt-3 mt-md-0'p>>",
                "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', orderable: false
                    }
                ],
                "fnDrawCallback": function (oSettings) {
                    $('.tooltips').tooltip();
                    table.column(0).nodes().each(function (cell, i) {
                        cell.innerHTML = (parseInt(table.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);
                        table.draw();
                        $('#html').jstree(true).refresh(false, true);
                        $('#html').trigger("loaded.jstree");
                    }
                });
            });
            $(document).on('change', "#parent_account_id", function () {
                var id = $("#parent_account_id").val();
                $.ajax({
                    type: "POST",
                    url: "{{ route('accounts.code') }}",
                    data: {'id': id, '_token': $('meta[name="csrf-token"]').attr('content')},
                    beforeSend: function () {
                        $(".ezdan_loading").show();
                    },
                    complete: function () {
                        $(".ezdan_loading").hide();
                    },
                    success: function (data) {
                        $('#account_code').val(data.account.code);
                        $('#account_type').val(data.account.account_type);
                    }
                });
                if ($('#parent_account_id').val() != 0) {
                    $('#account_type').prop("disabled", true);
                } else {
                    $('#account_type').prop("disabled", false);
                }
            });
            $('#parent_account_id').trigger('change');
        });
    </script>
    @include(config('admin_theme.view_prefix', 'admin.modern').'.layout.general.addModal')

@stop