@extends('layouts.app')

@section('title', 'Users - VPN Admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/select2/select2.css') }}">
<style>
    /* Page-specific styles only - Select2 styling is in common file (select2-dark-theme.css) */
</style>
<style>
    /* Hide default DataTables search box */
    .dataTables_filter {
        display: none;
    }
        cursor: pointer;
        padding-right: 30px;
        position: relative;
    }
    /* Make sure sorting icons (pseudo-elements) are visible in header row */
    #usersTable thead tr:first-child th.sorting:before,
    #usersTable thead tr:first-child th.sorting:after,
    #usersTable thead tr:first-child th.sorting_asc:before,
    #usersTable thead tr:first-child th.sorting_asc:after,
    #usersTable thead tr:first-child th.sorting_desc:before,
    #usersTable thead tr:first-child th.sorting_desc:after {
        display: block !important;
        opacity: 0.3 !important;
    }
    #usersTable thead tr:first-child th.sorting_asc:before,
    #usersTable thead tr:first-child th.sorting_desc:after {
        opacity: 1 !important;
    }
    /* Statistics loader styles */
    .stat-loader {
        margin-left: 8px;
        color: #007bff;
        font-size: 16px;
    }
    .stat-loader i {
        animation: fa-spin 1s infinite linear;
    }
    #statTotal, #statActive, #statPremium, #statToday {
        display: inline-block;
    }
</style>
@endpush

@section('content')
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img src="{{ asset('assets/images/logo-icon.svg') }}" width="48" height="48" alt="VPN Admin"></div>
        <p>Please wait...</p>
    </div>
</div>

<!-- main page content body part -->
<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h2>App Users</h2>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i></a></li>
                        <li class="breadcrumb-item">Users</li>
                        <li class="breadcrumb-item active">App Users</li>
                    </ul>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="d-flex flex-row-reverse">
                        <div class="page_action">
                            <button type="button" class="btn btn-primary" id="refreshTable"><i class="fa fa-refresh"></i> Refresh</button>
                            <!-- Sync button removed - data is now fetched directly from API in real-time -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row clearfix">
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="card number-chart">
                    <div class="body">
                        <span class="text-uppercase">Total Users</span>
                        <h4 class="mb-0 mt-2">
                            <span id="statTotal">0</span>
                            <span id="statTotalLoader" class="stat-loader" style="display: none;">
                                <i class="fa fa-spinner fa-spin"></i>
                            </span>
                        </h4>
                        <small class="text-muted">All registered users</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="card number-chart">
                    <div class="body">
                        <span class="text-uppercase">Active Users</span>
                        <h4 class="mb-0 mt-2">
                            <span id="statActive">0</span>
                            <span id="statActiveLoader" class="stat-loader" style="display: none;">
                                <i class="fa fa-spinner fa-spin"></i>
                            </span>
                        </h4>
                        <small class="text-muted">Currently active</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="card number-chart">
                    <div class="body">
                        <span class="text-uppercase">Premium Users</span>
                        <h4 class="mb-0 mt-2">
                            <span id="statPremium">0</span>
                            <span id="statPremiumLoader" class="stat-loader" style="display: none;">
                                <i class="fa fa-spinner fa-spin"></i>
                            </span>
                        </h4>
                        <small class="text-muted">Premium subscribers</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="card number-chart">
                    <div class="body">
                        <span class="text-uppercase">Today's Registrations</span>
                        <h4 class="mb-0 mt-2">
                            <span id="statToday">0</span>
                            <span id="statTodayLoader" class="stat-loader" style="display: none;">
                                <i class="fa fa-spinner fa-spin"></i>
                            </span>
                        </h4>
                        <small class="text-muted">New users today</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Filters</h2>
                    </div>
                    <div class="body">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="filterAccountStatus">Account Status</label>
                                    <select class="form-control" id="filterAccountStatus">
                                        <option value="">All Status</option>
                                        <option value="active">Active</option>
                                        <option value="suspended">Suspended</option>
                                        <option value="expired">Expired</option>
                                        <option value="banned">Banned</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="filterPlanType">Plan Type</label>
                                    <select class="form-control" id="filterPlanType">
                                        <option value="">All Plans</option>
                                        <option value="free">Free</option>
                                        <option value="trial">Trial</option>
                                        <option value="premium">Premium</option>
                                        <option value="reseller">Reseller</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filterCountry">Country</label>
                                    <select class="form-control select2" id="filterCountry" style="width: 100%;">
                                        <option value="">All</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" class="btn btn-primary btn-block" id="applyFilters">Apply Filters</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- DataTable -->
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Users List</h2>
                    </div>
                    <div class="body">
                                 <div class="table-responsive">
                                     <table class="table table-bordered table-striped table-hover js-basic-example dataTable" id="usersTable" style="width:100%">
                                         <thead>
                                             <tr>
                                                 <th><input type="checkbox" id="selectAll"></th>
                                                 <th>User ID</th>
                                                 <th>Status</th>
                                                 <th>Plan</th>
                                                 <th>Devices</th>
                                                 <th>Expiry</th>
                                                 <th>Country</th>
                                                 <th>Last Seen</th>
                                                 <th>Flags</th>
                                                 <th>Actions</th>
                                             </tr>
                                         </thead>
                                         <tbody>
                                             <!-- Data will be loaded via AJAX -->
                                         </tbody>
                                     </table>
                                 </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Details Modal -->
