@extends('backoffice.layouts.app')
@section('contents')
    <div class="container-fluid mt-4">
        <h4 class="mb-4">Registered Users</h4>

        <div class="table-responsive">
            <table class="table table-bordered table-striped ">
            <thead class="table-dark">
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Subscription Type</th>
                    <th>Start</th>
                    <th>End</th>
                    <th>Warnings</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $index => $user)
                    @php
                        $sub = $subscriptions[$user->id] ?? null;
                    @endphp
                    <tr id="user-row-{{ $user->id }}">
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $user->profile->real_name ?? 'User' }}</td>
                        <td>{{ $user->email }}</td>
                        <td>{{ $sub->subscription_type ?? '-' }}</td>
                        <td>{{ $sub?->subscription_start ? \Carbon\Carbon::parse($sub->subscription_start)->format('Y-m-d') : '-' }}
                        </td>
                        <td>{{ $sub?->subscription_end ? \Carbon\Carbon::parse($sub->subscription_end)->format('Y-m-d') : '-' }}
                        </td>

                        <td>{{ $user->warnings_count }}</td>
                        <td class="user-status">{{ $user->is_active ? 'Active' : 'Inactive' }}</td>
                        <td>
                            <button
                                class="btn btn-sm btn-toggle-status {{ $user->is_active ? 'btn-danger' : 'btn-success' }}"
                                data-user-id="{{ $user->id }}">
                                {{ $user->is_active ? 'Deactivate' : 'Activate' }}
                            </button>

                            <button class="btn btn-sm btn-warning ms-2 btn-send-warning" data-user-id="{{ $user->id }}">
                                Send Warning
                            </button>
                            <a href="{{route('customerlist.details', $user->id)}}" class="btn btn-sm btn-primary ms-2">View</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        </div>

    </div>

    <script>
        document.querySelectorAll('.btn-send-warning').forEach(button => {
            button.addEventListener('click', function() {
                const userId = this.getAttribute('data-user-id');

                if (confirm('Are you sure you want to send a warning to this user?')) {
                    fetch(`/backoffice/customers/${userId}/warning`, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                                'Content-Type': 'application/json'
                            }
                        })
                        .then(res => res.json())
                        .then(data => {
                            alert(data.message);
                        })
                        .catch(err => {
                            console.error('Error:', err);
                            alert('An error occurred while sending the warning.');
                        });
                }
            });
        });
    </script>
@endsection

@section('scripts')
@endsection