@php use App\Enums\ReportStatus; @endphp
<x-dashboard.admin.layout title="Reports">
    <x-slot:heading>
        <x-dashboard.page-heading
            title="Manage Reports"
            description="Approve, Resolve or Remove content based on report."
        />
    </x-slot:heading>
    <div class="flex items-center justify-center px-4 pb-4 pt-0 md:px-8 md:pb-8">
        <x-dashboard.card class="w-full">
            <h3 class="text-md font-bold mb-2">Reported deals</h3>
            <h4 class="text-sm font-medium mb-4 text-accent-600">Total Reports: {{$reports->count()}}</h4>
            <x-ui.table>
                <x-ui.table.head>
                    <th>Type</th>
                    <th>Description</th>
                    <th>Customer</th>
                    <th>Status</th>
                    <th class="flex w-full justify-center items-center">
                        Deal
                        <x-heroicon-o-arrow-top-right-on-square class="w-4 ml-1"/>
                    </th>
                </x-ui.table.head>

                @forelse($reports as $report)
                    <x-ui.table.row>
                        <td class="text-sm font-medium px-4 text-center">{{ucfirst($report->type->value)}}</td>
                        <td class="text-sm text-accent-600 px-4 text-center max-w-40">{{$report->description}}</td>
                        <td class="text-sm px-4 text-center">{{$report->user->name}}</td>
                        <td class="text-center px-4">
                            <x-ui.badge
                                :title="$report->status->value"
                                :variant="match ($report->status){
                                    ReportStatus::Resolved => 'green',
                                    ReportStatus::Pending => 'yellow',
                                    ReportStatus::Rejected => 'red'
                                }"
                            />
                        </td>
                        <td class="text-sm px-4  text-center truncate max-w-40">
                            <a target="_blank" class="hover:underline"
                               href="{{route('explore', ['show' => $report->deals()->first()->id])}}">
                                {{$report->deals()->first()->title}}
                            </a>
                        </td>
                        <x-slot:actions>
                            <div class="flex items-center justify-center space-x-2 py-1 px-2">
                                @if($report->status !== ReportStatus::Resolved)
                                    <form action="{{route('admin.reports.resolve', $report)}}"
                                          onsubmit="return confirm('Are you sure to mark this resolve ?')" method="post"
                                          class=" h-full items-center flex justify-center">
                                        @csrf
                                        <x-ui.button-sm tooltip="Mark resolved" variant="green">
                                            <x-heroicon-o-check class="w-4"/>
                                        </x-ui.button-sm>
                                    </form>
                                @endif
                                @if($report->status !== ReportStatus::Rejected)
                                    <form action="{{route('admin.reports.reject', $report)}}"
                                          onsubmit="return confirm('Are you sure to reject this ?')" method="post"
                                          class=" h-full items-center flex justify-center">
                                        @csrf
                                        <x-ui.button-sm tooltip="Reject" variant="red">
                                            <x-heroicon-o-x-mark class="w-4"/>
                                        </x-ui.button-sm>
                                    </form>
                                @endif
                                <form action="{{route('admin.reports.remove-content', $report)}}"
                                      onsubmit="return confirm('Are you sure to remove the deal ?')" method="post"
                                      class=" h-full items-center flex justify-center">
                                    @csrf
                                    <x-ui.button-sm tooltip="Remove Content" variant="ghost">
                                        <x-heroicon-o-exclamation-triangle class="w-4"/>
                                    </x-ui.button-sm>
                                </form>
                            </div>
                        </x-slot:actions>
                    </x-ui.table.row>
                @empty
                    <x-ui.table.row>
                        <td colspan="2" class="text-center text-sm text-accent-600 py-2">No Customer found</td>
                    </x-ui.table.row>
                @endforelse
            </x-ui.table>
        </x-dashboard.card>
    </div>
</x-dashboard.admin.layout>