<div class="modal fade" id="userDetailsModal" tabindex="-1" role="dialog" aria-labelledby="userDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userDetailsModalLabel">User Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="userDetailsLoader" style="text-align: center; padding: 50px;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <p class="mt-2 text-muted">Loading user details...</p>
                </div>
                <div id="userDetailsContent" style="display: none;">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-bordered">
                                <tr>
                                    <th width="40%">User ID</th>
                                    <td id="detailUserId">-</td>
                                </tr>
                                <tr>
                                    <th>Username</th>
                                    <td id="detailUsername">-</td>
                                </tr>
                                <tr>
                                    <th>Email</th>
                                    <td id="detailEmail">-</td>
                                </tr>
                                <tr>
                                    <th>Account Status</th>
                                    <td id="detailAccountStatus">-</td>
                                </tr>
                                <tr>
                                    <th>Plan Type</th>
                                    <td id="detailPlanType">-</td>
                                </tr>
                                <tr>
                                    <th>Devices</th>
                                    <td id="detailDevices">-</td>
                                </tr>
                                <tr>
                                    <th>Country</th>
                                    <td id="detailCountry">-</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-bordered">
                                <tr>
                                    <th width="40%">Subscription Expiry</th>
                                    <td id="detailSubscriptionExpiry">-</td>
                                </tr>
                                <tr>
                                    <th>Login Method</th>
                                    <td id="detailLoginMethod">-</td>
                                </tr>
                                <tr>
                                    <th>User Type</th>
                                    <td id="detailUserType">-</td>
                                </tr>
                                <tr>
                                    <th>Group</th>
                                    <td id="detailGroup">-</td>
                                </tr>
                                <tr>
                                    <th>Referral</th>
                                    <td id="detailReferral">-</td>
                                </tr>
                                <tr>
                                    <th>Last Seen</th>
                                    <td id="detailLastSeen">-</td>
                                </tr>
                                <tr>
                                    <th>Created At</th>
                                    <td id="detailCreatedAt">-</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div id="userDetailsError" style="display: none;">
                    <div class="alert alert-danger">
                        <i class="fa fa-exclamation-circle"></i> <span id="userDetailsErrorMessage">Error loading user details</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="editUserModalTitle">Edit User</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editUserForm">
                @csrf
                <input type="hidden" id="edit_user_id" name="user_id">
                <input type="hidden" id="_method" name="_method" value="PATCH">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Account Status <span class="text-danger">*</span></label>
                                <select class="form-control" id="edit_accountStatus" name="accountStatus" required>
                                    <option value="active">Active</option>
                                    <option value="suspended">Suspended</option>
                                    <option value="expired">Expired</option>
                                    <option value="banned">Banned</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Plan Type <span class="text-danger">*</span></label>
                                <select class="form-control" id="edit_planType" name="planType" required>
                                    <option value="free">Free</option>
                                    <option value="trial">Trial</option>
                                    <option value="premium">Premium</option>
                                    <option value="reseller">Reseller</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Devices</label>
                                <input type="number" class="form-control" id="edit_devices" name="devices" min="0" value="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Subscription Expiry</label>
                                <input type="datetime-local" class="form-control" id="edit_subscriptionExpiry" name="subscriptionExpiry">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Country</label>
                                <select class="form-control select2" id="edit_country" name="country" style="width: 100%;">
                                    <option value="">Select Country</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Group</label>
                                <select class="form-control select2" id="edit_group" name="group" style="width: 100%;">
                                    <option value="">Select Group</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>Referral</label>
                        <input type="text" class="form-control" id="edit_referral" name="referral">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update User</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/vendor/jquery-datatable/jquery.dataTables.min.js') }}" ></script>
