<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Import Data GTK</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            padding: 25px;
        }
        h1, h2 {
            color: #2c3e50;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
        }
        .instruction-box {
            background-color: #e8f4fc;
            border-left: 4px solid #3498db;
            padding: 15px;
            margin-bottom: 25px;
            border-radius: 4px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #3498db;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .required {
            color: #e74c3c;
            font-weight: bold;
        }
        .btn {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            display: block;
            margin: 30px auto;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #27ae60;
        }
        .example-data {
            font-style: italic;
            color: #7f8c8d;
        }
        .note {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Template Import Data GTK</h1>
        
        <div class="instruction-box">
            <p>Template ini digunakan untuk mengimpor data Guru dan Tenaga Kependidikan (GTK) ke dalam sistem Buku Induk Sekolah. Silakan unduh template, isi data sesuai petunjuk, lalu gunakan untuk import data.</p>
        </div>
        
        <h2>Petunjuk Pengisian</h2>
        <ol>
            <li>Unduh template dengan menekan tombol <strong>"Download Template Excel"</strong> di bawah</li>
            <li>Isi data GTK sesuai dengan format kolom yang telah ditentukan</li>
            <li>Kolom dengan tanda <span class="required">*</span> wajib diisi</li>
            <li>Jangan menghapus atau mengubah header kolom</li>
            <li>Simpan file setelah selesai diisi</li>
            <li>Gunakan file tersebut untuk import data melalui menu Import Data GTK</li>
        </ol>
        
        <div class="note">
            <strong>Catatan:</strong> Untuk nilai dropdown (seperti Jenis Kelamin, Agama, dll), harap menggunakan nilai yang sesuai dengan pilihan yang tersedia.
        </div>
        
        <h2>Daftar Kolom dan Format</h2>
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Kolom</th>
                    <th>Keterangan</th>
                    <th>Contoh</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>NIP</td>
                    <td>Nomor Induk Pegawai (opsional, isi '-' jika tidak memiliki)</td>
                    <td class="example-data">198506102010051002</td>
                    <td>Opsional</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>NUPTK</td>
                    <td>Nomor Unik Pendidik dan Tenaga Kependidikan (opsional, isi '-' jika tidak memiliki)</td>
                    <td class="example-data">8643564663200043</td>
                    <td>Opsional</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>NIK <span class="required">*</span></td>
                    <td>Nomor Induk Kependudukan (wajib diisi)</td>
                    <td class="example-data">3505184501750002</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Nama <span class="required">*</span></td>
                    <td>Nama lengkap GTK</td>
                    <td class="example-data">Ahmad Surya Dinata, S.Pd</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Tempat Lahir <span class="required">*</span></td>
                    <td>Tempat lahir GTK</td>
                    <td class="example-data">Malang</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Tanggal Lahir <span class="required">*</span></td>
                    <td>Format: YYYY-MM-DD</td>
                    <td class="example-data">1985-06-10</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Jenis Kelamin <span class="required">*</span></td>
                    <td>Pilihan: L atau P</td>
                    <td class="example-data">L</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Agama <span class="required">*</span></td>
                    <td>Pilihan: Islam, Kristen, Katolik, Hindu, Budha, Khonghucu, Lainnya</td>
                    <td class="example-data">Islam</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Status Pernikahan <span class="required">*</span></td>
                    <td>Pilihan: Belum Kawin, Kawin, Cerai Hidup, Cerai Mati</td>
                    <td class="example-data">Kawin</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Alamat <span class="required">*</span></td>
                    <td>Alamat lengkap</td>
                    <td class="example-data">Jl. Raya Bromo No. 123, Malang</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>No HP <span class="required">*</span></td>
                    <td>Nomor telepon/handphone</td>
                    <td class="example-data">081234567890</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>Email</td>
                    <td>Alamat email (opsional)</td>
                    <td class="example-data">ahmad.surya@sekolah.sch.id</td>
                    <td>Opsional</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>Sumber Gaji <span class="required">*</span></td>
                    <td>Pilihan: APBN, APBD, Sekolah, Yayasan, Lainnya</td>
                    <td class="example-data">APBN</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td>Jenis GTK <span class="required">*</span></td>
                    <td>Pilihan: Guru Mapel, Guru BK, Kepala Sekolah, Tendik, Lainnya</td>
                    <td class="example-data">Guru Mapel</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td>Status Kepegawaian <span class="required">*</span></td>
                    <td>Pilihan: PNS, PPPK, GTT, PTT</td>
                    <td class="example-data">PNS</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>16</td>
                    <td>Pendidikan Terakhir <span class="required">*</span></td>
                    <td>Pilihan: SMA, D3, S1, S2, S3</td>
                    <td class="example-data">S1</td>
                    <td class="required">Wajib</td>
                </tr>
                <tr>
                    <td>17</td>
                    <td>Mata Pelajaran</td>
                    <td>Mata pelajaran yang diampu (jika guru)</td>
                    <td class="example-data">Matematika</td>
                    <td>Opsional</td>
                </tr>
                <tr>
                    <td>18</td>
                    <td>Tunjangan Sertifikasi</td>
                    <td>Isi 1 jika menerima, 0 jika tidak</td>
                    <td class="example-data">1</td>
                    <td>Opsional</td>
                </tr>
                <tr>
                    <td>19</td>
                    <td>Jabatan Fungsional</td>
                    <td>Jabatan fungsional (jika ada)</td>
                    <td class="example-data">Guru Pertama</td>
                    <td>Opsional</td>
                </tr>
                <tr>
                    <td>20</td>
                    <td>Golongan</td>
                    <td>Golongan (jika PNS)</td>
                    <td class="example-data">III/a</td>
                    <td>Opsional</td>
                </tr>
                <tr>
                    <td>21</td>
                    <td>TMT Kerja</td>
                    <td>Tanggal Mulai Kerja (format: YYYY-MM-DD)</td>
                    <td class="example-data">2010-07-01</td>
                    <td>Opsional</td>
                </tr>
                <tr>
                    <td>22</td>
                    <td>Status Aktif</td>
                    <td>Isi 1 jika aktif, 0 jika non-aktif (default: 1)</td>
                    <td class="example-data">1</td>
                    <td>Opsional</td>
                </tr>
            </tbody>
        </table>
        
        <button class="btn" onclick="downloadTemplate()">Download Template Excel</button>
        
        <div class="note">
            <strong>Perhatian:</strong>
            <ul>
                <li>Pastikan format tanggal sesuai dengan contoh (YYYY-MM-DD)</li>
                <li>Gunakan tanda minus (-) untuk kolom NIP/NUPTK jika tidak memiliki</li>
                <li>Data dengan warna merah adalah wajib diisi</li>
                <li>Untuk pilihan dropdown, pastikan menggunakan nilai yang sesuai</li>
            </ul>
        </div>
        
        <div class="footer">
            <p>Template Import Data GTK - Sistem Buku Induk Sekolah SMAN 1 BANTARAN</p>
        </div>
    </div>

    <script>
        function downloadTemplate() {
            // Data untuk template
            const data = [
                [
                    "NIP", "NUPTK", "NIK", "Nama", 
                    "Tempat Lahir", "Tanggal Lahir", "Jenis Kelamin", "Agama",
                    "Status Pernikahan", "Alamat", "No HP", "Email",
                    "Sumber Gaji", "Jenis GTK", "Status Kepegawaian", "Pendidikan Terakhir",
                    "Mata Pelajaran", "Tunjangan Sertifikasi", "Jabatan Fungsional", "Golongan",
                    "TMT Kerja", "Status Aktif"
                ],
                [
                    "198506102010051002", "8643564663200043", "3505184501750002", "Ahmad Surya Dinata, S.Pd",
                    "Malang", "1985-06-10", "L", "Islam",
                    "Kawin", "Jl. Raya Bromo No. 123, Malang", "081234567890", "ahmad.surya@sekolah.sch.id",
                    "APBN", "Guru Mapel", "PNS", "S1",
                    "Matematika", "1", "Guru Pertama", "III/a",
                    "2010-07-01", "1"
                ],
                [
                    "199008152015052001", "7654321098765432", "3505209008750001", "Dewi Sartika, S.Pd",
                    "Surabaya", "1990-08-15", "P", "Islam",
                    "Kawin", "Jl. Diponegoro No. 45, Surabaya", "081398765432", "dewi.sartika@sekolah.sch.id",
                    "APBN", "Guru Mapel", "PNS", "S1",
                    "Bahasa Indonesia", "1", "Guru Muda", "III/b",
                    "2015-08-15", "1"
                ],
                [
                    "-", "-", "3505017012850003", "Budi Santoso",
                    "Probolinggo", "1985-12-17", "L", "Kristen",
                    "Belum Kawin", "Jl. Merdeka No. 78, Probolinggo", "085678901234", "",
                    "Sekolah", "Tendik", "GTT", "SMA",
                    "", "0", "", "",
                    "2018-03-10", "1"
                ]
            ];
            
            // Buat workbook
            const wb = XLSX.utils.book_new();
            const ws = XLSX.utils.aoa_to_sheet(data);
            
            // Atur lebar kolom
            const colWidths = [
                {wch: 20}, {wch: 20}, {wch: 20}, {wch: 25},
                {wch: 15}, {wch: 15}, {wch: 15}, {wch: 15},
                {wch: 15}, {wch: 30}, {wch: 15}, {wch: 25},
                {wch: 15}, {wch: 15}, {wch: 20}, {wch: 20},
                {wch: 20}, {wch: 20}, {wch: 20}, {wch: 10},
                {wch: 15}, {wch: 15}
            ];
            ws['!cols'] = colWidths;
            
            // Tambahkan worksheet ke workbook
            XLSX.utils.book_append_sheet(wb, ws, "Data GTK");
            
            // Buat sheet petunjuk
            const instructionData = [
                ["PETUNJUK PENGGUNAAN TEMPLATE IMPORT DATA GTK"],
                [""],
                ["1. Jangan mengubah urutan kolom atau nama header"],
                ["2. Kolom dengan tanda * wajib diisi"],
                ["3. Format tanggal: YYYY-MM-DD (contoh: 2023-12-31)"],
                ["4. Untuk kolom dengan pilihan, gunakan nilai yang sesuai:"],
                ["   - Jenis Kelamin: L atau P"],
                ["   - Agama: Islam, Kristen, Katolik, Hindu, Budha, Khonghucu, Lainnya"],
                ["   - Status Pernikahan: Belum Kawin, Kawin, Cerai Hidup, Cerai Mati"],
                ["   - Sumber Gaji: APBN, APBD, Sekolah, Yayasan, Lainnya"],
                ["   - Jenis GTK: Guru Mapel, Guru BK, Kepala Sekolah, Tendik, Lainnya"],
                ["   - Status Kepegawaian: PNS, PPPK, GTT, PTT"],
                ["   - Pendidikan Terakhir: SMA, D3, S1, S2, S3"],
                ["5. Untuk Tunjangan Sertifikasi dan Status Aktif: 1 = Ya, 0 = Tidak"],
                ["6. Jika tidak memiliki NIP/NUPTK, isi dengan tanda minus (-)"],
                [""],
                ["Setelah mengisi data, simpan file dan gunakan untuk import di sistem"]
            ];
            
            const wsInstructions = XLSX.utils.aoa_to_sheet(instructionData);
            XLSX.utils.book_append_sheet(wb, wsInstructions, "Petunjuk");
            
            // Simpan file
            const fileName = "template_import_gtk.xlsx";
            XLSX.writeFile(wb, fileName);
            
            alert("Template berhasil diunduh. Silakan buka file " + fileName);
        }
    </script>
</body>
</html>