@extends('layout.app')
@section('title', 'Role Info')
@section('style')

@endsection
@section('main')

    <div class="py-4">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item"><a href="#">
                        <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                            </path>
                        </svg>
                    </a></li>
                <li class="breadcrumb-item"><a href="#">User Setup</a></li>
                <li class="breadcrumb-item active" aria-current="page">Role</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between w-100 flex-wrap">
            <div class="mb-3 mb-lg-0">
                <h1 class="h4">Role Information's</h1>
                <p class="mb-0">Find All types of Role and Roles details information</p>
            </div>
            <div>
                <a href="{{url('roleinfo/create')}}" class="btn btn-outline-gray-600 d-inline-flex align-items-center">
                    <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Add New Role
                </a>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-2">
    </div>

    <div class="card">
        <div class="table-responsive py-4">
            <table class="table table-flush" id="user-datatable">
                <thead class="thead-light">
                <tr>
                    <th>SL</th>
                    <th>Name</th>
                    <th>Guard Name</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody id="table-body">
                <!-- Data will be populated here -->
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="addRoleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-dialog-centered modal-add-new-role">
            <div class="modal-content p-3 p-md-5">
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <h3 class="role-title">Add New Role</h3>
                        <p>Set role permissionsssss</p>
                    </div>
                    <!-- Add role form -->
                    <form id="addRoleForm" class="row g-3" onsubmit="return false">

                    </form>
                    <!--/ Add role form -->
                </div>
            </div>
        </div>
    </div>
    <!-- Permission Modal -->
    <div class="modal fade" id="permissionModal" tabindex="-1" aria-labelledby="permissionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="permissionForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="permissionModalLabel">Assign Permissions</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="role_id" name="role_id">
                        <input type="text" id="addNamem" name="name" class="form-control" placeholder="Enter a role name"
                               tabindex="-1" readonly />
                        <div class="row" id="permissionsList">
                            <!-- Permissions checkboxes will be loaded here -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save Permissions</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="assignMenuToRole" tabindex="-1" aria-labelledby="menuModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <form id="assignMenuForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title role-title" id="menuModalLabel">Assign Menu To Role</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="addIdm" name="role_id">
                        <input type="text" id="addNameM" class="form-control mb-3" readonly>
                        <div id="menus-list"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save Menus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/js/simple-datatables.js') }}"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: '/get/user/byrole',
                method: 'GET',
                success: function(response) {
                    $('.row.g-3').empty();

                    response.forEach(function(roleInfo) {
                        var userAvatars = '';
                        var userCount = roleInfo.user_count;

                        roleInfo.users.forEach(function(user) {
                            var avatarUrl = user.avatar_url;
                            if (roleInfo.role_name === "Bkash") {
                                avatarUrl = "assets/img/avatars/bkash.png";
                            } else if (roleInfo.role_name === "Biller") {
                                avatarUrl = "assets/img/avatars/5.png";
                            }
                            userAvatars += `
                                <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
                                    title="${user.name}" class="avatar avatar-sm pull-up">
                                    <img class="rounded-circle" src="${avatarUrl}" alt="Avatar">
                                </li>`;
                        });

                        var roleCard = `
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-2">
                                            <h6 class="fw-normal">Total ${userCount} users</h6>
                                            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
                                                ${userAvatars}
                                            </ul>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-end">
                                            <div class="role-heading">
                                                <h4 class="mb-1">${roleInfo.role_name}</h4>
                                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal"
                                                    class="role-edit-modal"><small>Edit Role</small></a>
                                            </div>
                                            <a href="javascript:void(0);" class="text-muted"><i class="bx bx-copy"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

                        $('.row.g-3').append(roleCard);
                    });

                },
                error: function(xhr, status, error) {
                    console.error('Error fetching role data:', error);
                }
            });
        });
    </script>
    <script>
        function initializeDataTable() {
            var dataTableEl = document.getElementById('user-datatable');
            if (dataTableEl) {
                const dataTable = new simpleDatatables.DataTable(dataTableEl);
            }
        }

        function loadTableData() {
            $.ajax({
                url: '{{ route('roleinfo.data') }}',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    $('#table-body').empty();
                    $.each(data, function (index, roles) {
                        var row = $('<tr>');
                        row.append('<td>' + (index + 1) + '</td>');
                        row.append('<td>' + roles.name + '</td>');
                        row.append('<td>' + roles.guard_name + '</td>');
                        row.append(`
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-secondary">Action</button>
                                            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                                <svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                                </svg>
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><button type="button" class=" dropdown-item btn btn-outline-info btn-sm permission-button" data-id="${roles.id}" data-name="${roles.name}"><i class="bi bi-person-plus-fill"></i>Permission</button></li>
                                                <li><button type="button" class=" dropdown-item btn btn-outline-info btn-sm menu-button" data-id="${roles.id}" data-name="${roles.name}"><i class="bi bi-person-plus-fill"></i>Menu</button></li>
                                                <li><button type="button" class="dropdown-item" onclick="viewUser('${roles.id}')">View</button></li>
                                                <li><a class="dropdown-item" href="#" onclick="editUser('${roles.id}')">Edit</a></li>
                                                <li><a class="dropdown-item" href="#" onclick="deleteUser('${roles.id}')">Delete</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                `);
                        $('#table-body').append(row);
                    });
                    initializeDataTable();
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        loadTableData();

        function viewUser(userId) {
            console.log("View user with ID:", userId);
        }

        function editUser(userId) {
            console.log("Edit user with ID:", userId);
            var url = "{{ route('roleinfo.edit', ':id') }}";
            var fullUrl = url.replace(':id', userId);
            window.location.href = fullUrl;
        }

        function deleteUser(userId) {
            console.log("Edit user with ID:", userId);

            var id = userId;
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    var csrf_token = $('meta[name="csrf-token"]').attr('content');

                    $.ajax({
                        url: "{{ url('roleinfo') }}" + '/' + id,
                        type: "POST",
                        data: {'_method': 'DELETE',
                            '_token': "{{ csrf_token() }}"},
                        success: function (response) {
                            if (response.statusCode == 200) {
                                loadTableData();
                                Swal.fire({
                                    title: "Deleted!",
                                    text: "Your file has been deleted.",
                                    icon: "success"
                                });
                            } else {
                                Swal.fire("Error occured !!");
                            }
                        },
                        error: function (xhr) {
                            alert('Delete failed: ' + xhr.responseText);
                        }
                    });

                }
            });
        }


        $(document).on('click', '.permission-button', function () {
            const userId = $(this).data('id');
            const userName = $(this).data('name');

            $('#role_id').val(userId);
            $('#addNamem').val(userName);

            $.ajax({
                url: `/users/${userId}/permissions`,
                method: 'GET',
                success: function (data) {
                    // Group permissions by action (view, create, update, delete, other)
                    const grouped = {
                        view: [],
                        create: [],
                        update: [],
                        delete: [],
                        others: [],
                    };

                    data.permissions.forEach(permission => {
                        const name = permission.name.toLowerCase();
                        if (name.startsWith('view_')) {
                            grouped.view.push(permission);
                        } else if (name.startsWith('create_')) {
                            grouped.create.push(permission);
                        } else if (name.startsWith('update_')) {
                            grouped.update.push(permission);
                        } else if (name.startsWith('delete_')) {
                            grouped.delete.push(permission);
                        } else {
                            grouped.others.push(permission);
                        }
                    });

                    // Build HTML
                    let permissionsHtml = `
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="selectAllPermissions">
                            <label class="form-check-label fw-bold text-primary" for="selectAllPermissions">Select All Permissions</label>
                        </div>
                        <input type="text" id="permissionSearch" class="form-control mb-3" placeholder="Search permissions...">
                        <button id="resetPermissions" class="btn btn-warning mb-3">Reset Selection</button>
                        <p class="selected-count-permission text-success"></p>
                    `;

                    // Helper to build each group section
                    function renderGroup(title, permissions) {
                        if (permissions.length === 0) return '';
                        let html = `<h5 class="text-secondary mt-3">${title}</h5><div class="row">`;
                        permissions.forEach(permission => {
                            const isChecked = data.user_permissions.includes(permission.name) ? 'checked' : '';
                            html += `
                                <div class="col-md-4 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input permission-checkbox" type="checkbox" name="permissions[]" value="${permission.id}" id="perm-${permission.name}" ${isChecked}>
                                        <label class="form-check-label" for="perm-${permission.name}">${permission.name}</label>
                                    </div>
                                </div>
                            `;
                        });
                        html += `</div>`;
                        return html;
                    }

                    permissionsHtml += renderGroup('View Permissions', grouped.view);
                    permissionsHtml += renderGroup('Create Permissions', grouped.create);
                    permissionsHtml += renderGroup('Update Permissions', grouped.update);
                    permissionsHtml += renderGroup('Delete Permissions', grouped.delete);
                    permissionsHtml += renderGroup('Other Permissions', grouped.others);

                    $('#permissionsList').html(permissionsHtml);
                    $('#permissionModal').modal('show');

                    // === Events ===
                    $('#selectAllPermissions').on('change', function () {
                        $('.permission-checkbox').prop('checked', $(this).prop('checked'));
                        updateSelectedPermissionCount();
                    });

                    $(document).on('change', '.permission-checkbox', function () {
                        $('#selectAllPermissions').prop(
                            'checked',
                            $('.permission-checkbox:checked').length === $('.permission-checkbox').length
                        );
                        updateSelectedPermissionCount();
                    });

                    $('#permissionSearch').on('keyup', function () {
                        const val = $(this).val().toLowerCase();
                        $('.permission-checkbox').each(function () {
                            const label = $(this).next('label').text().toLowerCase();
                            $(this).closest('.col-md-4').toggle(label.includes(val));
                        });
                    });

                    $('#resetPermissions').on('click', function () {
                        $('.permission-checkbox').prop('checked', false);
                        $('#selectAllPermissions').prop('checked', false);
                        updateSelectedPermissionCount();
                    });

                    function updateSelectedPermissionCount() {
                        $('.selected-count-permission').text(`${$('.permission-checkbox:checked').length} permissions selected`);
                    }

                    updateSelectedPermissionCount();
                },
                error: function (xhr) {
                    console.error('Failed to fetch permissions:', xhr);
                    alert('Failed to load permissions');
                }
            });
        });


        $('#permissionForm').submit(function (e) {
            e.preventDefault();

            const userId = $('#user_id').val();
            const permissions = $(this).serialize();
            console.log(permissions);

            $.ajax({
                url: `/users/${userId}/permissions`,
                method: 'POST',
                data: permissions,
                success: function (data) {
                    if (data.statusCode === 200) {
                        Swal.fire({
                            title: "Success!",
                            text: data.statusMsg,
                            icon: "success"
                        });
                        $("#permissionForm")[0].reset();
                        $('#permissionModal').modal('hide');
                    } else if (data.statusCode === 204) {
                        showErrors(data.errors); // You need to define this function
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Error!",
                            text: data.statusMsg
                        });
                    }
                },
                error: function (data) {
                    Swal.fire({
                        icon: "error",
                        title: "Oops!",
                        text: "Internal Server Error"
                    });
                }
            });
        });



        $(document).on('click', '.menu-button', function () {
            const roleId = $(this).data('id');
            const roleName = $(this).data('name');


            $.ajax({
                url: `/users/${roleId}/menu`,
                method: 'GET',
                success: function (data) {
                    $('#assignMenuForm')[0].reset();
                    $('.role-title').text('Assign Menu To Role');
                    $('#assignMenuToRole').modal('show');

                    $('#addIdm').val(data.role.id);
                    $('#addNameM').val(data.role.name);

                    function buildMenuTree(menuList) {
                        let menusHtml = '<div class="row">';
                        $.each(menuList, function (index, menu) {
                            menusHtml += `
                        <div class="col-md-6 mb-2">
                            <div class="form-check">
                                <input class="form-check-input menu-checkbox" type="checkbox" name="menu_id[]" value="${menu.id}" id="menu_${menu.id}">
                                <label class="form-check-label fw-bold" for="menu_${menu.id}">${menu.title}</label>
                            </div>`;
                            if (menu.submenu.length > 0) {
                                menusHtml += `<div class="ms-4 border-start ps-3 mt-2 submenu-container">${buildMenuTree(menu.submenu)}</div>`;
                            }
                            menusHtml += `</div>`;
                        });
                        menusHtml += '</div>';
                        return menusHtml;
                    }

                    $('#menus-list').html(buildMenuTree(data.menu));

                    // Top tools
                    $('#menus-list').prepend(`
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="selectAllMenus">
                    <label class="form-check-label fw-bold text-primary" for="selectAllMenus">Select All Menus</label>
                </div>
                <input type="text" id="menuSearch" class="form-control mb-3" placeholder="Search menu...">
                <button id="resetMenus" class="btn btn-warning mb-3">Reset Selection</button>
                <p class="selected-count text-success"></p>
            `);

                    // Pre-check menus
                    markExistingMenus(data.menu);

                    function markExistingMenus(menus) {
                        menus.forEach(menu => {
                            if (menu.menu_exists) {
                                $(`.menu-checkbox[value="${menu.id}"]`).prop('checked', true);
                            }
                            if (menu.submenu.length > 0) {
                                markExistingMenus(menu.submenu);
                            }
                        });
                    }

                    // Select All Handler
                    $('#selectAllMenus').on('change', function () {
                        $('.menu-checkbox').prop('checked', $(this).prop('checked'));
                        updateSelectedCount();
                    });

                    // Menu checkbox handler
                    $(document).on('change', '.menu-checkbox', function () {
                        const isChecked = $(this).is(':checked');

                        // ✅ If checked, mark all parents as checked
                        if (isChecked) {
                            $(this).parents('.submenu-container').each(function () {
                                $(this).siblings('.form-check').find('.menu-checkbox').prop('checked', true);
                            });
                        }

                        // ❌ If unchecked, uncheck all children
                        if (!isChecked) {
                            $(this).closest('.col-md-6').find('.submenu-container .menu-checkbox').prop('checked', false);
                        }

                        // Update "Select All" status
                        $('#selectAllMenus').prop(
                            'checked',
                            $('.menu-checkbox:checked').length === $('.menu-checkbox').length
                        );

                        updateSelectedCount();
                    });

                    // Search
                    $('#menuSearch').on('keyup', function () {
                        const val = $(this).val().toLowerCase();
                        $('.menu-checkbox').each(function () {
                            const label = $(this).next('label').text().toLowerCase();
                            $(this).closest('.col-md-6').toggle(label.includes(val));
                        });
                    });

                    // Reset
                    $('#resetMenus').on('click', function () {
                        $('.menu-checkbox').prop('checked', false);
                        $('#selectAllMenus').prop('checked', false);
                        updateSelectedCount();
                    });

                    function updateSelectedCount() {
                        $('.selected-count').text(`${$('.menu-checkbox:checked').length} menus selected`);
                    }

                    updateSelectedCount();
                },
                error: function () {
                    Swal.fire('Error', 'Could not load menus.', 'error');
                }
            });
        });



        function renderMenuTree(menus, level = 0) {
            let html = '';
            menus.forEach(menu => {
                const indent = '&nbsp;'.repeat(level * 4);
                const checked = menu.menu_exists ? 'checked' : '';

                html += `
            <div class="col-md-4">
                <div class="form-check">
                    ${indent}<input class="form-check-input" type="checkbox" name="menu_id[]" value="${menu.id}" id="menu-${menu.id}" ${checked}>
                    <label class="form-check-label" for="menu-${menu.id}">${menu.title}</label>
                </div>
            </div>
        `;

                if (menu.submenu && menu.submenu.length > 0) {
                    html += renderMenuTree(menu.submenu, level + 1);
                }
            });
            return html;
        }


        $('#assignMenuForm').submit(function (e) {
            e.preventDefault();
            const formData = $(this).serialize();

            $.ajax({
                url: '/roles/give-menu',
                method: 'POST',
                data: formData,
                success: function (res) {
                    if (res.statusCode === 200) {
                        Swal.fire('Success!', res.statusMsg, 'success');
                        $('#assignMenuToRole').modal('hide');
                        $('#assignMenuForm')[0].reset();
                    } else {
                        Swal.fire('Error!', res.statusMsg || 'Something went wrong.', 'error');
                    }
                },
                error: function () {
                    Swal.fire('Error!', 'Internal server error.', 'error');
                }
            });
        });


    </script>
@endsection