@extends('layouts.teacher')

@section('title','Materi Pelajaran')
@section('header_title','Materi Pelajaran')

@section('content')

{{-- ================= HEADER ================= --}}
<div class="mb-6">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
        <div>
            <h2 class="text-xl font-bold text-gray-900">Semua Materi Pembelajaran</h2>
            <p class="text-sm text-gray-500">Filter dan kelola materi Anda dengan mudah</p>
        </div>

        <div class="flex items-center gap-3">
            <div class="relative">
                <input type="text"
                       placeholder="Cari materi..."
                       id="searchInput"
                       class="pl-10 pr-4 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 w-full md:w-64 transition-all">
                <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <svg class="w-5 h-5 text-gray-400" 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>
    </div>
</div>

{{-- ================= FILTERS PANEL ================= --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6 overflow-hidden">
    {{-- FILTERS HEADER --}}
    <div class="border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <h3 class="font-medium text-gray-900">Filter</h3>
                <div class="h-1 w-1 bg-gray-400 rounded-full"></div>
                <div id="activeFiltersCount" class="text-sm text-gray-600">
                    <span id="filtersCount">0</span> filter aktif
                </div>
            </div>
            <button id="toggleFilters" class="flex items-center gap-2 text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                <svg class="w-4 h-4 transition-transform" id="filterArrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
                Tampilkan Filter
            </button>
        </div>
    </div>

    {{-- FILTERS CONTENT --}}
    <div id="filtersContent" class="hidden px-6 py-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            {{-- JURUSAN --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Jurusan</label>
                <div class="space-y-2 max-h-48 overflow-y-auto pr-2">
                    <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="department" value="" class="h-4 w-4 text-indigo-600" checked>
                        <span class="text-sm text-gray-700">Semua Jurusan</span>
                    </label>
                    @foreach($departments as $d)
                    <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="department" value="{{ $d->id }}" class="h-4 w-4 text-indigo-600">
                        <span class="text-sm text-gray-700">{{ $d->name }}</span>
                    </label>
                    @endforeach
                </div>
            </div>

            {{-- TINGKAT & KELAS --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Tingkat</label>
                <div class="space-y-2 max-h-48 overflow-y-auto pr-2">
                    <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="tingkat_id" value="" class="h-4 w-4 text-indigo-600" checked>
                        <span class="text-sm text-gray-700">Semua Tingkat</span>
                    </label>

                    @foreach($tingkats as $t)
                    <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <input type="radio"
       name="tingkat_id"
       value="{{ $t->id }}"
       class="h-4 w-4 text-indigo-600">

                        <span class="text-sm text-gray-700">{{ $t->name }}</span>
                    </label>
                    @endforeach
                </div>
            </div>

            {{-- KELAS --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Kelas</label>
                <div class="space-y-2 max-h-48 overflow-y-auto pr-2">
                    <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="class" value="" class="h-4 w-4 text-indigo-600" checked>
                        <span class="text-sm text-gray-700">Semua Kelas</span>
                    </label>
                    @foreach($classes as $c)
                    <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="class" value="{{ $c->id }}" class="h-4 w-4 text-indigo-600">
                        <span class="text-sm text-gray-700">{{ $c->name }}</span>
                    </label>
                    @endforeach
                </div>
            </div>

            {{-- SORTING & VIEW --}}
            <div class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Urutkan</label>
                    <select id="filterSort" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                        <option value="latest">Terbaru</option>
                        <option value="oldest">Terlama</option>
                        <option value="az">A - Z</option>
                        <option value="za">Z - A</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Tampilkan per halaman</label>
                    <select id="filterPerPage" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                        <option value="12">12</option>
                        <option value="24">24</option>
                        <option value="36">36</option>
                        <option value="all">Semua</option>
                    </select>
                </div>

                <button id="resetFilters" class="w-full px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium transition-colors">
                    Reset Filter
                </button>
            </div>
        </div>
    </div>

    {{-- ACTIVE FILTERS BADGES --}}
    <div id="activeFiltersBadges" class="px-6 py-4 border-t border-gray-200 hidden">
        <div class="flex items-center gap-2 flex-wrap">
            <span class="text-sm text-gray-600">Filter aktif:</span>
        </div>
    </div>
</div>

{{-- ================= CONTENT ================= --}}
<div class="mb-6">
    <div class="flex items-center justify-between mb-4">
        <div id="resultsCount" class="text-sm text-gray-600">
        Menampilkan {{ $pagination->total }} hasil

        </div>
        <div class="flex items-center gap-2">
            <div id="loadingSpinner" class="hidden flex items-center gap-2 text-sm text-indigo-600">
                <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Memuat...
            </div>
        </div>
    </div>

    <div id="materialGrid">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            @forelse($courses as $course)
            
            <a href="{{ route('guru.mapel.detail',$course->id) }}"
               class="group relative bg-gray-900 rounded-xl h-48 overflow-hidden shadow
                      hover:shadow-xl hover:-translate-y-1 transition">
                <img src="{{ $course->thumbnail }}"
                     class="absolute inset-0 w-full h-full object-cover
                            group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
                <div class="relative z-10 p-4 h-full flex flex-col justify-between">
                    <span class="inline-flex px-2 py-0.5 text-[9px] font-bold rounded
                                 bg-white/20 text-white uppercase tracking-wider">
                        {{ $course->department?->name }}
                    </span>
                    <div>
                        <h4 class="text-sm font-bold text-white line-clamp-2 mb-1">
                            {{ $course->title }}
                        </h4>
                        
                        <!-- 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">-->
                                <!-- Data Dummy Jadwal -->
                        <!--        <div class="flex items-center justify-between text-white">-->
                        <!--            <span class="text-xs font-semibold">Jumat</span>-->
                        <!--            <span class="text-xs font-bold bg-white/20 backdrop-blur px-2 py-0.5 rounded">13:00 - 13:45</span>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        
                        <p class="text-[10px] text-gray-300 mb-1">
                            {{ $course->kelas }}
                        </p>




<p class="text-[10px] text-gray-400">
    {{
        $course->moduleStudentClasses
            ->flatMap(fn ($msc) => $msc->module?->sections ?? [])
            ->flatMap(fn ($section) => $section->lessons ?? [])
            ->count()
    }} Materi
</p>

                    </div>
                </div>
            </a>
            @empty
            <div class="col-span-full text-center py-20 text-gray-500">
                <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 14l9-5-9-5-9 5 9 5z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 14v6l9-5m-9 5l-9-5" />
                </svg>
                <p class="text-gray-500 mb-2">Belum ada materi</p>
                <p class="text-sm text-gray-400">Coba ubah filter atau buat materi baru</p>
            </div>
            @endforelse
        </div>
    </div>

{{-- PAGINATION --}}
<div id="pagination" class="mt-8 flex justify-center gap-2">
    @for ($page = 1; $page <= $pagination->last_page; $page++)
        <a href="?page={{ $page }}"
           class="px-3 py-1 rounded text-sm
           {{ $pagination->current_page == $page
                ? 'bg-indigo-600 text-white'
                : 'bg-gray-200 text-gray-700 hover:bg-gray-300' }}">
            {{ $page }}
        </a>
    @endfor
</div>

</div>

{{-- ================= AJAX ================= --}}
<script>
    let activeFilters = {
        department: '',
        tingkat_id: '',
        class: '',
        sort: 'latest',
        perPage: '12',
        search: '',
        page: 1
    };

    const materialGrid = document.getElementById('materialGrid');
    const pagination = document.getElementById('pagination');
    const searchInput = document.getElementById('searchInput');
    const toggleFilters = document.getElementById('toggleFilters');
    const filtersContent = document.getElementById('filtersContent');
    const filterArrow = document.getElementById('filterArrow');
    const resetFilters = document.getElementById('resetFilters');
    const activeFiltersBadges = document.getElementById('activeFiltersBadges');
    const resultsCount = document.getElementById('resultsCount');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const filtersCount = document.getElementById('filtersCount');
    let debounceTimer = null;

    // Toggle filters visibility
    toggleFilters.addEventListener('click', () => {
        const isHidden = filtersContent.classList.contains('hidden');
        filtersContent.classList.toggle('hidden');
        filterArrow.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)';
        toggleFilters.innerHTML = isHidden ?
            `<svg class="w-4 h-4 transition-transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg> Sembunyikan Filter` :
            `<svg class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg> Tampilkan Filter`;
    });

    // Update active filters count and badges
    function updateActiveFilters() {
        let count = 0;
        let badgesHTML = '<span class="text-sm text-gray-600">Filter aktif:</span>';

        // Check each filter
        if (activeFilters.department) {
            const deptName = document.querySelector(`input[name="department"][value="${activeFilters.department}"]`)?.nextElementSibling?.textContent || '';
            badgesHTML += createBadge('Jurusan', deptName, 'department');
            count++;
        }
        if (activeFilters.tingkat_id) {
            const tingkatName =
                document.querySelector(`input[name="tingkat_id"][value="${activeFilters.tingkat_id}"]`)
                ?.nextElementSibling?.textContent || '';

            badgesHTML += createBadge('Tingkat', tingkatName, 'tingkat_id');
            count++;
        }
        if (activeFilters.class) {
            const className = document.querySelector(`input[name="class"][value="${activeFilters.class}"]`)?.nextElementSibling?.textContent || '';
            badgesHTML += createBadge('Kelas', className, 'class');
            count++;
        }
        if (activeFilters.sort !== 'latest') {
            const sortText = document.querySelector(`#filterSort option[value="${activeFilters.sort}"]`)?.textContent || '';
            badgesHTML += createBadge('Urutan', sortText, 'sort');
            count++;
        }
        if (activeFilters.perPage !== '12') {
            badgesHTML += createBadge('Per Halaman', activeFilters.perPage, 'perPage');
            count++;
        }

        // Update UI
        filtersCount.textContent = count;
        if (count > 0) {
            activeFiltersBadges.classList.remove('hidden');
            activeFiltersBadges.innerHTML = badgesHTML;
            // Attach remove events to badges
            document.querySelectorAll('.remove-filter').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const filterType = e.target.closest('button').dataset.filter;
                    clearFilter(filterType);
                });
            });
        } else {
            activeFiltersBadges.classList.add('hidden');
        }
    }

    function createBadge(label, value, filterType) {
        return `
            <div class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-full text-sm">
                <span class="font-medium">${label}:</span>
                <span>${value}</span>
                <button type="button" data-filter="${filterType}" class="remove-filter ml-1 text-indigo-500 hover:text-indigo-700">
                    <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="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        `;
    }

    function clearFilter(filterType) {
        switch(filterType) {
            case 'department':
                document.querySelector('input[name="department"][value=""]').checked = true;
                activeFilters.department = '';
                break;
            case 'tingkat_id':
                document.querySelector('input[name="tingkat_id"][value=""]').checked = true;
                activeFilters.tingkat_id = '';
                break;
            case 'class':
                document.querySelector('input[name="class"][value=""]').checked = true;
                activeFilters.class = '';
                break;
            case 'sort':
                document.getElementById('filterSort').value = 'latest';
                activeFilters.sort = 'latest';
                break;
            case 'perPage':
                document.getElementById('filterPerPage').value = '12';
                activeFilters.perPage = '12';
                break;
        }
        updateActiveFilters();
        fetchMateri();
    }

    // Reset all filters
    resetFilters.addEventListener('click', () => {
        document.querySelectorAll('input[type="radio"]').forEach(radio => {
            if (radio.value === '') radio.checked = true;
        });
        document.getElementById('filterSort').value = 'latest';
        document.getElementById('filterPerPage').value = '12';
        searchInput.value = '';

        activeFilters = {
            department: '',
            tingkat_id: '',
            class: '',
            sort: 'latest',
            perPage: '12',
            search: '',
            page: 1
        };

        updateActiveFilters();
        fetchMateri();
    });

    // Listen to radio button changes
    document.querySelectorAll('input[type="radio"]').forEach(radio => {
        radio.addEventListener('change', (e) => {
            const name = e.target.name;
            activeFilters[name] = e.target.value;
            updateActiveFilters();
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => fetchMateri(), 300);
        });
    });

    // Listen to select changes
    document.getElementById('filterSort').addEventListener('change', (e) => {
        activeFilters.sort = e.target.value;
        updateActiveFilters();
        fetchMateri();
    });

    document.getElementById('filterPerPage').addEventListener('change', (e) => {
        activeFilters.perPage = e.target.value;
        updateActiveFilters();
        fetchMateri();
    });

    // Search input
    searchInput.addEventListener('input', (e) => {
        activeFilters.search = e.target.value;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => fetchMateri(), 400);
    });

    // Fetch materials
    function fetchMateri(page = 1) {
        activeFilters.page = page;
        loadingSpinner.classList.remove('hidden');

        const params = new URLSearchParams(activeFilters);

        materialGrid.innerHTML = `
            <div class="col-span-full py-20 text-center">
                <div class="flex justify-center mb-3">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
                </div>
                <p class="text-sm text-gray-500">Memuat materi...</p>
            </div>
        `;

        fetch(`{{ route('guru.materi.index') }}?${params}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(res => res.text())
        .then(html => {
            const temp = document.createElement('div');
            temp.innerHTML = html;

            materialGrid.innerHTML = temp.querySelector('#materialGrid').innerHTML;
            pagination.innerHTML = temp.querySelector('#pagination').innerHTML || '';

            // Update results count
            const newResultsCount = temp.querySelector('#resultsCount');
            if (newResultsCount) {
                resultsCount.innerHTML = newResultsCount.innerHTML;
            }

            bindPagination();
            loadingSpinner.classList.add('hidden');
        })
        .catch(() => {
            loadingSpinner.classList.add('hidden');
        });
    }

    function bindPagination() {
        pagination.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', e => {
                e.preventDefault();
                const url = new URL(link.href);
                const page = url.searchParams.get('page') || 1;
                fetchMateri(page);
            });
        });
    }

    // Initialize active filters from current values
    document.addEventListener('DOMContentLoaded', () => {
        // Set initial active filters from checked radios
        activeFilters.department = document.querySelector('input[name="department"]:checked')?.value || '';
        activeFilters.tingkat_id =
    document.querySelector('input[name="tingkat_id"]:checked')?.value || '';

        activeFilters.class = document.querySelector('input[name="class"]:checked')?.value || '';
        activeFilters.sort = document.getElementById('filterSort').value;
        activeFilters.perPage = document.getElementById('filterPerPage').value;

        updateActiveFilters();
        bindPagination();
    });
</script>

@endsection