@extends('layouts.admin')
@section('css')
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
    <style>
        /* Make Select2 match Bootstrap form-control style */
        .select2-container .select2-selection--single {
            height: 38px;
            padding: 5px 12px;
            font-size: 1rem;
            line-height: 1.5;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        /* Match focus state */
        .select2-container--focus .select2-selection--single {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
    </style>

    <style>
        .pagination {
            margin-bottom: 0;
        }

        .page-item.active .page-link {
            background-color: #7266ba;
            border-color: #7266ba;
        }

        .page-link {
            color: #7266ba;
            padding: 0.5rem 0.75rem;
        }

        .page-link:hover {
            color: #564aa3;
        }

        .pagination-rounded .page-link {
            border-radius: 30px !important;
            margin: 0 3px;
        }
    </style>
@endsection
@section('admin')
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex gap-2">
                {{-- <a href="?role=agency" class="btn btn-outline-primary {{ request('role') == 'agency' ? 'active' : '' }}">Agency</a> --}}
                <a href="?role=superadmin" class="btn btn-outline-primary {{ request('role') == 'superadmin' ? 'active' : '' }}">Super Admin</a>
                <a href="?role=subadmin" class="btn btn-outline-primary {{ request('role') == 'subadmin' ? 'active' : '' }}">Sub Admin</a>
                <a href="?role=directseller" class="btn btn-outline-primary {{ request('role') == 'directseller' ? 'active' : '' }}">Direct Sellers</a>
                <a href="?role=coinseller" class="btn btn-outline-primary {{ request('role') == 'coinseller' ? 'active' : '' }}">Coin Sellers</a>
                <a href="?role=bd" class="btn btn-outline-primary {{ request('role') == 'bd' ? 'active' : '' }}">BD</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">Pending Requests: {{ strtoupper(request('role', 'All')) }}</div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>User ID</th>
                            <th>Name</th>
                            <th>Applying For</th>
                            <th>Assigned By</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($pending as $item)
                            <tr>
                                <td>{{ $item->assignedToUser->user_id ?? '' }}</td>
                                <td>{{ $item->assignedToUser->name ?? '' }}</td>
                                <td><span class="badge bg-info">{{ $item->assigned_to_role_name ?? '' }}</span></td>
                                <td>{{ $item->assignedByUser->name ?? '' }} ({{ $item->assigned_by_role ?? '' }})</td>
                                <td>
                                    <button onclick="approveUser({{ $item->id }})"
                                        class="btn btn-success btn-sm">Approve</button>
                                    <button onclick="rejectUser({{ $item->id }})"
                                        class="btn btn-danger btn-sm">Reject</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-center mt-4">
                {!! $pending->links('pagination::bootstrap-5') !!}
            </div>
        </div>
    </div>
@endsection



@section('js')
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Select2 for Sub Admin Modal
            $('.select2-subadmin').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: "Select user",
                allowClear: true,
                dropdownParent: $('#createModal1')
            });

            // Initialize Select2 for Agency Modal (Sub Admin dropdown)
            $('.select2-agency-subadmin').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: "Select sub admin",
                allowClear: true,
                dropdownParent: $('#createModal')
            });

            // Initialize Select2 for Agency Modal (Agency dropdown)
            $('.select2-agency').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: "Select agency user",
                allowClear: true,
                dropdownParent: $('#createModal')
            });

            // Initialize Select2 for BD Modal (Sub Admin dropdown)
            $('.select2-bd-subadmin').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: "Select sub admin",
                allowClear: true,
                dropdownParent: $('#createModal2')
            });

            // Initialize Select2 for BD Modal (BD dropdown)
            $('.select2-bd').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: "Select BD user",
                allowClear: true,
                dropdownParent: $('#createModal2')
            });

            // Fix for modal focus
            $('#createModal1').on('shown.bs.modal', function() {
                $('.select2-subadmin').trigger('focus');
            });

            $('#createModal').on('shown.bs.modal', function() {
                $('.select2-agency-subadmin').trigger('focus');
            });

            $('#createModal2').on('shown.bs.modal', function() {
                $('.select2-bd-subadmin').trigger('focus');
            });
        });

        function approveUser(id) {
            if (confirm('Are you sure you want to approve this user?')) {
                sendApprovalRequest(id, 'approve');
            }
        }

        function rejectUser(id) {
            if (confirm('Are you sure you want to reject this request?')) {
                sendApprovalRequest(id, 'reject');
            }
        }

        function sendApprovalRequest(id, action) {
            $.ajax({
                url: `/admin/process-approval/${id}`,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    action: action
                },
                success: function(response) {
                    console.log(response);
                    alert(response.success);
                    location.reload(); // Reload to update the table
                },
                error: function(xhr) {
                    alert('Something went wrong. Please try again.');
                }
            });
        }
    </script>
@endsection