PHP LAB FULL

📁 File Manager

📍 / / home / u449181296 / domains / birulogi.smakpbaleendah.sch.id / public_html / lms / tukang-ngatur / assets / img / qr-logos

/home/u449181296/domains/birulogi.smakpbaleendah.sch.id/public_html/lms/tukang-ngatur/assets/img/qr-logos

Name	Size	Date	CHMOD	Action
— FILE —
logo_1773801405.php	6.73 KB	2026-03-18 02:36	644 (rw-r--r--)	Edit \| Rename \| Preview \| Del

Edit

import './bootstrap';
import $ from 'jquery';
window.$ = window.jQuery = $;

// --- GANTI IMPORT ALPINE KE VERSI CSP ---
// Ini solusi supaya browser tidak memblokir fungsi 'eval'

import Alpine from '@alpinejs/csp'; 
import collapse from '@alpinejs/collapse';

import Swal from 'sweetalert2';
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
import Croppie from 'croppie';
import Chart from 'chart.js/auto';

// --- REGISTRASI GLOBAL ---
window.Croppie = Croppie;
window.Alpine = Alpine;
window.Swal = Swal;
window.html2canvas = html2canvas;
window.jsPDF = jsPDF;
window.Chart = Chart;
window.dataStore = {};

// --- INIT LIBRARIES ---
Alpine.plugin(collapse);

// Registrasi data Alpine dulu
Alpine.data('menuChat', () => ({
    openMenu: false,
    toggle() { this.openMenu = !this.openMenu },
    close() { this.openMenu = false },
    changeTheme() {
        window.ubahMode(); // Fungsi toggle dark mode asli Anda
        // Tidak perlu close() agar user bisa lihat teks berubah jika diinginkan
        // Tapi jika ingin langsung tutup, biarkan this.close() ada
    },
    clear() {
        window.bersihkanChat();
        this.close();
    }
}));

Alpine.start();

// --- THEME ENGINE (Anti Silau) ---
const applyTheme = () => {
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
};
applyTheme();

// Cari fungsi window.ubahMode dan pastikan isinya seperti ini
window.ubahMode = () => {
    const html = document.documentElement;
    const isDark = html.classList.toggle('dark');
    localStorage.theme = isDark ? 'dark' : 'light';
    
    // Memberikan efek getar jika diakses via smartphone
    if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(30);
};

// --- UI GLOBAL ---
window.toggleMobileSidebar = () => {
    const sidebar = document.getElementById('mobile-sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    if(sidebar && overlay) {
        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
        document.body.style.overflow = sidebar.classList.contains('-translate-x-full') ? 'auto' : 'hidden';
    }
};

window.mainkanEfek = (ms = 35) => { 
    if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(ms); 
};

// --- FITUR BERSIHKAN CHAT (VERSI INSTAN & PESAN AWAL TETAP) ---
window.bersihkanChat = () => {
    // Mainkan efek getar halus
    window.mainkanEfek(40);

// Ambil semua elemen pesan di dalam chatHistory
    const chatHistory = document.getElementById('chatHistory');
    if (chatHistory) {
        // Cari semua elemen div yang punya class 'animate__animated' 
        // (Ini adalah pesan yang masuk setelah halaman dimuat/dinamis)
        const pesanDinamis = chatHistory.querySelectorAll('.animate__animated');
        
        pesanDinamis.forEach(pesan => {
            pesan.remove(); // Hapus pesan satu per satu
        });

// Scroll kembali ke atas setelah dibersihkan
        const chatBox = document.getElementById('chatBox');
        chatBox.scrollTo({ top: 0, behavior: 'smooth' });
    }
};

/**
 * Inisialisasi Fitur Cek Kelompok
 */
