@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">{{ __('User Management') }}</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="exportBtn">{{ __('Export') }}</button>
                        <div class="dropdown">
                            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" id="bulkActionsBtn" disabled data-bs-toggle="dropdown" aria-expanded="false">
                                {{ __('Bulk Actions') }}
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="bulkActionsBtn">
                                <li><a class="dropdown-item" href="#" id="bulkActivate">{{ __('Activate Selected') }}</a></li>
                                <li><a class="dropdown-item" href="#" id="bulkDeactivate">{{ __('Deactivate Selected') }}</a></li>
                                <li><a class="dropdown-item" href="#" id="bulkAssignRole">{{ __('Assign Role') }}</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item text-danger" href="#" id="bulkDelete">{{ __('Delete Selected') }}</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-info" id="undoBtn" style="display: none;">
                            <i class="fas fa-undo"></i> {{ __('Undo Last Delete') }}
                        </button>
                    </div>
                    <a href="{{ route('admin.manage.users.create') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus"></i> {{ __('Add New User') }}
                    </a>
                </div>
            </div>

            <!-- Progress Bar for Bulk Operations -->
            <div class="progress mb-3" id="bulkProgress" style="display: none;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" id="bulkProgressBar"></div>
            </div>

            <!-- Alert for Bulk Operations -->
            <div class="alert alert-dismissible fade" id="bulkAlert" style="display: none;" role="alert">
                <span id="bulkAlertMessage"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>

            <!-- Statistics Cards -->
            <div class="row mb-4">
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                        {{ __('Total Users') }}
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $users->total() }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-users fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-success shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                        {{ __('Active Users') }}
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $users->where('is_active', 1)->count() }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-user-check fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-info shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                        {{ __('New This Month') }}
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $users->where('created_at', '>=', now()->startOfMonth())->count() }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-calendar-plus fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-warning shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                        {{ __('Online Now') }}
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $users->where('last_activity', '>=', now()->subMinutes(15))->count() }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-circle fa-2x text-success"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Filters & Search') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <input type="text" id="searchInput" class="form-control" placeholder="{{ __('Search users...') }}">
                        </div>
                        <div class="col-md-2">
                            <select id="roleFilter" class="form-select">
                                <option value="">{{ __('All Roles') }}</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select id="statusFilter" class="form-select">
                                <option value="">{{ __('All Status') }}</option>
                                <option value="active">{{ __('Active') }}</option>
                                <option value="inactive">{{ __('Inactive') }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select id="languageFilter" class="form-select">
                                <option value="">{{ __('All Languages') }}</option>
                                <option value="en">{{ __('English') }}</option>
                                <option value="ar">{{ __('Arabic') }}</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-primary" id="applyFiltersBtn">{{ __('Apply Filters') }}</button>
                            <button type="button" class="btn btn-secondary" id="clearFiltersBtn">{{ __('Clear') }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Users Table -->
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Users') }}</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="usersTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="selectAllCheckbox"></th>
                                    <th>{{ __('Avatar') }}</th>
                                    <th>{{ __('Full Name') }}</th>
                                    <th>{{ __('Email') }}</th>
                                    <th>{{ __('Username') }}</th>
                                    <th>{{ __('Role') }}</th>
                                    <th>{{ __('Language') }}</th>
                                    <th>{{ __('Status') }}</th>
                                    <th>{{ __('Registered') }}</th>
                                    <th>{{ __('Last Login') }}</th>
                                    <th>{{ __('Last Activity') }}</th>
                                    <th>{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($users as $user)
                                <tr>
                                    <td><input type="checkbox" class="userCheckbox" value="{{ $user->id }}"></td>
                                    <td>
                                        @if($user->avatar)
                                            <img src="{{ asset($user->avatar) }}" alt="{{ __('Avatar') }}" class="rounded-circle" width="40" height="40">
                                        @else
                                            <div class="bg-secondary rounded-circle d-inline-block" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                                <i class="fas fa-user text-white"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="#" class="text-decoration-none" onclick="editUser({{ $user->id }})">{{ $user->full_name }}</a>
                                    </td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ $user->username }}</td>
                                    <td>
                                        @if($user->role)
                                            <span class="badge bg-primary">{{ $user->role->name }}</span>
                                        @else
                                            <span class="badge bg-secondary">{{ __('No Role') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($user->language == 'ar')
                                            <span class="flag-icon flag-icon-sa"></span> {{ __('Arabic') }}
                                        @else
                                            <span class="flag-icon flag-icon-us"></span> {{ __('English') }}
                                        @endif
                                    </td>
                                    <td>
                                        @if($user->is_active)
                                            <span class="badge bg-success">{{ __('Active') }}</span>
                                        @else
                                            <span class="badge bg-secondary">{{ __('Inactive') }}</span>
                                        @endif
                                    </td>
                                    <td>{{ $user->created_at->format('M d, Y') }}</td>
                                    <td>{{ $user->last_login ? $user->last_login->format('M d, Y H:i') : __('Never') }}</td>
                                    <td>{{ $user->last_activity ? $user->last_activity->diffForHumans() : __('Never') }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-sm btn-info" onclick="editUser({{ $user->id }})" title="{{ __('Edit') }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger" onclick="deleteUser({{ $user->id }})" title="{{ __('Delete') }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-warning" onclick="impersonateUser({{ $user->id }})" title="{{ __('Impersonate') }}">
                                                <i class="fas fa-user-secret"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-center mt-3">
                        {{ $users->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Assign Role Modal -->
<div class="modal fade" id="bulkAssignRoleModal" tabindex="-1" aria-labelledby="bulkAssignRoleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkAssignRoleModalLabel">{{ __('Assign Role to Selected Users') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="bulkAssignRoleForm">
                    <div class="mb-3">
                        <label for="bulkRoleSelect" class="form-label">{{ __('Select Role') }}</label>
                        <select class="form-select" id="bulkRoleSelect" name="role_id" required>
                            <option value="">{{ __('Choose a role...') }}</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                <button type="button" class="btn btn-primary" id="confirmBulkAssignRole">{{ __('Assign Role') }}</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Select all checkbox
    $('#selectAllCheckbox').on('change', function() {
        $('.userCheckbox').prop('checked', $(this).prop('checked'));
        updateBulkActionsButton();
    });

    // Individual checkboxes
    $(document).on('change', '.userCheckbox', function() {
        updateBulkActionsButton();
    });

    // Apply filters
    $('#applyFiltersBtn').on('click', function() {
        applyFilters();
    });

    // Clear filters
    $('#clearFiltersBtn').on('click', function() {
        clearFilters();
    });

    // Bulk Actions
    $('#bulkActivate').on('click', function(e) {
        e.preventDefault();
        performBulkAction('activate', '{{ __("Are you sure you want to activate the selected users?") }}');
    });

    $('#bulkDeactivate').on('click', function(e) {
        e.preventDefault();
        performBulkAction('deactivate', '{{ __("Are you sure you want to deactivate the selected users?") }}');
    });

    $('#bulkDelete').on('click', function(e) {
        e.preventDefault();
        performBulkAction('delete', '{{ __("Are you sure you want to delete the selected users? This action cannot be undone.") }}');
    });

    $('#bulkAssignRole').on('click', function(e) {
        e.preventDefault();
        $('#bulkAssignRoleModal').modal('show');
    });

    $('#confirmBulkAssignRole').on('click', function() {
        const roleId = $('#bulkRoleSelect').val();
        if (!roleId) {
            showAlert('{{ __("Please select a role.") }}', 'warning');
            return;
        }
        performBulkAssignRole(roleId);
    });

    $('#undoBtn').on('click', function() {
        undoBulkDelete();
    });

    // Check if undo is available on page load
    checkUndoAvailability();
});

function updateBulkActionsButton() {
    const checkedBoxes = $('.userCheckbox:checked').length;
    $('#bulkActionsBtn').prop('disabled', checkedBoxes === 0);
}

function getSelectedUserIds() {
    return $('.userCheckbox:checked').map(function() {
        return $(this).val();
    }).get();
}

function performBulkAction(action, confirmationMessage) {
    const userIds = getSelectedUserIds();
    if (userIds.length === 0) {
        showAlert('{{ __("Please select at least one user.") }}', 'warning');
        return;
    }

    if (!confirm(confirmationMessage)) {
        return;
    }

    showProgress(true);
    const endpoint = `/admin/manage/users/bulk-${action}`;

    $.ajax({
        url: endpoint,
        method: 'POST',
        data: {
            user_ids: userIds,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            showProgress(false);
            if (response.success) {
                showAlert(response.message, 'success');
                if (action === 'delete' && response.can_undo) {
                    $('#undoBtn').show();
                }
                // Refresh the page to show updated data
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert(response.message, 'danger');
            }
        },
        error: function(xhr) {
            showProgress(false);
            const response = xhr.responseJSON;
            showAlert(response?.message || '{{ __("An error occurred.") }}', 'danger');
        }
    });
}

function performBulkAssignRole(roleId) {
    const userIds = getSelectedUserIds();
    if (userIds.length === 0) {
        showAlert('{{ __("Please select at least one user.") }}', 'warning');
        return;
    }

    showProgress(true);
    $('#bulkAssignRoleModal').modal('hide');

    $.ajax({
        url: '/admin/manage/users/bulk-assign-role',
        method: 'POST',
        data: {
            user_ids: userIds,
            role_id: roleId,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            showProgress(false);
            if (response.success) {
                showAlert(response.message, 'success');
                // Refresh the page to show updated data
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert(response.message, 'danger');
            }
        },
        error: function(xhr) {
            showProgress(false);
            const response = xhr.responseJSON;
            showAlert(response?.message || '{{ __("An error occurred.") }}', 'danger');
        }
    });
}

function undoBulkDelete() {
    showProgress(true);

    $.ajax({
        url: '/admin/manage/users/undo-bulk-delete',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            showProgress(false);
            if (response.success) {
                showAlert(response.message, 'success');
                $('#undoBtn').hide();
                // Refresh the page to show updated data
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert(response.message, 'danger');
            }
        },
        error: function(xhr) {
            showProgress(false);
            const response = xhr.responseJSON;
            showAlert(response?.message || '{{ __("An error occurred.") }}', 'danger');
        }
    });
}

function checkUndoAvailability() {
    // This could be checked via AJAX if needed, but for simplicity we'll assume it's available if the button was shown previously
    // In a real implementation, you might want to check server-side if undo data exists
}

function showProgress(show) {
    if (show) {
        $('#bulkProgress').show();
        $('#bulkProgressBar').css('width', '0%').addClass('progress-bar-animated');
        // Simulate progress (in real implementation, you might get progress from server)
        let progress = 0;
        const interval = setInterval(() => {
            progress += 10;
            $('#bulkProgressBar').css('width', progress + '%');
            if (progress >= 90) {
                clearInterval(interval);
            }
        }, 200);
    } else {
        $('#bulkProgress').hide();
        $('#bulkProgressBar').css('width', '100%').removeClass('progress-bar-animated');
    }
}

function showAlert(message, type) {
    const alert = $('#bulkAlert');
    alert.removeClass('alert-success alert-danger alert-warning alert-info');
    alert.addClass(`alert-${type}`);
    $('#bulkAlertMessage').text(message);
    alert.show();

    // Auto-hide after 5 seconds
    setTimeout(() => {
        alert.fadeOut();
    }, 5000);
}

function editUser(userId) {
    // Redirect to edit page or open modal
    window.location.href = '/admin/manage/users/' + userId + '/edit';
}

function deleteUser(userId) {
    if (confirm('{{ __("Are you sure you want to delete this user?") }}')) {
        // Implement delete functionality
        console.log('Delete user:', userId);
    }
}

function impersonateUser(userId) {
    if (confirm('{{ __("Are you sure you want to impersonate this user?") }}')) {
        // Implement impersonation
        console.log('Impersonate user:', userId);
    }
}

function applyFilters() {
    const search = $('#searchInput').val();
    const role = $('#roleFilter').val();
    const status = $('#statusFilter').val();
    const language = $('#languageFilter').val();

    const params = new URLSearchParams(window.location.search);
    if (search) params.set('search', search);
    if (role) params.set('role', role);
    if (status) params.set('status', status);
    if (language) params.set('language', language);

    window.location.search = params.toString();
}

function clearFilters() {
    $('#searchInput').val('');
    $('#roleFilter').val('');
    $('#statusFilter').val('');
    $('#languageFilter').val('');
    window.location.href = window.location.pathname;
}
</script>
@endpush