{% extends "base.html" %}
{% block title %}Rekap Bulanan - {{ kelas_info.nama_kelas }}{% 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 font-bold text-gray-800">Ledger Absensi</h1>
        <p class="text-gray-600 text-sm">Kelas: {{ kelas_info.nama_kelas }} | Periode: {{ bulan_str }}</p>
    </div>
    <div class="flex gap-2">
        <button onclick="window.downloadPDF()" class="bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-lg font-bold shadow-md flex items-center gap-2 transition-all">
            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
            Unduh PDF (Landscape)
        </button>
        <a href="{{ url_for('rekap', tipe='kelas') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-5 py-2 rounded-lg font-bold transition-all">Kembali</a>
    </div>
</div>

<!-- TAMPILAN TABEL DI LAYAR (Scrollable) -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-x-auto p-4" id="screen-table-container">
    <table class="w-full border-collapse text-sm" id="source-table">
        <thead>
            <tr class="bg-gray-100 text-gray-700">
                <th rowspan="2" class="border p-2 min-w-[30px]">No</th>
                <th rowspan="2" class="border p-2 text-left min-w-[200px]">Nama Siswa</th>
                <th colspan="{{ num_days }}" class="border p-1 text-center">Tanggal</th>
                <th colspan="3" class="border p-1 text-center bg-gray-50">Total</th>
            </tr>
            <tr class="bg-gray-50 text-xs">
                {% for d in range(1, num_days + 1) %}
                <th class="border p-1 text-center min-w-[25px]">{{ d }}</th>
                {% endfor %}
                <th class="border p-1 w-8 text-green-700">H</th>
                <th class="border p-1 w-8 text-blue-700">S</th>
                <th class="border p-1 w-8 text-yellow-700">I</th>
                <th class="border p-1 w-8 text-red-700">A</th>
            </tr>
        </thead>
        <tbody class="text-xs text-gray-600">
            {% for s in siswa_list %}
            {% set s_id = s.id %}
            <tr class="hover:bg-gray-50">
                <td class="border p-2 text-center">{{ loop.index }}</td>
                <td class="border p-2 font-medium text-gray-800 uppercase">{{ s.nama }}</td>
                
                {% set ns = namespace(hadir=0, sakit=0, ijin=0, alpa=0) %}
                
                {% for d in range(1, num_days + 1) %}
                <td class="border p-1 text-center">
                    {% if map_absen[s_id] and map_absen[s_id][d] %}
                        {% set st = map_absen[s_id][d] %}
                        {% if st == 'Hadir' %} <span class="text-green-600 font-bold">.</span> {% set ns.hadir = ns.hadir + 1 %}
                        {% elif st == 'Sakit' %} <span class="text-blue-600 font-bold">S</span> {% set ns.sakit = ns.sakit + 1 %}
                        {% elif st == 'Ijin' %} <span class="text-yellow-600 font-bold">I</span> {% set ns.ijin = ns.ijin + 1 %}
                        {% elif st == 'Alpa' %} <span class="text-red-600 font-bold">A</span> {% set ns.alpa = ns.alpa + 1 %}
                        {% endif %}
                    {% endif %}
                </td>
                {% endfor %}
                
                <td class="border p-1 text-center font-bold bg-gray-50">{{ ns.hadir }}</td>
                <td class="border p-1 text-center font-bold bg-gray-50">{{ ns.sakit }}</td>
                <td class="border p-1 text-center font-bold bg-gray-50">{{ ns.ijin }}</td>
                <td class="border p-1 text-center font-bold bg-gray-50">{{ ns.alpa }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    // DATA DARI BACKEND
    const NAMA_SEKOLAH = {{ (sekolah.nama_sekolah if sekolah else 'SEKOLAH CONTOH') | tojson }};
    const ALAMAT_SEKOLAH = {{ (sekolah.alamat_sekolah if sekolah else '') | tojson }};
    const NAMA_KELAS = {{ kelas_info.nama_kelas | tojson }};
    const BULAN_STR = {{ bulan_str | tojson }};
    const BULAN_VAL = {{ bulan_val | tojson }};
    const WALI_NAMA = {{ (kelas_info.wali_nama or '..........................') | tojson }};
    
    // URL Logo
    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 %}";

    window.downloadPDF = function() {
        // 1. Setup Container PDF
        const pdfContainer = document.createElement('div');
        pdfContainer.style.padding = '15px 30px'; 
        pdfContainer.style.fontFamily = "'Times New Roman', Times, serif";
        pdfContainer.style.color = '#000';
        pdfContainer.style.backgroundColor = '#fff';
        pdfContainer.style.width = '100%'; 

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

        const headerHTML = `
            <div style="position: relative; text-align: center; margin-bottom: 10px; border-bottom: 3px double #000; padding-bottom: 5px; min-height: 80px;">
                ${logoImgTag}
                <h3 style="margin: 0; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">PEMERINTAH PROVINSI</h3>
                <h2 style="margin: 3px 0; font-size: 20px; font-weight: bold; text-transform: uppercase;">${NAMA_SEKOLAH}</h2>
                <p style="margin: 0; font-size: 11px; white-space: pre-wrap;">${ALAMAT_SEKOLAH}</p>
            </div>
            
            <div style="text-align: center; margin-bottom: 15px;">
                <h3 style="margin: 0; font-size: 14px; font-weight: bold; text-decoration: underline; text-transform: uppercase;">REKAPITULASI KEHADIRAN SISWA (LEDGER)</h3>
                <table style="width: 100%; font-size: 11px; margin-top: 10px; font-weight: bold;">
                    <tr>
                        <td style="text-align: left; width: 50%;">Kelas : ${NAMA_KELAS}</td>
                        <td style="text-align: right; width: 50%;">Periode : ${BULAN_STR}</td>
                    </tr>
                </table>
            </div>
        `;

        // 3. Clone & Styling Tabel
        const sourceTable = document.getElementById('source-table');
        if (!sourceTable) { alert("Tabel data tidak ditemukan!"); return; }
        
        const tableClone = sourceTable.cloneNode(true);
        tableClone.removeAttribute('class');
        tableClone.style.width = '100%';
        tableClone.style.borderCollapse = 'collapse'; // PENTING: Collapse agar border rapi
        tableClone.style.fontSize = '9px'; 
        tableClone.style.lineHeight = '1.2';

        // ---------------------------------------------------------
        // PERBAIKAN BUG GAMBAR DISINI (Styling Manual JS)
        // ---------------------------------------------------------
        
        // A. Hapus background dari semua TR (Baris) di header dan body
        const rows = tableClone.querySelectorAll('tr');
        rows.forEach(tr => {
            tr.removeAttribute('class');
            tr.style.backgroundColor = 'transparent'; // Paksa transparan agar tidak menimpa rowspan
        });

        // B. Styling Sel (TH dan TD)
        const allCells = tableClone.querySelectorAll('th, td');
        allCells.forEach(cell => {
            cell.removeAttribute('class');
            
            // Border & Padding
            cell.style.border = '0.5px solid #000';
            cell.style.padding = '3px 2px';
            cell.style.textAlign = 'center';
            cell.style.color = '#000';
            cell.style.verticalAlign = 'middle'; // Agar teks "No" & "Nama" di tengah vertikal
            
            // KHUSUS HEADER (TH)
            if (cell.tagName === 'TH') {
                cell.style.fontWeight = 'bold';
                cell.style.backgroundColor = '#f0f0f0'; // Background ditaruh di CELL, bukan ROW
                cell.style.zIndex = '10'; // Memaksa di atas (meski di canvas tidak selalu ngefek, tapi membantu)
            } else {
                // Background body putih
                cell.style.backgroundColor = '#fff';
            }
            
            // Align Left untuk Nama
            if (cell.cellIndex === 1 && cell.tagName === 'TD') { 
                cell.style.textAlign = 'left';
                cell.style.paddingLeft = '5px';
                cell.style.whiteSpace = 'nowrap';
            }
            
            // Konversi simbol
            const spans = cell.querySelectorAll('span');
            spans.forEach(span => {
                const text = span.innerText;
                if(text === '.') {
                    span.innerText = '•'; 
                    span.style.color = '#000';
                } else {
                    span.style.color = '#000';
                    span.style.fontWeight = 'bold';
                }
            });
        });

        // 4. Footer Tanda Tangan
        const footerHTML = `
            <div style="margin-top: 25px; width: 100%; display: flex; justify-content: flex-end; font-size: 11px;">
                <div style="width: 30%; text-align: center;">
                    <p>Diketahui,</p>
                    <p>Wali Kelas</p>
                    <br><br><br><br>
                    <p style="text-decoration: underline; font-weight: bold;">${WALI_NAMA}</p>
                    <p>NIP. ..........................</p>
                </div>
            </div>
        `;

        // 5. Gabungkan Elemen
        pdfContainer.innerHTML = headerHTML;
        pdfContainer.appendChild(tableClone);
        pdfContainer.innerHTML += footerHTML;

        // 6. Konfigurasi PDF
        const fileName = `Ledger_${NAMA_KELAS}_${BULAN_VAL}.pdf`.replace(/[^a-zA-Z0-9._-]/g, '_');
        
        const opt = {
            margin:       [10, 10, 10, 10], 
            filename:     fileName,
            image:        { type: 'jpeg', quality: 0.98 },
            html2canvas:  { scale: 2, useCORS: true },
            jsPDF:        { unit: 'mm', format: 'legal', orientation: 'landscape' } // Pakai LEGAL agar lebar aman
        };

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

<style>
/* CSS Print Native (Backup) */
@media print {
    .no-print, header, aside { display: none !important; }
    body { background: white; margin: 0; padding: 0; }
    #screen-table-container { box-shadow: none; border: none; padding: 0; }
    table { width: 100%; border-collapse: collapse; font-size: 9px; }
    th, td { border: 1px solid black !important; padding: 2px; color: black !important; }
}
</style>
{% endblock %}