@props(['deals' => []])
<x-dashboard.card class="w-full">
    <h3 class="text-md font-bold mb-2">Pending deals</h3>
    <x-ui.table>
        <x-ui.table.head>
            <th>Title</th>
            <th>Description</th>
            <th>Link</th>
            <th>Category</th>
            <th>Broker</th>
        </x-ui.table.head>

        @forelse($deals as $deal)
            <x-ui.table.row>
                <td class="text-sm font-medium px-4 text-center truncate max-w-20">{{ucfirst($deal->title)}}</td>
                <td class="text-sm text-accent-600 px-4 text-center truncate max-w-60">{{$deal->description}}</td>
                <td class="text-sm px-4 text-center">{{$deal->link}}</td>
                <td class="text-sm px-4 text-center">{{$deal->category->name}}</td>
                <td class="text-sm px-4 text-center">{{$deal->broker->name}}</td>
                <x-slot:actions>
                    <div class="flex items-center justify-center space-x-2 py-1 px-2">
                        <form action="{{route('admin.deals.approve', $deal)}}"
                              onsubmit="return confirm('Are you sure to activate the deal ?')" method="post"
                              class=" h-full items-center flex justify-center">
                            @csrf
                            <x-ui.button-sm tooltip="Approve deal" variant="green">
                                <x-heroicon-o-check class="w-4"/>
                            </x-ui.button-sm>
                        </form>

                        <form action="{{route('admin.deals.reject', $deal)}}"
                              onsubmit="return confirm('Are you sure to delete the deal ?')" method="post"
                              class=" h-full items-center flex justify-center">
                            @csrf
                            <x-ui.button-sm tooltip="Delete deal" variant="red">
                                <x-heroicon-o-x-mark class="w-4"/>
                            </x-ui.button-sm>
                        </form>

                        <x-ui.button-sm data-deal-id="{{$deal->id}}" class="view-deal-btn" tooltip="View Content" variant="ghost">
                            <x-heroicon-o-eye class="w-4"/>
                        </x-ui.button-sm>
                    </div>
                </x-slot:actions>
            </x-ui.table.row>
        @empty
            <x-ui.table.row>
                <td colspan="5" class="text-center text-sm text-accent-600 py-2">No deals found</td>
            </x-ui.table.row>
        @endforelse
    </x-ui.table>
</x-dashboard.card>