window.initCekKelompok = (apiUrl) => {
    const input = document.getElementById('userInput');
    const btn = document.getElementById('btnKirim');

const kirimAksi = () => {
        const nis = input.value.trim();
        if (!nis) return;
    
        // KUNCI: Waktu Indonesia 24 Jam
        const waktu = new Date().toLocaleTimeString('id-ID', { 
            hour: '2-digit', 
            minute: '2-digit', 
            hour12: false 
        });
    
        tambahPesan(nis, 'sent', waktu);
        input.value = '';

// 2. Proses Cari ke API
        setTimeout(async () => {
            try {
                const response = await axios.post(apiUrl, { nis: nis });
                const data = response.data;

if (data.status === 'success') {
                    const individu = data.data.individu;
                    const cardId = `kartu-${individu.nis}`; // ID unik untuk dipotret

// HTML Kartu & Tombol
                    const htmlInfo = `
                        <div id="${cardId}" class="p-1" style="min-width: 280px; background: transparent;">
                            <span class="judul-wa">INFORMASI PESERTA DIDIK</span>
                            
                            <div class="bg-white my-2 p-2 rounded-lg border-l-4 border-emerald-500 shadow-sm">
                                <p class="text-[9px] font-bold text-emerald-600 leading-none mb-1">NAMA LENGKAP</p>
                                <p class="text-[13px] font-black uppercase text-slate-900">${individu.nama_lengkap}</p>
                            </div>

<div class="grid grid-cols-2 gap-2 mt-2">
                                <div class="bg-white p-2 rounded-lg shadow-sm">
                                    <p class="text-[8px] font-bold text-slate-400 uppercase">KELAS</p>
                                    <p class="text-[11px] font-bold text-slate-900">${individu.kelas}</p>
                                </div>
                                <div class="bg-white p-2 rounded-lg shadow-sm">
                                    <p class="text-[8px] font-bold text-slate-400 uppercase">KELOMPOK</p>
                                    <p class="text-[11px] font-bold text-blue-600">${individu.kelompok}</p>
                                </div>
                            </div>

<div class="mt-2 p-2 bg-white rounded-lg shadow-sm border border-blue-100/50">
                                 <p class="text-[8px] font-bold text-blue-600 uppercase">PEMBIMBING</p>
                                 <p class="text-[11px] font-bold italic text-slate-800">${individu.nama_pembimbing}</p>
                            </div>
                        </div>

<div class="mt-3 flex flex-col gap-2">                                                       
                            ${individu.link_wa && individu.link_wa !== '#' ? `
                                <a href="${individu.link_wa}" target="_blank" class="block w-full text-center bg-[#25d366] text-white py-2 rounded-lg font-black text-[10px] uppercase shadow-md active:scale-95 transition-all">
                                    <i class="fab fa-whatsapp mr-1"></i> Gabung Grup WA
                                </a>

<button onclick="window.simpanKartu('${cardId}', '${individu.nama_lengkap}', event)" 
                                    class="w-full bg-blue-600 text-white py-2 rounded-lg font-black text-[10px] uppercase shadow-md active:scale-95 transition-all">
                                <i class="fas fa-download mr-1"></i> Simpan Kartu Kelompok
                            </button>
                            ` : ''}
                        </div>
                    `;
                    tambahPesan(htmlInfo, 'received', waktu);
                } else {
                    tambahPesan(data.message || "NIS tidak terdaftar.", 'received', waktu);
                }
            } catch (err) {
                tambahPesan("Maaf, sistem sedang sibuk. Coba lagi nanti ya!", 'received', waktu);
            }
        }, 800);
    };

input.addEventListener('keypress', (e) => { if (e.key === 'Enter') kirimAksi(); });
    btn.addEventListener('click', kirimAksi);
};

