@extends('layouts.teacher')

@section('title', 'Data Siswa')
@section('header_title', 'Data Siswa')

@section('content')

{{-- ================= FILTER ================= --}}
<form id="filterForm"
      class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6 grid grid-cols-1 md:grid-cols-4 gap-4">

    {{-- MODUL --}}
    <select name="msc_id" id="msc_id" class="filter border rounded-lg px-4 py-2 text-sm">
        <option value="">Semua Modul</option>
        @foreach($modules as $module)
            <option value="{{ $module->id }}">{{ $module->title }}</option>
        @endforeach
    </select>

    {{-- TINGKAT KELAS --}}
    <select name="class_level" id="class_level" class="filter border rounded-lg px-4 py-2 text-sm">
        <option value="">Semua Tingkat</option>
        <option value="X">X</option>
        <option value="XI">XI</option>
        <option value="XII">XII</option>
    </select>

    {{-- KELAS SPESIFIK --}}
    <select name="class_id" id="class_id" class="filter border rounded-lg px-4 py-2 text-sm">
        <option value="">Semua Kelas</option>
        @foreach($classes as $class)
            <option value="{{ $class->id }}">{{ $class->level }} - {{ $class->name }}</option>
        @endforeach
    </select>

    {{-- SEARCH --}}
    <div class="relative w-full">
        <i class="ph ph-magnifying-glass absolute left-3 top-3 text-gray-400"></i>
        <input type="text"
               id="search"
               placeholder="Cari nama atau NISN..."
               class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg text-sm">
    </div>
</form>

