@extends('school.layouts.app')
@section('content')
<div class="p-6 lg:p-8 w-full max-w-6xl mx-auto">

    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-3">
            <a href="{{ route('school.homework.index') }}" class="w-9 h-9 bg-white border border-slate-200 rounded-lg flex items-center justify-center text-slate-500 shadow-sm hover:bg-slate-50 transition-colors">
                <i class="fa-solid fa-arrow-left text-xs"></i>
            </a>
            <div>
                <h1 class="text-xl font-black text-slate-800 tracking-tight">Compose Homework</h1>
                <p class="text-xs text-slate-500">Will be sent to Principal/Coordinator for approval.</p>
            </div>
        </div>
    </div>

    <form action="{{ route('school.homework.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- STEP 1 : AUDIENCE --}}
            <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4"><span class="text-indigo-500">1.</span> Target Audience <span class="text-red-500">*</span></p>
                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-600 mb-1.5">Class <span class="text-red-500">*</span></label>
                        <select name="class_id" id="classSelect" required class="w-full bg-slate-50 border border-slate-200 rounded-lg py-2.5 px-3 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none">
                            <option value="">Select Class...</option>
                            @foreach($classes as $c) <option value="{{ $c->id }}">{{ $c->name }}</option> @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-600 mb-1.5">Section <span class="text-[10px] text-slate-400">(Optional)</span></label>
                        <select name="section_id" id="sectionSelect" disabled class="w-full bg-slate-50 border border-slate-200 rounded-lg py-2.5 px-3 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none opacity-50">
                            <option value="">Whole Class</option>
                        </select>
                    </div>
                </div>
            </div>

            {{-- STEP 2 : DETAILS --}}
            <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4"><span class="text-indigo-500">2.</span> Assignment Details</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-600 mb-1.5">Subject <span class="text-red-500">*</span></label>
                        <select name="subject_id" id="subjectSelect" required disabled class="w-full bg-slate-50 border border-slate-200 rounded-lg py-2.5 px-3 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none opacity-50">
                            <option value="">Select Subject...</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-600 mb-1.5">Title <span class="text-red-500">*</span></label>
                        <input type="text" name="title" required placeholder="e.g. Math Chapter 4 Exercises" class="w-full bg-slate-50 border border-slate-200 rounded-lg py-2.5 px-3 text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500/20 outline-none placeholder:text-slate-300">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-600 mb-1.5">Message / Instructions <span class="text-red-500">*</span></label>
                    <textarea name="message" rows="8" required placeholder="Write instructions, homework details, or announcement..." class="w-full bg-slate-50 border border-slate-200 rounded-lg py-3 px-3 text-sm text-slate-600 leading-relaxed focus:ring-2 focus:ring-indigo-500/20 outline-none resize-none placeholder:text-slate-300"></textarea>
                </div>
            </div>
        </div>

        {{-- STEP 3 : ATTACHMENT + SUBMIT --}}
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 mt-6 flex flex-wrap items-center justify-between gap-4">
            <label for="attachmentDrop" class="flex items-center gap-3 border-2 border-dashed border-slate-200 rounded-xl px-4 py-3 cursor-pointer hover:border-indigo-300 hover:bg-indigo-50/30 transition-all">
                <div class="w-9 h-9 rounded-lg bg-indigo-100 text-indigo-500 flex items-center justify-center flex-shrink-0">
                    <i class="fa-solid fa-paperclip text-xs"></i>
                </div>
                <div>
                    <p class="text-xs font-black text-slate-700 uppercase tracking-wider">Attachment <span class="text-[10px] text-slate-400 font-bold">(Optional)</span></p>
                    <p id="fileNameText" class="text-[10px] text-slate-400">PDF, DOC, IMG — auto-compressed</p>
                </div>
                <input id="attachmentDrop" name="attachment" type="file" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx" onchange="updateFileName(this)">
            </label>

            <button type="submit" class="px-8 py-3 rounded-xl text-sm font-black tracking-widest uppercase bg-indigo-600 hover:bg-indigo-700 text-white shadow-lg shadow-indigo-200 transition-all flex items-center gap-2">
                Submit for Approval <i class="fa-solid fa-paper-plane text-xs"></i>
            </button>
        </div>
    </form>
</div>

<script>
    const SECTIONS = @json($sections ?? []);
    const SUBJECTS = @json($subjects ?? []);
    const classSelect = document.getElementById('classSelect');
    const sectionSelect = document.getElementById('sectionSelect');
    const subjectSelect = document.getElementById('subjectSelect');

    classSelect.addEventListener('change', function () {
        const cid = this.value;
        sectionSelect.innerHTML = '<option value="">Whole Class</option>';
        subjectSelect.innerHTML = '<option value="">Select Subject...</option>';
        const enabled = !!cid;
        if (enabled) {
            SECTIONS.filter(s => String(s.class_id) === String(cid)).forEach(s => {
                const o = document.createElement('option'); o.value = s.id; o.textContent = s.name; sectionSelect.appendChild(o);
            });
            SUBJECTS.filter(s => String(s.class_id) === String(cid)).forEach(s => {
                const o = document.createElement('option'); o.value = s.id; o.textContent = s.name; subjectSelect.appendChild(o);
            });
        }
        sectionSelect.disabled = !enabled;
        subjectSelect.disabled = !enabled;
        sectionSelect.classList.toggle('opacity-50', !enabled);
        subjectSelect.classList.toggle('opacity-50', !enabled);
    });

    function updateFileName(input) {
        if (input.files && input.files[0]) {
            document.getElementById('fileNameText').textContent = input.files[0].name;
            document.getElementById('fileNameText').classList.add('text-indigo-600', 'font-bold');
        }
    }
</script>
@endsection