@extends('layouts.app')
@section('content')
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Community Errors</h2>
                    <div class="clearfix"></div>
                </div>                
                <div class="x_content table-responsive">
                    <table id="user-table-1" class="table table-bordered table-striped ">
                        <thead>
                            <tr>
                                <th style="width: 15%">User ID</th>
                                <th style="width: 20%">External User ID</th>
                                <th style="width: 15%">Community</th>
                                <th style="width: 15%">Last Login</th>
                                <th style="width: 20%">Smoking Status</th>                                
                                <th style="width: 15%">Action</th>
                            </tr>
                        </thead>
                        <tbody>                            
                            @forelse ($userLists as $list)
                                @if(empty($list->userInfo->vEmail))
                                    @continue
                                @endif
                                <tr>
                                    <td>{{ $list->iUserID }}</td>
                                    <td>{{ $list->vEUserID }}</td>
                                    <td>{{ $list->userAppActivity->iCommunity }}</td>
                                    <td>{{ $list->dLastLogin }}</td>
                                    <td>{{ $list->SmokingStatus }}</td>                                    
                                    <td>
                                        @if (Auth::guard('admin')->user()->bUser == 1)
                                        <button type="button" data-user-id="{{ $list->iUserID }}" class="btn btn-primary btn-xs btnCreate">Create</button>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6">No data found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="module">
        $(document).ready(function() {
            var userTable1 = $('#user-table-1').DataTable({
                "pageLength": 50,
                "order": [
                    [1, "asc"]
                ],
                columnDefs: [{
                    targets: '_all',
                    orderSequence: ['asc', 'desc']
                }],
            });

            $('.btnCreate').on('click', function() {
                if(!confirm('Are you sure you want to create this user in Discourse?')) {
                    return;
                }
                var userId = $(this).data('user-id');
                var button = $(this);
                button.prop('disabled', true).text('Processing...');

                $.ajax({
                    url: '{{ route('community-errors.create-discourse-user') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        iUserID: userId
                    },
                    success: function(response) {
                        if(response.status){
                            alert('User created successfully in Discourse.');                        
                            button.closest('td').html('Created');
                        } else {
                            alert('Failed to create user: ' + response.message);
                            button.prop('disabled', false).text('Create');
                        }
                    },
                    error: function(xhr) {
                        alert('Error creating user: ' + xhr.responseText);
                        button.prop('disabled', false).text('Create');
                    }
                });
                return false;
            });
        });
    </script>
@endpush