@extends('admin.layout')

@section('title', 'Manage Prompts')

@section('admin')
    <div class="flex flex-wrap items-center justify-between gap-3">
        <h1 class="text-2xl font-extrabold tracking-tight">Prompts</h1>
        <a href="{{ route('admin.prompts.create') }}" class="btn btn-primary">+ New prompt</a>
    </div>

    <form method="GET" class="mt-6 flex gap-2">
        <input type="search" name="q" value="{{ $q }}" placeholder="Search prompts…" class="field">
        <button type="submit" class="btn btn-ghost">Search</button>
    </form>

    <div class="surface mt-6 overflow-x-auto">
        <table class="w-full min-w-[42rem] text-left text-sm">
            <thead class="border-b border-ink-700 text-xs uppercase tracking-wide text-slate-500">
                <tr>
                    <th class="px-4 py-3 font-semibold">Title</th>
                    <th class="px-4 py-3 font-semibold">Category</th>
                    <th class="px-4 py-3 font-semibold">Access</th>
                    <th class="px-4 py-3 font-semibold">Status</th>
                    <th class="px-4 py-3 font-semibold">Views</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-ink-700">
                @forelse ($prompts as $prompt)
                    <tr class="hover:bg-ink-800/50">
                        <td class="px-4 py-3">
                            <a href="{{ route('admin.prompts.edit', $prompt) }}" class="font-medium text-slate-100 hover:text-brand-300">
                                {{ $prompt->title }}
                            </a>
                            @if ($prompt->is_featured)
                                <span class="ml-1.5 text-[10px] font-bold uppercase text-amber-400">★</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-slate-400">{{ $prompt->category?->name ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <span class="text-xs font-bold uppercase {{ $prompt->is_premium ? 'text-brand-300' : 'text-emerald-400' }}">
                                {{ $prompt->is_premium ? 'Premium' : 'Free' }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="text-xs {{ $prompt->is_published ? 'text-slate-300' : 'text-amber-400' }}">
                                {{ $prompt->is_published ? 'Published' : 'Draft' }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-slate-400">{{ number_format($prompt->views) }}</td>
                        <td class="px-4 py-3">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('admin.prompts.edit', $prompt) }}" class="text-xs font-semibold text-slate-400 hover:text-white">Edit</a>
                                <form method="POST" action="{{ route('admin.prompts.destroy', $prompt) }}"
                                      onsubmit="return confirm('Delete this prompt? This cannot be undone.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-xs font-semibold text-rose-400 hover:text-rose-300">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-10 text-center text-slate-500">No prompts found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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