@extends('layouts.admin-apoteker')

@section('title', 'Daftar Profil User')

@section('content')
<div class="max-w-6xl mx-auto px-6 py-12 space-y-8">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">👥 Daftar Profil User</h1>

    {{-- Filter --}}
    <form method="GET" class="flex flex-wrap gap-4 items-end mb-8">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">✅ Verified</label>
            <select name="verified" class="input w-40">
                <option value="">-- All --</option>
                <option value="1" {{ request('verified') === '1' ? 'selected' : '' }}>✔️ Verified</option>
                <option value="0" {{ request('verified') === '0' ? 'selected' : '' }}>❌ Not Verified</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">👁️ Visible</label>
            <select name="visible" class="input w-40">
                <option value="">-- All --</option>
                <option value="1" {{ request('visible') === '1' ? 'selected' : '' }}>👁️ Visible</option>
                <option value="0" {{ request('visible') === '0' ? 'selected' : '' }}>🚫 Hidden</option>
            </select>
        </div>

        <div>
            <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded shadow hover:bg-blue-700 mt-6">
                🔎 Filter
            </button>
        </div>
    </form>

    {{-- Table --}}
    <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded shadow">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                <tr>
                    <th class="px-6 py-3">Nama User</th>
                    <th class="px-6 py-3">Headline</th>
                    <th class="px-6 py-3">Verified</th>
                    <th class="px-6 py-3">Visible</th>
                    <th class="px-6 py-3">View Count</th>
                    <th class="px-6 py-3">Aksi</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                @foreach ($profiles as $profile)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {{ $profile->user->name ?? '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {{ $profile->headline ?? '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($profile->is_verified)
                                <span class="text-green-600 font-semibold">✔️ Verified</span>
                            @else
                                <span class="text-red-600 font-semibold">❌ Not Verified</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($profile->is_visible)
                                <span class="text-blue-600 font-semibold">👁️ Visible</span>
                            @else
                                <span class="text-gray-500 font-semibold">🚫 Hidden</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            👁️ {{ $profile->view_count }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <a href="{{ route('admin.user-profiles.edit', $profile->id) }}"
                               class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">✏️ Edit</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    <div class="mt-6">
        {{ $profiles->links() }}
    </div>
</div>
@endsection