// Fungsi Simpan Kartu (Gunakan html2canvas)
window.simpanKartu = (elementId, nama, e) => {
    const originalElement = document.getElementById(elementId);
    if (!originalElement) return;

const btn = e.currentTarget;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    btn.style.pointerEvents = 'none';

// Pengambilan Data Terpilih
    const dataNama = originalElement.querySelector('.text-slate-900').innerText; // 
    const dataNis = elementId.split('-')[1]; // [cite: 10]
    const dataKelas = originalElement.querySelectorAll('.text-slate-900, .text-slate-800')[1].innerText; // [cite: 11]
    const dataKelompok = originalElement.querySelector('.text-blue-600').innerText; // [cite: 12]
    const dataPembimbing = originalElement.querySelector('.italic').innerText; // [cite: 13]

// Wadah Utama (Ukuran Kartu Pelajar Standar: 800x500px)
    const container = document.createElement('div');
    container.style.cssText = `
        position: fixed; top: -9999px; left: -9999px;
        width: 800px; height: 500px; background: #ffffff; 
        border-radius: 15px; font-family: 'Arial', sans-serif; 
        overflow: hidden; border: 1px solid #d1d5db;
    `;

// Struktur Tabel Kaku untuk Presisi 100%
    container.innerHTML = `
        <table width="800" height="500" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; table-layout: fixed;">
            <tr bgcolor="#064e3b" height="110">
                <td colspan="2" align="center" valign="middle" style="border-bottom: 5px solid #fbbf24; padding: 0 20px;">
                    <div style="color: #ffffff; font-size: 14px; font-weight: bold; letter-spacing: 2px; margin-bottom: 5px;">SMA KP BALEENDAH [cite: 2]</div>
                    <div style="color: #ffffff; font-size: 40px; font-weight: 900; letter-spacing: 5px; line-height: 1;">SMARTTREN 2026 [cite: 3]</div>
                    <div style="display: inline-block; background: #fbbf24; color: #064e3b; padding: 2px 10px; border-radius: 5px; font-size: 10px; font-weight: bold; margin-top: 5px;">1447 H / 2026 M [cite: 4]</div>
                </td>
            </tr>

<tr>
                <td width="220" align="center" valign="middle" style="border-right: 1px solid #f1f5f9; padding: 20px;">
                    <div style="width: 150px; height: 150px; border: 4px solid #064e3b; border-radius: 12px; background: #f8fafc; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                        <i class="fas fa-user" style="font-size: 80px; color: #cbd5e1;"></i>
                    </div>
                    <div style="background: #064e3b; color: #ffffff; padding: 4px 12px; border-radius: 15px; font-size: 10px; font-weight: bold; text-transform: uppercase;">PESERTA DIDIK</div>
                </td>

<td align="left" valign="middle" style="padding: 0 40px;">
                    <div style="margin-bottom: 20px;">
                        <div style="font-size: 10px; color: #64748b; font-weight: bold; margin-bottom: 2px;">NAMA LENGKAP </div>
                        <div style="font-size: 26px; font-weight: 900; color: #111b21; text-transform: uppercase; line-height: 1.1;">${dataNama} </div>
                    </div>

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;">
                        <tr>
                            <td width="50%" style="padding-bottom: 15px;">
                                <div style="font-size: 9px; color: #64748b; font-weight: bold; margin-bottom: 2px;">NIS </div>
                                <div style="font-size: 16px; font-weight: bold; color: #111b21;">${dataNis} [cite: 10]</div>
                            </td>
                            <td width="50%" style="padding-bottom: 15px;">
                                <div style="font-size: 9px; color: #64748b; font-weight: bold; margin-bottom: 2px;">KELAS </div>
                                <div style="font-size: 16px; font-weight: bold; color: #111b21;">${dataKelas} [cite: 11]</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div style="font-size: 9px; color: #64748b; font-weight: bold; margin-bottom: 2px;">KELOMPOK </div>
                                <div style="font-size: 16px; font-weight: 800; color: #2563eb;">${dataKelompok} [cite: 12]</div>
                            </td>
                            <td>
                                <div style="font-size: 9px; color: #64748b; font-weight: bold; margin-bottom: 2px;">PEMBIMBING </div>
                                <div style="font-size: 14px; font-weight: bold; color: #059669; font-style: italic;">${dataPembimbing} [cite: 13]</div>
                            </td>
                        </tr>
                    </table>

<table width="100%" cellpadding="10" cellspacing="0" border="0" style="background: #fffbeb; border: 2px dashed #fbbf24; border-radius: 10px;">
                        <tr>
                            <td style="font-size: 9px; color: #92400e; font-weight: bold; width: 40%;">AKSES LOGIN SMARTTREN </td>
                            <td align="right" style="font-size: 13px; font-family: monospace; color: #92400e; font-weight: bold;">
                                U: ${dataNis}  | P: st2026 
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

<tr bgcolor="#f8fafc" height="40" style="border-top: 1px solid #e2e8f0;">
                <td colspan="2" align="center" valign="middle" style="color: #94a3b8; font-size: 10px; font-weight: bold; letter-spacing: 3px;">
                    BIRULOGI SYSTEM &copy; 2026 [cite: 16]
                </td>
            </tr>
        </table>
    `;

document.body.appendChild(container);

// Proses Download (Anti-Lag)
    setTimeout(() => {
        window.html2canvas(container, {
            scale: 3, // Kualitas Tinggi
            backgroundColor: null,
            useCORS: true,
            onclone: (clonedDoc) => {
                const head = clonedDoc.getElementsByTagName('head')[0];
                if (head) head.innerHTML = ''; // Membersihkan style luar untuk presisi
            }
        }).then(canvas => {
            const link = document.createElement('a');
            link.download = `Kartu_Smarttren_${dataNama}.jpg`;
            link.href = canvas.toDataURL('image/jpeg', 1.0);
            link.click();
            
            document.body.removeChild(container);
            btn.innerHTML = originalText;
            btn.style.pointerEvents = 'auto';

window.Swal.fire({
                icon: 'success',
                title: 'KARTU BERHASIL DISIMPAN!',
                text: 'Format sudah dipastikan 100% presisi.',
                timer: 1500,
                showConfirmButton: false,
                customClass: { popup: 'rounded-3xl' }
            });
        });
    }, 500);
};

