@extends('AdminMaster.authMaster')

@section('content')
<!-- <style>
    .content-wrapper {
        background-color: #fff;
    }

</style> -->

<div class="row">
    <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
            <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())
                <table class="table table-responsive table-bordered">
                    <thead>
                        <tr>
                            {{-- <th>ID</th> --}}
                            <th>Name</th>
                            <th>Email</th>
                            <th>Registered At</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($pendingUsers as $user)
                        <tr>
                            {{-- <td>{{ $user->id }}</td> --}}
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->created_at->format('Y-m-d H:i') }}</td>
                            <td>

                                <button type="submit" class="approve-btn text-green-600 hover:text-green-700 transition-all duration-300" style="background: green; color: #fff; border: 1px solid #fff;padding: 5px 10px; "  data-id="{{ $user->id }}">
                                    Yes
                                </button>

                                {{-- <form action="{{ route('admin.approve-user', $user->id) }}" method="POST">
                                    @csrf

                                </form> --}}

                                <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>
                @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