$(document).ready(function () {
    ajaxPermissionsList();

    $('#search-input').on('keyup', function () {
        var searchText = $(this).val().toLowerCase();

        if (searchText === '') {
            $('#tree li').show();
            $('#tree li ul').hide();
        } else {
            $('#tree li').each(function () {
                var itemText = $(this).find('.node-label').text().toLowerCase();
                if (itemText.includes(searchText)) {
                    $(this).show();
                    $(this).parents('ul').show();
                } else {
                    $(this).hide();
                }
            });
        }
    });

    $(document).on('click', '.togglePermission > span', function () {
        $(this).siblings('ul').toggle();
    });
});

$('#MainModal').on('show.bs.modal', function () {
    $(document).off('click', '#tree .togglePermission').on('click', '#tree .togglePermission', function (e) {
        e.stopPropagation();
        let parentLi = $(this).closest('li');
        parentLi.children('ul').slideToggle();
        $(this).toggleClass('open');
    });

    $(document).off('change', '#tree .node-checkbox').on('change', '#tree .node-checkbox', function () {
        let isChecked = $(this).is(':checked');

        $(this).closest('li').find('.node-checkbox').prop('checked', isChecked).prop('indeterminate', false);

        updateParentCheckbox($(this));
    });

    $(document).off('input', '#search-input').on('input', '#search-input', function () {
        let searchText = $(this).val().toLowerCase();

        if (searchText !== "") {
            $('#tree .node-label').each(function () {
                let label = $(this).text().toLowerCase();
                let parentLi = $(this).closest('li');

                if (label.includes(searchText)) {
                    $(this).addClass('highlight');
                    parentLi.parents('ul').show();
                    parentLi.parents('li').children('.li-tree').children('.togglePermission').addClass('open');
                } else {
                    $(this).removeClass('highlight');
                }
            });
        }

        $('#tree li').each(function () {
            if ($(this).find('.highlight').length === 0) {
                $(this).children('ul').hide();
                $(this).children('.li-tree').children('.togglePermission').removeClass('open');
            }
        });
    });
});

function updateParentCheckbox(childCheckbox) {
    let parentLi = childCheckbox.closest('li').parent().closest('li');

    while (parentLi.length) {
        let parentCheckbox = parentLi.find('> .li-tree > div > .node-checkbox');

        let allChildren = parentLi.find('li .node-checkbox');
        let checkedChildren = parentLi.find('li .node-checkbox:checked');

        let allChecked = allChildren.length === checkedChildren.length;
        let anyChecked = checkedChildren.length > 0;

        parentCheckbox.prop('checked', allChecked);
        parentCheckbox.prop('indeterminate', !allChecked && anyChecked);

        parentLi = parentLi.parent().closest('li');
    }
}

function ajaxPermissionsList() {
    var permissionListHtml = '';

    $.ajax({
        url: permissionListAjax,
        type: 'GET',
        success: function (response) {
            if (response.success) {
                var listPermission = response.data;

                if (listPermission.length > 0) {
                    permissionListHtml += `<ul>`;

                    listPermission.forEach(function (sub1Item) {
                        permissionListHtml += `<li>
                                <div class="li-tree-main li-tree">
                                    <div>
                                        <input value="${sub1Item.code}" name="Permissions" type="checkbox" class="node-checkbox form-check-input">
                                            <span class="node-label">${sub1Item.title}</span>
                                    </div>`;

                        if (sub1Item.children.length > 0) {
                            permissionListHtml += `<span class="togglePermission">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M15 18L9 12L15 6" stroke-width="2" stroke-linecap="round" />
                                            </svg>
                                        </span>`;
                        }
                        permissionListHtml += `</div>`;

                        if (sub1Item.children.length > 0) {
                            permissionListHtml += `<ul>`;

                            sub1Item.children.forEach(function (sub2Item) {
                                permissionListHtml += `<li>
                                                <div class="li-tree li-tree-main-second">
                                                    <div>
                                                        <input value="${sub2Item.code}" name="Permissions" type="checkbox" class="node-checkbox form-check-input">
                                                            <span class="node-label">${sub2Item.title}</span>
                                                    </div>`;
                                if (sub2Item.children.length > 0) {
                                    permissionListHtml += `<span class="togglePermission">
                                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M15 18L9 12L15 6" stroke-width="2" stroke-linecap="round" />
                                                            </svg>
                                                        </span>`;
                                }
                                permissionListHtml += `</div>`;

                                if (sub2Item.children.length > 0) {
                                    permissionListHtml += `<ul>`;

                                    sub2Item.children.forEach(function (sub3Item) {
                                        permissionListHtml += `<li>
                                                                <div class="li-tree">
                                                                    <div>
                                                                        <input value="${sub3Item.code}" name="Permissions" type="checkbox" class="node-checkbox form-check-input">
                                                                            <span class="node-label">${sub3Item.title}</span>
                                                                    </div>`;
                                        if (sub3Item.children.length > 0) {
                                            permissionListHtml += `<span class="togglePermission">
                                                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                                <path d="M15 18L9 12L15 6" stroke-width="2" stroke-linecap="round" />
                                                                            </svg>
                                                                        </span>`;
                                        }
                                        permissionListHtml += `</div>`;

                                        if (sub3Item.children.length > 0) {
                                            permissionListHtml += `<ul>`;

                                            sub3Item.children.forEach(function (sub4Item) {
                                                permissionListHtml += `<li>
                                                                                <div class="li-tree">
                                                                                    <div>
                                                                                        <input value="${sub4Item.code}" name="Permissions" type="checkbox" class="node-checkbox form-check-input">
                                                                                            <span class="node-label">${sub4Item.title}</span>
                                                                                    </div>
                                                                                </div>
                                                                            </li>`;
                                            });
                                            permissionListHtml += `</ul>`;
                                        }
                                        permissionListHtml += `</li>`;
                                    });
                                    permissionListHtml += `</ul>`;
                                }
                                permissionListHtml += `</li>`;
                            });
                            permissionListHtml += `</ul>`;
                        }
                        permissionListHtml += `</li>`;
                    });
                    permissionListHtml += `</ul>`;
                }

                $('#tree').html(permissionListHtml);

                initializeCheckboxStates();
            } else {
                $('.alert-msg').show();
                $('.alert-msg p').text(response.message);
                setTimeout(function () {
                    $('.alert-msg').hide();
                    $('.alert-msg p').text('');
                }, 3500);
            }
        },
        error: function (xhr, status, error) {
            console.error(xhr.responseText);
        }
    });
}

