<?php
require_once '../../admin/config.php';
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Proses form
    $conn = connectDB();

    // Data dari form
    $nama_sekolah = $conn->real_escape_string($_POST['nama_sekolah']);
    $nama_peserta = $conn->real_escape_string($_POST['nama_peserta']);
    $npsn = $conn->real_escape_string($_POST['npsn']);
    $kategori = $conn->real_escape_string($_POST['kategori']);
    $kabupaten_kota = $conn->real_escape_string($_POST['kabupaten_kota']);
    $provinsi = $conn->real_escape_string($_POST['provinsi']);
    $email = $conn->real_escape_string($_POST['email']);
    $no_wa = $conn->real_escape_string($_POST['no_wa']);
    $link_bukti_bpti = $conn->real_escape_string($_POST['link_bukti_bpti']);

    // Menyiapkan variable untuk pesan
    $error_message = '';
    $success_message = '';
    $modal_type = '';

    // Validasi URL
    if(!filter_var($link_bukti_bpti, FILTER_VALIDATE_URL)) {
        $error_message = 'Format URL bukti BPTI tidak valid.';
        $modal_type = 'error';
    } else {
        // Cek apakah kombinasi NPSN dan Nama_Peserta sudah terdaftar
        $check_sql = "SELECT ID FROM master_sekolah WHERE NPSN = '$npsn' AND Nama_Peserta = '$nama_peserta'";
        if($conn->query($check_sql)->num_rows > 0) {
            $error_message = 'Peserta dengan nama ini dari sekolah ini sudah terdaftar. Silakan periksa kembali.';
            $modal_type = 'error';
        } else {
            // Simpan ke database
            $sql = "INSERT INTO master_sekolah (
                    Nama_Sekolah,
                    Nama_Peserta, 
                    NPSN, 
                    Kategori,
                    Kabupaten_Kota,
                    Provinsi,
                    Email, 
                    No_WA, 
                    Link_Bukti_BPTI,
                    Status
                ) VALUES (
                    '$nama_sekolah',
                    '$nama_peserta', 
                    '$npsn', 
                    '$kategori',
                    '$kabupaten_kota',
                    '$provinsi',
                    '$email', 
                    '$no_wa', 
                    '$link_bukti_bpti',
                    'memerlukan_validasi'
                )";

        if ($conn->query($sql) === TRUE) {
                $success_message = 'Pendaftaran sekolah berhasil! Data akan divalidasi oleh admin.';
                $modal_type = 'success';
            } else {
                $error_message = "Error: " . $conn->error;
                $modal_type = 'error';
            }
        }
    }

    $conn->close();
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../../assets/logoFLS3N.png" type="image/x-icon">
    <title>Form Pendaftaran Sekolah FLS3N</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #9d174d;
            --secondary-color: #f43f5e;
            --accent-color: #fbcfe8;
            --dark-color: #4b5563;
            --light-color: #f9fafb;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f5f5f7;
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .page-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .main-header {
            position: fixed;
            width: 100%;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background: rgba(157, 23, 77, 0.95);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 10;
            top: 0;
            height: 80px;
            padding: 0 2rem;
            box-shadow: 0 4px 20px rgba(157, 23, 77, 0.3);
            transition: all 0.3s ease;
        }

        .main-header:hover {
            background: rgba(157, 23, 77, 1);
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .main-header .logo-container img {
            height: 65px;
            transition: transform 0.3s ease;
        }

        .main-header .logo-container img:hover {
            transform: scale(1.05);
        }

        .main-header .instansi-name {
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 1px;
            background: linear-gradient(90deg, #fff, #f0abfc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
        }

        .content-wrapper {
            flex: 1;
            margin-top: 120px;
            padding-bottom: 60px;
        }
        
        .form-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transform: translateY(0);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 30px;
        }
        
        .form-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 25px 30px;
            position: relative;
            overflow: hidden;
        }
        
        .card-header h3 {
            font-weight: 700;
            margin: 0;
            position: relative;
            z-index: 1;
        }
        
        .card-header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(40%, -50%);
        }
        
        .card-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(-30%, 50%);
        }
        
        .card-body {
            padding: 35px;
        }
        
        .back-btn {
            display: inline-flex;
            align-items: center;
            background: linear-gradient(90deg, #9d174d, #be185d);
            color: white;
            border-radius: 50px;
            padding: 12px 30px;
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(157, 23, 77, 0.3);
            transition: all 0.3s ease;
            text-decoration: none;
            border: none;
            cursor: pointer;
            margin-bottom: 20px;
        }
        
        .back-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(157, 23, 77, 0.4);
            color: white;
        }
        
        .back-btn i {
            margin-right: 8px;
        }
        
        .form-label {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--dark-color);
            margin-bottom: 8px;
        }
        
        .form-control, .form-select {
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            background-color: #f8fafc;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
        }
        
        .input-group {
            position: relative;
        }
        
        .input-icon {
            position: absolute;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);
            color: #94a3b8;
            z-index: 10;
        }
        
        .input-with-icon {
            padding-left: 45px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: none;
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(244, 63, 94, 0.3);
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
        }
        
        footer {
            background: linear-gradient(90deg, #9d174d, #be185d);
            color: white;
            text-align: center;
            padding: 1.5rem 0;
            width: 100%;
            margin-top: auto;
            position: relative;
            box-shadow: 0 -5px 20px rgba(157, 23, 77, 0.2);
        }

        footer p {
            margin: 0;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }
        
        .form-section {
            margin-bottom: 30px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .form-section::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, var(--accent-color), transparent);
        }
        
        .form-section-title {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        
        .form-section-title i {
            margin-right: 10px;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.6s ease forwards;
        }
        
        .modal-confirm .modal-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            border-bottom: 0;
            padding: 1.5rem;
        }
        
        .modal-confirm .modal-title {
            font-weight: 700;
        }
        
        .modal-confirm .modal-body {
            padding: 1.5rem;
        }
        
        .modal-confirm .icon-warning {
            color: #ff9800;
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        
        .modal-confirm .warning-text {
            font-size: 1.1rem;
            font-weight: 500;
            color: #dc3545;
            margin-bottom: 1rem;
        }
        
        .modal-confirm .info-text {
            color: var(--dark-color);
            margin-bottom: 0.5rem;
        }
        
        .modal-confirm .modal-footer {
            border-top: 0;
            justify-content: space-between;
            padding: 1rem 1.5rem 1.5rem;
        }
        
        .modal-confirm .btn-secondary {
            background-color: #6c757d;
            border: none;
            font-weight: 600;
        }
        
        .modal-confirm .btn-confirm {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: none;
            font-weight: 600;
        }
        
        @media (max-width: 768px) {
            .main-header {
                padding: 0 1rem;
                height: 70px;
            }
            
            .main-header .logo-container img {
                height: 45px;
            }
            
            .main-header .instansi-name {
                font-size: 20px;
            }
            
            .card-body {
                padding: 20px 15px;
            }
            
            .input-with-icon {
                padding-left: 40px;
                font-size: 14px;
            }
            
            .form-label {
                font-size: 14px;
                margin-bottom: 4px;
            }
            
            .form-section {
                margin-bottom: 20px;
                padding-bottom: 10px;
            }
            
            .form-section-title {
                font-size: 16px;
                margin-bottom: 15px;
            }
            
            small.text-muted {
                font-size: 11px;
            }
            
            .input-icon {
                left: 12px;
                font-size: 14px;
            }
            
            .back-btn {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <div class="page-container">
        <header class="main-header">
            <div class="logo-container"> 
                <img src="../../assets/tutwurii.png" alt="Logo TI Unisbank">
                <img src="../../assets/unisbank.png" alt="Logo Unisbank">
                <img src="../../assets/logoFLS3N.png" alt="Logo FLS3N">    
            </div>
            <div class="instansi-name">FLS3N 2026</div>
        </header>

        <div class="content-wrapper">
            <div class="container mt-5">
                <div class="form-card animate-fade-in">
                    <div class="card-header">
                        <h3><i class="fas fa-school me-2"></i>Form Pendaftaran Sekolah</h3>
                    </div>
                    <div class="card-body">
                        <?php if (!isset($modal_type)): ?>
                        <div class="alert alert-info" role="alert">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Perhatian!</strong>
                            <ul class="mb-0 mt-2">
                                <li>Setiap sekolah hanya dapat mendaftar satu kali dengan satu NPSN.</li>
                                <li>Data pendaftaran akan divalidasi oleh admin dalam waktu 1x24 jam kerja.</li>
                                <li>Pastikan link bukti pendaftaran dari BPTI sudah diset akses PUBLIK untuk verifikasi.</li>
                                <li>Jika ada pertanyaan, hubungi admin FLS3N di email: <strong>newmild30@gmail.com</strong></li>
                            </ul>
                        </div>
                        
                        <form id="registrationForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
                            <!-- School Information Section -->
                            <div class="form-section">
                                <h5 class="form-section-title"><i class="fas fa-school"></i> Informasi Sekolah</h5>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Nama Sekolah</label>
                                        <div class="input-group">
                                            <i class="fas fa-school input-icon"></i>
                                            <input type="text" class="form-control input-with-icon" name="nama_sekolah" 
                                                placeholder="Masukkan Nama Sekolah" required
                                                pattern="[A-Z0-9\s/]+"
                                                title="Nama sekolah harus menggunakan huruf kapital" 
                                                oninput="this.value = this.value.toUpperCase()">
                                        </div>
                                        <small class="text-muted mt-1"><i class="fas fa-info-circle"></i> Jangan disingkat! Contoh: SMA NEGERI 1 SEMARANG</small>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Nama Peserta Daftar</label>
                                        <div class="input-group">
                                            <i class="fas fa-user input-icon"></i>
                                            <input type="text" class="form-control input-with-icon" name="nama_peserta" 
                                                placeholder="Masukkan Nama Peserta" required
                                                oninput="this.value = this.value.toUpperCase()">
                                        </div>
                                        <small class="text-muted mt-1"><i class="fas fa-info-circle"></i> Nama lengkap peserta</small>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">NPSN Sekolah</label>
                                        <div class="input-group">
                                            <i class="fas fa-building input-icon"></i>
                                            <input type="text" class="form-control input-with-icon" name="npsn" 
                                                placeholder="Masukkan NPSN Sekolah" required
                                                pattern="[0-9]+"
                                                title="NPSN harus berupa angka" >
                                        </div>
                                        <small class="text-muted mt-1"><i class="fas fa-info-circle"></i> NPSN harus berupa angka saja</small>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Kategori Sekolah</label>
                                        <div class="input-group">
                                            <i class="fas fa-tags input-icon"></i>
                                            <select class="form-select input-with-icon" name="kategori" required>
                                                <option value="">Pilih Kategori</option>
                                                <option value="SMA">SMA</option>
                                                <option value="MA">MA (Madrasah Aliyah)</option>
                                                <option value="SMK">SMK</option>
                                                <option value="MAK">MAK (Madrasah Aliyah Kejuruan)</option>
                                                <option value="PKBM">PKBM</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Kabupaten/Kota</label>
                                        <div class="input-group">
                                            <i class="fas fa-map-marker-alt input-icon"></i>
                                            <select class="form-select input-with-icon" name="kabupaten_kota" required>
                                                <option value="">Pilih Kabupaten/Kota</option>
                                                <option value="Kota Salatiga">Kota Salatiga</option>
                                                <option value="Kabupaten Demak">Kabupaten Demak</option>
                                                <option value="Kabupaten Semarang">Kabupaten Semarang</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Provinsi</label>
                                        <div class="input-group">
                                            <i class="fas fa-location-dot input-icon"></i>
                                            <input type="text" class="form-control input-with-icon" name="provinsi" 
                                                placeholder="Contoh: Jawa Tengah" required
                                                value="JAWA TENGAH"
                                                readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Contact Information Section -->
                            <div class="form-section">
                                <h5 class="form-section-title"><i class="fas fa-phone"></i> Informasi Kontak</h5>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Email</label>
                                        <div class="input-group">
                                            <i class="fas fa-envelope input-icon"></i>
                                            <input type="email" class="form-control input-with-icon" name="email" 
                                                placeholder="contoh: sekolah@email.com" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">No. WhatsApp</label>
                                        <div class="input-group">
                                            <i class="fas fa-whatsapp input-icon"></i>
                                            <input type="tel" class="form-control input-with-icon" name="no_wa" 
                                                placeholder="Contoh: 081234567890" required
                                                pattern="[0-9]{10,15}"
                                                title="Nomor WhatsApp harus berisi 10-15 digit angka">
                                        </div>
                                        <small class="text-muted mt-1"><i class="fas fa-info-circle"></i> Gunakan format: 08XXXXXXXXXX</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Document Section -->
                            <div class="form-section">
                                <h5 class="form-section-title"><i class="fas fa-file-upload"></i> Upload Dokumen</h5>
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <label class="form-label">Link Bukti Pendaftaran BPTI</label>
                                        <div class="input-group">
                                            <i class="fas fa-link input-icon"></i>
                                            <input type="url" class="form-control input-with-icon" name="link_bukti_bpti" 
                                                placeholder="Masukkan link bukti dari BPTI (URL)" 
                                                required>
                                        </div>
                                        <small class="text-muted mt-1"><i class="fas fa-info-circle"></i> Pastikan link sudah diset akses PUBLIK untuk verifikasi oleh admin</small>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center mt-4">
                                <button type="button" id="btnConfirm" class="btn btn-primary btn-lg">
                                    <i class="fas fa-paper-plane me-2"></i>Daftar Sekarang
                                </button>
                            </div>
                        </form>
                        
                        <?php endif; ?>
                    </div>
                </div>

                <div class="text-center animate-fade-in mt-4">
                    <a href="../../dashboard_awal" class="back-btn">
                        <i class="fas fa-arrow-left"></i> Kembali ke Halaman Utama
                    </a>
                </div>
            </div>
        </div>

        <footer>
            <div class="container mx-auto">
                <p>&copy;<?php echo date("Y"); ?> FTII Unisbank. All rights reserved.</p>
            </div>
        </footer>
    </div>

    <!-- Modal Konfirmasi -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content modal-confirm">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i>Konfirmasi Pendaftaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <i class="fas fa-exclamation-circle icon-warning"></i>
                    <p class="warning-text">Pastikan data yang Anda masukkan sudah benar sebelum melanjutkan.</p>
                    <p class="info-text">Harap periksa kembali data yang Anda masukkan:</p>
                    <ul class="text-start mt-3" id="dataConfirmation">
                        <!-- Data akan ditampilkan di sini via JavaScript -->
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Batal
                    </button>
                    <button type="button" id="btnSubmit" class="btn btn-confirm">
                        <i class="fas fa-check me-2"></i>Ya, Saya Yakin
                    </button>
                </div>
            </div>
        </div>
    </div>

    <?php if (isset($modal_type) && $modal_type === 'error'): ?>
    <div class="modal fade" id="alertModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">Error</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <?php echo $error_message; ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="history.back()">Kembali</button>
                </div>
            </div>
        </div>
    </div>
    <?php elseif (isset($modal_type) && $modal_type === 'success'): ?>
    <div class="modal fade" id="alertModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title">Sukses</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <?php echo $success_message; ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="window.location='../../dashboard_awal'">OK</button>
                </div>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        <?php if (isset($modal_type)): ?>
        document.addEventListener("DOMContentLoaded", function() {
            var modal = new bootstrap.Modal(document.getElementById("alertModal"));
            modal.show();
        });
        <?php else: ?>
        document.addEventListener("DOMContentLoaded", function() {
            const confirmModal = new bootstrap.Modal(document.getElementById("confirmModal"));
            const btnConfirm = document.getElementById("btnConfirm");
            const btnSubmit = document.getElementById("btnSubmit");
            const form = document.getElementById("registrationForm");
            const dataConfirmation = document.getElementById("dataConfirmation");

            // Uppercase untuk Nama Sekolah
            const namaSekolahInput = document.querySelector('input[name="nama_sekolah"]');
            if (namaSekolahInput) {
                namaSekolahInput.addEventListener('paste', function(e) {
                    e.preventDefault();
                    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
                    this.value += text.toUpperCase();
                });
            }

            btnConfirm.addEventListener("click", function() {
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                const formData = new FormData(form);
                let confirmationHTML = '';

                confirmationHTML += `<li><strong>Nama Sekolah:</strong> ${formData.get('nama_sekolah')}</li>`;
                confirmationHTML += `<li><strong>Nama Peserta:</strong> ${formData.get('nama_peserta')}</li>`;
                confirmationHTML += `<li><strong>NPSN:</strong> ${formData.get('npsn')}</li>`;
                confirmationHTML += `<li><strong>Kategori:</strong> ${formData.get('kategori')}</li>`;
                confirmationHTML += `<li><strong>Kabupaten/Kota:</strong> ${formData.get('kabupaten_kota')}</li>`;
                confirmationHTML += `<li><strong>Email:</strong> ${formData.get('email')}</li>`;
                confirmationHTML += `<li><strong>No. WhatsApp:</strong> ${formData.get('no_wa')}</li>`;
                
                const buktiURL = formData.get('link_bukti_bpti');
                const formatURL = buktiURL.length > 50 ? buktiURL.substring(0, 47) + '...' : buktiURL;
                confirmationHTML += `<li><strong>Link Bukti BPTI:</strong> <a href="${buktiURL}" target="_blank" class="text-primary">${formatURL}</a></li>`;

                dataConfirmation.innerHTML = confirmationHTML;
                confirmModal.show();
            });

            btnSubmit.addEventListener("click", function() {
                form.submit();
            });

            // Validasi input NPSN - hanya angka
            const npsnInput = document.querySelector('input[name="npsn"]');
            if (npsnInput) {
                npsnInput.addEventListener('input', function(e) {
                    this.value = this.value.replace(/[^0-9]/g, '');
                });
            }
        });
        <?php endif; ?>
    </script>
</body>
</html>