/**
 * FITUR CEK SERTIFIKAT (FIXED SOLID)
 */
window.initCekSertifikat = () => {
    const input = document.getElementById('nisInput');
    if (input) {
        input.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') window.prosesCekSertifikat();
        });
    }
};

// FUNGSI PANDUAN OTOMATIS
window.pilihOpsiCepat = () => {
    const bubble = document.getElementById('bubble-panduan');
    const waktuSpan = document.getElementById('waktu-panduan');
    if (bubble) {
        const waktu = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', hour12: false }).replace(':', '.') + ' WIB';
        waktuSpan.innerText = waktu;
        bubble.style.display = 'block';
        const box = document.getElementById('chatBox');
        setTimeout(() => { box.scrollTop = box.scrollHeight; document.getElementById('nisInput').focus(); }, 100);
    }
};

window.prosesCekSertifikat = async () => {
    const input = document.getElementById('nisInput');
    const nis = input.value.trim();
    if (!nis) return;

const isDark = document.documentElement.classList.contains('dark');
    const waktu = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', hour12: false }).replace(':', '.') + ' WIB';
    
    // NIS muncul duluan (Stay di atas)
    window.tambahPesan(nis, 'sent', waktu); 
    input.value = '';

try {
        const response = await axios.post("/api/cek-sertifikat", { nis: nis });
        const data = response.data;

if (data.status === 'sukses') {
            const bubbleSertif = document.getElementById('bubble-sertifikat');
            
            // Isi Data
            document.getElementById('res-nama').innerText = data.nama;
            document.getElementById('res-kelas').innerText = data.kelas;
            document.getElementById('waktu-sertifikat').innerText = waktu;
            document.getElementById('btn-lihat').onclick = () => window.lihatSertifikat(data.link);
            document.getElementById('btn-simpan').href = data.link + "?unduh=1";
            
            // PAKSA WARNA SOLID PADA BUBBLE SERTIFIKAT
            const warnaSertif = isDark ? 'rgb(32, 44, 51)' : 'rgb(255, 255, 255)';
            bubbleSertif.style.backgroundColor = warnaSertif;
            bubbleSertif.style.setProperty('background-color', warnaSertif, 'important');
            bubbleSertif.style.opacity = '1';

// PINDAHKAN KE PALING BAWAH (SETELAH NIS)
            const history = document.getElementById('chatHistory');
            history.appendChild(bubbleSertif);
            
            bubbleSertif.style.display = 'block';
            
            setTimeout(() => { 
                const box = document.getElementById('chatBox');
                box.scrollTop = box.scrollHeight; 
            }, 100);

} else {
            window.tambahPesan(data.pesan || "Sertifikat tidak ditemukan, kemungkinan nilai belum beres.", 'received', waktu);
        }
    } catch (error) {
        window.tambahPesan("Sistem sibuk, coba lagi nanti.", 'received', waktu);
    }
};

