@extends('layouts.guru')

@section('title', 'Kelola Absensi - SIPENA Guru')
@section('page_title', 'Kelola Absensi')

@section('content')
<!-- Page Header -->
<div class="page-header">
    <h1>Kelola Presensi Siswa</h1>
    <p>Catat dan pantau kehadiran siswa untuk setiap kelas dan mata pelajaran.</p>
</div>

<!-- Stats Cards -->
<div class="stats-grid" style="margin-bottom: 24px;">
    <div class="stat-card">
        <div class="stat-icon bg-blue">
            <i class="fa-solid fa-users"></i>
        </div>
        <div class="stat-details">
            <h3>Total Siswa</h3>
            <p class="stat-value">0</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-green">
            <i class="fa-solid fa-user-check"></i>
        </div>
        <div class="stat-details">
            <h3>Persentase Kehadiran</h3>
            <p class="stat-value">94.5%</p>
        </div>
    </div>
</div>

<div class="main-grid" style="grid-template-columns: 1fr; align-items: start;">
    <div class="card">
        <div class="card-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
            <h3><i class="fa-solid fa-user-pen text-primary"></i> Input Kehadiran Siswa</h3>
            <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
                <div class="form-group" style="margin-bottom: 0;">
                    <select id="filter_kelas" class="form-control" onchange="loadAbsensi()" style="border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 12px; height: 38px;">
                        @foreach(\App\Models\Kelas::all() as $kelas)
                            <option value="{{ $kelas->nama_kelas }}">Kelas {{ $kelas->nama_kelas }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <input type="date" id="filter_tanggal" class="form-control" value="{{ date('Y-m-d') }}" style="border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 12px; height: 38px;">
                </div>
            </div>
        </div>
        <div class="card-body">
            <!-- Filter Pencarian Siswa -->
            <div style="display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;">
                <input type="text" id="search-siswa" class="form-control" placeholder="Cari nama siswa..." onkeyup="searchTable()" style="max-width: 300px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px;">
                <select id="filter-status" class="form-control" onchange="filterStatus()" style="max-width: 200px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px;">
                    <option value="all">Semua Status</option>
                    <option value="hadir">Hadir</option>
                    <option value="izin">Izin</option>
                    <option value="sakit">Sakit</option>
                    <option value="alpha">Alpha</option>
                </select>
            </div>

            <div class="table-responsive">
                <table class="modern-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Siswa</th>
                            <th>Kelas</th>
                            <th>Tanggal</th>
                            <th style="width: 350px; text-align: center;">Status Presensi</th>
                            <th>Catatan</th>
                        </tr>
                    </thead>
                    <tbody id="body-absensi">
                        <!-- Rendered by JS -->
                    </tbody>
                </table>
            </div>

            <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
                <button type="button" class="btn btn-primary" onclick="simpanAbsensi()" style="height: 42px; padding: 0 24px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; background-color: #2563eb; color: #fff;"><i class="fa-solid fa-save"></i> Simpan Presensi</button>
            </div>
        </div>
    </div>

    <!-- Riwayat Absensi Terakhir -->
    <div class="card mt-4">
        <div class="card-header">
            <h3><i class="fa-solid fa-clock-rotate-left text-primary"></i> Riwayat Presensi Terakhir</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="modern-table">
                    <thead>
                        <tr>
                            <th>Nama Siswa</th>
                            <th>Tanggal</th>
                            <th>Mata Pelajaran</th>
                            <th>Status</th>
                            <th>Guru Pengajar</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Andi Pratama</td>
                            <td>04 Mei 2026</td>
                            <td>Matematika</td>
                            <td><span class="badge badge-hadir">Hadir</span></td>
                            <td>Pak Budi</td>
                        </tr>
                        <tr>
                            <td>Budi Santoso</td>
                            <td>04 Mei 2026</td>
                            <td>Matematika</td>
                            <td><span class="badge badge-sakit">Sakit</span></td>
                            <td>Pak Budi</td>
                        </tr>
                        <tr>
                            <td>Citra Kirana</td>
                            <td>04 Mei 2026</td>
                            <td>Matematika</td>
                            <td><span class="badge badge-hadir">Hadir</span></td>
                            <td>Pak Budi</td>
                        </tr>
                        <tr>
                            <td>Dewi Lestari</td>
                            <td>04 Mei 2026</td>
                            <td>Matematika</td>
                            <td><span class="badge badge-izin">Izin</span></td>
                            <td>Pak Budi</td>
                        </tr>
                        <tr>
                            <td>Eko Saputra</td>
                            <td>04 Mei 2026</td>
                            <td>Matematika</td>
                            <td><span class="badge badge-alpha">Alpha</span></td>
                            <td>Pak Budi</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Dynamic Data Absensi from Database
    const dataSiswa = [
        @foreach(\App\Models\User::where('role', 'siswa')->with('siswaProfile')->get() as $siswa)
        { 
            id: {{ $siswa->id }}, 
            nama: "{{ $siswa->name }}", 
            kelas: "{{ $siswa->siswaProfile?->kelas ?? '' }}", 
            status: "hadir", 
            catatan: "" 
        },
        @endforeach
    ];

    document.addEventListener('DOMContentLoaded', function() {
        // Initial Render Table (filtered by selected class)
        const initialKelas = document.getElementById('filter_kelas').value;
        const filteredSiswa = dataSiswa.filter(s => s.kelas === initialKelas);
        renderTableAbsensi(filteredSiswa);
        
        const totalSiswaCard = document.querySelector('.stats-grid .stat-card:first-child .stat-value');
        if (totalSiswaCard) {
            totalSiswaCard.innerText = filteredSiswa.length;
        }
    });

    function renderTableAbsensi(data) {
        const tbody = document.getElementById('body-absensi');
        if (!tbody) return;
        const tanggal = document.getElementById('filter_tanggal').value;
        tbody.innerHTML = '';

        data.forEach((siswa, index) => {
            const tr = document.createElement('tr');
            tr.setAttribute('data-nama', siswa.nama.toLowerCase());
            tr.setAttribute('data-status', siswa.status);
            
            tr.innerHTML = `
                <td>${index + 1}</td>
                <td style="font-weight: 500;">${siswa.nama}</td>
                <td>${siswa.kelas}</td>
                <td>${tanggal}</td>
                <td>
                    <div class="status-toggle">
                        <input type="radio" name="status_${siswa.id}" id="hadir_${siswa.id}" value="hadir" class="status-radio" ${siswa.status === 'hadir' ? 'checked' : ''}>
                        <label for="hadir_${siswa.id}" class="status-label hadir">Hadir</label>
                        
                        <input type="radio" name="status_${siswa.id}" id="izin_${siswa.id}" value="izin" class="status-radio" ${siswa.status === 'izin' ? 'checked' : ''}>
                        <label for="izin_${siswa.id}" class="status-label izin">Izin</label>
                        
                        <input type="radio" name="status_${siswa.id}" id="sakit_${siswa.id}" value="sakit" class="status-radio" ${siswa.status === 'sakit' ? 'checked' : ''}>
                        <label for="sakit_${siswa.id}" class="status-label sakit">Sakit</label>
                        
                        <input type="radio" name="status_${siswa.id}" id="alpha_${siswa.id}" value="alpha" class="status-radio" ${siswa.status === 'alpha' ? 'checked' : ''}>
                        <label for="alpha_${siswa.id}" class="status-label alpha">Alpha</label>
                    </div>
                </td>
                <td>
                    <input type="text" class="form-control" style="padding: 6px 10px;" placeholder="Catatan..." value="${siswa.catatan}">
                </td>
            `;
            tbody.appendChild(tr);

            // Listener untuk update data (optional untuk visual update badge)
            const radios = tr.querySelectorAll(`input[name="status_${siswa.id}"]`);
            radios.forEach(radio => {
                radio.addEventListener('change', function() {
                    tr.setAttribute('data-status', this.value);
                });
            });
        });
    }

    function loadAbsensi() {
        const selectedKelas = document.getElementById('filter_kelas').value;
        const filteredSiswa = dataSiswa.filter(s => s.kelas === selectedKelas);
        renderTableAbsensi(filteredSiswa);
        document.getElementById('filter-status').value = 'all';
        document.getElementById('search-siswa').value = '';
        
        // Update total siswa in stats card
        const totalSiswaCard = document.querySelector('.stats-grid .stat-card:first-child .stat-value');
        if (totalSiswaCard) {
            totalSiswaCard.innerText = filteredSiswa.length;
        }
    }

    function searchTable() {
        const input = document.getElementById("search-siswa").value.toLowerCase();
        const filterStatus = document.getElementById("filter-status").value;
        const rows = document.querySelectorAll("#body-absensi tr");

        rows.forEach(row => {
            const nama = row.getAttribute('data-nama');
            const status = row.getAttribute('data-status');
            
            const matchName = nama.includes(input);
            const matchStatus = (filterStatus === 'all') || (status === filterStatus);

            if (matchName && matchStatus) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    }

    function filterStatus() {
        searchTable(); // panggil search yang sudah menggabungkan filter
    }

    function simpanAbsensi() {
        const btn = event.currentTarget;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Menyimpan...';
        btn.disabled = true;

        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
            alert("Data absensi berhasil disimpan dan tersinkronisasi ke dashboard siswa.");
        }, 800);
    }
</script>
@endpush