@extends('staff.layouts.app')
@section('content')
<div class="p-4 max-w-2xl mx-auto pb-24">
    <div class="flex items-center justify-between mb-4">
        <a href="{{ route('staff.homework.show', ['slug' => session('staff_school_slug'), 'id' => $homework->id]) }}" 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">Edit Homework</h1>
        <div class="w-8"></div>
    </div>

    <form action="{{ route('staff.homework.update', ['slug' => session('staff_school_slug'), 'id' => $homework->id]) }}" method="POST" enctype="multipart/form-data" class="space-y-4">
        @csrf
        @method('PUT')
        <div>
            <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Subject <span class="text-red-500">*</span></label>
            @php
                $listSubjects = $subjects->where('class_id', $targetClassId);
                if ($listSubjects->count() === 0) $listSubjects = $subjects; // fallback: show all if none for class
                if ($homework->subject_id && !$listSubjects->firstWhere('id', $homework->subject_id)) {
                    $current = $subjects->firstWhere('id', $homework->subject_id);
                    if ($current) $listSubjects = collect([$current])->concat($listSubjects);
                }
            @endphp
            <select name="subject_id" required class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2.5 px-3 text-sm font-bold text-slate-800 focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all">
                <option value="">Select Subject...</option>
                @foreach($listSubjects as $sub)
                    <option value="{{ $sub->id }}" {{ $homework->subject_id == $sub->id ? 'selected' : '' }}>{{ $sub->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 space-y-4">
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Title</label>
                <input type="text" name="title" required value="{{ old('title', $homework->title) }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2.5 px-3 text-sm font-bold text-slate-800 focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all">
            </div>
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Message / Instructions</label>
                <textarea name="message" rows="6" required class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2.5 px-3 text-sm text-slate-600 leading-relaxed focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all resize-none">{{ old('message', $homework->message) }}</textarea>
            </div>
        </div>

             <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
         <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">Photos</p>
         
         {{-- Existing Photos --}}
         @php $existingPhotos = json_decode($homework->attachment ?? '[]', true) ?? []; @endphp
         @if(count($existingPhotos) > 0)
         <div class="grid grid-cols-3 gap-2 mb-3">
             @foreach($existingPhotos as $photo)
             <div class="relative aspect-square rounded-lg overflow-hidden border border-slate-200">
                 <img src="{{ asset('storage/'.$photo) }}" class="w-full h-full object-cover">
             </div>
             @endforeach
         </div>
         <p class="text-[9px] text-slate-500 mb-3 italic">Uploading new photos will replace these.</p>
         @endif

         <label for="editMultiPhoto" class="flex flex-col items-center justify-center w-full h-20 border-2 border-dashed border-slate-200 rounded-xl cursor-pointer hover:border-orange-300 hover:bg-orange-50/30 transition-all">
             <i class="fa-solid fa-camera text-orange-400 text-lg mb-1"></i>
             <p class="text-[10px] font-black text-slate-600 uppercase">Change Photos</p>
             <input id="editMultiPhoto" name="attachments[]" type="file" class="hidden" accept="image/jpeg, image/png" multiple onchange="handleEditPhotoPreview(this)">
         </label>
         
         <div id="editPhotoPreviewGrid" class="grid grid-cols-3 gap-2 mt-3 hidden"></div>
     </div>

        <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">
            Update Homework <i class="fa-solid fa-check text-xs"></i>
        </button>
    </form>
</div>

<script>
function handleEditPhotoPreview(input) {
    const grid = document.getElementById('editPhotoPreviewGrid');
    grid.innerHTML = '';
    grid.classList.add('hidden');

    if (input.files && input.files.length > 0) {
        if (input.files.length > 5) {
            alert('Maximum 5 photos allowed.');
            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">`;
            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