It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate.

Source: https://kanreg12bkn.id/

  1. <!DOCTYPE html>
  2. <html lang="id">
  3. <head>
  4.    <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Pusat Informasi Klaten Menghafal</title>
  7.  
  8. <!-- Favicon -->
  9. <link rel="icon" type="image/png" href="img/favicon.png">
  10. <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
  11. <meta name="msapplication-TileImage" content="img/android-chrome.png">
  12.  
  13. <!-- Meta tags untuk SEO -->
  14. <meta name="description" content="Pusat Informasi Klaten Menghafal - Program Tahfidz dan Pengembangan Al-Quran">
  15. <meta name="keywords" content="klaten menghafal, pusat informasi, tahfidz, al-quran, program quran">
  16.  
  17. <!-- Open Graph meta tags -->
  18. <meta property="og:title" content="Pusat Informasi Klaten Menghafal">
  19. <meta property="og:description" content="Pusat Informasi Program Tahfidz dan Pengembangan Al-Quran Klaten Menghafal">
  20. <meta property="og:image" content="https://klatenmenghafal.com/img/logo.png">
  21. <meta property="og:url" content="http://klatenmenghafal.com/">
  22.    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
  23.    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  24.    
  25. <meta property="og:type" content="website">
  26.  
  27. <!-- Twitter Card meta tags -->
  28. <meta name="twitter:card" content="summary_large_image">
  29. <meta name="twitter:title" content="Pusat Informasi Klaten Menghafal">
  30. <meta name="twitter:description" content="Pusat Informasi Program Tahfidz dan Pengembangan Al-Quran Klaten Menghafal">
  31. <meta name="twitter:image" content="https://klatenmenghafal.com/img/logo.png">
  32.  
  33. <!-- Meta tag untuk favicon -->
  34. <link rel="icon" type="image/png" href="img/logo.png">
  35.    <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap" rel="stylesheet">
  36.    <style>
  37. /* Import Font */
  38. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');
  39.  
  40. /* Root dan Base styles */
  41. :root {
  42.    --blue-dark: #0A617D;    /* Biru tua */
  43.    --orange: #F4A020;       /* Orange */
  44.    --black: #000000;        /* Hitam */
  45.    --white: #ffffff;        /* Putih */
  46.    --font-title: 'Poppins', sans-serif;
  47. }
  48.  
  49. body {
  50.    font-family: var(--font-title);
  51. }
  52.  
  53. /* Hero Section Styles */
  54. .hero-section {
  55.    background-color: var(--white);
  56.    color: var(--black);
  57.    text-align: center;
  58.    padding: 0;
  59. }
  60.  
  61. .hero-section img {
  62.    width: 130px !important;
  63.    margin: 0;
  64. }
  65.  
  66. /* Kaligrafi Container */
  67. .kaligrafi-container {
  68.    width: 100%;
  69.    max-width: 1600px;
  70.    margin: 0.5rem auto;
  71.    padding: 0.5rem;
  72.    text-align: center;
  73. }
  74.  
  75. .kaligrafi-svg {
  76.    width: 100%;
  77.    height: auto;
  78.    display: inline-block;
  79.    filter: invert(24%) sepia(95%) saturate(592%) hue-rotate(165deg) brightness(94%) contrast(101%);
  80.    transform: scale(2);
  81. }
  82.  
  83. .hero-section h1 {
  84.    font-family: var(--font-title);
  85.    font-size: 2.5rem !important;
  86.    margin: 0.05rem 0;
  87.    font-weight: 800;
  88.    letter-spacing: 1px;
  89.    text-transform: uppercase;
  90.    color: var(--black);
  91. }
  92.  
  93. .hero-section p {
  94.    font-family: var(--font-title);
  95.    font-size: 1.5rem !important;
  96.    margin: 0.01rem 0;
  97.    font-weight: 600;
  98.    letter-spacing: 0.5px;
  99.    color: var(--black);
  100. }
  101.  
  102. /* Card Styles */
  103. .info-card {
  104.    background: var(--white);
  105.    border-radius: 12px;
  106.    padding: 0.55rem !important;
  107.    border: 1px solid rgba(10, 97, 125, 0.1);
  108.    height: 100%;
  109.    cursor: pointer;
  110.    transition: transform 0.2s;
  111. }
  112.  
  113. .info-card:hover {
  114.    transform: translateY(-2px);
  115. }
  116.  
  117. .info-card h3 {
  118.    font-family: var(--font-title);
  119.    font-size: 0.75rem !important;
  120.    font-weight: 700;
  121.    letter-spacing: 0.05px;
  122.    margin-bottom: 0.01rem;
  123.    text-transform: uppercase;
  124. }
  125.  
  126. .info-card p {
  127.    font-size: 0.7rem;
  128.    margin-bottom: 0;
  129.    color: var(--white);
  130. }
  131.  
  132. /* Card Colors */
  133. .info-card.hymne,
  134. .info-card.info-wisuda,
  135. .info-card.merchandise,
  136. .info-card.cari-lembaga,
  137. .info-card.shift {
  138.    background: var(--blue-dark);
  139. }
  140.  
  141. .info-card.check-in,
  142. .check-in-button .info-card,
  143. .donasi-button .info-card {
  144.    background: var(--orange);
  145. }
  146.  
  147. /* Button & Text Adjustments */
  148. .check-in-button h3,
  149. .donasi-button h3 {
  150.    font-family: var(--font-title);
  151.    font-size: 1rem !important;
  152.    font-weight: 700;
  153.    letter-spacing: 1px;
  154.    text-transform: uppercase;
  155.    color: var(--white);
  156. }
  157.  
  158. /* Navbar Styles */
  159. .navbar.fixed-bottom {
  160.    padding: 0.5rem 0;
  161.    background: var(--white);
  162.    border-top: 1px solid var(--black);
  163. }
  164.  
  165. .navbar .container {
  166.    gap: 0.5rem !important;
  167. }
  168.  
  169. .navbar .rounded-circle {
  170.    width: 30px;
  171.    height: 30px;
  172.    display: flex;
  173.    align-items: center;
  174.    justify-content: center;
  175.    background: var(--blue-dark);
  176. }
  177.  
  178. .navbar h6 {
  179.    font-size: 0.75rem;
  180.    margin-bottom: 0;
  181.    color: var(--blue-dark);
  182. }
  183.  
  184. .navbar small {
  185.    font-size: 0.65rem;
  186.    color: var(--black);
  187. }
  188.  
  189. /* Modal Styles */
  190. .modal-content {
  191.    border-radius: 25px;
  192.    border: 2px solid var(--blue-dark);
  193.    background: var(--white);
  194. }
  195.  
  196. .btn-close {
  197.    position: absolute;
  198.    right: 1rem;
  199.    top: 1rem;
  200. }
  201.  
  202. .lyrics-container {
  203.    max-height: 400px;
  204.    overflow-y: auto;
  205.    background: var(--white);
  206. }
  207.  
  208. .lyrics {
  209.    font-size: 1rem;
  210.    line-height: 1.6;
  211.    color: var(--black);
  212. }
  213.  
  214. .lyrics p {
  215.    margin-bottom: 1.5rem;
  216. }
  217.  
  218. /* Scrollbar Styling */
  219. .lyrics-container::-webkit-scrollbar {
  220.    width: 8px;
  221. }
  222.  
  223. .lyrics-container::-webkit-scrollbar-track {
  224.    background: var(--white);
  225.    border-radius: 10px;
  226. }
  227.  
  228. .lyrics-container::-webkit-scrollbar-thumb {
  229.    background: var(--blue-dark);
  230.    border-radius: 10px;
  231. }
  232.  
  233. /* Responsive Media Queries */
  234. @media (max-width: 768px) {
  235.    .hero-section img {
  236.        width: 120px !important;
  237.    }
  238.    
  239.    .kaligrafi-container {
  240.        max-width: 100%;
  241.        padding: 0.3rem;
  242.    }
  243.    
  244.    .kaligrafi-svg {
  245.        width: 100%;
  246.        margin: 0 auto;
  247.        transform: scale(1.8);
  248.    }
  249.    
  250.    .modal-dialog {
  251.        margin: 0.5rem;
  252.    }
  253.    
  254.    .lyrics {
  255.        font-size: 0.9rem;
  256.    }
  257.    
  258.    .modal-body {
  259.        padding: 1rem !important;
  260.    }
  261. }
  262.  
  263. @media (min-width: 1200px) {
  264.    .kaligrafi-svg {
  265.        transform: scale(2.2);
  266.    }
  267. }
  268.  
  269. /* Print styles */
  270. @media print {
  271.    .no-print {
  272.        display: none !important;
  273.    }
  274. }
  275. </style>
  276. </head>
  277. <body>
  278.    <!-- Hero Section -->
  279.   <div class="hero-section">
  280.    <img src="img/logo.png" alt="Logo" class="mb-2">
  281.    <div class="kaligrafi-container">
  282.        <img src="img/svg/kaligrafi.svg" alt="خيركم من تعلم القرآن وعلمه" class="kaligrafi-svg">
  283.    </div>
  284.    <h1 class="fw-bold">PUSAT INFORMASI</h1>
  285.    <p>KLATEN MENGHAFAL</p>
  286. </div>
  287.  
  288.   <!-- Info Cards -->
  289. <section class="container py-3">
  290.    <div class="row g-2">
  291.        <!-- Cari Santri -->
  292.        <div class="col-6">
  293.            <div class="info-card h-100" style="background-color: #0A617D;" data-bs-toggle="modal" data-bs-target="#cariSantriModal">
  294.                <h3 class="text-white">CARI KARTU WISUDA</h3>
  295.                <p></p>
  296.            </div>
  297.        </div>
  298.        
  299.        <!-- Cari Lembaga -->
  300.        <div class="col-6">
  301.            <div class="info-card h-100" style="background-color: #0A617D;" data-bs-toggle="modal" data-bs-target="#cariLembagaModal">
  302.                <h3 class="text-white">CARI LEMBAGA</h3>
  303.                <p></p>
  304.            </div>
  305.        </div>
  306.        
  307.        <!-- Pembagian Shift -->
  308.        <!--<div class="col-6">-->
  309.        <!--    <div class="info-card h-100" style="background-color: #0A617D;" data-bs-toggle="modal" data-bs-target="#pembagianShiftModal">-->
  310.        <!--        <h3 class="text-white">PEMBAGIAN SHIFT</h3>-->
  311.        <!--        <p></p>-->
  312.        <!--    </div>-->
  313.        <!--</div>-->
  314.        
  315.        <!-- Info Wisuda -->
  316.        <div class="col-6">
  317.            <div class="info-card h-100" style="background-color: #0A617D;" data-bs-toggle="modal" data-bs-target="#rundownModal">
  318.                <h3 class="text-white">INFO WISUDA</h3>
  319.                <p></p>
  320.            </div>
  321.        </div>
  322.        
  323.        <!-- Merchandise -->
  324.        <div class="col-6">
  325.            <div class="info-card h-100" style="background-color: #0A617D;" data-bs-toggle="modal" data-bs-target="#merchandiseModal">
  326.                <h3 class="text-white">MERCHANDISE</h3>
  327.                <p></p>
  328.            </div>
  329.        </div>
  330.        
  331.        <!-- Cari Lembaga Second -->
  332.        
  333.        
  334.        <!-- Hymne Klaten Menghafal -->
  335.        <div class="col-6">
  336.            <div class="info-card h-100" style="background-color: #0A617D;" data-bs-toggle="modal" data-bs-target="#hymneklatenmenghafaltModal">
  337.                <h3 class="text-white">HYMNE KLATEN MENGHAFAL</h3>
  338.                <p></p>
  339.            </div>
  340.        </div>
  341.        
  342.        <!-- Daftar Guru Ngaji -->
  343.        <div class="col-6">
  344.            <div class="info-card h-100" style="background-color: #0A617D;" data-bs-toggle="modal" data-bs-target="#formGuruModal">
  345.                <h3 class="text-white">DAFTAR ULANG GURU NGAJI</h3>
  346.                <p></p>
  347.            </div>
  348.        </div>
  349.    </div>
  350. </section>
  351.  
  352. <!-- Full Width Buttons -->
  353. <section class="container py-2">
  354.    <!-- Donasi Button -->
  355.    <div class="check-in-button w-100 mb-2" data-bs-toggle="modal" data-bs-target="#donasiModal">
  356.        <div class="info-card h-100" style="background-color: #0A617D; text-align: center; padding: 15px;">
  357.            <h3 class="text-white" style="margin: 0;">DONASI</h3>
  358.        </div>
  359.    </div>
  360.    
  361.    <!-- Cek In Button -->
  362.    <div class="check-in-button w-100" data-bs-toggle="modal" data-bs-target="#konfirmasiModal">
  363.        <div class="info-card h-100" style="background-color: #F4A020; text-align: center; padding: 15px;">
  364.            <h3 class="text-white" style="margin: 0;">CEK IN SANTRI WISUDA AKBAR</h3>
  365.        </div>
  366.    </div>
  367. </section>
  368.  
  369.    <!-- Pusat Informasi Section -->
  370. <!--<section class="container py-3">-->
  371.    <!--<div class="text-center">-->
  372.    <!--    <h5 class="fw-bold mb-3">Pusat Informasi</h5>-->
  373.    <!--    <a href="#" class="btn btn-primary d-flex align-items-center justify-content-center gap-2 mx-auto" style="max-width: 200px;" data-bs-toggle="modal" data-bs-target="#informasiModal">-->
  374.    <!--        <i class="fas fa-info-circle"></i>-->
  375.    <!--        Informasi Lengkap-->
  376.    <!--    </a>-->
  377.    <!--</div>-->
  378. <!--</section>-->
  379.  
  380.    <!-- Fixed Bottom Navbar -->
  381.    <!--<nav class="navbar fixed-bottom bg-white border-top shadow-sm">-->
  382.    <!--    <div class="container d-flex justify-content-center gap-2">-->
  383.            <!-- Donasi -->
  384.    <!--        <a href="#donasiModal" -->
  385.    <!--           class="d-flex align-items-center gap-1 text-decoration-none" -->
  386.    <!--           data-bs-toggle="modal" -->
  387.    <!--           data-bs-target="#donasiModal">-->
  388.    <!--            <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center">-->
  389.    <!--                <i class="fas fa-heart text-white"></i>-->
  390.    <!--            </div>-->
  391.    <!--            <div>-->
  392.    <!--                <h6 class="text-primary">Donasi</h6>-->
  393.    <!--                <small>Program Tahfidz</small>-->
  394.    <!--            </div>-->
  395.    <!--        </a>-->
  396.  
  397.            <!-- Form Guru -->
  398.    <!--        <a href="#formGuruModal" -->
  399.    <!--           class="d-flex align-items-center gap-1 text-decoration-none"-->
  400.    <!--           data-bs-toggle="modal" -->
  401.    <!--           data-bs-target="#formGuruModal">-->
  402.    <!--            <div class="rounded-circle bg-success d-flex align-items-center justify-content-center">-->
  403.    <!--                <i class="fas fa-user-plus text-white"></i>-->
  404.    <!--            </div>-->
  405.    <!--            <div>-->
  406.    <!--                <h6 class="text-success">Daftar</h6>-->
  407.    <!--                <small>Guru Ngaji</small>-->
  408.    <!--            </div>-->
  409.    <!--        </a>-->
  410.    <!--    </div>-->
  411.    <!--</nav>-->
  412.  
  413.    <div class="modal fade" id="cariSantriModal" tabindex="-1" aria-labelledby="cariSantriModalLabel" aria-hidden="true">
  414.    <div class="modal-dialog">
  415.        <div class="modal-content">
  416.            <div class="modal-header">
  417.                <h5 class="modal-title text-dark" id="cariSantriModalLabel">Cari Santri</h5>
  418.                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  419.            </div>
  420.            <div class="modal-body">
  421.                <form id="formCariSantri" action="kartu_santriwisuda.php" method="GET">
  422.                    <div class="mb-3">
  423.                        <label for="noInduk" class="form-label text-dark"></label>Cari No.Kartu</label>
  424.                        <input type="text" class="form-control" id="noInduk" name="no_induk" placeholder="Masukkan nomor kartu" required>
  425.                        <small class="form-text text-muted">Contoh: 3256, 0020, dst</small>
  426.                    </div>
  427.                    <button type="submit" class="btn btn-primary w-100">Cari</button>
  428.                </form>
  429.            </div>
  430.        </div>
  431.    </div>
  432. </div><div class="modal fade" id="cariLembagaModal" tabindex="-1" aria-labelledby="cariLembagaModalLabel" aria-hidden="true">
  433.    <div class="modal-dialog">
  434.        <div class="modal-content">
  435.            <div class="modal-header">
  436.                <h5 class="modal-title text-dark" id="cariLembagaModalLabel">Cari Lembaga</h5>
  437.                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  438.            </div>
  439.            <div class="modal-body">
  440.                <form id="formCariLembaga" action="daftar_lembagawisuda.php" method="GET">
  441.                    <div class="mb-3">
  442.                        <label for="searchLembaga" class="form-label text-dark">Cari Lembaga</label>
  443.                        <input type="text" class="form-control" id="searchLembaga" name="search"
  444.                               placeholder="Masukkan nama lembaga/PJ/nomor WA">
  445.                        <small class="form-text text-muted">
  446.                            Cari berdasarkan nama lembaga, penanggung jawab, atau nomor WhatsApp
  447.                        </small>
  448.                    </div>
  449.                    <button type="submit" class="btn btn-primary w-100">Cari</button>
  450.                </form>
  451.            </div>
  452.        </div>
  453.    </div>
  454. </div><div class="modal fade" id="pembagianShiftModal" tabindex="-1" aria-labelledby="pembagianShiftModalLabel" aria-hidden="true">
  455.    <div class="modal-dialog modal-lg">
  456.        <div class="modal-content">
  457.            <div class="modal-header bg-primary text-white">
  458.                <h5 class="modal-title" id="pembagianShiftModalLabel">
  459.                    <i class="fas fa-clock me-2"></i>Pembagian Shift Wisuda Akbar
  460.                </h5>
  461.                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  462.            </div>
  463.            <div class="modal-body">
  464.                <div class="alert alert-info">
  465.                    <i class="fas fa-info-circle me-2"></i>
  466.                    Total peserta Shift 1: 1530 santri (No. Induk 0002-3105)<br>
  467.                    Total peserta Shift 2:  santri (No. Induk 3106-6071)
  468.                </div>
  469.                
  470.                <div class="table-responsive">
  471.                    <table class="table table-striped">
  472.                        <thead class="bg-primary text-white">
  473.                            <tr>
  474.                                <th>Shift</th>
  475.                                <th>Waktu</th>
  476.                                <th>No. Induk</th>
  477.                                <th>Keterangan</th>
  478.                            </tr>
  479.                        </thead>
  480.                        <tbody>
  481.                            <tr>
  482.                                <td>
  483.                                    <span class="badge bg-info">Shift 1 (Pagi)</span>
  484.                                </td>
  485.                                <td>07:30 - 10:00</td>
  486.                                <td>0002 - 3105</td>
  487.                                <td>
  488.                                    <a href="shift1.php" class="btn btn-sm btn-outline-primary">Lihat Data</a>
  489.                                </td>
  490.                            </tr>
  491.                            <tr>
  492.                                <td>
  493.                                    <span class="badge bg-warning">Shift 2 (Siang)</span>
  494.                                </td>
  495.                                <td>12:30 - 15:00</td>
  496.                                <td>3106 - 6071</td>
  497.                                <td>
  498.                                    <a href="shift2.php" class="btn btn-sm btn-outline-primary">Lihat Data</a>
  499.                                </td>
  500.                            </tr>
  501.                        </tbody>
  502.                    </table>
  503.                </div>
  504.  
  505.                <div class="mt-4">
  506.                    <h6 class="fw-bold mb-3"><i class="fas fa-clipboard-list me-2"></i>Informasi Penting:</h6>
  507.                    <div class="card">
  508.                        <div class="card-body">
  509.                            <ol class="mb-0">
  510.                                <li class="mb-2">Peserta wajib hadir 30 menit sebelum acara dimulai
  511.                                    <ul>
  512.                                        <li>Shift 1: Hadir pukul 07:00</li>
  513.                                        <li>Shift 2: Hadir pukul 12:00</li>
  514.                                    </ul>
  515.                                </li>
  516.                                <li class="mb-2">Membawa kartu peserta dan identitas</li>
  517.                                <li class="mb-2">Berpakaian:
  518.                                    <ul>
  519.                                        <li>Putra: Gamis putih/koko putih, celana putih, peci putih</li>
  520.                                        <li>Putri: Gamis putih, kerudung putih</li>
  521.                                    </ul>
  522.                                </li>
  523.                                <li>Orangtua/wali santri wajib membawa kartu pendamping</li>
  524.                            </ol>
  525.                        </div>
  526.                    </div>
  527.                </div>
  528.  
  529.                <div class="mt-4">
  530.                    <h6 class="fw-bold mb-3"><i class="fas fa-map-marker-alt me-2"></i>Lokasi Wisuda:</h6>
  531.                    <div class="card bg-light">
  532.                        <div class="card-body">
  533.                            <p class="mb-1"><strong>Grha Bung Karno</strong></p>
  534.                            <p class="mb-0 text-muted">Jl. Jombor Indah No.1, Tengahan, Buntalan, Kec. Klaten Tengah, Kabupaten Klaten, Jawa Tengah 57419</p>
  535.                        </div>
  536.                    </div>
  537.                </div>
  538.  
  539.                <div class="alert alert-success mt-4">
  540.                    <h6 class="alert-heading">
  541.                        <i class="fas fa-info-circle me-2"></i>Informasi Kontak:
  542.                    </h6>
  543.                    <div class="mt-2">
  544.                        <div><strong>WhatsApp:</strong> 0856 0003 0005</div>
  545.                        <!--<div><strong>Rekening:</strong> BSI 919 1919 235 (an. GURU NGAJI BERDAYA)</div>-->
  546.                        <!--<div><strong>Media Sosial:</strong> Guru Ngaji Berdaya</div>-->
  547.                    </div>
  548.                </div>
  549.            </div>
  550.            <div class="modal-footer">
  551.                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
  552.                <a href="https://wa.me/6285600030005" class="btn btn-success">
  553.                    <i class="fab fa-whatsapp me-2"></i>Bantuan
  554.                </a>
  555.            </div>
  556.        </div>
  557.    </div>
  558. </div><div class="modal fade" id="rundownModal" tabindex="-1" aria-labelledby="rundownModalLabel" aria-hidden="true">
  559.   <div class="modal-dialog modal-lg">
  560.       <div class="modal-content">
  561.           <div class="modal-header bg-primary text-white">
  562.               <h5 class="modal-title" id="rundownModalLabel">
  563.                   <i class="fas fa-calendar-check me-2"></i>Rundown Acara Wisuda Akbar
  564.               </h5>
  565.               <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  566.           </div>
  567.           <div class="modal-body">
  568.               <!-- Card Shift 1 -->
  569.               <div class="card mb-4">
  570.                   <div class="card-header bg-info text-white">
  571.                       <h6 class="mb-0"><i class="fas fa-sun me-2"></i>SHIFT 1 (PAGI)</h6>
  572.                   </div>
  573.                   <div class="card-body">
  574.                       <div class="table-responsive">
  575.                           <table class="table table-striped">
  576.                               <thead>
  577.                                   <tr>
  578.                                       <th width="25%">Waktu</th>
  579.                                       <th>Agenda</th>
  580.                                   </tr>
  581.                               </thead>
  582.                               <tbody>
  583.                                   <tr>
  584.                                       <td>07:30 - 07:35</td>
  585.                                       <td>Menyanyikan Lagu Indonesia Raya</td>
  586.                                   </tr>
  587.                                   <tr>
  588.                                       <td>07:35 - 08:00</td>
  589.                                       <td>Pembukaan dan Tilawah</td>
  590.                                   </tr>
  591.                                   <tr>
  592.                                       <td>08:00 - 08:30</td>
  593.                                       <td>Cinematic Perjuangan Para Penghafal Al-Quran</td>
  594.                                   </tr>
  595.                                   <tr>
  596.                                       <td>08:30 - 09:00</td>
  597.                                       <td>Motivasi Bupati dan Pengambilan Hadiah Umroh</td>
  598.                                   </tr>
  599.                                   <tr>
  600.                                       <td>09:00 - 09:50</td>
  601.                                       <td>Prosesi Klaten Menghafal dan Doa</td>
  602.                                   </tr>
  603.                                   <tr>
  604.                                       <td>09:50 - 10:00</td>
  605.                                       <td>Penutup</td>
  606.                                   </tr>
  607.                               </tbody>
  608.                           </table>
  609.                       </div>
  610.                   </div>
  611.               </div>
  612.  
  613.               <!-- Card Shift 2 -->
  614.               <div class="card mb-4">
  615.                   <div class="card-header bg-warning text-dark">
  616.                       <h6 class="mb-0"><i class="fas fa-sun me-2"></i>SHIFT 2 (SIANG)</h6>
  617.                   </div>
  618.                   <div class="card-body">
  619.                       <div class="table-responsive">
  620.                           <table class="table table-striped">
  621.                               <thead>
  622.                                   <tr>
  623.                                       <th width="25%">Waktu</th>
  624.                                       <th>Agenda</th>
  625.                                   </tr>
  626.                               </thead>
  627.                               <tbody>
  628.                                   <tr>
  629.                                       <td>12:30 - 12:35</td>
  630.                                       <td>Menyanyikan Lagu Indonesia Raya</td>
  631.                                   </tr>
  632.                                   <tr>
  633.                                       <td>12:35 - 13:00</td>
  634.                                       <td>Pembukaan dan Tilawah</td>
  635.                                   </tr>
  636.                                   <tr>
  637.                                       <td>13:00 - 13:30</td>
  638.                                       <td>Cinematic Perjuangan Para Penghafal Al-Quran</td>
  639.                                   </tr>
  640.                                   <tr>
  641.                                       <td>13:30 - 14:00</td>
  642.                                       <td>Motivasi Bupati dan Pengambilan Hadiah Umroh</td>
  643.                                   </tr>
  644.                                   <tr>
  645.                                       <td>14:00 - 14:50</td>
  646.                                       <td>Prosesi Klaten Menghafal dan Doa</td>
  647.                                   </tr>
  648.                                   <tr>
  649.                                       <td>14:50 - 15:00</td>
  650.                                       <td>Penutup</td>
  651.                                   </tr>
  652.                               </tbody>
  653.                           </table>
  654.                       </div>
  655.                   </div>
  656.               </div>
  657.  
  658.               <!-- Card Teknis Pelaksanaan -->
  659.               <div class="card mb-4">
  660.                   <div class="card-header bg-primary text-white">
  661.                       <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>TEKNIS PELAKSANAAN WISUDA</h6>
  662.                   </div>
  663.                   <div class="card-body">
  664.                       <div class="text-center mb-3">
  665.                           <h5>🎓🔅🎓🔅🎓🔅🎓🔅🎓🔅🎓</h5>
  666.                           <strong>TEKNIS PELAKSANAAN WISUDA AKBAR SEWINDU KLATEN MENGHAFAL</strong>
  667.                       </div>
  668.                      
  669.                       <div class="technical-info">
  670.                           <ol class="list-group list-group-numbered">
  671.                               <li class="list-group-item">Wisuda Akbar hanya di ikuti 1 Santri dan 1 Wali Santri yang akan mengikuti prosesi di dalam Gedung GRHA BUNG KARNO</li>
  672.                               <li class="list-group-item">Santri dan wali santri datang bersamaan</li>
  673.                               <li class="list-group-item">PJ Lembaga ikut hadir sebagai bentuk kehormatan dan duduk di kursi tamu yang sudah disediakan</li>
  674.                               <li class="list-group-item">Saat masuk ke area gedung, santri akan di arahkan panitia untuk menempati posisi duduknya</li>
  675.                               <li class="list-group-item">Wali santri, santri, dan PJ Lembaga memakai pakaian warna putih/ senada</li>
  676.                               <li class="list-group-item">Kartu Dada Santri sebagai indentitas santri & sebagai undangan wali santri sekaligus untuk pengambilan fasilitas santri</li>
  677.                               <li class="list-group-item">Tempat Duduk Wali Santri di sebelah kanan santri (Santri pembatas antar walisantri)</li>
  678.                               <li class="list-group-item">Untuk mengurai kemacetan & kenyamanan bersama dimohon wali santri untuk menggunakan kendaraan roda dua</li>
  679.                               <li class="list-group-item">PJ Lembaga perwakilan 1 orang yang hadir & posisi tempat duduk di depan pintu utama</li>
  680.                               <li class="list-group-item">
  681.                                   <strong>Kedatangan Santri & Wali Santri:</strong>
  682.                                   <ul class="list-unstyled mt-2">
  683.                                       <li>🔹 Langsung menuju ke tempat pembagian fasilitas/tas, posisi di depan graha (berada di kanan/kiri)</li>
  684.                                       <li>🔹 Santri menunjukkan kartu dada ke panitia untuk pengambilan tas</li>
  685.                                       <li>🔹 Walisantri mendapatkan snack</li>
  686.                                       <li>🔹 Walisantri & Santri langsung masuk gedung melalui pintu utama</li>
  687.                                       <li>🔹 Walisantri & Santri langsung menempati area duduk paling depan (dibelakang tulisan area donatur)</li>
  688.                                   </ul>
  689.                               </li>
  690.                               <li class="list-group-item">Santri wajib cek in/konfirmasi kehadiran di www.klatenmenghafal.com</li>
  691.                               <li class="list-group-item">Fasilitas santri yang tidak hadir saat wisuda maka fasilitas dapat diambil di kantor GNB</li>
  692.                               <li class="list-group-item">Membawa Infaq Terbaik</li>
  693.                               <li class="list-group-item">Pintu keluar : Pintu Utama, Pintu Kanan/Kiri (dari pintu utama)</li>
  694.                           </ol>
  695.                          
  696.                           <div class="text-end mt-3">
  697.                               <p class="mb-0">Ketua Panitia</p>
  698.                               <p class="mb-0">Sewindu Klaten Menghafal</p>
  699.                               <p><strong>Darminto</strong></p>
  700.                           </div>
  701.                       </div>
  702.                   </div>
  703.               </div>
  704.  
  705.               <!-- Contact Info -->
  706.               <div class="alert alert-info">
  707.                   <h6 class="alert-heading">
  708.                       <i class="fas fa-info-circle me-2"></i>Informasi Kontak:
  709.                   </h6>
  710.                   <div class="d-flex flex-column gap-2 mt-2">
  711.                       <div>
  712.                           <strong>WhatsApp:</strong>
  713.                           <span class="ms-2">0856 0003 0005</span>
  714.                       </div>
  715.                   </div>
  716.               </div>
  717.           </div>
  718.           <div class="modal-footer">
  719.               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
  720.               <button type="button" class="btn btn-primary" onclick="window.print()">
  721.                   <i class="fas fa-print me-2"></i>Cetak Rundown
  722.               </button>
  723.           </div>
  724.       </div>
  725.   </div>
  726. </div><div class="modal fade" id="konfirmasiModal" tabindex="-1" aria-hidden="true">
  727.    <div class="modal-dialog">
  728.        <div class="modal-content" style="border-radius: 20px; border: 2px solid #673AB7;">
  729.            <div class="modal-header border-0">
  730.                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  731.            </div>
  732.            <div class="modal-body text-center p-4">
  733.                <img src="img/logo.png" alt="Logo" style="width: 80px;" class="mb-3">
  734.                <h4 class="mb-2" style="color: #333; font-weight: 600;">CEK IN WISUDA</h4>
  735.                <h6 class="text-muted mb-4">( KONFIRMASI KEHADIRAN SANTRI )</h6>
  736.  
  737.                <form id="formKonfirmasi" class="px-3">
  738.                    <!-- Input nomor induk -->
  739.                    <div class="mb-4">
  740.                        <label class="w-100 text-start mb-2">NOMER WISUDA</label>
  741.                        <input type="text"
  742.                               class="form-control"
  743.                               name="no_induk"
  744.                               id="no_induk"
  745.                               style="background: #0A617D; color: white; border: none; border-radius: 10px; height: 45px; font-size: 16px;"
  746.                               required>
  747.                    </div>
  748.  
  749.                    <!-- Input nama yang akan muncul otomatis -->
  750.                    <div class="mb-4">
  751.                        <label class="w-100 text-start mb-2">NAMA DEPAN</label>
  752.                        <input type="text"
  753.                               class="form-control"
  754.                               name="nama_santri"
  755.                               id="nama_santri"
  756.                               style="background: #0A617D; color: white; border: none; border-radius: 10px; height: 45px; font-size: 16px;"
  757.                               readonly>
  758.                    </div>
  759.  
  760.                    <!-- Login Button -->
  761.                    <div class="mt-4">
  762.                        <button type="submit"
  763.                                class="btn btn-warning w-100 py-2 rounded-pill"
  764.                                style="background-color: #FFA726; color: white; font-weight: 500; font-size: 16px;">
  765.                            LOGIN
  766.                        </button>
  767.                    </div>
  768.                </form>
  769.            </div>
  770.        </div>
  771.    </div>
  772. </div><div class="modal fade" id="merchandiseModal" tabindex="-1" aria-labelledby="merchandiseModalLabel" aria-hidden="true">
  773.    <div class="modal-dialog modal-lg">
  774.        <div class="modal-content">
  775.            <div class="modal-header bg-primary text-white">
  776.                <h5 class="modal-title" id="merchandiseModalLabel">
  777.                    <i class="fas fa-shopping-bag me-2"></i>Merchandise Eksklusif KM8
  778.                </h5>
  779.                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  780.            </div>
  781.            <div class="modal-body">
  782.                <!-- Informasi Pre-Order -->
  783.                <div class="alert alert-warning mb-4">
  784.                    <h6 class="alert-heading">
  785.                        <i class="fas fa-clock me-2"></i>Pre-Order Merchandise
  786.                    </h6>
  787.                    <p class="mb-0">Periode Pre-Order: 1-20 Desember 2024</p>
  788.                </div>
  789.  
  790.                <!-- Daftar Merchandise -->
  791.                <div class="row g-4">
  792.                    <!-- Item 1 -->
  793.                    <div class="col-md-6">
  794.                        <div class="card h-100">
  795.                            <div class="card-body">
  796.                                <div class="d-flex align-items-center mb-3">
  797.                                    <div class="card-icon me-3 bg-light p-3 rounded">
  798.                                        <i class="fas fa-tshirt text-primary"></i>
  799.                                    </div>
  800.                                    <h5 class="card-title mb-0">Kaos Ekslusif KM8</h5>
  801.                                </div>
  802.                                <ul class="list-unstyled mb-3">
  803.                                    <li><i class="fas fa-check text-success me-2"></i>Tersedia ukuran S, M, L, XL</li>
  804.                                    <li><i class="fas fa-check text-success me-2"></i>Bahan Cotton Combed 30s</li>
  805.                                    <li><i class="fas fa-check text-success me-2"></i>Design Exclusive</li>
  806.                                </ul>
  807.                                <div class="d-flex justify-content-between align-items-center">
  808.                                    <span class="fw-bold text-primary">Rp 120.000</span>
  809.                                    <a href="https://wa.me/628xxxxxxxxxx?text=Saya%20ingin%20memesan%20Kaos%20KM8" class="btn btn-sm btn-primary">
  810.                                        <i class="fab fa-whatsapp me-2"></i>Pesan
  811.                                    </a>
  812.                                </div>
  813.                            </div>
  814.                        </div>
  815.                    </div>
  816.  
  817.                    <!-- Item 2 -->
  818.                    <div class="col-md-6">
  819.                        <div class="card h-100">
  820.                            <div class="card-body">
  821.                                <div class="d-flex align-items-center mb-3">
  822.                                    <div class="card-icon me-3 bg-light p-3 rounded">
  823.                                        <i class="fas fa-mug-hot text-primary"></i>
  824.                                    </div>
  825.                                    <h5 class="card-title mb-0">Tumbler KM8</h5>
  826.                                </div>
  827.                                <ul class="list-unstyled mb-3">
  828.                                    <li><i class="fas fa-check text-success me-2"></i>Kapasitas 500ml</li>
  829.                                    <li><i class="fas fa-check text-success me-2"></i>Stainless Steel</li>
  830.                                    <li><i class="fas fa-check text-success me-2"></i>Free Custom Nama</li>
  831.                                </ul>
  832.                                <div class="d-flex justify-content-between align-items-center">
  833.                                    <span class="fw-bold text-primary">Rp 85.000</span>
  834.                                    <a href="https://wa.me/628xxxxxxxxxx?text=Saya%20ingin%20memesan%20Tumbler%20KM8" class="btn btn-sm btn-primary">
  835.                                        <i class="fab fa-whatsapp me-2"></i>Pesan
  836.                                    </a>
  837.                                </div>
  838.                            </div>
  839.                        </div>
  840.                    </div>
  841.  
  842.                    <!-- Item 3 -->
  843.                    <div class="col-md-6">
  844.                        <div class="card h-100">
  845.                            <div class="card-body">
  846.                                <div class="d-flex align-items-center mb-3">
  847.                                    <div class="card-icon me-3 bg-light p-3 rounded">
  848.                                        <i class="fas fa-book text-primary"></i>
  849.                                    </div>
  850.                                    <h5 class="card-title mb-0">Buku Kenangan</h5>
  851.                                </div>
  852.                                <ul class="list-unstyled mb-3">
  853.                                    <li><i class="fas fa-check text-success me-2"></i>Full Color</li>
  854.                                    <li><i class="fas fa-check text-success me-2"></i>Art Paper</li>
  855.                                    <li><i class="fas fa-check text-success me-2"></i>Hard Cover</li>
  856.                                </ul>
  857.                                <div class="d-flex justify-content-between align-items-center">
  858.                                    <span class="fw-bold text-primary">Rp 150.000</span>
  859.                                    <a href="https://wa.me/628xxxxxxxxxx?text=Saya%20ingin%20memesan%20Buku%20Kenangan%20KM8" class="btn btn-sm btn-primary">
  860.                                        <i class="fab fa-whatsapp me-2"></i>Pesan
  861.                                    </a>
  862.                                </div>
  863.                            </div>
  864.                        </div>
  865.                    </div>
  866.  
  867.                    <!-- Item 4 -->
  868.                    <div class="col-md-6">
  869.                        <div class="card h-100">
  870.                            <div class="card-body">
  871.                                <div class="d-flex align-items-center mb-3">
  872.                                    <div class="card-icon me-3 bg-light p-3 rounded">
  873.                                        <i class="fas fa-box text-primary"></i>
  874.                                    </div>
  875.                                    <h5 class="card-title mb-0">Paket Komplit</h5>
  876.                                </div>
  877.                                <ul class="list-unstyled mb-3">
  878.                                    <li><i class="fas fa-check text-success me-2"></i>Kaos + Tumbler + Buku</li>
  879.                                    <li><i class="fas fa-check text-success me-2"></i>Free Goodie Bag</li>
  880.                                    <li><i class="fas fa-check text-success me-2"></i>Hemat 15%</li>
  881.                                </ul>
  882.                                <div class="d-flex justify-content-between align-items-center">
  883.                                    <span class="fw-bold text-primary">Rp 299.000</span>
  884.                                    <a href="https://wa.me/628xxxxxxxxxx?text=Saya%20ingin%20memesan%20Paket%20Komplit%20KM8" class="btn btn-sm btn-primary">
  885.                                        <i class="fab fa-whatsapp me-2"></i>Pesan
  886.                                    </a>
  887.                                </div>
  888.                            </div>
  889.                        </div>
  890.                    </div>
  891.                </div>
  892.  
  893.                <!-- Informasi Pemesanan -->
  894.                <div class="alert alert-info mt-4">
  895.                    <h6 class="alert-heading mb-2">
  896.                        <i class="fas fa-info-circle me-2"></i>Informasi Pemesanan
  897.                    </h6>
  898.                    <ul class="mb-0 small">
  899.                        <li>Pembayaran via transfer bank atau e-wallet</li>
  900.                        <li>Pengambilan merchandise pada hari H acara</li>
  901.                        <li>Merchandise terbatas, first come first serve</li>
  902.                        <li>Untuk pemesanan hubungi contact person via WhatsApp</li>
  903.                    </ul>
  904.                </div>
  905.            </div>
  906.            <div class="modal-footer">
  907.                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
  908.                <a href="https://wa.me/628xxxxxxxxxx" class="btn btn-success">
  909.                    <i class="fab fa-whatsapp me-2"></i>Hubungi Admin
  910.                </a>
  911.            </div>
  912.        </div>
  913.    </div>
  914. </div><div class="modal fade" id="donasiModal" tabindex="-1" aria-labelledby="donasiModalLabel" aria-hidden="true">
  915.    <div class="modal-dialog modal-dialog-centered">
  916.        <div class="modal-content">
  917.            <div class="modal-header bg-primary text-white">
  918.                <h5 class="modal-title" id="donasiModalLabel">
  919.                    <i class="fas fa-heart me-2"></i>Donasi Program Tahfidz
  920.                </h5>
  921.                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  922.            </div>
  923.            <div class="modal-body">
  924.                <div class="text-center mb-4">
  925.                    <div class="mb-3">
  926.                        <img src="img/logo.png" alt="Logo" style="width: 80px;">
  927.                    </div>
  928.                    <h5>Bank Syariah Indonesia (BSI)</h5>
  929.                    <div class="d-flex align-items-center justify-content-center gap-2">
  930.                        <span class="fs-5 fw-bold">919 1919 235</span>
  931.                        <button class="btn btn-sm btn-outline-primary" onclick="copyToClipboard('919 1919 235')">
  932.                            <i class="fas fa-copy"></i>
  933.                        </button>
  934.                    </div>
  935.                    <p class="text-muted">a.n GURU NGAJI BERDAYA</p>
  936.                </div>
  937.                
  938.                <div class="alert alert-info">
  939.                    <h6 class="alert-heading">
  940.                        <i class="fas fa-info-circle me-2"></i>Konfirmasi Donasi:
  941.                    </h6>
  942.                    <p class="mb-0">Silakan konfirmasi donasi Anda melalui WhatsApp ke nomor <strong>0856 0003 0005</strong></p>
  943.                </div>
  944.            </div>
  945.           <div class="modal-footer">
  946.    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
  947.    <a href="https://api.whatsapp.com/send?phone=&text="
  948.   class="btn btn-success"
  949.   target="_blank">
  950.    <i class="fab fa-whatsapp me-2"></i>Konfirmasi Donasi
  951. </a>
  952. </div>
  953.        </div>
  954.    </div>
  955. </div><div class="modal fade" id="formGuruModal" tabindex="-1" aria-labelledby="formGuruModalLabel" aria-hidden="true">
  956.    <div class="modal-dialog modal-xl modal-dialog-scrollable">
  957.        <div class="modal-content">
  958.            <div class="modal-header bg-success text-white">
  959.                <h5 class="modal-title" id="formGuruModalLabel">
  960.                    <i class="fas fa-user-plus me-2"></i>Form Pendataan Guru Ngaji GNB
  961.                </h5>
  962.                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  963.            </div>
  964.            <div class="modal-body">
  965.                <form id="formGuru" action="proses_pendataan.php" method="POST">
  966.                    <!-- Data Diri -->
  967.                    <div class="row mb-4">
  968.                        <div class="col-12">
  969.                            <h5 class="border-bottom pb-2">Data Diri</h5>
  970.                        </div>
  971.                        
  972.                        <div class="col-md-6 mb-3">
  973.                            <label class="form-label required-field">Nama Lengkap</label>
  974.                            <input type="text" class="form-control" name="nama_lengkap" required>
  975.                        </div>
  976.  
  977.                        <div class="col-md-6 mb-3">
  978.                            <label class="form-label required-field">Tempat Lahir</label>
  979.                            <input type="text" class="form-control" name="tempat_lahir" required>
  980.                        </div>
  981.  
  982.                        <div class="col-md-6 mb-3">
  983.                            <label class="form-label required-field">Jenis Kelamin</label>
  984.                            <div>
  985.                                <div class="form-check form-check-inline">
  986.                                    <input class="form-check-input" type="radio" name="jenis_kelamin" value="Laki-laki" required>
  987.                                    <label class="form-check-label">Laki-laki</label>
  988.                                </div>
  989.                                <div class="form-check form-check-inline">
  990.                                    <input class="form-check-input" type="radio" name="jenis_kelamin" value="Perempuan" required>
  991.                                    <label class="form-check-label">Perempuan</label>
  992.                                </div>
  993.                            </div>
  994.                        </div>
  995.  
  996.                        <div class="col-md-6 mb-3">
  997.                            <label class="form-label required-field">Tanggal Lahir</label>
  998.                            <input type="date" class="form-control" name="tanggal_lahir" required>
  999.                        </div>
  1000.  
  1001.                        <div class="col-12 mb-3">
  1002.                            <label class="form-label required-field">Alamat Lengkap</label>
  1003.                            <textarea class="form-control" name="alamat_lengkap" rows="3" required></textarea>
  1004.                        </div>
  1005.  
  1006.                        <div class="col-md-6 mb-3">
  1007.                            <label class="form-label required-field">Status Pernikahan</label>
  1008.                            <select class="form-select" name="status_pernikahan" required>
  1009.                                <option value="">Pilih status</option>
  1010.                                <option value="Belum">Belum</option>
  1011.                                <option value="Menikah">Menikah</option>
  1012.                                <option value="Janda">Janda</option>
  1013.                                <option value="Duda">Duda</option>
  1014.                            </select>
  1015.                        </div>
  1016.  
  1017.                        <div class="col-md-6 mb-3">
  1018.    <label class="form-label required-field">Kecamatan</label>
  1019.    <select class="form-select" name="kecamatan" id="selectKecamatan" required>
  1020.        <option value="">Pilih Kecamatan</option>
  1021.        <optgroup label="Kabupaten Klaten">
  1022.            <option value="Bayat">Bayat</option>
  1023.            <option value="Cawas">Cawas</option>
  1024.            <option value="Ceper">Ceper</option>
  1025.            <option value="Delanggu">Delanggu</option>
  1026.            <option value="Gantiwarno">Gantiwarno</option>
  1027.            <option value="Jatinom">Jatinom</option>
  1028.            <option value="Jogonalan">Jogonalan</option>
  1029.            <option value="Juwiring">Juwiring</option>
  1030.            <option value="Kalikotes">Kalikotes</option>
  1031.            <option value="Karanganom">Karanganom</option>
  1032.            <option value="Karangdowo">Karangdowo</option>
  1033.            <option value="Karangnongko">Karangnongko</option>
  1034.            <option value="Kebonarum">Kebonarum</option>
  1035.            <option value="Kemalang">Kemalang</option>
  1036.            <option value="Klaten Selatan">Klaten Selatan</option>
  1037.            <option value="Klaten Tengah">Klaten Tengah</option>
  1038.            <option value="Klaten Utara">Klaten Utara</option>
  1039.            <option value="Manisrenggo">Manisrenggo</option>
  1040.            <option value="Ngawen">Ngawen</option>
  1041.            <option value="Pedan">Pedan</option>
  1042.            <option value="Polanharjo">Polanharjo</option>
  1043.            <option value="Prambanan">Prambanan</option>
  1044.            <option value="Trucuk">Trucuk</option>
  1045.            <option value="Tulung">Tulung</option>
  1046.            <option value="Wedi">Wedi</option>
  1047.            <option value="Wonosari">Wonosari</option>
  1048.        </optgroup>
  1049.        <optgroup label="Luar Klaten">
  1050.            <option value="Lainnya">Lainnya (Luar Klaten)</option>
  1051.        </optgroup>
  1052.    </select>
  1053. </div>
  1054.  
  1055. <!-- Input tambahan untuk kecamatan lainnya -->
  1056. <div class="col-md-6 mb-3 d-none" id="kecamatanLainnya">
  1057.    <label class="form-label required-field">Nama Kecamatan</label>
  1058.    <input type="text" class="form-control" name="kecamatan_lainnya" placeholder="Masukkan nama kecamatan">
  1059. </div>
  1060.  
  1061.                        <div class="col-md-6 mb-3">
  1062.                            <label class="form-label required-field">No HP (WhatsApp)</label>
  1063.                            <input type="tel" class="form-control" name="no_hp" required
  1064.                                   pattern="08[0-9]{9,11}" placeholder="Contoh: 081234567890">
  1065.                        </div>
  1066.  
  1067.                        <div class="col-md-6 mb-3">
  1068.                            <label class="form-label required-field">NIK</label>
  1069.                            <input type="text" class="form-control" name="nik" required
  1070.                                   pattern="[0-9]{16}" placeholder="16 digit NIK">
  1071.                        </div>
  1072.                    </div>
  1073.  
  1074.                    <!-- Data Divisi -->
  1075.                    <div class="row mb-4">
  1076.                        <div class="col-12">
  1077.                            <h5 class="border-bottom pb-2">Divisi dan Keaktifan</h5>
  1078.                        </div>
  1079.  
  1080.                        <div class="col-12 mb-3">
  1081.                            <label class="form-label required-field">Divisi (Boleh pilih lebih dari satu)</label>
  1082.                            <div class="row">
  1083.                                                                <div class="col-md-6">
  1084.                                    <div class="form-check">
  1085.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Go Ngaji">
  1086.                                        <label class="form-check-label">Go Ngaji</label>
  1087.                                    </div>
  1088.                                </div>
  1089.                                                                <div class="col-md-6">
  1090.                                    <div class="form-check">
  1091.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Sekolah Guru Ngaji">
  1092.                                        <label class="form-check-label">Sekolah Guru Ngaji</label>
  1093.                                    </div>
  1094.                                </div>
  1095.                                                                <div class="col-md-6">
  1096.                                    <div class="form-check">
  1097.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Tim Kantor">
  1098.                                        <label class="form-check-label">Tim Kantor</label>
  1099.                                    </div>
  1100.                                </div>
  1101.                                                                <div class="col-md-6">
  1102.                                    <div class="form-check">
  1103.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Relawan Kleten Menghafal">
  1104.                                        <label class="form-check-label">Relawan Kleten Menghafal</label>
  1105.                                    </div>
  1106.                                </div>
  1107.                                                                <div class="col-md-6">
  1108.                                    <div class="form-check">
  1109.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Guru RQ El-Quds">
  1110.                                        <label class="form-check-label">Guru RQ El-Quds</label>
  1111.                                    </div>
  1112.                                </div>
  1113.                                                                <div class="col-md-6">
  1114.                                    <div class="form-check">
  1115.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Relawan Aksi GNB">
  1116.                                        <label class="form-check-label">Relawan Aksi GNB</label>
  1117.                                    </div>
  1118.                                </div>
  1119.                                                                <div class="col-md-6">
  1120.                                    <div class="form-check">
  1121.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Guru Ngaji Berkisah">
  1122.                                        <label class="form-check-label">Guru Ngaji Berkisah</label>
  1123.                                    </div>
  1124.                                </div>
  1125.                                                                <div class="col-md-6">
  1126.                                    <div class="form-check">
  1127.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Relawan Ramadhan Berbagi">
  1128.                                        <label class="form-check-label">Relawan Ramadhan Berbagi</label>
  1129.                                    </div>
  1130.                                </div>
  1131.                                                                <div class="col-md-6">
  1132.                                    <div class="form-check">
  1133.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Relawan umum">
  1134.                                        <label class="form-check-label">Relawan umum</label>
  1135.                                    </div>
  1136.                                </div>
  1137.                                                                <div class="col-md-6">
  1138.                                    <div class="form-check">
  1139.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Duta GNB">
  1140.                                        <label class="form-check-label">Duta GNB</label>
  1141.                                    </div>
  1142.                                </div>
  1143.                                                                <div class="col-md-6">
  1144.                                    <div class="form-check">
  1145.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Duta Fundraising">
  1146.                                        <label class="form-check-label">Duta Fundraising</label>
  1147.                                    </div>
  1148.                                </div>
  1149.                                                                <div class="col-md-6">
  1150.                                    <div class="form-check">
  1151.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Guru Ngaji TPA Binaan">
  1152.                                        <label class="form-check-label">Guru Ngaji TPA Binaan</label>
  1153.                                    </div>
  1154.                                </div>
  1155.                                                                <div class="col-md-6">
  1156.                                    <div class="form-check">
  1157.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Penguji Klaten Menghafal">
  1158.                                        <label class="form-check-label">Penguji Klaten Menghafal</label>
  1159.                                    </div>
  1160.                                </div>
  1161.                                                                <div class="col-md-6">
  1162.                                    <div class="form-check">
  1163.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Dewan Penguji / Guru Kehormatan">
  1164.                                        <label class="form-check-label">Dewan Penguji / Guru Kehormatan</label>
  1165.                                    </div>
  1166.                                </div>
  1167.                                                                <div class="col-md-6">
  1168.                                    <div class="form-check">
  1169.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Garda GNB">
  1170.                                        <label class="form-check-label">Garda GNB</label>
  1171.                                    </div>
  1172.                                </div>
  1173.                                                                <div class="col-md-6">
  1174.                                    <div class="form-check">
  1175.                                        <input class="form-check-input" type="checkbox" name="divisi[]" value="Guru Pembinaan Anak Yatim">
  1176.                                        <label class="form-check-label">Guru Pembinaan Anak Yatim</label>
  1177.                                    </div>
  1178.                                </div>
  1179.                                                            </div>
  1180.                        </div>
  1181.                        <div class="col-md-6 mb-3">
  1182.                            <label class="form-label required-field">Lama Mengabdi di GNB</label>
  1183.                            <select class="form-select" name="lama_mengabdi" required>
  1184.                                <option value="">Pilih lama mengabdi</option>
  1185.                                                                <option value="1 tahun">1 tahun</option>
  1186.                                                                <option value="2 tahun">2 tahun</option>
  1187.                                                                <option value="3 tahun">3 tahun</option>
  1188.                                                                <option value="4 tahun">4 tahun</option>
  1189.                                                                <option value="5 tahun">5 tahun</option>
  1190.                                                                <option value="6 tahun">6 tahun</option>
  1191.                                                                <option value="7 tahun">7 tahun</option>
  1192.                                                                <option value="8 tahun">8 tahun</option>
  1193.                                                                <option value="9 tahun">9 tahun</option>
  1194.                                                            </select>
  1195.                        </div>
  1196.  
  1197.                        <div class="col-md-6 mb-3">
  1198.                            <label class="form-label required-field">Jalur Bergabung</label>
  1199.                            <input type="text" class="form-control" name="jalur_bergabung" required>
  1200.                        </div>
  1201.  
  1202.                        <div class="col-12 mb-3">
  1203.                            <label class="form-label required-field">Motivasi bergabung dengan GNB</label>
  1204.                            <textarea class="form-control" name="motivasi" rows="3" required></textarea>
  1205.                        </div>
  1206.  
  1207.                        <div class="col-12 mb-3">
  1208.                            <label class="form-label required-field">Seberapa Aktif Anda di GNB?</label>
  1209.                            <select class="form-select" name="tingkat_keaktifan" required>
  1210.                                <option value="">Pilih tingkat keaktifan</option>
  1211.                                <option value="Guru Go Ngaji saja">Guru Go Ngaji saja</option>
  1212.                                <option value="Aktif Program Harian">Aktif Program Harian</option>
  1213.                                <option value="Kepanitiaan Klaten Menghafal">Kepanitiaan Klaten Menghafal</option>
  1214.                                <option value="Garda GNB">Garda GNB</option>
  1215.                                <option value="Lainnya">Lainnya</option>
  1216.                            </select>
  1217.                            <div id="keaktifanLainnya" class="mt-2 d-none">
  1218.                                <input type="text" class="form-control" name="tingkat_keaktifan_lainnya"
  1219.                                       placeholder="Sebutkan tingkat keaktifan Anda">
  1220.                            </div>
  1221.                        </div>
  1222.  
  1223.                        <div class="col-12 mb-3">
  1224.                            <label class="form-label required-field">Status Haji/Umroh</label>
  1225.                            <select class="form-select" name="status_haji_umroh" required>
  1226.                                <option value="">Pilih status</option>
  1227.                                <option value="Pernah Umroh">Pernah Umroh</option>
  1228.                                <option value="Pernah Haji">Pernah Haji</option>
  1229.                                <option value="Pernah Umroh dan Haji">Pernah Umroh dan Haji</option>
  1230.                                <option value="Belum Pernah keduanya">Belum Pernah keduanya</option>
  1231.                            </select>
  1232.                        </div>
  1233.                    </div>
  1234.  
  1235.                    <!-- Komitmen -->
  1236.                    <div class="row mb-4">
  1237.                        <div class="col-12">
  1238.                            <div class="alert alert-info">
  1239.                                <div class="form-check">
  1240.                                    <input class="form-check-input" type="checkbox" name="komitmen" required>
  1241.                                    <label class="form-check-label required-field">
  1242.                                        Saya berkomitmen mengabdi dengan ikhlas dan mengikuti aturan dan regulasi yang dibuat oleh Yayasan Guru Ngaji Berdaya
  1243.                                    </label>
  1244.                                </div>
  1245.                            </div>
  1246.                        </div>
  1247.                    </div>
  1248.                </form>
  1249.            </div>
  1250.            <div class="modal-footer">
  1251.                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
  1252.                <button type="submit" form="formGuru" class="btn btn-success">
  1253.                    <i class="fas fa-paper-plane me-2"></i>Kirim Data
  1254.                </button>
  1255.            </div>
  1256.        </div>
  1257.    </div>
  1258. </div>    
  1259. <!--konfirmasi kehadiran-->
  1260. <!-- Modal Konfirmasi Kehadiran -->
  1261. <div class="modal fade" id="konfirmasiKehadiranModal" tabindex="-1" aria-hidden="true">
  1262.    <div class="modal-dialog">
  1263.        <div class="modal-content" style="border-radius: 25px; border: 2px solid #673AB7;">
  1264.            <div class="modal-header" style="border:none;">
  1265.                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1266.            </div>
  1267.            <div class="modal-body text-center">
  1268.                <img src="img/logo.png" alt="Logo" style="width: 80px;" class="mb-4">
  1269.                <h4 class="mb-4" style="color: #333;">CEK IN WISUDA</h4>
  1270.                <h6 class="text-muted mb-4">(KONFIRMASI KEHADIRAN SANTRI)</h6>
  1271.  
  1272.                <form id="formKonfirmasiKehadiran" action="proses_konfirmasiwisuda.php" method="POST">
  1273.                    
  1274.                        <label class="w-100 text-start mb-2">NOMER KARTU WISUDA</label>
  1275.                        <input class="form-control disabled text-start"
  1276.                             style="background: #0A617D; color: white; border-radius: 10px;" type="disable" id="konfirmasi_no_induk" name="no_induk">
  1277.                    
  1278.                    <div class="mb-4">
  1279.                        <label class="w-100 text-start mb-2">NAMA SANTRI:</label>
  1280.                        <div class="form-control disabled text-start"
  1281.                             style="background: #0A617D; color: white; border-radius: 10px;"
  1282.                             id="konfirmasi_nama"></div>
  1283.                    </div>
  1284.  
  1285.                    <div class="mb-4">
  1286.                        <label class="w-100 text-start mb-2">ASAL LEMBAGA</label>
  1287.                        <div class="form-control disabled text-start"
  1288.                             style="background: #0A617D; color: white; border-radius: 10px;"
  1289.                             id="konfirmasi_lembaga"></div>
  1290.                    </div>
  1291.  
  1292.                    <!--<div class="mb-4">-->
  1293.                    <!--    <div class="form-control disabled text-start" -->
  1294.                    <!--         style="background: #0A617D; color: white; border-radius: 10px;" -->
  1295.                    <!--         id="konfirmasi_no_induk"></div>-->
  1296.                    <!--</div>-->
  1297.  
  1298.                    <div class="mb-4">
  1299.                        <label class="w-100 text-start mb-2">SHIFT</label>
  1300.                        <div class="form-control disabled text-start"
  1301.                             style="background: #0A617D; color: white; border-radius: 10px;"
  1302.                             id="konfirmasi_shift"></div>
  1303.                    </div>
  1304.  
  1305.                    <div class="mb-4">
  1306.                        <label class="w-100 text-start mb-2">KONFIRMASI KEHADIRAN</label>
  1307.                        <div class="d-flex gap-3 justify-content-center">
  1308.                            <button type="submit" name="kehadiran" value="hadir"
  1309.                                    class="btn btn-warning rounded-pill px-4 py-2 w-50">
  1310.                                HADIR
  1311.                            </button>
  1312.                            <button type="submit" name="kehadiran" value="tidak_hadir"
  1313.                                    class="btn btn-danger rounded-pill px-4 py-2 w-50">
  1314.                                TIDAK HADIR
  1315.                            </button>
  1316.                        </div>
  1317.                    </div>
  1318.                </form>
  1319.            </div>
  1320.        </div>
  1321.    </div>
  1322. </div>
  1323. <!--konfirmasi kehadiran-->
  1324.  
  1325. <!--modal pusat informasi-->
  1326. <!-- Modal Informasi -->
  1327. <div class="modal fade" id="informasiModal" tabindex="-1" aria-hidden="true">
  1328.    <div class="modal-dialog">
  1329.        <div class="modal-content" style="border-radius: 25px; border: 2px solid #0A617D;">
  1330.            <div class="modal-header border-0">
  1331.                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1332.            </div>
  1333.            <div class="modal-body text-center p-4">
  1334.                <img src="img/logo.png" alt="Logo Klaten Menghafal" class="mb-3" style="width: 100px;">
  1335.                
  1336.                <!-- Arabic Text -->
  1337.                <div class="arab-text mb-3" style="font-size: 1.2rem;">
  1338.                    خَيْرُكُمْ مَنْ تَعَلَّمَ الْقُرْآنَ وَعَلَّمَهُ
  1339.                </div>
  1340.                
  1341.                <!-- Title -->
  1342.                <h4 class="text-primary mb-4">PUSAT INFORMASI KLATEN MENGHAFAL</h4>
  1343.                
  1344.                <!-- Buttons Grid -->
  1345.                <div class="d-grid gap-3">
  1346.                    <a href="#" class="btn btn-primary py-2 text-white">
  1347.                        HYMNE KLATEN MENGHAFAL
  1348.                    </a>
  1349.                    <a href="#" class="btn btn-primary py-2 text-white">
  1350.                        INFO WISUDA
  1351.                    </a>
  1352.                    <a href="#" class="btn btn-primary py-2 text-white">
  1353.                        PEMBELIAN MARCENDIS
  1354.                    </a>
  1355.                    <a href="#" class="btn btn-primary py-2 text-white">
  1356.                        CARI LEMBAGA
  1357.                    </a>
  1358.                </div>
  1359.                
  1360.                <!-- Bottom Button -->
  1361.                <div class="mt-4">
  1362.                    <a href="#" class="btn py-2 text-white w-100" style="background-color: #F4A020;">
  1363.                        CEK IN SANTRI WISUDA AKBAR
  1364.                    </a>
  1365.                </div>
  1366.            </div>
  1367.        </div>
  1368.    </div>
  1369. </div>
  1370. <!--modal pusat informasi-->
  1371. <!-- Sebelum modal -->
  1372. <!-- Debug: array(8) {
  1373.  ["id"]=>
  1374.  string(1) "1"
  1375.  ["judul"]=>
  1376.  string(22) "Hymne Klaten Menghafal"
  1377.  ["link"]=>
  1378.  string(43) "https://www.youtube.com/watch?v=eb3lZ-Mms5w"
  1379.  ["deskripsi"]=>
  1380.  string(954) "Hymne Klaten Manghafal
  1381. Pencipta: Aan Try Yulianto
  1382. 💖💖💖💖💖💖💖💖💖💖💖💖
  1383. 🎵🎵🎵🎤🎤🎤🎤🎤🎤🎵🎵🎵
  1384. Klaten kan bersinar dg Al-Quran
  1385. Barokah Al-Quran kami harapkan
  1386. Kelak di dalam sepi kan datang tuk temani
  1387. Syafaatmu wahai Al-Quran
  1388.  
  1389. *) Ya Allah ya Rabbi ridloi kami
  1390. Atas langkah dakwah yang suci ini
  1391. Suatu saat nanti,
  1392. Ini kan jadi bukti
  1393. Bukti cintaku pada-Mu ya Rabbi
  1394.  
  1395. Aku cintaa…. Padamuu….
  1396.  
  1397. Reff
  1398. Klaten kan bersinar dengan cahaya Quran
  1399. Penuh harapan
  1400. raih impian
  1401.  
  1402. Kita kan bersama
  1403. Maknai hidup ini
  1404. Dengan amalkan semua yang di dalam Al-Quran (2X)
  1405.  
  1406. *)
  1407. Ya Allah ya rabbi ridhoi kami
  1408. Atas langkah dakwah yang suci ini
  1409. Suatu saat nanti
  1410. ini kan jadi bukti
  1411. bukti cintaku pada-Mu ya Rabbi
  1412.  
  1413. Aku cintaa... padamuu…
  1414.  
  1415. Klaten kan bersinar
  1416. Dengan cahaya quran
  1417. Pernuh harapan
  1418. Raih impian
  1419.  
  1420. Kita kan bersama
  1421. Maknai hidup ini
  1422. Dengan amalkan semua yang di dalam Al-Quran (4x)"
  1423.  ["kategori"]=>
  1424.  string(11) "dokumentasi"
  1425.  ["status"]=>
  1426.  string(5) "aktif"
  1427.  ["created_at"]=>
  1428.  string(19) "2024-12-21 18:41:47"
  1429.  ["updated_at"]=>
  1430.  string(19) "2024-12-21 18:41:47"
  1431. }
  1432. --><!-- Modal Hymne Klaten Menghafal -->
  1433. <div class="modal fade" id="hymneklatenmenghafaltModal" tabindex="-1" aria-hidden="true">
  1434.    <div class="modal-dialog modal-lg">
  1435.        <div class="modal-content" style="border-radius: 25px; border: 2px solid #0A617D;">
  1436.            <div class="modal-header border-0">
  1437.                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1438.            </div>
  1439.            <div class="modal-body p-4">
  1440.                <!-- Bagian Judul -->
  1441.                <div class="text-center mb-4">
  1442.                    <img src="img/logo.png" alt="Logo" style="width: 80px;" class="mb-3">
  1443.                    <h4 class="text-primary fw-bold">HYMNE KLATEN MENGHAFAL</h4>
  1444.                    <p class="text-muted">Pencipta: Aan Try Yulianto</p>
  1445.                </div>
  1446.  
  1447.                <!-- Video YouTube -->
  1448.                <div class="ratio ratio-16x9 mb-4">
  1449.                   <iframe
  1450.                src="https://www.youtube.com/embed/eb3lZ-Mms5w?autoplay=1&mute=1"
  1451.                title="Hymne Klaten Menghafal"
  1452.                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  1453.                allowfullscreen>
  1454.            </iframe>                </div>
  1455.  
  1456.                <!-- Bagian Lirik -->
  1457.                <div class="lyrics-container p-4" style="background: #f8f9fa; border-radius: 15px;">
  1458.                    <h5 class="text-center mb-4">Lirik Lagu</h5>
  1459.                    
  1460.                    <div class="lyrics text-center">
  1461.                        <p>Klaten kan bersinar dg Al-Quran<br>
  1462.                        Barokah Al-Quran kami harapkan<br>
  1463.                        Kelak di dalam sepi kan datang tuk temani<br>
  1464.                        Syafaatmu wahai Al-Quran</p>
  1465.  
  1466.                        <p><strong>*) Ya Allah ya Rabbi ridloi kami<br>
  1467.                        Atas langkah dakwah yang suci ini<br>
  1468.                        Suatu saat nanti, Ini kan jadi bukti<br>
  1469.                        Bukti cintaku pada-Mu ya Rabbi<br>
  1470.                        Aku cintaa…. Padamuu….</strong></p>
  1471.  
  1472.                        <p><strong>Reff:</strong><br>
  1473.                        Klaten kan bersinar dengan cahaya Quran<br>
  1474.                        Penuh harapan raih impian<br>
  1475.                        Kita kan bersama Maknai hidup ini<br>
  1476.                        Dengan amalkan semua yang di dalam Al-Quran (2X)</p>
  1477.  
  1478.                        <p>*) Ya Allah ya rabbi ridhoi kami<br>
  1479.                        Atas langkah dakwah yang suci ini<br>
  1480.                        Suatu saat nanti ini kan jadi bukti<br>
  1481.                        bukti cintaku pada-Mu ya Rabbi<br>
  1482.                        Aku cintaa... padamuu…</p>
  1483.  
  1484.                        <p>Klaten kan bersinar<br>
  1485.                        Dengan cahaya quran<br>
  1486.                        Pernuh harapan<br>
  1487.                        Raih impian<br>
  1488.                        Kita kan bersama<br>
  1489.                        Maknai hidup ini<br>
  1490.                        Dengan amalkan semua yang di dalam Al-Quran (4x)</p>
  1491.                    </div>
  1492.                </div>
  1493.            </div>
  1494.        </div>
  1495.    </div>
  1496. </div>
  1497. <!--hymne klaten menghafal-->
  1498.    <!-- Scripts -->
  1499.    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
  1500.    <script src="assets/js/main.js"></script>
  1501.    <script>
  1502. document.getElementById('no_induk').addEventListener('change', function() {
  1503.    const noInduk = this.value;
  1504.    if (noInduk) {
  1505.        fetch(`get_santri_datawisuda.php?no_induk=${noInduk}`)
  1506.            .then(response => response.json())
  1507.            .then(data => {
  1508.                if (data.success) {
  1509.                    // Ambil hanya nama depan
  1510.                    const namaDepan = data.nama_santri.split(' ')[0];
  1511.                    document.getElementById('nama_santri').value = namaDepan;
  1512.                } else {
  1513.                    alert('Data santri tidak ditemukan!');
  1514.                    document.getElementById('nama_santri').value = '';
  1515.                }
  1516.            })
  1517.            .catch(error => {
  1518.                console.error('Error:', error);
  1519.                alert('Terjadi kesalahan saat mengambil data santri');
  1520.            });
  1521.    }
  1522. });
  1523. </script>
  1524. <script>
  1525.   // Modifikasi script login
  1526. document.getElementById('formKonfirmasi').addEventListener('submit', function(e) {
  1527.    e.preventDefault();
  1528.    const noInduk = document.getElementById('no_induk').value;
  1529.    
  1530.    // Fetch data santri
  1531.    fetch(`get_santri_datahadirwisuda.php?no_induk=${noInduk}`)
  1532.        .then(response => response.json())
  1533.        .then(data => {
  1534.            if (data.success) {
  1535.                // Sembunyikan modal login
  1536.                bootstrap.Modal.getInstance(document.getElementById('konfirmasiModal')).hide();
  1537.                // Tampilkan modal konfirmasi dengan data
  1538.                // Perhatikan di sini, kita langsung menggunakan data karena data santri ada di data.data
  1539.                showKonfirmasiKehadiran(data.data);
  1540.            } else {
  1541.                alert('Data santri tidak ditemukan!');
  1542.            }
  1543.        })
  1544.        .catch(error => {
  1545.            console.error('Error:', error);
  1546.            alert('Terjadi kesalahan');
  1547.        });
  1548. });
  1549.  
  1550. // Fungsi untuk menampilkan modal konfirmasi
  1551. function showKonfirmasiKehadiran(santri) {
  1552.    console.log('Data santri:', santri); // Untuk debugging
  1553.  
  1554.    // Isi data ke form konfirmasi
  1555.    document.getElementById('konfirmasi_no_induk').value = santri.no_induk;
  1556.    document.getElementById('konfirmasi_nama').textContent = santri.nama_santri;
  1557.    document.getElementById('konfirmasi_lembaga').textContent = santri.asal_lembaga;
  1558.    
  1559.    document.getElementById('konfirmasi_shift').textContent = santri.shift;
  1560.  
  1561.    // Tampilkan modal konfirmasi
  1562.    const modalKehadiran = new bootstrap.Modal(document.getElementById('konfirmasiKehadiranModal'));
  1563.    modalKehadiran.show();
  1564. }
  1565. </script>
  1566. </body>
  1567. </html>

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda