@extends('layouts.adminlayout')

@section('content')
    <div class="container-fluid">
        <div class="row">
            @include('admin.adminnavbar')
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <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">Manage Users</h1>
                </div>
                
                 <div class="p-3">
                    <form method="GET" action="{{ route('admin.users.manage') }}" class="d-flex" style="max-width: 400px;">
                        <input type="text" name="search" class="form-control me-2"
                               placeholder="Search users (name, email, ID)..."
                               value="{{ $search ?? '' }}">
                
                        <button class="btn btn-primary" type="submit">Search</button>
                    </form>
                </div>
                
                <div class="card mt-4">
                    <div class="card-header table-back-color text-white">
                        <h5 class="mb-0">All Users({{ $users->total() }})</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-hover">
                            <thead class="custom-table-header">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Role</th>
                                    <th>Join Date</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    <tr>
                                        <td>{{ $user->id }}</td>
                                        <td>{{ $user->name }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>
                                            <form action="{{ route('admin.users.updateStatus', $user->id) }}" method="POST"
                                                class="d-inline-block">
                                                @csrf
                                                <select name="status" class="form-control" onchange="this.form.submit()">
                                                    <option value="active"
                                                        {{ $user->status == 'active' ? 'selected' : '' }}>Active</option>
                                                    <option value="inactive"
                                                        {{ $user->status == 'inactive' ? 'selected' : '' }}>Inactive
                                                    </option>
                                                    <option value="pending"
                                                        {{ $user->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                                </select>
                                            </form>
                                        </td>
                                        <td>{{ $user->role }}</td>
                                        <td>{{ $user->created_at->format('Y-m-d') }}</td>
                                        <td>
                                            <a href="{{ route('admin.users.profileView', $user->id) }}"
                                                class="btn btn-sm btn-primary"><i class="bi bi-eye-fill"></i> View</a>
                                            <a href="{{ route('ads.user.profile', $user->id) }}"
                                                class="btn btn-sm btn-info"><i class="bi bi-grid"></i> Ads</a>

                                            <!-- Delete User Form -->
                                            <form action="{{ route('admin.users.delete', $user->id) }}" method="POST"
                                                class="d-inline-block"
                                                onsubmit="return confirm('Are you sure you want to delete this user and all their ads?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger">
                                                    <i class="bi bi-trash"></i> Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <!-- Pagination if needed -->
                        {{ $users->links('pagination::bootstrap-5') }}

                        <!-- Success Message -->
                        @if (session('success'))
                            <div class="custom-alert alert-dismissible fade show" id="successAlert" role="alert">
                                {{ session('success') }}
                            </div>
                        @endif

                    </div>
                </div>
            </main>
        </div>
    @endsection

    @section('scripts')
        <script>
            document.querySelectorAll('.delete-user-btn').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (confirm('Are you sure you want to delete this user and all their ads?')) {
                        this.closest('form').submit();
                    }
                });
            });
            setTimeout(function() {
                let alertBox = document.getElementById('successAlert');
                if (alertBox) {
                    alertBox.classList.remove('show');
                    alertBox.classList.add('fade');
                }
            }, 5000);
        </script>
    @endsection