@extends('layouts.admin')

@section('content')
<div class="mb-6 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
    <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">Syllabus Builder</p>
        <h1 class="mt-2 text-3xl font-semibold text-white">Topics Management</h1>
        <p class="mt-2 max-w-3xl text-sm text-slate-300">Manage exam-wise, subject-wise topics used across AI analysis.</p>
    </div>
    <div class="flex flex-wrap gap-2">
        <button type="button" onclick="document.getElementById('bulkModal').classList.remove('hidden')"
                class="admin-action-btn bg-cyan-600 text-white">Bulk Add</button>
        <a href="{{ route('admin.topics.create') }}" class="admin-action-btn bg-green-600 text-white">+ Add Topic</a>
    </div>
</div>

@if(session('status'))
    <div class="mb-5 rounded-xl border border-emerald-400/30 bg-emerald-500/10 px-4 py-2 text-sm text-emerald-200">{{ session('status') }}</div>
@endif

<form method="GET" class="mb-5 flex flex-wrap items-center gap-3">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search topic"
           class="p-2 rounded bg-gray-800 border border-gray-700 text-gray-200">

    <select name="exam_type" class="p-2 rounded bg-gray-800 border border-gray-700 text-gray-200">
        <option value="">All Exam Types</option>
        @foreach($examTypes as $type)
            <option value="{{ $type }}" @selected(request('exam_type') === $type)>{{ $type }}</option>
        @endforeach
    </select>

    <select name="subject" class="p-2 rounded bg-gray-800 border border-gray-700 text-gray-200">
        <option value="">All Subjects</option>
        @foreach($subjects as $sub)
            <option value="{{ $sub }}" @selected(request('subject') === $sub)>{{ $sub }}</option>
        @endforeach
    </select>

    <button class="px-4 py-2 bg-indigo-600 rounded text-white">Filter</button>
    <a href="{{ route('admin.topics.index') }}" class="px-4 py-2 rounded bg-gray-700 text-white">Reset</a>
</form>

<div class="overflow-x-auto bg-gray-800 rounded-xl shadow">
    <table class="w-full text-sm text-gray-300">
        <thead class="bg-gray-900 text-gray-200">
            <tr>
                <th class="p-3 text-left">Exam</th>
                <th class="p-3 text-left">Subject</th>
                <th class="p-3 text-left">Topic</th>
                <th class="p-3 text-left">Slug</th>
                <th class="p-3 text-left">Status</th>
                <th class="p-3 text-left">Action</th>
            </tr>
        </thead>
        <tbody>
        @forelse($topics as $t)
            <tr class="border-b border-gray-700 hover:bg-gray-700/40 transition">
                <td class="p-3"><span class="px-2 py-0.5 text-xs rounded bg-cyan-500/15 text-cyan-200">{{ $t->exam_type }}</span></td>
                <td class="p-3">{{ $t->subject }}</td>
                <td class="p-3 font-medium text-white">{{ $t->name }}</td>
                <td class="p-3 text-xs text-slate-400">{{ $t->slug }}</td>
                <td class="p-3">
                    @if($t->status)
                        <span class="px-2 py-1 text-xs bg-green-600 rounded">Active</span>
                    @else
                        <span class="px-2 py-1 text-xs bg-gray-600 rounded">Inactive</span>
                    @endif
                </td>
                <td class="p-3 flex flex-wrap gap-2">
                    <a href="{{ route('admin.topics.edit', $t) }}" class="admin-action-btn bg-blue-600 text-white">Edit</a>

                    <form method="POST" action="{{ route('admin.topics.toggle', $t) }}">
                        @csrf
                        <button class="admin-action-btn bg-yellow-600 text-white">Toggle</button>
                    </form>

                    <form method="POST" action="{{ route('admin.topics.destroy', $t) }}"
                          x-data
                          @submit.prevent="appConfirm('Delete this topic?', { title: 'Delete', confirmText: 'Delete' }).then(c => c && $el.submit())">
                        @csrf @method('DELETE')
                        <button class="admin-action-btn bg-red-600 text-white">Delete</button>
                    </form>
                </td>
            </tr>
        @empty
            <tr><td colspan="6" class="p-6 text-center text-slate-400">No topics found.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $topics->links() }}</div>

{{-- Bulk Add Modal --}}
<div id="bulkModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
    <div class="w-full max-w-lg rounded-2xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-white">Bulk Add Topics</h3>
            <button type="button" onclick="document.getElementById('bulkModal').classList.add('hidden')"
                    class="text-slate-400 hover:text-white">✕</button>
        </div>

        <form method="POST" action="{{ route('admin.topics.bulk') }}" class="space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-semibold text-slate-100">Exam Type *</label>
                <input type="text" name="exam_type" required placeholder="RAS / IAS"
                       class="mt-2 w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-100">Subject *</label>
                <input type="text" name="subject" required placeholder="History / Geography"
                       class="mt-2 w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-100">Topic Names * (one per line or comma-separated)</label>
                <textarea name="names" rows="6" required
                          placeholder="Medieval History&#10;Modern History&#10;World History"
                          class="mt-2 w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white"></textarea>
            </div>

            <div class="flex gap-3 pt-2">
                <button type="submit" class="admin-action-btn bg-green-600 text-white">Add All</button>
                <button type="button" onclick="document.getElementById('bulkModal').classList.add('hidden')"
                        class="admin-action-btn bg-slate-700 text-white">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection