@props(['pendingBrokers'])
<x-dashboard.card class="w-full">

    <h3 class="text-md font-bold mb-4">Broker Approvals</h3>
    <x-ui.table>
        <x-ui.table.head>
            <th>Name</th>
            <th>Email</th>
            <th>Location</th>
        </x-ui.table.head>

        @forelse($pendingBrokers as $broker)
            <x-ui.table.row>
                <td class="text-sm px-4 text-center">{{$broker->user->name}}</td>
                <td class="text-sm px-4 text-center">{{$broker->user->email}}</td>
                <td class="text-sm px-4 text-center">{{$broker->location}}</td>
                <x-slot:actions>
                    <div class="flex items-center justify-center space-x-2 py-1 px-4">
                        <form action="{{route('admin.brokers.approve', $broker)}}"
                              method="post"
                              class=" h-full items-center flex justify-center">
                            @csrf
                            <x-ui.button-sm variant="green" tooltip="Approve Broker">
                                <x-heroicon-o-check class="w-4"/>
                            </x-ui.button-sm>
                        </form>
                        <form action="{{route('admin.brokers.destroy', $broker)}}"
                              onsubmit="return confirm('Are you sure to reject this ?')" method="post"
                              class=" h-full items-center flex justify-center">
                            @csrf
                            @method('DELETE')
                            <x-ui.button-sm tooltip="Reject Broker" variant="red">
                                <x-heroicon-o-x-mark class="w-4"/>
                            </x-ui.button-sm>
                        </form>
                        <x-ui.button-sm tooltip="Edit Details" :link="route('admin.brokers.edit', $broker)"
                                        variant="ghost">
                            <x-heroicon-o-pencil-square class="w-4"/>
                        </x-ui.button-sm>
                    </div>
                </x-slot:actions>
            </x-ui.table.row>
        @empty
            <x-ui.table.row>
                <td colspan="4" class="text-center text-sm text-accent-600 py-2">No broker found</td>
            </x-ui.table.row>
        @endforelse
    </x-ui.table>
</x-dashboard.card>