@extends('layouts.admin')
@section('content')
<style>
    .syl-card { border:1px solid rgba(255,255,255,0.14); border-radius:1.5rem;
        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 24px 50px rgba(2,6,23,0.26); backdrop-filter:blur(12px); padding:2rem; }
    .syl-field,.syl-select { width:100%; border-radius:1rem; border:1px solid rgba(255,255,255,0.12);
        background:rgba(2,6,23,0.45); color:white; padding:0.8rem 1rem; outline:none; }
    .syl-field:focus,.syl-select:focus { border-color:rgba(34,211,238,0.6);
        box-shadow:0 0 0 3px rgba(34,211,238,0.1); }
    .syl-select option { background:#0f172a; color:white; }
    .syl-dropzone { border:2px dashed rgba(34,211,238,0.4); border-radius:1rem;
        background:rgba(8,47,73,0.3); padding:2.5rem 1.5rem; text-align:center;
        cursor:pointer; transition:all 0.2s ease; }
    .syl-dropzone:hover,.syl-dropzone.dragover { border-color:#06b6d4; background:rgba(6,182,212,0.12); }
    .syl-dropzone.has-file { border-color:rgba(34,197,94,0.6); background:rgba(34,197,94,0.08); }
    .syl-badge { display:inline-block; padding:0.25rem 0.75rem; border-radius:9999px;
        font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
        background:linear-gradient(135deg,rgba(168,85,247,0.2),rgba(236,72,153,0.2));
        border:1px solid rgba(168,85,247,0.4); color:#d8b4fe; }
</style>

<div class="space-y-6">
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <span class="syl-badge">Step 1 — Syllabus</span>
            <h1 class="mt-2 text-3xl font-bold text-white">Upload Syllabus PDF</h1>
            <p class="mt-2 text-sm text-slate-300 max-w-2xl">
                Searchable PDF upload karein (paper ya book). AI isi content se exam ke questions generate karega.
            </p>
        </div>
        <a href="{{ route('admin.syllabi.index') }}" class="admin-action-btn bg-yellow-600 text-white">← Back</a>
    </div>

    @if($errors->any())
        <div class="rounded-2xl border border-red-400/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">
            @foreach($errors->all() as $e) <div>• {{ $e }}</div> @endforeach
        </div>
    @endif

    <form method="POST" action="{{ route('admin.syllabi.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="syl-card space-y-5">

            <div>
                <label class="block text-sm font-semibold text-slate-100 mb-2">
                    Exam Type <span class="text-red-400">*</span>
                </label>
                <select name="exam_type" id="exam_type" class="syl-select" required>
                    <option value="">Select Exam Type</option>
                    @foreach($examTypes as $key => $label)
                        <option value="{{ $key }}" {{ old('exam_type') == $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-100 mb-2">
                    Subject <span class="text-slate-400 text-xs">(optional — blank = All Subjects)</span>
                </label>
                <select name="subject" id="subject" class="syl-select">
                    <option value="">— All Subjects (Mixed) —</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-100 mb-2">
                    Title <span class="text-slate-400 text-xs">(optional)</span>
                </label>
                <input type="text" name="title" value="{{ old('title') }}" class="syl-field"
                       placeholder="e.g. RAS Prelims History Syllabus 2025">
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-100 mb-2">
                    PDF File <span class="text-red-400">*</span>
                    <span class="text-slate-400 text-xs">(max 50 MB, searchable PDF)</span>
                </label>

                <div id="dropzone" class="syl-dropzone">
                    <input type="file" name="file" id="fileInput" accept="application/pdf" class="hidden" required>
                    <svg viewBox="0 0 24 24" fill="none" class="w-12 h-12 mx-auto mb-3 text-cyan-300">
                        <path d="M12 16V4m0 0L8 8m4-4l4 4M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"
                              stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <p id="dropText" class="text-white font-semibold">Click karein ya PDF yahan drag karein</p>
                    <p id="fileInfo" class="text-xs text-slate-400 mt-2">Sirf .pdf file accepted hai</p>
                </div>
            </div>

            <div class="flex flex-wrap gap-3 pt-2">
                <button type="submit" class="admin-action-btn bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-bold px-6 py-3">
                    ⬆ Upload Syllabus
                </button>
                <a href="{{ route('admin.syllabi.index') }}" class="admin-action-btn bg-slate-700 text-white">Cancel</a>
            </div>
        </div>
    </form>
</div>

<script>
    const subjectsByExam = @json($subjectsByExam);
    const examTypeEl = document.getElementById('exam_type');
    const subjectEl  = document.getElementById('subject');
    const dropzone   = document.getElementById('dropzone');
    const fileInput  = document.getElementById('fileInput');
    const dropText   = document.getElementById('dropText');
    const fileInfo   = document.getElementById('fileInfo');

    function populateSubjects() {
        const type = examTypeEl.value;
        subjectEl.innerHTML = '<option value="">— All Subjects (Mixed) —</option>';
        if (!type || !subjectsByExam[type]) return;
        Object.keys(subjectsByExam[type]).forEach(sub => {
            const opt = document.createElement('option');
            opt.value = sub; opt.textContent = sub;
            subjectEl.appendChild(opt);
        });
    }
    examTypeEl.addEventListener('change', populateSubjects);

    const oldSubject = "{{ old('subject') }}";
    if (oldSubject && examTypeEl.value) { populateSubjects(); subjectEl.value = oldSubject; }

    dropzone.addEventListener('click', () => fileInput.click());
    ['dragenter','dragover'].forEach(e => dropzone.addEventListener(e, ev => { ev.preventDefault(); dropzone.classList.add('dragover'); }));
    ['dragleave','drop'].forEach(e => dropzone.addEventListener(e, ev => { ev.preventDefault(); dropzone.classList.remove('dragover'); }));
    dropzone.addEventListener('drop', e => {
        if (e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; showFile(e.dataTransfer.files[0]); }
    });
    fileInput.addEventListener('change', () => { if (fileInput.files.length) showFile(fileInput.files[0]); });

    function showFile(file) {
        if (file.type !== 'application/pdf') { alert('Sirf PDF allowed!'); fileInput.value = ''; return; }
        const sizeMB = (file.size / 1024 / 1024).toFixed(2);
        dropzone.classList.add('has-file');
        dropText.textContent = '✅ ' + file.name;
        fileInfo.textContent = sizeMB + ' MB • Click to change';
    }
</script>
@endsection