@extends('staff.layouts.app')

@section('content')
<div class="p-3 max-w-xl mx-auto pb-24">

    {{-- Compact Header --}}
    <div class="flex items-center justify-between mb-3">
        <a href="{{ route('staff.homework.index', ['slug' => session('staff_school_slug')]) }}"
           class="w-8 h-8 bg-white border border-slate-200 rounded-full flex items-center justify-center text-slate-500 shadow-sm active:scale-95 transition-all">
            <i class="fa-solid fa-arrow-left text-xs"></i>
        </a>
        <h1 class="text-base font-black text-slate-800 tracking-tight">New Homework</h1>
        <div class="w-8"></div>
    </div>

    <form id="homeworkForm" action="{{ route('staff.homework.store', ['slug' => session('staff_school_slug')]) }}"
          method="POST" enctype="multipart/form-data" class="space-y-3">
        @csrf
        <input type="hidden" name="target_type" id="targetTypeInput" value="class">

        {{-- ══ STEP 1 : AUDIENCE (≈10% of screen) ══ --}}
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-3">
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">
                <span class="text-orange-500">1.</span> Audience <span class="text-red-500">*</span>
            </p>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
                {{-- Class --}}
                <div class="relative">
                    <select name="selected_classes[]" id="classSelect" required class="w-full appearance-none bg-slate-50 border border-slate-200 text-slate-700 py-2.5 px-3 pr-8 rounded-xl focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all font-bold text-xs">
                        <option value="">Class *</option>
                        @foreach($classes as $c) <option value="{{ $c->id }}">{{ $c->name }}</option> @endforeach
                    </select>
                    <i class="fa-solid fa-chevron-down text-[9px] text-slate-400 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"></i>
                </div>
                {{-- Section --}}
                <div class="relative opacity-50 pointer-events-none transition-opacity" id="sectionWrapper">
                    <select name="selected_sections[]" id="sectionSelect" required disabled class="w-full appearance-none bg-slate-50 border border-slate-200 text-slate-700 py-2.5 px-3 pr-8 rounded-xl focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all font-bold text-xs">
                        <option value="">Section *</option>
                    </select>
                    <i class="fa-solid fa-chevron-down text-[9px] text-slate-400 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"></i>
                </div>
                {{-- Subject (NEW) --}}
                <div class="relative opacity-50 pointer-events-none transition-opacity" id="subjectWrapper">
                    <select name="subject_id" id="subjectSelect" required disabled class="w-full appearance-none bg-slate-50 border border-slate-200 text-slate-700 py-2.5 px-3 pr-8 rounded-xl focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all font-bold text-xs">
                        <option value="">Subject *</option>
                    </select>
                    <i class="fa-solid fa-chevron-down text-[9px] text-slate-400 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"></i>
                </div>
            </div>

            {{-- Specific Students (collapsible, compact) --}}
            <div id="studentWrapper" class="hidden mt-2">
                <div class="bg-slate-50 border border-slate-100 rounded-xl p-2">
                    <div class="flex items-center justify-between mb-1.5">
                        <p class="text-[9px] font-black text-slate-500 uppercase tracking-wider">
                            <i class="fa-solid fa-user-graduate text-indigo-400 mr-1"></i>Specific Students
                        </p>
                        <div class="flex items-center gap-2">
                            <label class="flex items-center gap-1 cursor-pointer select-none group">
                                <input type="checkbox" id="selectAllStudents" class="w-3.5 h-3.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                                <span class="text-[8px] font-black text-slate-500 uppercase group-hover:text-indigo-600 transition-colors">Select All</span>
                            </label>
                            <span id="studentCountBadge" class="text-[8px] font-black bg-white border border-slate-200 text-slate-500 px-1.5 py-0.5 rounded-full shadow-sm">0 selected</span>
                        </div>
                    </div>
                    <div class="relative mb-1.5">
                        <input type="text" id="studentSearch" placeholder="Search student..."
                            class="w-full bg-white border border-slate-200 rounded-lg py-1.5 px-2.5 pl-7 text-[10px] focus:ring-2 focus:ring-indigo-500/20 outline-none">
                        <i class="fa-solid fa-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-300 text-[9px]"></i>
                    </div>
                    <div id="studentListContainer" class="max-h-28 overflow-y-auto space-y-1 pr-0.5 custom-scrollbar">
                        <p class="text-center py-2 text-slate-400 text-[10px] italic" id="studentLoader">Loading students...</p>
                    </div>
                    <p class="text-[8px] text-slate-400 mt-1.5 text-center font-semibold uppercase tracking-wide">None selected = sent to whole section</p>
                </div>
            </div>
        </div>

        {{-- ══ STEP 2 : ASSIGNMENT DETAILS ══ --}}
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-3">
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">
                <span class="text-orange-500">2.</span> Assignment Details
            </p>
                    <input type="text" name="title" required placeholder="Title (e.g. Math Ch 4)"
                class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2.5 px-3 text-xs font-bold text-slate-800 focus:bg-white focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all placeholder:text-slate-300 mb-2">
            <textarea name="message" rows="3" required placeholder="Write instructions / homework details..."
                class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2.5 px-3 text-xs text-slate-600 leading-relaxed focus:bg-white focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all resize-none placeholder:text-slate-300"></textarea>
        </div>

             {{-- ══ STEP 3 : MULTIPLE PHOTOS (Max 5) ══ --}}
     <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-3">
         <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">
             <span class="text-orange-500">3.</span> Photos (Max 5)
         </p>
         <label for="multiPhotoUpload" class="flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-slate-200 rounded-xl cursor-pointer hover:border-orange-300 hover:bg-orange-50/30 transition-all group">
             <div class="w-10 h-10 rounded-full bg-orange-100 text-orange-500 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                 <i class="fa-solid fa-images text-lg"></i>
             </div>
             <p class="text-[10px] font-black text-slate-600 uppercase">Tap to Add Photos</p>
             <p class="text-[8px] text-slate-400 mt-1">JPG, PNG only</p>
             <input id="multiPhotoUpload" name="attachments[]" type="file" class="hidden" accept="image/jpeg, image/png" multiple onchange="handlePhotoPreview(this)">
         </label>
         
         {{-- Preview Grid --}}
         <div id="photoPreviewGrid" class="grid grid-cols-3 gap-2 mt-3 hidden">
             <!-- Previews will be injected here by JS -->
         </div>
         <p id="photoCountError" class="text-[9px] text-red-500 font-bold mt-2 hidden">Maximum 5 photos allowed.</p>
     </div>

        {{-- ══ SUBMIT : ORANGE 3D BUTTON ══ --}}
        <button type="submit"
            class="w-full py-3.5 rounded-2xl text-white text-sm font-black tracking-widest uppercase
                   bg-gradient-to-b from-orange-400 via-orange-500 to-orange-600
                   border-b-4 border-orange-800/80
                   shadow-[0_10px_20px_-5px_rgba(249,115,22,0.55)]
                   active:border-b-0 active:translate-y-1 active:shadow-none
                   transition-all flex items-center justify-center gap-2">
            Submit for Approval <i class="fa-solid fa-paper-plane text-xs"></i>
        </button>
        <p class="text-center text-[8px] text-slate-400 font-bold uppercase tracking-widest">
            <i class="fa-solid fa-shield-halved mr-1"></i>Requires Admin Verification
        </p>
    </form>