function initializeCheckboxStates() {
    $('#tree .node-checkbox').each(function () {
        let checkbox = $(this);
        let permissionCode = Number(checkbox.val());

        checkbox.prop('checked', itemsPermission.includes(permissionCode));

    });

    $('#tree .node-checkbox').each(function () {
        updateParentCheckbox($(this));
    });
}

function updateParentCheckbox(childCheckbox) {
    let parentLi = childCheckbox.closest('li').parent().closest('li');

    while (parentLi.length) {
        let parentCheckbox = parentLi.find('> .li-tree > div > .node-checkbox');
        let childCheckboxes = parentLi.find('ul .node-checkbox');
        let checkedChildren = childCheckboxes.filter(':checked');

        let allChecked = childCheckboxes.length === checkedChildren.length;
        let anyChecked = checkedChildren.length > 0;

        parentCheckbox.prop('checked', allChecked);
        parentCheckbox.prop('indeterminate', !allChecked && anyChecked);

        parentLi = parentLi.parent().closest('li');
    }
}

$('#createData').on('click', SaveDataAjax);
function SaveDataAjax() {
    var loading = $('#createData .spinner-loading');

    var Id = $('#Id ');
    var Title = $('#Title ');

    if (!Title.val()) {
        Title.addClass('errored');
        $('.alert-msg').show();
        $('.alert-msg p').text('لطفا عنوان را وارد نمائید');
        setTimeout(function () {
            $('.alert-msg').hide();
            $('.alert-msg p').text('');
            Title.removeClass('errored');
        }, 3500);
        return;
    }

    var selectedPermissions = [];
    $('input[name="Permissions"]').each(function () {
        if (this.checked || this.indeterminate) {
            selectedPermissions.push($(this).val());
        }
    });

    if (selectedPermissions.length === 0) {
        $('.alert-msg').show();
        $('.alert-msg p').text('لطفا دسترسی‌ها را انتخاب نمائید');
        setTimeout(function () {
            $('.alert-msg').hide();
            $('.alert-msg p').text('');
        }, 3500);
        return;
    }

    //var data = $('#create-form-role').serialize();

    var data = {
        Id: Id.val(),
        Title: Title.val(),
        Permissions: selectedPermissions
    };
    
    $.ajax({
        async: false,
        dataType: 'json',
        type: 'POST',
        url: saveEditRoleSubAccountAjax,
        headers: { "RequestVerificationToken": antiForgeryToken },
        data: data,
        success: function (response) {
            if (response.success) {
                loading.show();
                $('.alert-success-msg').show();
                $('.alert-success-msg p').text(response.message);
                setTimeout(function () {
                    $('.alert-success-msg').hide();
                    $('.alert-success-msg p').text('');
                    loading.hide();
                    $('#MainModal').modal('hide');
                }, 2000);

                LoadRolesAndAccountsList();
            } else {
                $('.alert-msg').show();
                $('.alert-msg p').text(response.message);
                setTimeout(function () {
                    $('.alert-msg').hide();
                    $('.alert-msg p').text('');
                    loading.hide();
                }, 3500);
            }
        },
        error: function (err) {
            loading.hide();
            console.log(err);
        }
    });
}