{% extends "base.html" %}
{% block title %}Data Absensi{% endblock %}
{% block content %}

<!-- Load Library PDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

<div class="mb-6 flex flex-col md:flex-row justify-between items-center gap-4 no-print">
    <div>
        <h1 class="text-2xl lg:text-3xl font-bold text-gray-800">Data Absensi Harian</h1>
        <p class="text-gray-500 text-sm mt-1">Monitoring kehadiran seluruh warga sekolah</p>
    </div>
    
    <!-- Tombol Cetak PDF Profesional -->
    <button onclick="downloadPDF()" class="bg-red-600 hover:bg-red-700 text-white px-5 py-2.5 rounded-lg font-bold shadow-lg flex items-center gap-2 transition-all transform hover:scale-105">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        <span>Download PDF (A4)</span>
    </button>
</div>

<!-- Filter Section (Hanya tampil di Layar) -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6 no-print">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-4">
        <div>
            <label class="block text-sm font-semibold mb-2">Tanggal</label>
            <input type="date" name="tanggal" value="{{ tanggal }}" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
        </div>
        
        <div>
            <label class="block text-sm font-semibold mb-2">Status / Role</label>
            <select name="role" id="roleFilter" onchange="this.form.submit()" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
                <option value="">Semua Data</option>
                <option value="Siswa" {% if role_filter == 'Siswa' %}selected{% endif %}>Siswa</option>
                <option value="Guru" {% if role_filter == 'Guru' %}selected{% endif %}>Guru/Staff</option>
                <option value="Operator Sekolah" {% if role_filter == 'Operator Sekolah' %}selected{% endif %}>Operator</option>
                <option value="Admin Sekolah" {% if role_filter == 'Admin Sekolah' %}selected{% endif %}>Admin</option>
            </select>
        </div>

        <!-- Filter Kelas: Sekarang Tampil untuk Admin, Operator, Wali Kelas, dan Guru -->
        <div>
            <label class="block text-sm font-semibold mb-2">Filter Kelas</label>
            <select name="kelas" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
                <option value="">Semua Kelas</option>
                {% for k in kelas_list %}<option value="{{ k.id }}" {% if kelas_filter == k.id|string %}selected{% endif %}>{{ k.nama_kelas }}</option>{% endfor %}
            </select>
        </div>
        
        <div>
            <label class="block text-sm font-semibold mb-2">Cari Nama/ID</label>
            <input type="text" name="search" value="{{ search }}" placeholder="Nama / NIP / NISN" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
        </div>
        <div class="flex items-end">
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold shadow-md transition-colors">Filter</button>
        </div>
    </form>
</div>

<!-- Tabel Data (ID: main-table untuk target JS) -->
<div class="bg-white rounded-lg shadow-md overflow-x-auto" id="table-container">
    <table class="w-full" id="main-table">
        <thead class="bg-gray-50 border-b border-gray-200">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">ID (NISN/NIP)</th>
                <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Nama Lengkap</th>
                <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Info (Kelas/Role)</th>
                <th class="px-4 py-3 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Jam Masuk</th>
                <th class="px-4 py-3 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Jam Pulang</th>
                <th class="px-4 py-3 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Status</th>
                {% if current_user.role in ['Admin Sekolah', 'Operator Sekolah'] %}
                <th class="px-4 py-3 text-center text-xs font-bold text-gray-700 uppercase tracking-wider action-col no-print">Aksi</th>
                {% endif %}
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            {% for a in absensi_list %}
            <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-4 py-4 font-medium text-gray-900">{{ a.identitas }}</td>
                <td class="px-4 py-4 text-gray-800 uppercase text-xs font-bold">{{ a.nama }}</td>
                <td class="px-4 py-4 text-gray-600 text-xs">
                    {% if a.nama_kelas %}{{ a.nama_kelas }}{% else %}{{ a.role }}{% endif %}
                </td>
                <!-- Kolom Jam Masuk -->
                <td class="px-4 py-4 text-center text-gray-800 font-mono text-xs">{{ a.jam_masuk or '-' }}</td>
                <!-- Kolom Jam Pulang -->
                <td class="px-4 py-4 text-center text-gray-800 font-mono text-xs">{{ a.jam_pulang or '-' }}</td>
                <td class="px-4 py-4 text-center">
                    <span class="status-badge px-3 py-1 rounded-full text-[10px] font-bold 
                        {% if a.status == 'Hadir' %}bg-green-100 text-green-700
                        {% elif a.status == 'Ijin' %}bg-blue-100 text-blue-700
                        {% elif a.status == 'Sakit' %}bg-yellow-100 text-yellow-700
                        {% else %}bg-red-100 text-red-700{% endif %}">
                        {{ a.status }}
                    </span>
                </td>
                {% if current_user.role in ['Admin Sekolah', 'Operator Sekolah'] %}
                <td class="px-4 py-4 text-center action-col no-print">
                    <button onclick='openEditModal({{ a.id }}, "{{ a.status }}", "{{ a.keterangan or "" }}")' class="text-blue-600 hover:text-blue-800 font-semibold text-xs">Update</button>
                </td>
                {% endif %}
            </tr>
            {% else %}
            <tr><td colspan="7" class="px-6 py-8 text-center text-gray-500 italic">Tidak ada data absensi</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Modal Update (Admin/Operator Only) -->