<script src="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.js') }}" ></script>
<script src="{{ asset('assets/vendor/select2/select2.js') }}" ></script>
<script >
        $(document).ready(function() {
            // Load countries for filter dropdown
            function loadFilterCountries() {
                var $filterCountry = $('#filterCountry');
                if (!$filterCountry.length) return;
                
                // Show loading state
                $filterCountry.prop('disabled', true);
                $filterCountry.empty().append('<option value="">Loading countries...</option>');
                
                $.ajax({
                    url: "{{ route('countries.ajax.select') }}",
                    dataType: 'json',
                    async: true,
                    data: { q: '' }, // Empty search to get all countries
                    beforeSend: function() {
                        $filterCountry.prop('disabled', true);
                    },
                    success: function(response) {
                        $filterCountry.empty().append('<option value="">All</option>');
                        if (response.results && response.results.length > 0) {
                            $.each(response.results, function(index, country) {
                                $filterCountry.append(
                                    $('<option></option>')
                                        .attr('value', country.id)
                                        .text(country.text)
                                );
                            });
                        }
                        $filterCountry.prop('disabled', false);
                        
                        // Initialize Select2 after options are loaded
                        $filterCountry.select2({
                            placeholder: 'Select Country',
                            allowClear: true
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Error loading filter countries:', error);
                        $filterCountry.empty().append('<option value="">All</option>');
                        $filterCountry.prop('disabled', false);
                        // Initialize Select2 anyway
                        $filterCountry.select2({
                            placeholder: 'Select Country',
                            allowClear: true
                        });
                    }
                });
            }
            
            // Load filter countries
            loadFilterCountries();
            // Initialize DataTable with server-side processing
            var table = $('#usersTable').DataTable({
                processing: false, // Hide processing indicator (we show on refresh button instead)
                serverSide: true,
                // Remove deferLoading to allow initial load
                ajax: {
                    url: "{{ route('users.index') }}",
                    cache: false, // Disable cache for real-time data
                    timeout: 30000, // 30 second timeout (increased for API calls)
                    data: function(d) {
                        // Add cache-busting parameter
                        d._ = new Date().getTime();
                        
                        // Only send filter values if they are not empty
                        var accountStatus = $('#filterAccountStatus').val();
                        var planType = $('#filterPlanType').val();
                        var country = $('#filterCountry').val();
                        
                        if (accountStatus) {
                            d.status = accountStatus;
                        }
                        if (planType) {
                            d.plan_type = planType;
                        }
                        if (country) {
                            d.country = country;
                        }
                    },
                    headers: {
                        'Cache-Control': 'no-cache, no-store, must-revalidate',
                        'Pragma': 'no-cache',
                        'Expires': '0'
                    },
                    error: function(xhr, error, thrown) {
                        console.error('DataTables Error:', error);
                        console.error('Response:', xhr.responseText);
                        // Don't show alert on timeout, just log
                        if (error !== 'timeout') {
                            alert('Error loading users data. Please check console for details.');
                        }
                    }
                },
                columns: [
                    { data: 'checkbox', name: 'checkbox', orderable: false, searchable: false, width: '30px' },
                    { data: 'user_id_display', name: 'user_id_display', orderable: true, searchable: true },
                    { data: 'status', name: 'status', orderable: true, searchable: true },
                    { data: 'plan_type', name: 'plan_type', orderable: true, searchable: true },
                    { data: 'devices', name: 'devices', orderable: false, searchable: false },
                    { data: 'subscription_expires_at', name: 'subscription_expires_at', orderable: true, searchable: true },
                    { data: 'country', name: 'country', orderable: true, searchable: true },
                    { data: 'last_seen_at', name: 'last_seen_at', orderable: true, searchable: true },
                    { data: 'flags', name: 'flags', orderable: false, searchable: false },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false }
                ],
                order: [[7, 'desc']], // Order by last_seen_at desc
                pageLength: 20, // Increased default for better UX
                lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
                deferRender: true, // Defer rendering for better performance with large datasets
                stateSave: false, // Don't save state (faster, no localStorage)
                pagingType: 'simple_numbers', // Simpler pagination (faster rendering)
                // Prevent sorting when clicking on filter row
                orderCellsTop: true, // Important: This makes DataTables use first row for sorting, not filter row
                language: {
                    processing: '', // Hide processing indicator (we'll show on refresh button instead)
                    emptyTable: "No users found",
                    zeroRecords: "No matching users found"
                },
                initComplete: function() {
                    var api = this.api();
                    
                },
                drawCallback: function() {
                    // Initialize tooltips after table draw
                    $('[data-toggle="tooltip"]').tooltip();
                }
            });
            

    // Apply filters
    $('#applyFilters').on('click', function() {
        showFullScreenLoader();
        table.ajax.reload(function() {
            hideFullScreenLoader();
        }, false);
    });

    // Refresh table manually
    $('#refreshTable').on('click', function() {
        var $btn = $(this);
        var originalHtml = $btn.html();
        
        // Show loading on button
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Loading...');
        
        // Show full screen loader and statistics loaders immediately
        showFullScreenLoader();
        showStatisticsLoaders();
        
        table.ajax.reload(function(json) {
            // Re-enable button after reload
            $btn.prop('disabled', false).html(originalHtml);
            hideFullScreenLoader();
            loadStatistics();
        }, false); // false = don't reset pagination
    });
    
    // Real-time auto-refresh: Reload table every 30 seconds (only one interval)
    var tableRefreshInterval = setInterval(function() {
        // Only reload if table is visible and not currently processing
        if ($('#usersTable').is(':visible')) {
            // Check if table is not currently loading
            var isProcessing = table.settings()[0].bProcessing || false;
            if (!isProcessing) {
                // Silent reload without callback to avoid duplicate statistics calls
                table.ajax.reload(null, false); // false = don't reset pagination
            }
        }
    }, 30000); // 30 seconds
    
    // Clear interval on page unload
    $(window).on('beforeunload', function() {
        if (typeof tableRefreshInterval !== 'undefined' && tableRefreshInterval) {
            clearInterval(tableRefreshInterval);
        }
    });

    // Sync from API - DISABLED (Data is now fetched directly from API in real-time)
    // No need to sync to database anymore

    // Load statistics with debounce to prevent duplicate calls
    var statisticsLoading = false;
    var lastStatisticsCall = 0;
    var statisticsDebounceTime = 2000; // 2 seconds debounce
    
    function loadStatistics() {
        var now = Date.now();
        
        // Prevent duplicate calls within debounce time
        if (statisticsLoading || (now - lastStatisticsCall) < statisticsDebounceTime) {
            return;
        }
        
        statisticsLoading = true;
        lastStatisticsCall = now;
        
        // Show loaders
        showStatisticsLoaders();
        
        $.ajax({
            url: "{{ route('users.statistics') }}",
            method: 'GET',
            async: true,
            success: function(data) {
                if (data) {
                    $('#statTotal').text(data.total ? data.total.toLocaleString() : '0');
                    $('#statActive').text(data.active ? data.active.toLocaleString() : '0');
                    $('#statPremium').text(data.premium ? data.premium.toLocaleString() : '0');
                    $('#statToday').text(data.today_registrations ? data.today_registrations.toLocaleString() : '0');
                }
            },
            error: function(xhr, status, error) {
                console.error('Statistics Error:', error);
                console.error('Response:', xhr.responseText);
            },
            complete: function() {
                statisticsLoading = false;
                // Hide loaders after data is loaded
                hideStatisticsLoaders();
            }
        });
    }
    
    function showStatisticsLoaders() {
        $('#statTotalLoader').show();
        $('#statActiveLoader').show();
        $('#statPremiumLoader').show();
        $('#statTodayLoader').show();
    }
    
    function hideStatisticsLoaders() {
        $('#statTotalLoader').hide();
        $('#statActiveLoader').hide();
        $('#statPremiumLoader').hide();
        $('#statTodayLoader').hide();
    }

    // Show loaders immediately on page load
    showStatisticsLoaders();
    
    // Load statistics only on initial page load (not on every draw)
    var initialStatisticsLoaded = false;
    table.on('draw', function() {
        // Only load statistics on first draw (initial load)
        if (!initialStatisticsLoaded) {
            initialStatisticsLoaded = true;
            // Loaders already shown above, now load data
            setTimeout(function() {
                loadStatistics();
            }, 500);
        }
    });
    
    // Refresh statistics every 30 seconds
    // setInterval(loadStatistics, 30000);

    // Select all checkbox
    $('#selectAll').on('click', function() {
        $('.user-checkbox').prop('checked', $(this).prop('checked'));
    });

    // View Details
    $(document).on('click', '.view-details', function(e) {
        e.preventDefault();
        showFullScreenLoader();
        var userId = $(this).data('id');
        
        // Show modal and reset content
        $('#userDetailsModal').modal('show');
        $('#userDetailsLoader').show();
        $('#userDetailsContent').hide();
        $('#userDetailsError').hide();
        
        // Fetch user details from API
        $.ajax({
            url: "{{ route('users.details', ':id') }}".replace(':id', userId),
            method: 'GET',
            async: true,
            cache: false,
            headers: {
                'Cache-Control': 'no-cache, no-store, must-revalidate',
                'Pragma': 'no-cache',
                'Expires': '0'
            },
            success: function(response) {
                hideFullScreenLoader();
                if (response.success && response.data) {
                    var user = response.data;
                    
                    // Format dates
                    var formatDate = function(dateStr) {
                        if (!dateStr) return 'N/A';
                        try {
                            var date = new Date(dateStr);
                            return date.toLocaleString();
                        } catch(e) {
                            return dateStr;
                        }
                    };
                    
                    // Format status badge
                    var statusBadge = function(status) {
                        var badges = {
                            'active': '<span class="badge badge-success">Active</span>',
                            'inactive': '<span class="badge badge-secondary">Inactive</span>',
                            'suspended': '<span class="badge badge-warning">Suspended</span>',
                            'banned': '<span class="badge badge-danger">Banned</span>'
                        };
                        return badges[status] || '<span class="badge badge-secondary">' + (status || 'N/A') + '</span>';
                    };
                    
                    // Format plan type badge
                    var planBadge = function(plan) {
                        var badges = {
                            'free': '<span class="badge badge-secondary">Free</span>',
                            'trial': '<span class="badge badge-info">Trial</span>',
                            'premium': '<span class="badge badge-success">Premium</span>',
                            'lifetime': '<span class="badge badge-primary">Lifetime</span>'
                        };
                        return badges[plan] || '<span class="badge badge-secondary">' + (plan || 'N/A') + '</span>';
                    };
                    
                    // Populate modal
                    $('#detailUserId').html(user.id || user._id || '-');
                    $('#detailUsername').html(user.username || '<span class="text-muted">N/A</span>');
                    $('#detailEmail').html(user.email || '<span class="text-muted">N/A</span>');
                    $('#detailAccountStatus').html(statusBadge(user.accountStatus));
                    $('#detailPlanType').html(planBadge(user.planType));
                    $('#detailDevices').html(user.devices || '0');
                    $('#detailCountry').html(user.country || '<span class="text-muted">N/A</span>');
                    $('#detailSubscriptionExpiry').html(formatDate(user.subscriptionExpiry));
                    $('#detailLoginMethod').html(user.loginMethod || '<span class="text-muted">N/A</span>');
                    $('#detailUserType').html(user.userType || '<span class="text-muted">N/A</span>');
                    $('#detailGroup').html(user.group || '<span class="text-muted">N/A</span>');
                    $('#detailReferral').html(user.referral || '<span class="text-muted">N/A</span>');
                    $('#detailLastSeen').html(formatDate(user.lastSeenAt));
                    $('#detailCreatedAt').html(formatDate(user.createdAt));
                    
                    $('#userDetailsLoader').hide();
                    $('#userDetailsContent').show();
                } else {
                    hideFullScreenLoader();
                    $('#userDetailsLoader').hide();
                    $('#userDetailsErrorMessage').text(response.message || 'Failed to load user details');
                    $('#userDetailsError').show();
                }
            },
            error: function(xhr) {
                hideFullScreenLoader();
                $('#userDetailsLoader').hide();
                var message = 'Error loading user details. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                $('#userDetailsErrorMessage').text(message);
                $('#userDetailsError').show();
            }
        });
    });

    // Removed handlers for: Suspend User, Reset Devices, Extend Plan, Flag User
    // These buttons have been removed from the actions dropdown

    // Load countries for edit modal
    function loadEditCountries() {
        var $countrySelect = $('#edit_country');
        if (!$countrySelect.length) return;
        
        $.ajax({
            url: "{{ route('countries.ajax.select') }}",
            dataType: 'json',
            async: true,
            data: { q: '' },
            success: function(response) {
                $countrySelect.empty().append('<option value="">Select Country</option>');
                if (response.results && response.results.length > 0) {
                    $.each(response.results, function(index, country) {
                        $countrySelect.append(
                            $('<option></option>')
                                .attr('value', country.id)
                                .text(country.text)
                        );
                    });
                }
                $countrySelect.select2({
                    placeholder: 'Select Country',
                    allowClear: true
                });
            },
            error: function() {
                console.error('Error loading countries');
            }
        });
    }

    // Load groups for edit modal
    function loadEditGroups() {
        var $groupSelect = $('#edit_group');
        if (!$groupSelect.length) return;
        
        $.ajax({
            url: "{{ route('groups.ajax.list') }}",
            method: 'GET',
            async: true,
            success: function(response) {
                $groupSelect.empty().append('<option value="">Select Group</option>');
                if (response.data && Array.isArray(response.data)) {
                    $.each(response.data, function(index, group) {
                        var groupId = group.id || group._id;
                        $groupSelect.append(
                            $('<option></option>')
                                .attr('value', groupId)
                                .text(group.name)
                        );
                    });
                }
                $groupSelect.select2({
                    placeholder: 'Select Group',
                    allowClear: true
                });
            },
            error: function() {
                console.error('Error loading groups');
            }
        });
    }

    // Edit User
    $(document).on('click', '.edit-user', function(e) {
        e.preventDefault();
        var userId = $(this).data('id');
        
        if (!userId) {
            alert('User ID is missing. Please try again.');
            return;
        }
        
        showFullScreenLoader();
        
        // Reset form first
        $('#editUserForm')[0].reset();
        $('#edit_user_id').val(userId);
        $('#_method').val('PATCH');
        
        // Load countries and groups first, then fetch user details
        var countriesPromise = $.ajax({
            url: "{{ route('countries.ajax.select') }}",
            dataType: 'json',
            async: true,
            data: { q: '' }
        });
        
        var groupsPromise = $.ajax({
            url: "{{ route('groups.ajax.list') }}",
            method: 'GET',
            async: true
        });
        
        var userPromise = $.ajax({
            url: "{{ route('users.details', ':id') }}".replace(':id', userId),
            method: 'GET',
            async: true,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        });
        
        // Wait for all requests to complete
        $.when(countriesPromise, groupsPromise, userPromise).done(function(countriesResponse, groupsResponse, userResponse) {
            // Populate countries dropdown
            var $countrySelect = $('#edit_country');
            $countrySelect.empty().append('<option value="">Select Country</option>');
            if (countriesResponse[0].results && countriesResponse[0].results.length > 0) {
                $.each(countriesResponse[0].results, function(index, country) {
                    $countrySelect.append(
                        $('<option></option>')
                            .attr('value', country.id)
                            .text(country.text)
                    );
                });
            }
            $countrySelect.select2({
                placeholder: 'Select Country',
                allowClear: true
            });
            
            // Populate groups dropdown
            var $groupSelect = $('#edit_group');
            $groupSelect.empty().append('<option value="">Select Group</option>');
            if (groupsResponse[0].data && Array.isArray(groupsResponse[0].data)) {
                $.each(groupsResponse[0].data, function(index, group) {
                    var groupId = group.id || group._id;
                    $groupSelect.append(
                        $('<option></option>')
                            .attr('value', groupId)
                            .text(group.name)
                    );
                });
            }
            $groupSelect.select2({
                placeholder: 'Select Group',
                allowClear: true
            });
            
            // Populate user data
            if (userResponse[0].success && userResponse[0].data) {
                var user = userResponse[0].data;
                
                // Populate form fields
                $('#edit_accountStatus').val(user.accountStatus || 'active');
                $('#edit_planType').val(user.planType || 'free');
                $('#edit_devices').val(user.devices || 0);
                
                // Handle subscription expiry - convert to datetime-local format
                if (user.subscriptionExpiry) {
                    try {
                        var expiryDate = new Date(user.subscriptionExpiry);
                        if (!isNaN(expiryDate.getTime())) {
                            var year = expiryDate.getFullYear();
                            var month = String(expiryDate.getMonth() + 1).padStart(2, '0');
                            var day = String(expiryDate.getDate()).padStart(2, '0');
                            var hours = String(expiryDate.getHours()).padStart(2, '0');
                            var minutes = String(expiryDate.getMinutes()).padStart(2, '0');
                            $('#edit_subscriptionExpiry').val(year + '-' + month + '-' + day + 'T' + hours + ':' + minutes);
                        }
                    } catch (e) {
                        console.error('Error parsing subscription expiry:', e);
                    }
                }
                
                // Set country
                if (user.country) {
                    setTimeout(function() {
                        $countrySelect.val(user.country).trigger('change');
                    }, 100);
                }
                
                // Set group
                if (user.group) {
                    setTimeout(function() {
                        $groupSelect.val(user.group).trigger('change');
                    }, 100);
                }
                
                $('#edit_referral').val(user.referral || '');
                
                hideFullScreenLoader();
                $('#editUserModal').modal('show');
            } else {
                hideFullScreenLoader();
                alert('Failed to load user details. Response format is invalid.');
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            hideFullScreenLoader();
            console.error('Error loading data:', {
                status: textStatus,
                error: errorThrown,
                response: jqXHR.responseText,
                statusCode: jqXHR.status
            });
            
            var errorMsg = 'Error loading user details. Please try again.';
            if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
                errorMsg = jqXHR.responseJSON.message;
            } else if (jqXHR.status === 404) {
                errorMsg = 'User not found.';
            } else if (jqXHR.status === 500) {
                errorMsg = 'Server error. Please try again later.';
            } else if (jqXHR.status === 0) {
                errorMsg = 'Network error. Please check your connection.';
            }
            alert(errorMsg);
        });
    });

    // Handle edit user form submit
    $('#editUserForm').on('submit', function(e) {
        e.preventDefault();
        showFullScreenLoader();
        
        var userId = $('#edit_user_id').val();
        var formData = {
            accountStatus: $('#edit_accountStatus').val(),
            planType: $('#edit_planType').val(),
            devices: $('#edit_devices').val() ? parseInt($('#edit_devices').val()) : 0,
            subscriptionExpiry: $('#edit_subscriptionExpiry').val() || null,
            country: $('#edit_country').val() || null,
            group: $('#edit_group').val() || null,
            referral: $('#edit_referral').val() || '',
            _token: $('meta[name="csrf-token"]').attr('content'),
            _method: 'PATCH'
        };
        
        // Remove null/empty optional fields
        if (!formData.subscriptionExpiry) {
            delete formData.subscriptionExpiry;
        }
        if (!formData.country) {
            delete formData.country;
        }
        if (!formData.group) {
            delete formData.group;
        }

        $.ajax({
            url: "{{ route('users.update', ':id') }}".replace(':id', userId),
            method: 'POST',
            async: true,
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                $('#editUserModal').modal('hide');
                // Show loader before table reload
                showFullScreenLoader();
                table.ajax.reload(function() {
                    // Show alert first, then hide loader after user dismisses alert
                    alert(response.message || 'User updated successfully');
                    hideFullScreenLoader();
                }, false);
            },
            error: function(xhr) {
                hideFullScreenLoader();
                var errorMsg = 'Failed to update user';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.detail) {
                    // Handle API validation errors
                    var details = xhr.responseJSON.detail;
                    if (Array.isArray(details)) {
                        errorMsg = details.map(function(d) {
                            return d.msg || d.message || 'Validation error';
                        }).join('\n');
                    } else {
                        errorMsg = details.msg || details.message || 'Validation error';
                    }
                }
                alert(errorMsg);
            }
        });
    });
});
</script>
@endpush