@extends('layouts.admin')

@section('content')
    <h1>Manage Users</h1>

    <table id="usersTable" class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
    </table>

    <script>
        $(document).ready(function() {
            // Initialize DataTables
            $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.users') }}",
                columns: [
                    { data: 'name' },
                    { data: 'email' },
                    {
                        data: 'is_active',
                        render: function(data, type, row) {
                            return data ? 'Active' : 'Inactive';
                        }
                    },
                    {
                        data: null,
                        render: function(data, type, row) {
                            let buttonText = row.is_active ? 'Deactivate' : 'Activate';
                            let buttonClass = row.is_active ? 'btn-danger' : 'btn-success';
                            return `<button class="btn ${buttonClass} toggle-status-btn" data-id="${row.id}">${buttonText}</button>`;
                        }
                    }
                ]
            });

            // Handle activate/deactivate button click
            $('#usersTable').on('click', '.toggle-status-btn', function() {
                var userId = $(this).data('id');
                $.ajax({
                    url: `user/toggle-status/${userId}`,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        $('#usersTable').DataTable().ajax.reload();
                        alert(response.message);
                    },
                    error: function(xhr) {
                        alert('Failed to update user status');
                    }
                });
            });
        });
    </script>
@endsection