</div>

<style>
    .custom-scrollbar::-webkit-scrollbar { width: 3px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
</style>

<script>
        // ✅ Sections AND Students embedded — NO AJAX, can never fail
    const SECTIONS = @json($sections ?? []);
    const SUBJECTS = @json($subjects ?? []);
    const STUDENTS = @json($allStudents ?? []);
    const subjectSelect = document.getElementById('subjectSelect');
    const subjectWrapper = document.getElementById('subjectWrapper');

    const classSelect  = document.getElementById('classSelect');
    const sectionSelect = document.getElementById('sectionSelect');
    const sectionWrapper = document.getElementById('sectionWrapper');
    const studentWrapper = document.getElementById('studentWrapper');
    const studentList = document.getElementById('studentListContainer');
    const studentLoader = document.getElementById('studentLoader');
    const studentSearch = document.getElementById('studentSearch');
    const countBadge = document.getElementById('studentCountBadge');

    let allStudents = [];

        const selectAllCb = document.getElementById('selectAllStudents');

    // ── Select All Logic ──
    selectAllCb.addEventListener('change', function () {
        const isChecked = this.checked;
        const cbs = studentList.querySelectorAll('input.student-check');
        cbs.forEach(cb => {
            cb.checked = isChecked;
            const label = cb.closest('label');
            const dot = label.querySelector('.check-dot');
            if (isChecked) {
                dot.classList.add('bg-indigo-500', 'border-indigo-500');
                dot.innerHTML = '<i class="fa-solid fa-check"></i>';
                label.classList.add('border-indigo-300', 'bg-indigo-50/50');
            } else {
                dot.classList.remove('bg-indigo-500', 'border-indigo-500');
                dot.innerHTML = '';
                label.classList.remove('border-indigo-300', 'bg-indigo-50/50');
            }
        });
        updateBadge();
    });

    function updateSelectAllState() {
        const cbs = studentList.querySelectorAll('input.student-check');
        const checkedCount = studentList.querySelectorAll('input.student-check:checked').length;
        if (cbs.length === 0) {
            selectAllCb.checked = false;
            selectAllCb.indeterminate = false;
        } else {
            selectAllCb.checked = checkedCount === cbs.length;
            selectAllCb.indeterminate = checkedCount > 0 && checkedCount < cbs.length; // Shows a dash (-) if partially selected
        }
    }

    // ── Class change → filter sections locally ──
    classSelect.addEventListener('change', function () {
        const classId = this.value;

        sectionSelect.innerHTML = '<option value="">Section *</option>';
        sectionSelect.disabled = true;
        sectionWrapper.classList.add('opacity-50', 'pointer-events-none');

        subjectSelect.innerHTML = '<option value="">Subject *</option>';
        subjectSelect.disabled = true;
        subjectWrapper.classList.add('opacity-50', 'pointer-events-none');

        studentWrapper.classList.add('hidden');
        allStudents = [];

        if (!classId) return;

        const secs = SECTIONS.filter(s => String(s.class_id) === String(classId));
        secs.forEach(s => {
            const opt = document.createElement('option');
            opt.value = s.id;
            opt.textContent = s.name;
            sectionSelect.appendChild(opt);
        });

        sectionSelect.disabled = false;
        sectionWrapper.classList.remove('opacity-50', 'pointer-events-none');

        const subs = SUBJECTS.filter(s => String(s.class_id) === String(classId));
        subs.forEach(s => {
            const opt = document.createElement('option');
            opt.value = s.id;
            opt.textContent = s.name;
            subjectSelect.appendChild(opt);
        });
        if (subs.length > 0) {
            subjectSelect.disabled = false;
            subjectWrapper.classList.remove('opacity-50', 'pointer-events-none');
        }
    });

      // ── Section change → filter students locally (compulsory) ──
    sectionSelect.addEventListener('change', function () {
        if (!this.value) { studentWrapper.classList.add('hidden'); return; }
        studentWrapper.classList.remove('hidden');
        const students = studentsFor(classSelect.value, this.value);
        allStudents = students;
        renderStudents(students);
    });

    // ✅ Smart local filter: handles section_id OR section-name column automatically
    function studentsFor(classId, sectionId) {
        const sec = SECTIONS.find(x => String(x.id) === String(sectionId));
        return STUDENTS.filter(s => {
            if (String(s.class_id) !== String(classId)) return false;
            if (s.section_id !== undefined && s.section_id !== null) {
                return String(s.section_id) === String(sectionId);
            }
            if (sec && s.section !== undefined && s.section !== null) {
                return String(s.section).toLowerCase() === String(sec.name).toLowerCase();
            }
            return true;
        });
    }

    // ── Render compact student rows ──
    function renderStudents(students) {
        studentList.innerHTML = '';
        if (!students.length) {
            studentList.innerHTML = '<p class="text-center py-2 text-slate-400 text-[10px] italic">No students found.</p>';
            return;
        }
        students.forEach(s => {
            const label = document.createElement('label');
            label.className = 'flex items-center gap-2 bg-white border border-slate-100 rounded-lg px-2 py-1.5 cursor-pointer transition-all';
            label.innerHTML = `
                <input type="checkbox" name="selected_students[]" value="${s.id}" class="student-check hidden">
                <div class="w-6 h-6 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center text-[9px] font-black flex-shrink-0">${(s.student_name || '?').charAt(0)}</div>
                <div class="flex-1 min-w-0">
                    <p class="text-[10px] font-bold text-slate-700 truncate">${s.student_name}</p>
                </div>
                <div class="check-dot w-4 h-4 rounded-full border-2 border-slate-200 flex items-center justify-center text-white text-[7px] transition-all"></div>`;
            const cb = label.querySelector('input');
            const dot = label.querySelector('.check-dot');
            cb.addEventListener('change', () => {
                if (cb.checked) {
                    dot.classList.add('bg-indigo-500', 'border-indigo-500');
                    dot.innerHTML = '<i class="fa-solid fa-check"></i>';
                    label.classList.add('border-indigo-300', 'bg-indigo-50/50');
                } else {
                    dot.classList.remove('bg-indigo-500', 'border-indigo-500');
                    dot.innerHTML = '';
                    label.classList.remove('border-indigo-300', 'bg-indigo-50/50');
                }
                updateBadge();
            });
            studentList.appendChild(label);
        });
        updateBadge();
    }

    function updateBadge() {
        const n = document.querySelectorAll('input[name="selected_students[]"]:checked').length;
        countBadge.textContent = n + ' selected';
        countBadge.classList.toggle('text-indigo-600', n > 0);
        updateSelectAllState(); // Keeps the "Select All" checkbox synced
    }

    // ── Search filter ──
    studentSearch.addEventListener('input', e => {
        const t = e.target.value.toLowerCase();
        renderStudents(allStudents.filter(s => s.student_name.toLowerCase().includes(t)));
    });

    // ── Set target_type before submit (keeps your store() logic intact) ──
    document.getElementById('homeworkForm').addEventListener('submit', function () {
        const anyStudent = document.querySelectorAll('input[name="selected_students[]"]:checked').length > 0;
        document.getElementById('targetTypeInput').value = anyStudent ? 'student' : 'class';
    });

    // ── Attachment filename ──
    function updateFileName(input) {
        if (input.files && input.files[0]) {
            document.getElementById('fileNameText').textContent = input.files[0].name;
            document.getElementById('fileNameText').classList.add('text-orange-600', 'font-bold');
        }
    }
</script>
<script>
function handlePhotoPreview(input) {
    const grid = document.getElementById('photoPreviewGrid');
    const error = document.getElementById('photoCountError');
    grid.innerHTML = '';
    grid.classList.add('hidden');
    error.classList.add('hidden');

    if (input.files && input.files.length > 0) {
        if (input.files.length > 5) {
            error.classList.remove('hidden');
            input.value = '';
            return;
        }

        grid.classList.remove('hidden');

        // ✅ COMPRESS EVERY PHOTO → JPEG (max 1600px, q=0.85) before upload
        const dt = new DataTransfer();
        Array.from(input.files).slice(0, 5).forEach(async (file) => {
            const blob = await compressImage(file);
            const newName = file.name.replace(/\.(png|jpeg|jpg)$/i, '.jpg');
            dt.items.add(new File([blob], newName, { type: 'image/jpeg' }));

            // Preview the compressed version
            const url = URL.createObjectURL(blob);
            const div = document.createElement('div');
            div.className = 'relative aspect-square rounded-lg overflow-hidden border border-slate-200';
            div.innerHTML = `
                <img src="${url}" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-black/10"></div>
            `;
            grid.appendChild(div);
        });

        // Small delay so async loop finishes before swapping files
        setTimeout(() => { input.files = dt.files; }, 300);
    }
}

// ✅ Compress helper: resize + re-encode as JPEG (photos are ALWAYS smaller as JPEG)
function compressImage(file, maxDim = 1600, quality = 0.85) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = e => {
            const img = new Image();
            img.onload = () => {
                let w = img.width, h = img.height;
                if (Math.max(w, h) > maxDim) {
                    const scale = maxDim / Math.max(w, h);
                    w = Math.round(w * scale);
                    h = Math.round(h * scale);
                }
                const canvas = document.createElement('canvas');
                canvas.width = w;
                canvas.height = h;
                canvas.getContext('2d').drawImage(img, 0, 0, w, h);
                canvas.toBlob(resolve, 'image/jpeg', quality);
            };
            img.onerror = reject;
            img.src = e.target.result;
        };
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}
</script>
@endsection