{{-- ================= TABLE DESKTOP ================= --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hidden md:block">
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead class="bg-gray-50">
                <tr class="text-xs uppercase text-gray-500 font-bold border-b border-gray-200">
                    <th class="px-6 py-4">Siswa</th>
                    <th class="px-6 py-4">NISN</th>
                    <th class="px-6 py-4">Kelas</th>
                    <th class="px-6 py-4">Jurusan</th>
                    <th class="px-6 py-4">Status</th>
                </tr>
            </thead>

            <tbody id="studentTableDesktop" class="text-sm divide-y divide-gray-100">
                @forelse($students as $siswa)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 font-bold">{{ $siswa->name }}</td>
                    <td class="px-6 py-4">{{ $siswa->nisn }}</td>
                    <td class="px-6 py-4">{{ $siswa->class }}</td>
                    <td class="px-6 py-4">{{ $siswa->department ?? '-' }}</td>
                    <td class="px-6 py-4">
                        <span class="px-3 py-1 text-xs rounded-full bg-green-100 text-green-800">
                            Aktif
                        </span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="p-6 text-center text-gray-500">
                        Data siswa belum tersedia
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    {{-- PAGINATION DESKTOP --}}
    <div id="paginationDesktop" class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
        <div class="text-sm text-gray-600">
            Menampilkan <span id="showingFrom">0</span> - <span id="showingTo">0</span> dari <span id="totalStudents">0</span> siswa
        </div>
        <div class="flex items-center gap-2" id="paginationButtons">
            {{-- Pagination buttons will be inserted here --}}
        </div>
    </div>
</div>

{{-- ================= TABLE MOBILE ================= --}}
<div class="md:hidden">
    <div id="studentTableMobile" class="grid gap-4">
        @foreach($students as $siswa)
            <div class="bg-white rounded-xl border shadow-sm p-4">
                <div class="font-bold text-lg text-gray-900">{{ $siswa->name }}</div>
                <div class="text-sm text-gray-500 mb-2">NISN: {{ $siswa->nisn }}</div>

                <div class="text-sm">
                    <div><strong>Kelas:</strong> {{ $siswa->class }}</div>
                    <div><strong>Jurusan:</strong> {{ $siswa->department ?? '-' }}</div>
                </div>

                <span class="inline-block mt-3 px-3 py-1 text-xs rounded-full bg-green-100 text-green-800">
                    Aktif
                </span>
            </div>
        @endforeach
    </div>
    
    {{-- PAGINATION MOBILE --}}
    <div id="paginationMobile" class="mt-4 bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div class="text-sm text-gray-600 text-center mb-3">
            Menampilkan <span id="showingFromMobile">0</span> - <span id="showingToMobile">0</span> dari <span id="totalStudentsMobile">0</span> siswa
        </div>
        <div class="flex items-center justify-center gap-2" id="paginationButtonsMobile">
            {{-- Pagination buttons will be inserted here --}}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // ================= ELEMENTS =================
    const tableDesktop = document.getElementById('studentTableDesktop');
    const tableMobile = document.getElementById('studentTableMobile');
    
    const moduleSelect = document.getElementById('msc_id');
    const levelSelect = document.getElementById('class_level');
    const classSelect = document.getElementById('class_id');
    const searchInput = document.getElementById('search');

    // Pagination elements
    const paginationDesktop = document.getElementById('paginationButtons');
    const paginationMobile = document.getElementById('paginationButtonsMobile');
    const showingFrom = document.getElementById('showingFrom');
    const showingTo = document.getElementById('showingTo');
    const totalStudents = document.getElementById('totalStudents');
    const showingFromMobile = document.getElementById('showingFromMobile');
    const showingToMobile = document.getElementById('showingToMobile');
    const totalStudentsMobile = document.getElementById('totalStudentsMobile');

    let debounceTimer;
    let currentPage = 1;
    let allStudents = []; // Store all fetched students
    const itemsPerPage = 10;

    // ================= FETCH STUDENTS =================
    function fetchStudents() {
        const params = new URLSearchParams({
            msc_id: moduleSelect.value,
            class_level: levelSelect.value,
            class_id: classSelect.value,
            search: searchInput.value
        });

        fetch(`{{ route('guru.siswa.index') }}?${params}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(response => {
            // Handle response structure
            allStudents = response.students ?? [];
            currentPage = 1; // Reset to first page on new filter
            
            renderStudents();
            renderPagination();
        })
        .catch(error => {
            console.error('Error fetching students:', error);
            tableDesktop.innerHTML = `
                <tr>
                    <td colspan="5" class="px-6 py-10 text-center text-red-500">
                        Gagal memuat data
                    </td>
                </tr>
            `;
            tableMobile.innerHTML = `
                <div class="bg-white rounded-xl border shadow-sm p-8 text-center text-red-500">
                    <i class="ph ph-warning-circle text-4xl mb-2"></i>
                    <p>Gagal memuat data</p>
                </div>
            `;
            updatePaginationInfo(0, 0, 0);
        });
    }

    // ================= RENDER STUDENTS =================
    function renderStudents() {
        // Clear tables
        tableDesktop.innerHTML = '';
        tableMobile.innerHTML = '';

        if (allStudents.length === 0) {
            // Desktop empty state
            tableDesktop.innerHTML = `
                <tr>
                    <td colspan="5" class="px-6 py-10 text-center text-gray-500">
                        Tidak ada data siswa
                    </td>
                </tr>
            `;
            
            // Mobile empty state
            tableMobile.innerHTML = `
                <div class="bg-white rounded-xl border shadow-sm p-8 text-center text-gray-500">
                    <i class="ph ph-users text-4xl mb-2"></i>
                    <p>Tidak ada data siswa</p>
                </div>
            `;
            
            updatePaginationInfo(0, 0, 0);
            return;
        }

        // Calculate pagination
        const totalPages = Math.ceil(allStudents.length / itemsPerPage);
        const start = (currentPage - 1) * itemsPerPage;
        const end = Math.min(start + itemsPerPage, allStudents.length);
        const studentsToShow = allStudents.slice(start, end);

        // Update info text
        updatePaginationInfo(start + 1, end, allStudents.length);

        // Render students for current page
        studentsToShow.forEach(siswa => {
            // Desktop view
            tableDesktop.innerHTML += `
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-6 py-4 font-medium">${escapeHtml(siswa.name)}</td>
                    <td class="px-6 py-4">${escapeHtml(siswa.nisn)}</td>
                    <td class="px-6 py-4">${escapeHtml(siswa.class)}</td>
                    <td class="px-6 py-4">${escapeHtml(siswa.department ?? '-')}</td>
                    <td class="px-6 py-4">
                        <span class="px-3 py-1 text-xs rounded-full bg-green-100 text-green-800">
                            Aktif
                        </span>
                    </td>
                </tr>
            `;

            // Mobile view
            tableMobile.innerHTML += `
                <div class="bg-white rounded-xl border shadow-sm p-4 hover:shadow-md transition">
                    <div class="font-bold text-lg text-gray-900">${escapeHtml(siswa.name)}</div>
                    <div class="text-sm text-gray-500 mb-2">NISN: ${escapeHtml(siswa.nisn)}</div>
                    <div class="text-sm">
                        <div><span class="font-medium">Kelas:</span> ${escapeHtml(siswa.class)}</div>
                        <div><span class="font-medium">Jurusan:</span> ${escapeHtml(siswa.department ?? '-')}</div>
                    </div>
                    <span class="inline-block mt-3 px-3 py-1 text-xs rounded-full bg-green-100 text-green-800">
                        Aktif
                    </span>
                </div>
            `;
        });
    }

    // ================= UPDATE PAGINATION INFO =================
    function updatePaginationInfo(from, to, total) {
        showingFrom.textContent = from;
        showingTo.textContent = to;
        totalStudents.textContent = total;
        showingFromMobile.textContent = from;
        showingToMobile.textContent = to;
        totalStudentsMobile.textContent = total;
    }

    // ================= RENDER PAGINATION BUTTONS =================
    function renderPagination() {
        const totalPages = Math.ceil(allStudents.length / itemsPerPage);
        
        // Generate pagination HTML
        const paginationHTML = generatePaginationHTML(currentPage, totalPages);
        
        paginationDesktop.innerHTML = paginationHTML;
        paginationMobile.innerHTML = paginationHTML;

        // Add click events to buttons
        attachPaginationEvents();
    }

    // ================= GENERATE PAGINATION HTML =================
    function generatePaginationHTML(current, total) {
        if (total <= 1) return '';

        let html = '';

        // Previous button
        html += `
            <button 
                onclick="changePage(${current - 1})"
                class="px-3 py-2 rounded-lg border ${current === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border-gray-300'}"
                ${current === 1 ? 'disabled' : ''}
            >
                <i class="ph ph-caret-left"></i>
            </button>
        `;

        // Page numbers
        const maxVisible = 5;
        let startPage = Math.max(1, current - Math.floor(maxVisible / 2));
        let endPage = Math.min(total, startPage + maxVisible - 1);

        if (endPage - startPage < maxVisible - 1) {
            startPage = Math.max(1, endPage - maxVisible + 1);
        }

        // First page + ellipsis
        if (startPage > 1) {
            html += `<button onclick="changePage(1)" class="px-3 py-2 rounded-lg border bg-white text-gray-700 hover:bg-gray-50 border-gray-300 min-w-[40px]">1</button>`;
            if (startPage > 2) {
                html += `<span class="px-2 text-gray-500">...</span>`;
            }
        }

        // Page numbers
        for (let i = startPage; i <= endPage; i++) {
            html += `
                <button 
                    onclick="changePage(${i})"
                    class="px-3 py-2 rounded-lg border min-w-[40px] ${i === current ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 hover:bg-gray-50 border-gray-300'}"
                >
                    ${i}
                </button>
            `;
        }

        // Last page + ellipsis
        if (endPage < total) {
            if (endPage < total - 1) {
                html += `<span class="px-2 text-gray-500">...</span>`;
            }
            html += `<button onclick="changePage(${total})" class="px-3 py-2 rounded-lg border bg-white text-gray-700 hover:bg-gray-50 border-gray-300 min-w-[40px]">${total}</button>`;
        }

        // Next button
        html += `
            <button 
                onclick="changePage(${current + 1})"
                class="px-3 py-2 rounded-lg border ${current === total ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border-gray-300'}"
                ${current === total ? 'disabled' : ''}
            >
                <i class="ph ph-caret-right"></i>
            </button>
        `;

        return html;
    }

    // ================= CHANGE PAGE =================
    window.changePage = function(page) {
        const totalPages = Math.ceil(allStudents.length / itemsPerPage);
        
        if (page < 1 || page > totalPages) return;
        
        currentPage = page;
        renderStudents();
        renderPagination();
        
        // Scroll to top of table
        document.getElementById('filterForm').scrollIntoView({ behavior: 'smooth' });
    };

    // ================= ATTACH PAGINATION EVENTS =================
    function attachPaginationEvents() {
        // Events are handled via onclick in HTML
    }

    // ===== HELPER: Escape HTML untuk keamanan =====
    function escapeHtml(text) {
        if (!text) return text;
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // ===== LOAD INITIAL CLASSES =====
    function loadClassesByLevel(level, preserveSelection = false) {
        const currentValue = classSelect.value;
        
        classSelect.innerHTML = '<option value="">Memuat kelas...</option>';
        classSelect.disabled = true;

        fetch(`{{ route('guru.siswa.classes-by-level') }}?level=${level}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(classes => {
            classSelect.innerHTML = '<option value="">Semua Kelas</option>';
            
            if (classes && classes.length > 0) {
                classes.forEach(cls => {
                    const option = document.createElement('option');
                    option.value = cls.id;
                    option.textContent = `${cls.level} - ${cls.name}`; // Format: X - X-A
                    classSelect.appendChild(option);
                });
            }

            // Restore selection if needed
            if (preserveSelection && currentValue) {
                classSelect.value = currentValue;
            }
            
            classSelect.disabled = false;
        })
        .catch(error => {
            console.error('Error loading classes:', error);
            classSelect.innerHTML = '<option value="">Gagal memuat kelas</option>';
            classSelect.disabled = false;
        });
    }

    // ===== EVENT LISTENERS =====

    // 1. FILTER TINGKAT - Load classes berdasarkan tingkat
    levelSelect.addEventListener('change', function() {
        const level = this.value;
        
        if (level) {
            // Reset class select dan load kelas sesuai tingkat
            classSelect.value = '';
            loadClassesByLevel(level, false);
        } else {
            // Jika tingkat "Semua", reset ke semua kelas
            classSelect.innerHTML = '<option value="">Semua Kelas</option>';
            @foreach($classes as $class)
                classSelect.innerHTML += `<option value="{{ $class->id }}">{{ $class->level }} - {{ $class->name }}</option>`;
            @endforeach
        }
        
        // Fetch students dengan filter baru
        fetchStudents();
    });

    // 2. FILTER MODUL
    moduleSelect.addEventListener('change', fetchStudents);

    // 3. FILTER KELAS
    classSelect.addEventListener('change', fetchStudents);

    // 4. SEARCH dengan debounce
    searchInput.addEventListener('keyup', function() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(fetchStudents, 400);
    });

    // 5. LOAD INITIAL DATA
    // Panggil fetchStudents saat halaman dimuat
    fetchStudents();

    // Optional: Load classes jika ada tingkat yang terpilih di awal
    if (levelSelect.value) {
        loadClassesByLevel(levelSelect.value, true);
    }
});
</script>

{{-- Tambahkan CSS untuk transition --}}
<style>
.hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.transition {
    transition: all 0.2s ease-in-out;
}
</style>
@endsection