<div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4 no-print">
    <div class="bg-white rounded-xl shadow-xl max-w-md w-full">
        <div class="p-6 border-b"><h2 class="text-xl font-bold">Update Status Absensi</h2></div>
        <form id="editForm" method="POST" class="p-6">
            <div class="mb-4">
                <label class="block text-sm font-bold mb-2">Pilih Status</label>
                <select name="status" id="edit_status" class="w-full px-4 py-2 border rounded">
                    <option value="Hadir">Hadir</option>
                    <option value="Ijin">Ijin</option>
                    <option value="Sakit">Sakit</option>
                    <option value="Alpa">Alpa</option>
                </select>
            </div>
            <div class="mb-6">
                <label class="block text-sm font-bold mb-2">Keterangan Tambahan</label>
                <textarea name="keterangan" id="edit_keterangan" rows="3" class="w-full px-4 py-2 border rounded" placeholder="Contoh: Surat dokter ada"></textarea>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-blue-600 text-white px-4 py-2 rounded font-bold">Simpan</button>
                <button type="button" onclick="closeEditModal()" class="flex-1 bg-gray-200 text-gray-700 px-4 py-2 rounded font-bold">Batal</button>
            </div>
        </form>
    </div>
</div>

<script>
// Data Sekolah dari Backend
const NAMA_SEKOLAH = "{{ sekolah.nama_sekolah if sekolah else 'Sistem Presensi Sekolah' }}";
const ALAMAT_SEKOLAH = "{{ sekolah.alamat_sekolah if sekolah else '' }}";
const LOGO_URL = "{% if sekolah and sekolah.logo and sekolah.logo != 'default_logo.png' %}{{ url_for('static', filename='uploads/' + sekolah.logo) }}{% else %}{{ url_for('static', filename='img/logo-placeholder.png') }}{% endif %}";

function openEditModal(id, status, ket) {
    document.getElementById('editForm').action = `/absensi/update/${id}`;
    document.getElementById('edit_status').value = status;
    document.getElementById('edit_keterangan').value = ket;
    document.getElementById('editModal').classList.remove('hidden');
    document.getElementById('editModal').classList.add('flex');
}
function closeEditModal() { document.getElementById('editModal').classList.add('hidden'); }

