@extends('layouts-v2.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Phân tài khoản Tenant</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6">Phân tài khoản Tenant</h1>

    <!-- Message Notification V2 -->
    <div class="message-class hidden fixed top-4 right-4 z-50 max-w-md w-full">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-4 flex items-start gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    <!-- Search User Section -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Tìm kiếm người dùng</h3>
        <div class="flex gap-3">
            <div class="flex-1">
                <label for="user-search" class="block text-sm font-medium text-slate-700 mb-1">Tìm kiếm người dùng theo email:</label>
                <input type="text" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" id="user-search" placeholder="Nhập email người dùng...">
            </div>
            <div class="flex items-end">
                <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm flex items-center gap-2" type="button" id="search-btn">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Tìm kiếm
                </button>
            </div>
        </div>
    </div>

    <!-- Search Results -->
    <div id="search-results" class="hidden bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200">
            <h3 class="text-lg font-semibold text-slate-900">Kết quả tìm kiếm:</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Tên</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Username</th>
                        <th class="px-6 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Hành động</th>
                    </tr>
                </thead>
                <tbody id="search-results-body" class="bg-white divide-y divide-slate-200">
                </tbody>
            </table>
        </div>
    </div>

    <!-- Selected User Info -->
    <div id="selected-user-info" class="hidden bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Thông tin người dùng đã chọn:</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <span class="text-sm font-medium text-slate-600">ID:</span>
                <span id="selected-user-id" class="ml-2 text-sm text-slate-900"></span>
            </div>
            <div>
                <span class="text-sm font-medium text-slate-600">Tên:</span>
                <span id="selected-user-name" class="ml-2 text-sm text-slate-900"></span>
            </div>
            <div>
                <span class="text-sm font-medium text-slate-600">Email:</span>
                <span id="selected-user-email" class="ml-2 text-sm text-slate-900"></span>
            </div>
            <div>
                <span class="text-sm font-medium text-slate-600">Username:</span>
                <span id="selected-user-username" class="ml-2 text-sm text-slate-900"></span>
            </div>
        </div>
    </div>

    <!-- Tenant Assignment Section -->
    <div id="tenant-assignment-section" class="hidden grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Assign to Tenant -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <h3 class="text-lg font-semibold text-slate-900 mb-4">Phân tài khoản vào Tenant</h3>
            <div class="space-y-4">
                <div>
                    <label for="tenant-select" class="block text-sm font-medium text-slate-700 mb-1">Chọn Tenant:</label>
                    <select class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" id="tenant-select">
                        <option value="">-- Chọn Tenant --</option>
                        @foreach($tenants as $tenant)
                            <option value="{{ $tenant->id }}" data-db-name="{{ $tenant->db_name }}">
                                {{ $tenant->name }} ({{ $tenant->code }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div id="role-select-group" class="hidden">
                    <label for="role-select" class="block text-sm font-medium text-slate-700 mb-1">Chọn Vai trò:</label>
                    <select class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" id="role-select">
                        <option value="">-- Chọn Vai trò --</option>
                    </select>
                </div>
                <button class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors shadow-sm flex items-center gap-2 disabled:bg-slate-300 disabled:cursor-not-allowed" id="assign-btn" disabled>
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    Phân tài khoản
                </button>
            </div>
        </div>

        <!-- Current Tenants -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <h3 class="text-lg font-semibold text-slate-900 mb-4">Tenant hiện tại của người dùng</h3>
            <div id="current-tenants">
                <p class="text-sm text-slate-500">Chưa chọn người dùng</p>
            </div>
        </div>
    </div>
</div>

<!-- Confirm Modal V2 - Assign -->
<div id="confirmAssignModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <!-- Backdrop -->
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="confirm-assign-modal-backdrop"></div>
    
    <!-- Modal Container -->
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md">
            <!-- Header -->
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                        <i data-lucide="alert-circle" class="w-5 h-5 text-blue-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-900">Xác nhận phân tài khoản</h3>
                </div>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" id="confirm-assign-modal-close">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            
            <!-- Body -->
            <div class="px-6 py-6">
                <p class="text-sm text-slate-600 text-center" id="confirm-assign-modal-message">
                    Bạn có chắc chắn muốn phân tài khoản này vào tenant đã chọn với vai trò đã chọn?
                </p>
            </div>
            
            <!-- Footer -->
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="confirm-assign-modal-cancel">
                    Hủy bỏ
                </button>
                <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors" id="confirm-assign-modal-confirm">
                    <i data-lucide="check" class="w-4 h-4 inline-block mr-1"></i>
                    Xác nhận
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Confirm Modal V2 - Remove -->
<div id="confirmRemoveModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <!-- Backdrop -->
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="confirm-remove-modal-backdrop"></div>
    
    <!-- Modal Container -->
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md">
            <!-- Header -->
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-900">Xác nhận gỡ tài khoản</h3>
                </div>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" id="confirm-remove-modal-close">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            
            <!-- Body -->
            <div class="px-6 py-6">
                <p class="text-sm text-slate-600 text-center" id="confirm-remove-message">
                    Bạn có chắc chắn muốn gỡ tài khoản khỏi tenant này?
                </p>
            </div>
            
            <!-- Footer -->
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="confirm-remove-modal-cancel">
                    Hủy bỏ
                </button>
                <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors" id="confirm-remove-modal-confirm">
                    <i data-lucide="x" class="w-4 h-4 inline-block mr-1"></i>
                    Xác nhận
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loading-overlay" class="hidden fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 flex flex-col items-center gap-3">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <p class="text-sm text-slate-700">Đang xử lý...</p>
    </div>
</div>

<!-- Hidden Inputs -->
<input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">
@php
    $currentTenant = \App\Helpers\HelperTenant::getCurrentTenantInfo();
    $currentTenantId = $currentTenant ? $currentTenant['id'] : null;
@endphp
<input type="hidden" id="currentTenantId" value="{{ $currentTenantId ?? '' }}">

@endsection

@section('scripts')
<script>
    // Notification V2 Functions
    function showNotificationV2(type, message) {
        const $notification = $('.message-class');
        const $content = $('#content_message');
        const $iconSuccess = $('.notification-icon-success');
        const $iconError = $('.notification-icon-error');
        const $notificationBox = $notification.find('.notification-v2');

        // Set message
        $content.text(message);

        // Set icon and border color based on type
        if (type === 'success') {
            $iconSuccess.removeClass('hidden');
            $iconError.addClass('hidden');
            $notificationBox.removeClass('border-red-500').addClass('border-green-500');
        } else {
            $iconError.removeClass('hidden');
            $iconSuccess.addClass('hidden');
            $notificationBox.removeClass('border-green-500').addClass('border-red-500');
        }

        // Show notification
        $notification.removeClass('hidden');

        // Re-init Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        // Auto hide after 5 seconds
        setTimeout(function() {
            hideNotificationV2();
        }, 5000);
    }

    function hideNotificationV2() {
        $('.message-class').addClass('hidden');
    }

    // Close notification on button click
    $(document).on('click', '.notification-close', function() {
        hideNotificationV2();
    });

    // Utility functions
    function showAlert(message, type) {
        if (type === 'success') {
            showNotificationV2('success', message);
        } else if (type === 'danger' || type === 'error') {
            showNotificationV2('error', message);
        } else {
            showNotificationV2('error', message);
        }
    }

    function showLoading() {
        $('#loading-overlay').removeClass('hidden');
    }

    function hideLoading() {
        $('#loading-overlay').addClass('hidden');
    }

    $(document).ready(function() {
        let selectedUserId = null;
        const currentTenantId = $('#currentTenantId').val() ? parseInt($('#currentTenantId').val()) : null;

        // Search users
        $('#search-btn').click(function() {
            const searchTerm = $('#user-search').val().trim();
            if (!searchTerm) {
                showAlert('Vui lòng nhập email để tìm kiếm.', 'warning');
                return;
            }

            showLoading();
            
            $.ajax({
                url: '{{ route("tenant-assignment.search-users") }}',
                method: 'GET',
                data: { search: searchTerm },
                success: function(response) {
                    hideLoading();
                    displaySearchResults(response.users);
                },
                error: function(xhr) {
                    hideLoading();
                    showAlert('Có lỗi xảy ra khi tìm kiếm người dùng.', 'danger');
                }
            });
        });

        // Search on Enter key
        $('#user-search').keypress(function(e) {
            if (e.which === 13) {
                $('#search-btn').click();
            }
        });

        // Display search results
        function displaySearchResults(users) {
            const tbody = $('#search-results-body');
            tbody.empty();

            if (users.length === 0) {
                tbody.append('<tr><td colspan="5" class="px-6 py-4 text-center text-sm text-slate-500">Không tìm thấy người dùng nào.</td></tr>');
            } else {
                users.forEach(function(user) {
                    const row = `
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">${user.id}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">${user.name || 'N/A'}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">${user.email}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">${user.username || 'N/A'}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                <button class="px-3 py-1 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700 transition-colors select-user-btn" 
                                        data-user-id="${user.id}" 
                                        data-user-name="${user.name || 'N/A'}" 
                                        data-user-email="${user.email}" 
                                        data-user-username="${user.username || 'N/A'}">
                                    <i data-lucide="check" class="w-3 h-3 inline-block mr-1"></i>
                                    Chọn
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.append(row);
                });
                
                // Re-init Lucide icons
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
            }

            $('#search-results').removeClass('hidden');
        }

        // Select user
        $(document).on('click', '.select-user-btn', function() {
            const userId = $(this).data('user-id');
            const userName = $(this).data('user-name');
            const userEmail = $(this).data('user-email');
            const userUsername = $(this).data('user-username');

            selectedUserId = userId;
            
            // Update selected user info
            $('#selected-user-id').text(userId);
            $('#selected-user-name').text(userName);
            $('#selected-user-email').text(userEmail);
            $('#selected-user-username').text(userUsername);
            
            $('#selected-user-info').removeClass('hidden');
            $('#tenant-assignment-section').removeClass('hidden');
            
            // Load current tenants for this user
            loadUserTenants(userId);
        });

        // Load user's current tenants
        function loadUserTenants(userId) {
            $.ajax({
                url: '{{ route("tenant-assignment.get-user-tenants") }}',
                method: 'GET',
                data: { user_id: userId },
                success: function(response) {
                    displayCurrentTenants(response.tenants);
                },
                error: function(xhr) {
                    console.error('Error loading user tenants:', xhr);
                }
            });
        }

        // Display current tenants
        function displayCurrentTenants(tenants) {
            const container = $('#current-tenants');
            
            if (tenants.length === 0) {
                container.html('<p class="text-sm text-slate-500">Người dùng chưa được phân vào tenant nào.</p>');
            } else {
                let html = '<div class="space-y-3">';
                tenants.forEach(function(tenant) {
                    const isCurrentTenant = currentTenantId && parseInt(tenant.id) === parseInt(currentTenantId);
                    // const removeButton = isCurrentTenant ? `
                    //     <button class="px-3 py-1 bg-red-600 text-white rounded-lg text-xs font-medium hover:bg-red-700 transition-colors remove-tenant-btn" 
                    //             data-tenant-id="${tenant.id}" 
                    //             data-tenant-name="${tenant.name}">
                    //         <i data-lucide="x" class="w-3 h-3 inline-block mr-1"></i>
                    //         Gỡ
                    //     </button>
                    // ` : '';

                    const removeButton = `
                        <button class="px-3 py-1 bg-red-600 text-white rounded-lg text-xs font-medium hover:bg-red-700 transition-colors remove-tenant-btn" 
                                data-tenant-id="${tenant.id}" 
                                data-tenant-name="${tenant.name}">
                            <i data-lucide="x" class="w-3 h-3 inline-block mr-1"></i>
                            Gỡ
                        </button>
                    `;
                    
                    html += `
                        <div class="flex items-center justify-between p-3 bg-slate-50 border border-slate-200 rounded-lg">
                            <div>
                                <div class="text-sm font-medium text-slate-900">${tenant.name} <span class="text-slate-500">(${tenant.code})</span></div>
                                <div class="text-xs text-slate-500 mt-1">DB: ${tenant.db_name}</div>
                            </div>
                            ${removeButton}
                        </div>
                    `;
                });
                html += '</div>';
                container.html(html);
                
                // Re-init Lucide icons
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
            }
        }

        // Load roles when tenant is selected
        $('#tenant-select').change(function() {
            const tenantId = $(this).val();
            const roleSelect = $('#role-select');
            const roleSelectGroup = $('#role-select-group');
            
            if (tenantId === '') {
                roleSelectGroup.addClass('hidden');
                roleSelect.empty().append('<option value="">-- Chọn Vai trò --</option>');
                $('#assign-btn').prop('disabled', true);
                return;
            }

            // Show role select and load roles
            roleSelectGroup.removeClass('hidden');
            roleSelect.empty().append('<option value="">Đang tải...</option>');
            roleSelect.prop('disabled', true);

            $.ajax({
                url: '{{ route("tenant-assignment.get-tenant-roles") }}',
                method: 'GET',
                data: { tenant_id: tenantId },
                success: function(response) {
                    roleSelect.empty();
                    roleSelect.append('<option value="">-- Chọn Vai trò --</option>');
                    
                    if (response.roles && response.roles.length > 0) {
                        response.roles.forEach(function(role) {
                            roleSelect.append(
                                $('<option></option>')
                                    .attr('value', role.id)
                                    .text(role.name + (role.short_name ? ' (' + role.short_name + ')' : ''))
                            );
                        });
                    } else {
                        roleSelect.append('<option value="">Không có vai trò nào</option>');
                    }
                    
                    roleSelect.prop('disabled', false);
                    updateAssignButtonState();
                },
                error: function(xhr) {
                    roleSelect.empty().append('<option value="">Lỗi khi tải vai trò</option>');
                    roleSelect.prop('disabled', false);
                    console.error('Error loading roles:', xhr);
                }
            });
        });

        // Enable/disable assign button based on tenant and role selection
        $('#role-select').change(function() {
            updateAssignButtonState();
        });

        function updateAssignButtonState() {
            const tenantSelected = $('#tenant-select').val() !== '';
            const roleSelected = $('#role-select').val() !== '';
            $('#assign-btn').prop('disabled', !(tenantSelected && roleSelected));
        }

        // Assign user to tenant
        let pendingAssignAction = null;
        $('#assign-btn').click(function() {
            const tenantId = $('#tenant-select').val();
            const roleId = $('#role-select').val();
            
            if (!selectedUserId || !tenantId || !roleId) {
                showAlert('Vui lòng chọn người dùng, tenant và vai trò.', 'warning');
                return;
            }

            // Store action for later execution (use closure to preserve values)
            const assignTenantId = tenantId;
            const assignRoleId = roleId;
            pendingAssignAction = function() {
                showLoading();

                $.ajax({
                    url: '{{ route("tenant-assignment.assign") }}',
                    method: 'POST',
                    data: {
                        user_id: selectedUserId,
                        tenant_id: assignTenantId,
                        role_id: assignRoleId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        hideLoading();
                        if (response.success) {
                            showAlert(response.message, 'success');
                            // Reload user tenants
                            loadUserTenants(selectedUserId);
                            // Reset tenant and role selection
                            $('#tenant-select').val('').trigger('change');
                            $('#role-select').val('').trigger('change');
                            $('#role-select-group').addClass('hidden');
                        } else {
                            showAlert(response.message, 'danger');
                        }
                    },
                    error: function(xhr) {
                        hideLoading();
                        const response = xhr.responseJSON;
                        const message = response && response.message ? response.message : 'Có lỗi xảy ra khi phân tài khoản.';
                        showAlert(message, 'danger');
                    }
                });
            };

            // Show confirm modal
            $('#confirm-assign-modal-message').text('Bạn có chắc chắn muốn phân tài khoản này vào tenant đã chọn với vai trò đã chọn?');
            $('#confirmAssignModalV2').removeClass('hidden');
        });

        // Confirm Assign Modal handlers
        $('#confirm-assign-modal-close, #confirm-assign-modal-cancel, #confirm-assign-modal-backdrop').on('click', function() {
            $('#confirmAssignModalV2').addClass('hidden');
            pendingAssignAction = null;
        });

        $('#confirm-assign-modal-confirm').on('click', function() {
            $('#confirmAssignModalV2').addClass('hidden');
            if (pendingAssignAction) {
                pendingAssignAction();
                pendingAssignAction = null;
            }
        });

        // Remove user from tenant
        let pendingRemoveAction = null;
        $(document).on('click', '.remove-tenant-btn', function() {
            const tenantId = $(this).data('tenant-id');
            const tenantName = $(this).data('tenant-name');
            
            // Store action for later execution (use closure to preserve values)
            const removeTenantId = tenantId;
            pendingRemoveAction = function() {
                showLoading();

                $.ajax({
                    url: '{{ route("tenant-assignment.remove") }}',
                    method: 'POST',
                    data: {
                        user_id: selectedUserId,
                        tenant_id: removeTenantId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        hideLoading();
                        if (response.success) {
                            showAlert(response.message, 'success');
                            // Reload user tenants
                            loadUserTenants(selectedUserId);
                        } else {
                            showAlert(response.message, 'danger');
                        }
                    },
                    error: function(xhr) {
                        hideLoading();
                        const response = xhr.responseJSON;
                        const message = response && response.message ? response.message : 'Có lỗi xảy ra khi gỡ tài khoản.';
                        showAlert(message, 'danger');
                    }
                });
            };

            // Show confirm modal
            $('#confirm-remove-message').text(`Bạn có chắc chắn muốn gỡ tài khoản khỏi tenant "${tenantName}"?`);
            $('#confirmRemoveModalV2').removeClass('hidden');
        });

        // Confirm Remove Modal handlers
        $('#confirm-remove-modal-close, #confirm-remove-modal-cancel, #confirm-remove-modal-backdrop').on('click', function() {
            $('#confirmRemoveModalV2').addClass('hidden');
            pendingRemoveAction = null;
        });

        $('#confirm-remove-modal-confirm').on('click', function() {
            $('#confirmRemoveModalV2').addClass('hidden');
            if (pendingRemoveAction) {
                pendingRemoveAction();
                pendingRemoveAction = null;
            }
        });
    });
</script>
@endsection