@extends('layouts.teacher')

@section('title', 'Beranda')
@section('header_title', 'Beranda')

@section('content')

<style>
    /* Custom Scrollbar untuk Modal */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #c7c7c7;
        border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }
    
    /* Smooth Fade In */
    .fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>

{{-- ================= HERO SECTION (Modern Gradient) ================= --}}
<div class="relative w-full rounded-[2rem] overflow-hidden mb-10 shadow-xl shadow-indigo-100/50 fade-in">
    <div class="absolute inset-0 bg-gradient-to-r from-indigo-600 to-indigo-600"></div>
    <div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 24px 24px;"></div>
    
    <div class="absolute top-0 right-0 -mt-10 -mr-10 w-64 h-64 bg-white opacity-10 rounded-full blur-3xl"></div>
    <div class="absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-purple-300 opacity-20 rounded-full blur-2xl"></div>

    <div class="relative z-10 p-8 md:p-10 flex flex-col md:flex-row justify-between items-center gap-6">
        <div class="text-white space-y-2 text-center md:text-left">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-xs font-medium text-indigo-100 mb-2">
                <span>Selamat Datang</span>
            </div>
            <h1 class="text-3xl md:text-4xl font-bold tracking-tight">
                Halo, {{ $user->name ?? 'Guru Hebat' }}!
            </h1>
            <p class="text-indigo-100 text-lg max-w-xl font-light">
                Siap menginspirasi siswa hari ini? Kelola kelas dan pantau perkembangan siswa dengan mudah.
            </p>
        </div>

 <div class="hidden md:block">
    <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 text-white text-right min-w-[200px]">
        <div class="text-sm font-medium opacity-80 mb-1">Hari ini</div>

        <!-- TANGGAL REALTIME -->
        <div id="liveDate" class="text-2xl font-bold tracking-wide"></div>

        <!-- JAM REALTIME -->
        <div class="text-xs opacity-60 mt-1 flex items-center justify-end gap-1">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>

            <span id="liveClock"></span> WIB
        </div>
    </div>
</div>
    </div>
</div>