// --- FUNGSI DOWNLOAD PDF PROFESIONAL A4 ---
function downloadPDF() {
    const tanggalAbsen = new Date("{{ tanggal }}").toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
    
    // 1. Buat Container Khusus PDF (Tidak terlihat di layar)
    const pdfContainer = document.createElement('div');
    pdfContainer.style.padding = '15mm';
    pdfContainer.style.backgroundColor = '#fff';
    pdfContainer.style.color = '#000';
    pdfContainer.style.fontFamily = "'Times New Roman', Times, serif";

    // 2. Buat Kop Surat (Header)
    let logoImg = '';
    if (!LOGO_URL.includes('placeholder')) {
        logoImg = `<img src="${LOGO_URL}" style="height: 60px; position: absolute; left: 0; top: 0;">`;
    }

    const header = `
        <div style="position: relative; text-align: center; border-bottom: 3px double #000; padding-bottom: 10px; margin-bottom: 20px; min-height: 70px;">
            ${logoImg}
            <h2 style="margin: 0; font-size: 18px; text-transform: uppercase; font-weight: bold;">PEMERINTAH PROVINSI</h2>
            <h1 style="margin: 2px 0; font-size: 22px; text-transform: uppercase; font-weight: bold;">${NAMA_SEKOLAH}</h1>
            <p style="margin: 0; font-size: 11px;">${ALAMAT_SEKOLAH}</p>
        </div>
        <div style="text-align: center; margin-bottom: 20px;">
            <h3 style="margin: 0; font-size: 14px; text-decoration: underline; font-weight: bold; text-transform: uppercase;">LAPORAN ABSENSI HARIAN</h3>
            <p style="margin: 5px 0; font-size: 12px;">Tanggal: ${tanggalAbsen}</p>
        </div>
    `;

    // 3. Clone Tabel Utama
    const originalTable = document.getElementById('main-table');
    const tableClone = originalTable.cloneNode(true);
    
    // Bersihkan Kolom Aksi agar tidak terbawa ke PDF
    tableClone.querySelectorAll('.action-col').forEach(el => el.remove());
    tableClone.querySelectorAll('.no-print').forEach(el => el.remove());

    // Styling Tabel agar Profesional (Garis Hitam, Font Standar Dokumen)
    tableClone.style.width = '100%';
    tableClone.style.borderCollapse = 'collapse';
    tableClone.style.fontSize = '10px';

    const cells = tableClone.querySelectorAll('th, td');
    cells.forEach(cell => {
        cell.style.border = '1px solid #000';
        cell.style.padding = '6px 4px';
        cell.style.color = '#000';
        
        // Hapus styling tailwind yang tersisa
        cell.removeAttribute('class');
        
        // Jika sel adalah Status Badge, ambil teksnya saja
        const badge = cell.querySelector('.status-badge');
        if (badge) {
            cell.innerHTML = badge.innerText.toUpperCase();
            cell.style.textAlign = 'center';
            cell.style.fontWeight = 'bold';
        }
    });

    // Header Tabel (TH) styling
    tableClone.querySelectorAll('th').forEach(th => {
        th.style.backgroundColor = '#f2f2f2';
        th.style.textAlign = 'center';
        th.style.fontWeight = 'bold';
    });

    // 4. Gabungkan Elemen & Tambahkan Tanda Tangan (Footer Dokumen)
    const footer = `
        <div style="margin-top: 50px; width: 100%; display: flex; justify-content: flex-end;">
            <div style="width: 200px; text-align: center; font-size: 12px;">
                <p>Dicetak pada: ${new Date().toLocaleString('id-ID')}</p>
                <p style="margin-top: 20px;">Kepala Sekolah / Admin,</p>
                <br><br><br><br>
                <p style="text-decoration: underline; font-weight: bold;">( ..................................... )</p>
                <p>NIP. .....................................</p>
            </div>
        </div>
    `;

    pdfContainer.innerHTML = header;
    pdfContainer.appendChild(tableClone);
    pdfContainer.innerHTML += footer;

    // 5. Konfigurasi dan Generate PDF
    const opt = {
        margin:       0.5,
        filename:     `Laporan_Absensi_${new Date().toISOString().slice(0,10)}.pdf`,
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2, useCORS: true, letterRendering: true },
        jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
    };

    html2pdf().set(opt).from(pdfContainer).save();
}
</script>

<style>
/* Memastikan tampilan mobile tetap rapi namun tidak mengganggu PDF */
@media screen and (max-width: 768px) {
    #main-table { font-size: 11px; }
    #main-table th, #main-table td { padding: 8px 4px; }
}

@media print {
    .no-print { display: none !important; }
}
</style>
{% endblock %}