@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-users-cog"></i> Phân tài khoản Tenant
                    </h3>
                </div>
                <div class="card-body">
                    <!-- Search User Section -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="user-search">Tìm kiếm người dùng theo email:</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="user-search" placeholder="Nhập email người dùng...">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="button" id="search-btn">
                                            <i class="fas fa-search"></i> Tìm kiếm
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Search Results -->
                    <div id="search-results" class="mb-4" style="display: none;">
                        <h5>Kết quả tìm kiếm:</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Tên</th>
                                        <th>Email</th>
                                        <th>Username</th>
                                        <th>Hành động</th>
                                    </tr>
                                </thead>
                                <tbody id="search-results-body">
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Selected User Info -->
                    <div id="selected-user-info" class="mb-4" style="display: none;">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h5>Thông tin người dùng đã chọn:</h5>
                                <div class="row">
                                    <div class="col-md-3">
                                        <strong>ID:</strong> <span id="selected-user-id"></span>
                                    </div>
                                    <div class="col-md-3">
                                        <strong>Tên:</strong> <span id="selected-user-name"></span>
                                    </div>
                                    <div class="col-md-3">
                                        <strong>Email:</strong> <span id="selected-user-email"></span>
                                    </div>
                                    <div class="col-md-3">
                                        <strong>Username:</strong> <span id="selected-user-username"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tenant Assignment Section -->
                    <div id="tenant-assignment-section" style="display: none;">
                        <div class="row">
                            <div class="col-md-6">
                                <h5>Phân tài khoản vào Tenant:</h5>
                                <div class="form-group">
                                    <label for="tenant-select">Chọn Tenant:</label>
                                    <select class="form-control" 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 class="form-group" id="role-select-group" style="display: none;">
                                    <label for="role-select">Chọn Vai trò:</label>
                                    <select class="form-control" id="role-select">
                                        <option value="">-- Chọn Vai trò --</option>
                                    </select>
                                </div>
                                <button class="btn btn-success" id="assign-btn" disabled>
                                    <i class="fas fa-plus"></i> Phân tài khoản
                                </button>
                            </div>
                            <div class="col-md-6">
                                <h5>Tenant hiện tại của người dùng:</h5>
                                <div id="current-tenants">
                                    <p class="text-muted">Chưa chọn người dùng</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Alert Messages -->
                    <div id="alert-container"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loading-overlay" class="loading-overlay" style="display: none;">
    <div class="spinner-container">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Đang xử lý...</span>
        </div>
        <p class="loading-text">Đang xử lý...</p>
    </div>
</div>

<style>
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner-container {
    text-align: center;
    color: white;
}

.loading-text {
    margin-top: 10px;
    font-size: 16px;
}

.tenant-badge {
    margin: 2px;
}

.tenant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 5px;
    background-color: #f8f9fa;
}
</style>

<script>
$(document).ready(function() {
    let selectedUserId = null;
    @php
        $currentTenant = \App\Helpers\HelperTenant::getCurrentTenantInfo();
        $currentTenantId = $currentTenant ? $currentTenant['id'] : null;
    @endphp
    const currentTenantId = @if($currentTenantId) {{ $currentTenantId }} @else null @endif;

    // 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="text-center">Không tìm thấy người dùng nào.</td></tr>');
        } else {
            users.forEach(function(user) {
                const row = `
                    <tr>
                        <td>${user.id}</td>
                        <td>${user.name || 'N/A'}</td>
                        <td>${user.email}</td>
                        <td>${user.username || 'N/A'}</td>
                        <td>
                            <button class="btn btn-sm btn-primary 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 class="fas fa-check"></i> Chọn
                            </button>
                        </td>
                    </tr>
                `;
                tbody.append(row);
            });
        }

        $('#search-results').show();
    }

    // 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').show();
        $('#tenant-assignment-section').show();
        
        // 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-muted">Người dùng chưa được phân vào tenant nào.</p>');
        } else {
            let html = '';
            tenants.forEach(function(tenant) {
                const isCurrentTenant = currentTenantId && parseInt(tenant.id) === parseInt(currentTenantId);
                const removeButton = isCurrentTenant ? `
                    <button class="btn btn-sm btn-danger remove-tenant-btn" 
                            data-tenant-id="${tenant.id}" 
                            data-tenant-name="${tenant.name}">
                        <i class="fas fa-times"></i> Gỡ
                    </button>
                ` : '';
                
                html += `
                    <div class="tenant-item">
                        <div>
                            <strong>${tenant.name}</strong> (${tenant.code})
                            <br><small class="text-muted">DB: ${tenant.db_name}</small>
                        </div>
                        ${removeButton}
                    </div>
                `;
            });
            container.html(html);
        }
    }

    // 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.hide();
            roleSelect.empty().append('<option value="">-- Chọn Vai trò --</option>');
            $('#assign-btn').prop('disabled', true);
            return;
        }

        // Show role select and load roles
        roleSelectGroup.show();
        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
    $('#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;
        }

        if (!confirm('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?')) {
            return;
        }

        showLoading();

        $.ajax({
            url: '{{ route("tenant-assignment.assign") }}',
            method: 'POST',
            data: {
                user_id: selectedUserId,
                tenant_id: tenantId,
                role_id: roleId,
                _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').hide();
                } 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');
            }
        });
    });

    // Remove user from tenant
    $(document).on('click', '.remove-tenant-btn', function() {
        const tenantId = $(this).data('tenant-id');
        const tenantName = $(this).data('tenant-name');
        
        if (!confirm(`Bạn có chắc chắn muốn gỡ tài khoản khỏi tenant "${tenantName}"?`)) {
            return;
        }

        showLoading();

        $.ajax({
            url: '{{ route("tenant-assignment.remove") }}',
            method: 'POST',
            data: {
                user_id: selectedUserId,
                tenant_id: tenantId,
                _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');
            }
        });
    });

    // Utility functions
    function showAlert(message, type) {
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        `;
        $('#alert-container').html(alertHtml);
        
        // Auto dismiss after 5 seconds
        setTimeout(function() {
            $('.alert').alert('close');
        }, 5000);
    }

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

    function hideLoading() {
        $('#loading-overlay').hide();
    }
});
</script>
@endsection