@extends('AdminMaster.authMaster')

@section('content')
    <div class="bk-btn">
        <a href="{{ route('dashboard') }}">Back to Dashboard</a>
    </div>
    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card card-custom">
                <div class="card-body">
                    <h4 class="card-title">Pending User Approvals</h4>

                    @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    @if ($pendingUsers->count())
                        <div class="table-responsive custom-table">
                            <table class="table table-responsive table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Registered At</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($pendingUsers as $user)
                                        <tr>
                                            <td>{{ $user->name }}</td>
                                            <td>{{ $user->email }}</td>
                                            <td>{{ $user->created_at->format('Y-m-d H:i') }}</td>
                                            <td>
                                                <button type="button"
                                                    class="approve-btn text-green-600 hover:text-green-700 transition-all duration-300"
                                                    style="background: #e5623b; color: #fff; border: 1px solid #fff; padding: 5px 10px;"
                                                    data-id="{{ $user->id }}">
                                                    Yes
                                                </button>

                                                <form id="approve-form-{{ $user->id }}"
                                                    action="{{ route('admin.approve-user', $user->id) }}" method="POST"
                                                    style="display: none;">
                                                    @csrf
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-end mt-3">
                            {{ $pendingUsers->links('pagination::bootstrap-4') }}
                        </div>
                    @else
                        <p>No users waiting for approval.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".approve-btn").forEach(button => {
                button.addEventListener("click", function () {
                    let userId = this.getAttribute("data-id");
                    Swal.fire({
                        title: "Are you sure?",
                        text: "You are about to approve this user!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#3085d6",
                        cancelButtonColor: "#d33",
                        confirmButtonText: "Yes, approve!",
                        cancelButtonText: "Cancel"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            document.getElementById("approve-form-" + userId).submit();
                        }
                    });
                });
            });
        });
    </script>
@endsection