// FUNGSI TAMBAH PESAN
function tambahPesan(teks, tipe, waktu) {
    const history = document.getElementById('chatHistory');
    if (!history) return;

const isDark = document.documentElement.classList.contains('dark');
    const bubbleClass = tipe === 'sent' ? 'bubble-me' : 'bubble-them';
    const ceklis = tipe === 'sent' ? '<i class="fas fa-check-double ceklis-biru"></i>' : '';
    
    // Format Waktu: Pastikan pakai titik dan ada WIB
    let displayWaktu = waktu.toString().replace(':', '.');
    if (!displayWaktu.includes('WIB')) displayWaktu += ' WIB';

// KUNCI WARNA RGB (ANTI-TRANSPARAN)
    let warnaBg;
    if (tipe === 'sent') {
        warnaBg = isDark ? 'rgb(0, 92, 75)' : 'rgb(220, 248, 198)';
    } else {
        warnaBg = isDark ? 'rgb(32, 44, 51)' : 'rgb(255, 255, 255)';
    }

window.lihatSertifikat = (url) => {
    const modal = document.getElementById('modalPratinjau');
    const frame = document.getElementById('frameSertifikat');
    frame.src = url;
    modal.classList.remove('hidden');
    modal.style.display = 'flex';
};

window.tutupPratinjau = () => {
    const modal = document.getElementById('modalPratinjau');
    const frame = document.getElementById('frameSertifikat');
    modal.classList.add('hidden');
    modal.style.display = 'none';
    frame.src = '';
};

// --- KONTROL MODAL GDRIVE ---
window.tampilkanModalHasil = (data, nis) => {
    const modal = document.getElementById('modalHasil');
    if (!modal) return;

document.getElementById('displayNama').innerText = data.nama;
    document.getElementById('displayNis').innerText = nis;
    document.getElementById('linkDownload').href = data.link + "?unduh=1";
    
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    modal.style.display = 'flex'; // Paksa display flex
};

window.tutupModal = () => {
    const modal = document.getElementById('modalHasil');
    if (modal) {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        modal.style.display = 'none'; // Paksa sembunyi
    }
};

// Tutup modal jika klik di area luar kartu (overlay)
window.addEventListener('click', (event) => {
    const modal = document.getElementById('modalHasil');
    if (event.target === modal) {
        window.tutupModal();
    }
});

// --- IMPORT MODUL ROLE (Ditaruh paling bawah) ---
import './modules/peserta.js'; 
import './modules/pembimbing.js';
import './modules/superadmin.js';

document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementById('theme-toggle');
    if(btn) btn.onclick = window.ubahMode;
});

📁 File Manager

Edit

🧪 PHP Preview

🖥 Linux CMD