@extends('layouts.admin')
@section('content')
<style>
    .syl-card { border:1px solid rgba(255,255,255,0.14); border-radius:1.25rem;
        background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02)),rgba(7,12,28,0.48);
        box-shadow:0 12px 30px rgba(2,6,23,0.26); padding:1.25rem;
        transition:transform .2s ease, border-color .2s ease; }
    .syl-card:hover { transform:translateY(-3px); border-color:rgba(34,211,238,0.4); }
    .syl-field,.syl-select { width:100%; border-radius:0.75rem; border:1px solid rgba(255,255,255,0.12);
        background:rgba(2,6,23,0.45); color:white; padding:0.6rem 0.9rem; outline:none; font-size:0.875rem; }
    .syl-select option { background:#0f172a; color:white; }
    .status-pill { display:inline-flex; align-items:center; gap:0.35rem;
        padding:0.2rem 0.65rem; border-radius:9999px; font-size:0.65rem; font-weight:700;
        text-transform:uppercase; letter-spacing:0.08em; }
    .status-ready { background:rgba(34,197,94,0.15); color:#86efac; border:1px solid rgba(34,197,94,0.35); }
    .status-pending { background:rgba(234,179,8,0.15); color:#fde047; border:1px solid rgba(234,179,8,0.35); }
    .status-processing { background:rgba(59,130,246,0.15); color:#93c5fd; border:1px solid rgba(59,130,246,0.35); }
    .status-failed { background:rgba(239,68,68,0.15); color:#fca5a5; border:1px solid rgba(239,68,68,0.35); }
</style>

<div class="space-y-6">
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <h1 class="text-3xl font-bold text-white">Syllabus Library</h1>
            <p class="mt-1 text-sm text-slate-300">Uploaded PDFs — AI question generation isi se hoga.</p>
        </div>
        <a href="{{ route('admin.syllabi.create') }}" class="admin-action-btn bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-bold">
            + Upload Syllabus
        </a>
    </div>

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

    <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-3">
        <select name="exam_type" class="syl-select" onchange="this.form.submit()">
            <option value="">— All Exam Types —</option>
            @foreach($examTypes as $key => $label)
                <option value="{{ $key }}" {{ request('exam_type') == $key ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
        </select>
        <select name="status" class="syl-select" onchange="this.form.submit()">
            <option value="">— All Statuses —</option>
            @foreach(['pending','processing','ready','failed'] as $st)
                <option value="{{ $st }}" {{ request('status') == $st ? 'selected' : '' }}>{{ ucfirst($st) }}</option>
            @endforeach
        </select>
        <input type="text" name="search" class="syl-field" placeholder="Search title / filename..." value="{{ request('search') }}">
        <div class="flex gap-2">
            <button class="admin-action-btn bg-cyan-600 text-white flex-1">Search</button>
            <a href="{{ route('admin.syllabi.index') }}" class="admin-action-btn bg-slate-700 text-white">Reset</a>
        </div>
    </form>

    @if($syllabi->isEmpty())
        <div class="syl-card text-center py-14">
            <p class="text-slate-300 text-lg">Abhi koi syllabus upload nahi hua.</p>
            <a href="{{ route('admin.syllabi.create') }}" class="admin-action-btn bg-cyan-600 text-white mt-4 inline-block">+ Upload First Syllabus</a>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($syllabi as $s)
                <div class="syl-card flex flex-col">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex-1 min-w-0">
                            <p class="text-white font-semibold truncate" title="{{ $s->title }}">{{ $s->title }}</p>
                            <p class="text-xs text-slate-400 truncate mt-1">{{ $s->file_name }}</p>
                        </div>
                        <span class="status-pill status-{{ $s->status }}">{{ $s->status }}</span>
                    </div>

                    <div class="mt-3 flex flex-wrap gap-2 text-xs">
                        <span class="px-2 py-0.5 rounded-md bg-cyan-500/15 text-cyan-300 border border-cyan-500/30">
                            {{ $examTypes[$s->exam_type] ?? $s->exam_type }}
                        </span>
                        @if($s->subject)
                            <span class="px-2 py-0.5 rounded-md bg-purple-500/15 text-purple-300 border border-purple-500/30">{{ $s->subject }}</span>
                        @else
                            <span class="px-2 py-0.5 rounded-md bg-slate-500/15 text-slate-300 border border-slate-500/30">All Subjects</span>
                        @endif
                    </div>

                    <div class="mt-3 text-xs text-slate-400">
                        📄 {{ number_format($s->file_size / 1024, 0) }} KB
                        @if($s->pages) • {{ $s->pages }} pages @endif
                        • {{ $s->created_at->format('d M Y') }}
                    </div>

                    @if($s->status === 'failed' && $s->error_message)
                        <p class="mt-2 text-xs text-red-300 line-clamp-2">⚠ {{ $s->error_message }}</p>
                    @endif

                    <div class="mt-4 pt-3 border-t border-white/10 flex gap-2 flex-wrap">
                        <a href="{{ $s->file_url }}" target="_blank"
                           class="text-center text-xs font-semibold py-2 px-3 rounded-lg bg-cyan-500/15 text-cyan-300 border border-cyan-500/30 hover:bg-cyan-500/25">
                            👁 PDF
                        </a>
                        <a href="{{ route('admin.syllabi.show', $s) }}"
                           class="flex-1 text-center text-xs font-semibold py-2 rounded-lg bg-indigo-500/15 text-indigo-300 border border-indigo-500/30 hover:bg-indigo-500/25">
                            ℹ Details
                        </a>
                        @if($s->status === 'failed')
                            <form action="{{ route('admin.syllabi.retry', $s) }}" method="POST">
                                @csrf
                                <button class="text-xs font-semibold py-2 px-3 rounded-lg bg-yellow-500/15 text-yellow-300 border border-yellow-500/30 hover:bg-yellow-500/25">
                                    🔄 Retry
                                </button>
                            </form>
                        @endif
                        <form action="{{ route('admin.syllabi.destroy', $s) }}" method="POST" onsubmit="return confirm('Delete?')">
                            @csrf @method('DELETE')
                            <button class="text-xs font-semibold py-2 px-3 rounded-lg bg-red-500/15 text-red-300 border border-red-500/30 hover:bg-red-500/25">
                                🗑
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>

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

{{-- Auto-refresh agar koi pending/processing hai --}}
@if($syllabi->contains(fn($s) => in_array($s->status, ['pending','processing'])))
    <script>setTimeout(() => location.reload(), 8000);</script>
@endif
@endsection