{{-- ================= STATISTIK (Clean Bento Style) ================= --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-5 mb-12 fade-in" style="animation-delay: 100ms;">
    @php
        $cards = [
            ['label' => 'Total Siswa', 'val' => $stats->total_siswa, 'icon' => 'users', 'color' => 'blue', 'bg' => 'bg-blue-50', 'text' => 'text-blue-600'],
            ['label' => 'Mata Pelajaran', 'val' => $stats->modul_aktif, 'icon' => 'book-open', 'color' => 'emerald', 'bg' => 'bg-emerald-50', 'text' => 'text-emerald-600'],
            ['label' => 'Perlu Dinilai', 'val' => $stats->tugas_pending, 'icon' => 'clipboard-check', 'color' => 'amber', 'bg' => 'bg-amber-50', 'text' => 'text-amber-600'],
            ['label' => 'Kuis Selesai', 'val' => $stats->kuis_selesai, 'icon' => 'graduation-cap', 'color' => 'purple', 'bg' => 'bg-purple-50', 'text' => 'text-purple-600'],
        ];
    @endphp

    @foreach($cards as $card)
        <div class="group bg-white rounded-2xl p-5 border border-gray-100 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07)] hover:shadow-[0_8px_25px_-5px_rgba(0,0,0,0.1)] transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
            <div class="flex items-center justify-between mb-4">
                <div class="{{ $card['bg'] }} {{ $card['text'] }} p-3 rounded-xl transition-transform group-hover:scale-110 duration-300">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                        @if($card['icon'] == 'users')
                            <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        @elseif($card['icon'] == 'book-open')
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                        @elseif($card['icon'] == 'clipboard-check')
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                        @else
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.499 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
                        @endif
                    </svg>
                </div>
                <div class="absolute -right-6 -top-6 w-24 h-24 {{ $card['bg'] }} rounded-full opacity-20 blur-xl group-hover:scale-150 transition-transform duration-700"></div>
            </div>
            
            <div>
                <h3 class="text-3xl font-bold text-gray-800 tracking-tight">{{ $card['val'] }}</h3>
                <p class="text-sm font-medium text-gray-500 mt-1">{{ $card['label'] }}</p>
            </div>
        </div>
    @endforeach
</div>

{{-- ================= KONTEN UTAMA (MODUL) ================= --}}
<div class="mb-10 fade-in" style="animation-delay: 200ms;">
    <div class="flex flex-col md:flex-row justify-between items-end mb-8 gap-4">
        <div>
            <h3 class="text-2xl font-bold text-gray-900">Mata Pelajaran</h3>
            <p class="text-gray-500 mt-1">Kelola materi pelajaran untuk kelas aktif Anda</p>
        </div>
        
        <div class="flex flex-col md:flex-row gap-3 w-full md:w-auto bg-white p-2 rounded-2xl shadow-sm border border-gray-100">
            <select id="filterTingkat" class="bg-gray-50 border-0 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 focus:ring-2 focus:ring-indigo-500 hover:bg-gray-100 transition-colors cursor-pointer outline-none">
                <option value="">Semua Tingkat</option>
                <option value="1">Kelas X</option>
                <option value="2">Kelas XI</option>
                <option value="3">Kelas XII</option>
            </select>

            <select id="filterClass" class="bg-gray-50 border-0 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 focus:ring-2 focus:ring-indigo-500 hover:bg-gray-100 transition-colors cursor-pointer outline-none">
                <option value="">Semua Kelas</option>
                @foreach($classes ?? [] as $class)
                    <option value="{{ $class->id }}">{{ $class->name }}</option>
                @endforeach
            </select>

            <div class="relative">
                <input id="filterSearch" type="text" placeholder="Cari modul..." 
                    class="bg-gray-50 border-0 rounded-xl pl-10 pr-4 py-2.5 text-sm w-full md:w-64 focus:ring-2 focus:ring-indigo-500 outline-none transition-all placeholder-gray-400">
                <svg class="w-4 h-4 text-gray-400 absolute left-3.5 top-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            </div>
        </div>
    </div>

    {{-- ================= GRID MODUL (Modern Cards) ================= --}}
    <div id="moduleGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        @foreach($active_modules as $modul)
            <div class="group relative bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-2 transition-all duration-300 overflow-hidden flex flex-col h-full">
                
                <div class="relative h-48 overflow-hidden">
                    <img id="thumbnail-preview-{{ $modul->id }}" 
                         src="{{ $modul->thumbnail }}" 
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                         alt="{{ $modul->title }}">
                    
                    <!-- Jadwal Overlay di bagian bawah gambar -->
<!-- Jadwal Overlay di bagian bawah gambar -->
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-3">
    <div class="flex flex-col space-y-1">

        @forelse(($modul->schedules ?? []) as $sch)
            <div class="flex items-center justify-between text-white">
                <span class="text-xs font-semibold">
                    {{ $sch['hari'] }} • {{ $sch['periode'] }}
                </span>
                <span class="text-xs font-bold bg-white/20 backdrop-blur px-2 py-0.5 rounded">
                    {{ $sch['jam'] }}
                </span>
            </div>
        @empty
            <div class="text-[10px] text-white/70">
                Belum ada jadwal
            </div>
        @endforelse

    </div>
</div>
                    
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-60 group-hover:opacity-40 transition-opacity"></div>
                
                    <div class="absolute top-3 left-3">
                        <span class="bg-white/90 backdrop-blur text-indigo-700 text-[10px] font-bold px-2.5 py-1 rounded-lg uppercase tracking-wider shadow-sm">
                            {{ $modul->department }}
                        </span>
                    </div>
                
                    <button onclick="openThumbnailModal({{ $modul->id }})" 
                            class="absolute top-3 right-3 bg-white/20 backdrop-blur hover:bg-white text-white hover:text-indigo-600 p-2 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0"
                            title="Ganti Sampul">
                        <!--<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536M9 11l6-6m-6 6l-2 6 6-2m5-5a2.5 2.5 0 11-3.536-3.536A2.5 2.5 0 0118 9z" /></svg>-->
                    </button>
                </div>
                

                <div class="p-5 flex-1 flex flex-col">
                    <div class="mb-3">
                        <h4 class="text-lg font-bold text-gray-900 leading-tight line-clamp-2 group-hover:text-indigo-600 transition-colors">
                            {{ $modul->title }}
                        </h4>
                        <div class="flex items-center gap-2 mt-2 text-xs text-gray-500 font-medium">
                            <span class="bg-gray-100 px-2 py-0.5 rounded text-gray-600">{{ $modul->kelas }}</span>
                            <!--<span>•</span>-->
                            <span class="flex items-center gap-1">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                                {{ $modul->students_count }} Siswa
                            </span>
                        </div>
                    </div>
                    
                    <div class="mt-auto pt-4 border-t border-gray-50">
                        <div class="flex justify-between items-center mb-1.5">
                            <span class="text-xs text-gray-500 font-medium">Progres Kelas</span>
                            <span class="text-xs font-bold text-indigo-600">{{ $modul->progress }}%</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
                            <div class="bg-indigo-500 h-1.5 rounded-full transition-all duration-1000 ease-out" style="width: {{ $modul->progress }}%"></div>
                        </div>
                    </div>
                </div>

                <a href="#" class="absolute inset-0 z-0"></a>
            </div>
        @endforeach
    </div>
    
    @if($active_modules->isEmpty())
        <div class="text-center py-20 bg-gray-50 rounded-3xl border border-dashed border-gray-300">
            <div class="bg-white p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-sm text-gray-400">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900">Belum ada modul</h3>
            <p class="text-gray-500 text-sm">Silakan buat mata pembelajaran baru.</p>
        </div>
    @endif
</div>

{{-- ================= MODAL THUMBNAIL (Refined) ================= --}}
<div id="thumbnailModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-gray-900/40 backdrop-blur-sm transition-opacity opacity-0">
    <div class="modal-content bg-white rounded-3xl max-w-4xl w-full mx-4 p-0 shadow-2xl transform transition-all duration-300 scale-95 overflow-hidden">
        
        <div class="px-6 py-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
            <h3 class="font-bold text-lg text-gray-800">Pilih Sampul Modul</h3>
            <button onclick="closeThumbnailModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-white text-gray-400 hover:text-gray-600 hover:shadow-sm transition-all">✕</button>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-[60vh] overflow-y-auto custom-scrollbar pr-2 pb-2">
                @foreach (File::files(public_path('images/modules')) as $file)
                    @php $filename = $file->getFilename(); @endphp
                    <button onclick="selectThumbnail('{{ $filename }}', event)" 
                            class="group relative aspect-video rounded-xl overflow-hidden border-2 border-transparent hover:border-indigo-500 focus:outline-none transition-all">
                        <img src="{{ asset('images/modules/' . $filename) }}" 
                             class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
                        
                        <div class="checkmark hidden absolute top-2 right-2 bg-indigo-600 text-white rounded-full p-1 shadow-lg">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
                        </div>
                    </button>
                @endforeach
            </div>
        </div>

        <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3 bg-gray-50/30">
            <button onclick="closeThumbnailModal()" class="px-5 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors">
                Batal
            </button>
            <button onclick="saveThumbnail()" class="px-5 py-2.5 rounded-xl text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-700 shadow-lg shadow-indigo-200 transition-all hover:-translate-y-0.5">
                Simpan Perubahan
            </button>
        </div>
    </div>
</div>

{{-- ================= JS ================= --}}
<script>
let selectedModuleId = null;
let selectedThumbnail = null;

function openThumbnailModal(id) {
    selectedModuleId = id;
    document.body.classList.add('overflow-hidden'); // Prevent background scroll
    
    const modal = document.getElementById('thumbnailModal');
    const content = modal.querySelector('.modal-content');
    
    modal.classList.remove('hidden');
    // Trigger reflow
    void modal.offsetWidth; 
    
    modal.classList.remove('opacity-0');
    content.classList.remove('scale-95');
    content.classList.add('scale-100');
}

function closeThumbnailModal() {
    document.body.classList.remove('overflow-hidden');
    
    const modal = document.getElementById('thumbnailModal');
    const content = modal.querySelector('.modal-content');
    
    modal.classList.add('opacity-0');
    content.classList.remove('scale-100');
    content.classList.add('scale-95');
    
    setTimeout(() => {
        modal.classList.add('hidden');
    }, 300);
}

function selectThumbnail(filename, event) {
    selectedThumbnail = filename;
    
    // Reset styling
    document.querySelectorAll('#thumbnailModal button').forEach(btn => {
        btn.classList.remove('border-indigo-500', 'ring-2', 'ring-indigo-200');
        const check = btn.querySelector('.checkmark');
        if(check) check.classList.add('hidden');
    });

    // Apply active styling
    const btn = event.target.closest('button');
    btn.classList.add('border-indigo-500', 'ring-2', 'ring-indigo-200');
    btn.querySelector('.checkmark').classList.remove('hidden');
    
    // Preview immediately on grid (optional UI feedback)
    const previewImg = document.getElementById('thumbnail-preview-' + selectedModuleId);
    if(previewImg) previewImg.src = `/images/modules/${filename}`;
}

function saveThumbnail() {
    if (!selectedModuleId || !selectedThumbnail) {
        showToast('Pilih gambar sampul terlebih dahulu', 'error');
        return;
    }

    // Animasi loading sederhana di tombol
    const btn = document.querySelector('button[onclick="saveThumbnail()"]');
    const originalText = btn.innerText;
    btn.innerText = 'Menyimpan...';
    btn.disabled = true;

    fetch(`{{ route('guru.modul.update-thumbnail') }}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            module_id: selectedModuleId,
            thumbnail: 'modules/' + selectedThumbnail
        })
    })
    .then(res => res.json())
    .then(res => {
        if (res.success) {
            closeThumbnailModal();
            showToast('Sampul modul berhasil diperbarui', 'success');
        } else {
            showToast('Gagal menyimpan sampul', 'error');
        }
    })
    .catch(() => {
        showToast('Terjadi kesalahan koneksi', 'error');
    })
    .finally(() => {
        btn.innerText = originalText;
        btn.disabled = false;
    });
}

/* ================= FILTER MODUL (Updated HTML Structure) ================= */
const tingkat = document.getElementById('filterTingkat');
const kelas = document.getElementById('filterClass');
const search = document.getElementById('filterSearch');
const grid = document.getElementById('moduleGrid');
let debounce;

function fetchModules() {
    const params = new URLSearchParams({
        tingkat_id: tingkat.value,
        class_id: kelas.value,
        search: search.value
    });

    // Loading UI Modern
    grid.innerHTML = `
        <div class="col-span-full py-20 flex flex-col items-center justify-center opacity-50">
            <div class="animate-spin rounded-full h-10 w-10 border-4 border-indigo-100 border-t-indigo-600 mb-4"></div>
            <p class="text-gray-500 font-medium animate-pulse">Memuat modul...</p>
        </div>
    `;

    fetch(`{{ route('guru.dashboard.filter-modules') }}?${params}`)
    .then(res => res.json())
    .then(res => {
        const data = res ?? [];

        if (!Array.isArray(data) || data.length === 0) {
            grid.innerHTML = `
                <div class="col-span-full py-20 text-center bg-gray-50 rounded-2xl border border-dashed border-gray-200">
                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-white shadow-sm mb-4 text-gray-300">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </div>
                    <h3 class="text-gray-900 font-bold mb-1">Tidak ditemukan</h3>
                    <p class="text-gray-500 text-sm">Coba ubah filter atau kata kunci pencarian Anda.</p>
                </div>
            `;
            return;
        }

        grid.innerHTML = '';

        // Render Cards (SESUAI DESAIN BARU YANG PUTIH)
       data.forEach((m, index) => {
    // Animasi stagger fade-in
    const delay = index * 50; 
    
    grid.innerHTML += `
    <div class="group relative bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-2 transition-all duration-300 overflow-hidden flex flex-col h-full fade-in" style="animation-duration: 0.5s; animation-fill-mode: both;">
        
        <div class="relative h-48 overflow-hidden">
        ${(() => {
            const thumb = m.thumbnail && m.thumbnail.startsWith('http')
                ? m.thumbnail
                : `/${m.thumbnail}`;
            return `
                <img id="thumbnail-preview-${m.id}" 
                     src="${thumb}" 
                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                     alt="${m.title}">
            `;
        })()}
        
        

        ${(() => {
            // 🔥 TAMBAHAN OVERLAY JADWAL (TIDAK MERUSAK DESIGN)
            if(!m.schedules || m.schedules.length === 0){
                return `
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-3">
                    <div class="text-[10px] text-white/70">
                        Belum ada jadwal
                    </div>
                </div>`;
            }

            return `
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-3">
                <div class="flex flex-col space-y-1">
                    ${m.schedules.map(s => `
                        <div class="flex items-center justify-between text-white">
                            <span class="text-xs font-semibold">
                                ${s.hari} • ${s.periode}
                            </span>
                            <span class="text-xs font-bold bg-white/20 backdrop-blur px-2 py-0.5 rounded">
                                ${s.jam}
                            </span>
                        </div>
                    `).join('')}
                </div>
            </div>`;
        })()}

            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-60 group-hover:opacity-40 transition-opacity"></div>

            <div class="absolute top-3 left-3">
                <span class="bg-white/90 backdrop-blur text-indigo-700 text-[10px] font-bold px-2.5 py-1 rounded-lg uppercase tracking-wider shadow-sm">
                    ${m.department}
                </span>
            </div>

            <button onclick="openThumbnailModal(${m.id})" 
                    class="absolute top-3 right-3 bg-white/20 backdrop-blur hover:bg-white text-white hover:text-indigo-600 p-2 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0"
                    title="Ganti Sampul">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536M9 11l6-6m-6 6l-2 6 6-2m5-5a2.5 2.5 0 11-3.536-3.536A2.5 2.5 0 0118 9z" /></svg>
            </button>
        </div>

        <div class="p-5 flex-1 flex flex-col">
            <div class="mb-3">
                <h4 class="text-lg font-bold text-gray-900 leading-tight line-clamp-2 group-hover:text-indigo-600 transition-colors">
                    ${m.title}
                </h4>
                <div class="flex items-center gap-2 mt-2 text-xs text-gray-500 font-medium">
                    <span class="bg-gray-100 px-2 py-0.5 rounded text-gray-600">${m.kelas}</span>
                    <span>•</span>
                    <span class="flex items-center gap-1">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                        ${m.students_count} Siswa
                    </span>
                </div>
            </div>

            <div class="mt-auto pt-4 border-t border-gray-50">
                <div class="flex justify-between items-center mb-1.5">
                    <span class="text-xs text-gray-500 font-medium">Progres Kelas</span>
                    <span class="text-xs font-bold text-indigo-600">${m.progress}%</span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
                    <div class="bg-indigo-500 h-1.5 rounded-full" style="width: ${m.progress}%"></div>
                </div>
            </div>
        </div>

        <a href="/teacher/mapel/${m.msc_id}" class="absolute inset-0 z-0"></a>
    </div>
    `;


});
    }) // 🔥 ini nutup .then(res => {...})
    .catch(() => {
        grid.innerHTML = `<div class="col-span-full text-center text-red-500 py-10">Gagal memuat data.</div>`;
    });
}



[tingkat, kelas].forEach(el => el.addEventListener('change', fetchModules));
search.addEventListener('keyup', () => {
    clearTimeout(debounce);
    debounce = setTimeout(fetchModules, 400);
});

// Toast Notification
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    const bgColor = type === 'success' ? 'bg-emerald-500' : (type === 'error' ? 'bg-rose-500' : 'bg-blue-500');
    
    toast.className = `fixed top-6 right-6 px-6 py-4 rounded-xl shadow-2xl text-white font-medium z-[60] transform transition-all duration-500 translate-x-full opacity-0 flex items-center gap-3 ${bgColor}`;
    toast.innerHTML = `
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            ${type === 'success' 
                ? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />' 
                : '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />'}
        </svg>
        ${message}
    `;
    
    document.body.appendChild(toast);

    requestAnimationFrame(() => {
        toast.classList.remove('translate-x-full', 'opacity-0');
    });

    setTimeout(() => {
        toast.classList.add('translate-x-full', 'opacity-0');
        setTimeout(() => toast.remove(), 500);
    }, 3000);
}
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    function updateClock() {

        const clock = document.getElementById('liveClock');
        const date  = document.getElementById('liveDate');

        const now = new Date();

        // JAM
        const jam   = String(now.getHours()).padStart(2,'0');
        const menit = String(now.getMinutes()).padStart(2,'0');
        const detik = String(now.getSeconds()).padStart(2,'0');

        if(clock){
            clock.textContent = `${jam}:${menit}:${detik}`;
        }

        // TANGGAL
        if(date){
            const hari = now.toLocaleDateString('id-ID',{ weekday:'long' });
            const tanggal = now.toLocaleDateString('id-ID',{
                day:'2-digit',
                month:'long'
            });

            date.textContent = `${hari}, ${tanggal}`;
        }
    }

    updateClock();
    setInterval(updateClock,1000);

});
</script>

<script>
(function () {
    'use strict';

    /* ============================================================
     * CONFIG
     * interval: seberapa sering sync (ms). Default 30 detik.
     * Turunkan ke 10000 jika ingin lebih realtime.
     * ============================================================ */
    const SYNC_INTERVAL_MS = 30_000;

    /* ============================================================
     * Kumpulkan semua msc_id dari card modul yang ada di DOM
     * Setiap card modul harus punya attribute: data-msc-id="15"
     * ============================================================ */
    function getMscIds() {
        return [...document.querySelectorAll('[data-msc-id]')]
            .map(el => parseInt(el.dataset.mscId))
            .filter(Boolean);
    }

    /* ============================================================
     * Update progress bar & teks di DOM tanpa reload
     * ============================================================ */
    function applyProgressToDOM(progressMap) {
        // progressMap = { "15": 13, "20": 8, ... }
        Object.entries(progressMap).forEach(([mscId, progressValue]) => {
            const card = document.querySelector(`[data-msc-id="${mscId}"]`);
            if (!card) return;

            // Update progress bar width
            const bar = card.querySelector('[data-progress-bar]');
            if (bar) {
                bar.style.width = progressValue + '%';
                bar.style.transition = 'width 0.6s ease';
            }

            // Update teks angka persen
            const text = card.querySelector('[data-progress-text]');
            if (text) {
                text.textContent = progressValue + '%';
            }
        });
    }

    /* ============================================================
     * Hit endpoint sync-progress
     * ============================================================ */
    async function syncProgress() {
        const mscIds = getMscIds();
        if (!mscIds.length) return;

        try {
            const res = await fetch('{{ route("guru.modul.sync-progress") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ msc_ids: mscIds }),
            });

            if (res.status === 401) {
                // Session expired - redirect ke login
                window.location.href = '/';
                return;
            }

            if (!res.ok) return; // silent fail, jangan ganggu UI

            const json = await res.json();

            if (json?.data) {
                applyProgressToDOM(json.data);
            }
        } catch (e) {
            // Silent fail - tidak ganggu UX sama sekali
            console.warn('[Progress Sync] Failed:', e.message);
        }
    }

    /* ============================================================
     * Bootstrap: sync langsung saat halaman load, lalu polling
     * ============================================================ */
    document.addEventListener('DOMContentLoaded', function () {
        // Sync pertama saat halaman baru buka (tanpa tunggu interval)
        syncProgress();

        // Polling selanjutnya
        setInterval(syncProgress, SYNC_INTERVAL_MS);
    });

})();
</script>


@endsection