{% extends "base.html" %}
{% block title %}Cetak Kartu - {{ siswa.nama }}{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center min-h-[80vh]">
    
    <!-- AREA KARTU (ID CARD) -->
    <div id="id-card" class="bg-white p-6 shadow-2xl border border-gray-200 relative overflow-hidden" 
         style="width: 350px; min-height: 480px; font-family: 'Times New Roman', Times, serif;">
        
        <!-- 1. Header (Logo & Kop) -->
        <div class="text-center mb-2">
            <!-- Logo Sekolah -->
            <div class="flex justify-center mb-2">
                {% if sekolah and sekolah.logo and sekolah.logo != 'default_logo.png' %}
                    <img src="{{ url_for('static', filename='uploads/' + sekolah.logo) }}" alt="Logo" class="h-20 w-20 object-contain">
                {% else %}
                    <!-- Placeholder Logo jika tidak ada -->
                    <div class="h-20 w-20 bg-gray-100 rounded-full flex items-center justify-center border-2 border-gray-300">
                        <span class="text-xs text-gray-400">No Logo</span>
                    </div>
                {% endif %}
            </div>

            <!-- Nama Sekolah -->
            <h1 class="text-lg font-bold uppercase tracking-wide leading-tight text-black">
                {{ sekolah.nama_sekolah if sekolah else 'NAMA SEKOLAH' }}
            </h1>
            
            <!-- Alamat -->
            <p class="text-[11px] text-black leading-tight mt-1 px-2">
                {{ sekolah.alamat_sekolah if sekolah else 'Alamat Sekolah Belum Diatur' }}
            </p>

            <!-- Tahun Pelajaran (Dinamis via JS) -->
            <p class="text-sm font-bold mt-1 text-black" id="tp-text">TP 2025/2026</p>
        </div>

        <!-- 2. QR Code Area -->
        <div class="flex justify-center my-4">
            <div class="p-1 bg-white">
                {% if siswa.qr_code %}
                    <!-- Menggunakan image-rendering: pixelated agar QR tajam saat dicetak -->
                    <img src="{{ siswa.qr_code }}" alt="QR Code" class="w-40 h-40 object-contain" style="image-rendering: pixelated;">
                {% else %}
                    <div class="w-40 h-40 flex items-center justify-center bg-gray-100 text-gray-400 text-xs border border-gray-300">
                        QR Error
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- 3. Informasi Data (Nama & ID) -->
        <div class="mt-4 px-2 text-black">
            <table class="w-full text-sm font-bold" style="line-height: 1.5;">
                <!-- BARIS NAMA -->
                <tr>
                    <td class="align-top whitespace-nowrap" style="width: 90px;">NAMA</td>
                    <td class="align-top px-1">:</td>
                    <td class="align-top uppercase">{{ siswa.nama }}</td>
                </tr>

                <!-- BARIS IDENTITAS (DINAMIS SESUAI ROLE) -->
                <tr>
                    <td class="align-top whitespace-nowrap">
                        {% if is_user %}
                            <!-- Logika untuk User (Guru/Admin) -->
                            {% if 'Guru' in siswa.role or 'Wali Kelas' in siswa.role %}
                                NIP / NUPTK
                            {% else %}
                                ID PEGAWAI
                            {% endif %}
                        {% else %}
                            <!-- Logika untuk Siswa -->
                            NIS / NISN
                        {% endif %}
                    </td>
                    <td class="align-top px-1">:</td>
                    <td class="align-top font-mono tracking-wide text-base">
                        <!-- Tampilkan Data yang sesuai -->
                        {% if is_user %}
                            {{ siswa.identitas }}
                        {% else %}
                            {{ siswa.nisn }}
                        {% endif %}
                    </td>
                </tr>
                
                <!-- Opsi Tambahan: Tampilkan Jabatan/Kelas jika perlu -->
                {% if is_user %}
                <tr>
                    <td class="align-top whitespace-nowrap">JABATAN</td>
                    <td class="align-top px-1">:</td>
                    <td class="align-top uppercase">{{ siswa.role }}</td>
                </tr>
                {% endif %}
            </table>
        </div>

        <!-- Optional: Footer / Watermark halus -->
        <div class="absolute bottom-2 right-0 left-0 text-center opacity-50">
            <!-- Bisa diisi watermark jika perlu -->
        </div>
    </div>

    <!-- TOMBOL AKSI (Tidak ikut dicetak) -->
    <div class="mt-8 flex gap-4 no-print">
        <button onclick="window.print()" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-bold shadow-lg transition-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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
            Cetak Kartu
        </button>
        <button onclick="history.back()" class="flex items-center gap-2 bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-bold shadow-lg">
            <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Kembali
        </button>
    </div>

    <div class="mt-4 text-sm text-gray-500 no-print">
        *Tips: Saat mencetak, pastikan opsi <b>"Background Graphics"</b> dicentang di pengaturan printer browser.
    </div>
</div>

<script>
    // Script Menentukan Tahun Pelajaran Otomatis
    document.addEventListener("DOMContentLoaded", function() {
        const date = new Date();
        const month = date.getMonth() + 1; // 1-12
        const year = date.getFullYear();
        
        let tp = "";
        // Ganti tahun ajaran setiap bulan Juli
        if (month >= 7) {
            tp = `TP ${year}/${year + 1}`;
        } else {
            tp = `TP ${year - 1}/${year}`;
        }
        document.getElementById('tp-text').innerText = tp;
    });
</script>

<style>
/* CSS KHUSUS CETAK */
@media print {
    /* Sembunyikan elemen web lainnya */
    nav, header, aside, footer, .no-print { 
        display: none !important; 
    }
    
    body { 
        background-color: white; 
        margin: 0; 
        padding: 0; 
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }

    /* Styling Kartu saat dicetak */
    #id-card {
        box-shadow: none !important; /* Hilangkan bayangan */
        border: 1px solid #000 !important; /* Border hitam tipis */
        print-color-adjust: exact; /* Paksa cetak warna */
        -webkit-print-color-adjust: exact;
        margin: 0 auto;
        transform: scale(1); 
    }
}
</style>
{% endblock %}