Atomcms-edit/resources/views/filament/pages/radio/dj-moderation.blade.php

<?php

use App\Models\RadioApplication;
use App\Models\RadioShout;
use App\Models\RadioSongRequest;

?>

<x-filament-panels::page>
    <div x-data="{ tab: 'shouts' }">
        <div class="flex gap-1 mb-6 border-b border-gray-200 dark:border-gray-700">
            <button @click="tab = 'shouts'" :class="{ 'border-primary-600 text-primary-600': tab === 'shouts', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300': tab !== 'shouts' }" class="px-4 py-2 text-sm font-medium border-b-2 transition flex items-center gap-2">
                <x-filament::icon name="heroicon-o-chat-bubble-oval-left" class="w-4 h-4" />
                Shouts
                <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">{{ RadioShout::where('approved', false)->count() }}</span>
            </button>
            <button @click="tab = 'requests'" :class="{ 'border-primary-600 text-primary-600': tab === 'requests', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300': tab !== 'requests' }" class="px-4 py-2 text-sm font-medium border-b-2 transition flex items-center gap-2">
                <x-filament::icon name="heroicon-o-musical-note" class="w-4 h-4" />
                Verzoeken
                <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">{{ RadioSongRequest::where('is_approved', false)->where('is_played', false)->count() }}</span>
            </button>
            <button @click="tab = 'applications'" :class="{ 'border-primary-600 text-primary-600': tab === 'applications', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300': tab !== 'applications' }" class="px-4 py-2 text-sm font-medium border-b-2 transition flex items-center gap-2">
                <x-filament::icon name="heroicon-o-user-group" class="w-4 h-4" />
                Aanmeldingen
                <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">{{ RadioApplication::where('status', 'pending')->count() }}</span>
            </button>
        </div>

        {{-- Shouts Tab --}}
        <div x-show="tab === 'shouts'">
            @php $pendingShouts = $this->getPendingShouts(); @endphp
            @php $reportedShouts = $this->getReportedShouts(); @endphp

            @if($pendingShouts->count() > 0)
                <h3 class="text-lg font-semibold mb-3">Wachtend op goedkeuring</h3>
                <div class="space-y-2 mb-6">
                    @foreach($pendingShouts as $shout)
                        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 flex items-start justify-between gap-4">
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-sm">{{ $shout->user?->username ?? 'Onbekend' }}</p>
                                <p class="text-sm text-gray-600 dark:text-gray-400 truncate">{{ $shout->message }}</p>
                                <p class="text-xs text-gray-400 mt-1">{{ $shout->created_at->diffForHumans() }}</p>
                            </div>
                            <div class="flex gap-2 shrink-0">
                                <x-filament::button wire:click="approveShout({{ $shout->id }})" color="success" size="xs" icon="heroicon-o-check">
                                    Goedkeuren
                                </x-filament::button>
                                <x-filament::button wire:click="deleteShout({{ $shout->id }})" color="danger" size="xs" icon="heroicon-o-trash" wire:confirm="Zeker weten?">
                                    Verwijderen
                                </x-filament::button>
                            </div>
                        </div>
                    @endforeach
                    {{ $pendingShouts->links() }}
                </div>
            @endif

            @if($reportedShouts->count() > 0)
                <h3 class="text-lg font-semibold mb-3">Gerapporteerde shouts</h3>
                <div class="space-y-2">
                    @foreach($reportedShouts as $shout)
                        <div class="bg-red-50 dark:bg-red-950 rounded-lg p-4 flex items-start justify-between gap-4">
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-sm">{{ $shout->user?->username ?? 'Onbekend' }}</p>
                                <p class="text-sm text-gray-600 dark:text-gray-400 truncate">{{ $shout->message }}</p>
                                <p class="text-xs text-gray-400 mt-1">{{ $shout->created_at->diffForHumans() }}</p>
                            </div>
                            <div class="flex gap-2 shrink-0">
                                <x-filament::button wire:click="dismissShoutReport({{ $shout->id }})" color="info" size="xs" icon="heroicon-o-flag">
                                    Negeren
                                </x-filament::button>
                                <x-filament::button wire:click="deleteShout({{ $shout->id }})" color="danger" size="xs" icon="heroicon-o-trash" wire:confirm="Zeker weten?">
                                    Verwijderen
                                </x-filament::button>
                            </div>
                        </div>
                    @endforeach
                    {{ $reportedShouts->links() }}
                </div>
            @endif

            @if($pendingShouts->count() === 0 && $reportedShouts->count() === 0)
                <p class="text-gray-500 text-center py-8">Geen shouts wachtend op moderatie</p>
            @endif
        </div>

        {{-- Song Requests Tab --}}
        <div x-show="tab === 'requests'">
            @php $requests = $this->getPendingRequests(); @endphp
            @if($requests->count() > 0)
                <div class="space-y-2">
                    @foreach($requests as $request)
                        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 flex items-start justify-between gap-4">
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-sm">{{ $request->user?->username ?? 'Onbekend' }}</p>
                                <p class="text-sm font-semibold">{{ $request->song_title }}</p>
                                @if($request->song_artist)
                                    <p class="text-sm text-gray-500">{{ $request->song_artist }}</p>
                                @endif
                                <div class="flex items-center gap-3 mt-1">
                                    <span class="text-xs text-gray-400">{{ $request->submitted_at->diffForHumans() }}</span>
                                    <span class="text-xs text-amber-500">{{ $request->votes }} stemmen</span>
                                </div>
                            </div>
                            <div class="flex gap-2 shrink-0">
                                <x-filament::button wire:click="approveRequest({{ $request->id }})" color="success" size="xs" icon="heroicon-o-check">
                                    Goedkeuren
                                </x-filament::button>
                                <x-filament::button wire:click="rejectRequest({{ $request->id }})" color="danger" size="xs" icon="heroicon-o-x-mark" wire:confirm="Zeker weten?">
                                    Afwijzen
                                </x-filament::button>
                            </div>
                        </div>
                    @endforeach
                    {{ $requests->links() }}
                </div>
            @else
                <p class="text-gray-500 text-center py-8">Geen verzoeken wachtend op goedkeuring</p>
            @endif
        </div>

        {{-- Applications Tab --}}
        <div x-show="tab === 'applications'">
            @php $applications = $this->getPendingApplications(); @endphp
            @if($applications->count() > 0)
                <div class="space-y-2">
                    @foreach($applications as $app)
                        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 flex items-start justify-between gap-4">
                            <div class="flex-1 min-w-0">
                                <p class="font-medium">{{ $app->user?->username ?? 'Onbekend' }}</p>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    {{ $app->rank?->name ?? 'Geen functie' }} &middot; {{ $app->age }} jaar
                                </p>
                                <p class="text-sm mt-2">{{ $app->motivation }}</p>
                                @if($app->experience)
                                    <p class="text-xs text-gray-400 mt-1">Ervaring: {{ $app->experience }}</p>
                                @endif
                                <p class="text-xs text-gray-400 mt-1">{{ $app->created_at->diffForHumans() }}</p>
                            </div>
                            <div class="flex gap-2 shrink-0">
                                <x-filament::button wire:click="approveApplication({{ $app->id }})" color="success" size="xs" icon="heroicon-o-check" wire:confirm="Aanmelding goedkeuren?">
                                    Goedkeuren
                                </x-filament::button>
                                <x-filament::button wire:click="rejectApplication({{ $app->id }})" color="danger" size="xs" icon="heroicon-o-x-mark" wire:confirm="Aanmelding afwijzen?">
                                    Afwijzen
                                </x-filament::button>
                            </div>
                        </div>
                    @endforeach
                    {{ $applications->links() }}
                </div>
            @else
                <p class="text-gray-500 text-center py-8">Geen aanmeldingen wachtend</p>
            @endif
        </div>
    </div>
</x-filament-panels::page>