@extends('admin.layout')
@section('title', 'Follows & Blocks')

@section('content')

{{-- Search + tabs --}}
<form method="GET" action="{{ route('admin.social.index') }}"
      class="bg-white rounded-lg border border-gray-100 p-4 mb-4 flex flex-wrap gap-3 items-end">
    <input type="hidden" name="tab" value="{{ $tab }}">
    <div class="flex-1 min-w-40">
        <label class="block text-xs text-gray-500 mb-1">Zoeken</label>
        <input type="text" name="q" value="{{ request('q') }}" placeholder="Naam of e-mail…"
               class="w-full text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
    </div>
    <button type="submit" class="px-4 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition">Filteren</button>
    <a href="{{ route('admin.social.index', ['tab' => $tab]) }}" class="px-4 py-1.5 border border-gray-200 text-gray-500 text-sm rounded-lg hover:bg-gray-50 transition">Reset</a>
</form>

{{-- Tab switcher --}}
<div class="flex gap-1 mb-4">
    @foreach (['follows' => 'Follows (' . $follows->total() . ')', 'blocks' => 'Blokkeringen (' . $blocks->total() . ')'] as $key => $label)
        <a href="{{ route('admin.social.index', array_merge(request()->query(), ['tab' => $key])) }}"
           class="px-4 py-1.5 text-sm rounded-lg transition
               {{ $tab === $key ? 'bg-blue-600 text-white' : 'bg-white border border-gray-200 text-gray-500 hover:bg-gray-50' }}">
            {{ $label }}
        </a>
    @endforeach
</div>

{{-- Follows tab --}}
@if ($tab === 'follows')
    <div class="bg-white rounded-lg border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-xs text-gray-400 uppercase tracking-wide">
                    <tr>
                        <th class="px-4 py-3 text-left">Volger</th>
                        <th class="px-4 py-3 text-left">Gevolgde</th>
                        <th class="px-4 py-3 text-left">Datum</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse ($follows as $follow)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-2.5">
                                @if ($follow->follower)
                                    <a href="{{ route('admin.users.show', $follow->follower) }}"
                                       class="text-sm font-medium text-gray-700 hover:text-blue-600 transition"><span class="text-gray-400 font-normal text-xs">#{{ $follow->follower->id }}</span> {{ $follow->follower->name }}</a>
                                    <p class="text-xs text-gray-400">{{ $follow->follower->email }}</p>
                                @else
                                    <span class="text-gray-300 text-xs italic">Verwijderd</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5">
                                @if ($follow->following)
                                    <a href="{{ route('admin.users.show', $follow->following) }}"
                                       class="text-sm font-medium text-gray-700 hover:text-blue-600 transition"><span class="text-gray-400 font-normal text-xs">#{{ $follow->following->id }}</span> {{ $follow->following->name }}</a>
                                    <p class="text-xs text-gray-400">{{ $follow->following->email }}</p>
                                @else
                                    <span class="text-gray-300 text-xs italic">Verwijderd</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5 text-xs text-gray-400 whitespace-nowrap">
                                {{ $follow->created_at->format('d/m/Y H:i') }}
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="px-4 py-8 text-center text-sm text-gray-400">Geen follows gevonden.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($follows->hasPages())
            <div class="px-5 py-4 border-t border-gray-100">{{ $follows->links() }}</div>
        @endif
    </div>
@endif

{{-- Blocks tab --}}
@if ($tab === 'blocks')
    <div class="bg-white rounded-lg border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-xs text-gray-400 uppercase tracking-wide">
                    <tr>
                        <th class="px-4 py-3 text-left">Blokkeerder</th>
                        <th class="px-4 py-3 text-left">Geblokkeerde</th>
                        <th class="px-4 py-3 text-left">Datum</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse ($blocks as $block)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-2.5">
                                @if ($block->blocker)
                                    <a href="{{ route('admin.users.show', $block->blocker) }}"
                                       class="text-sm font-medium text-gray-700 hover:text-blue-600 transition"><span class="text-gray-400 font-normal text-xs">#{{ $block->blocker->id }}</span> {{ $block->blocker->name }}</a>
                                    <p class="text-xs text-gray-400">{{ $block->blocker->email }}</p>
                                @else
                                    <span class="text-gray-300 text-xs italic">Verwijderd</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5">
                                @if ($block->blocked)
                                    <a href="{{ route('admin.users.show', $block->blocked) }}"
                                       class="text-sm font-medium text-gray-700 hover:text-blue-600 transition"><span class="text-gray-400 font-normal text-xs">#{{ $block->blocked->id }}</span> {{ $block->blocked->name }}</a>
                                    <p class="text-xs text-gray-400">{{ $block->blocked->email }}</p>
                                @else
                                    <span class="text-gray-300 text-xs italic">Verwijderd</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5 text-xs text-gray-400 whitespace-nowrap">
                                {{ $block->created_at->format('d/m/Y H:i') }}
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="px-4 py-8 text-center text-sm text-gray-400">Geen blokkeringen gevonden.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($blocks->hasPages())
            <div class="px-5 py-4 border-t border-gray-100">{{ $blocks->links() }}</div>
        @endif
    </div>
@endif

@endsection