<?php
session_start();
include 'config.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aplikasi Kehadiran Ujian</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .navbar-brand {
            font-weight: bold;
        }
        .card {
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .btn-action {
            margin: 5px;
        }
        #scanner-container {
            position: relative;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
            display: none;
        }
        #qr-video {
            width: 100%;
            border-radius: 8px;
            background-color: #f8f9fa;
            transform: scaleX(-1); /* Mirror video untuk feel seperti kamera */
        }
        #qr-canvas {
            display: none;
        }
        .scan-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 250px;
            height: 250px;
            border: 3px solid #007bff;
            border-radius: 8px;
            pointer-events: none;
            box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5);
        }
        .scan-line {
            position: absolute;
            width: 100%;
            height: 2px;
            background: #007bff;
            top: 0;
            animation: scan 2s linear infinite;
        }
        @keyframes scan {
            0% { top: 0; }
            50% { top: 100%; }
            100% { top: 0; }
        }
        .camera-permission {
            padding: 20px;
            text-align: center;
            background-color: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        #manual-input {
            display: none;
        }
        .scanner-active {
            display: block !important;
        }
        .toast-container {
            z-index: 1055;
        }
        .alert-fixed {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
            min-width: 300px;
        }
        .mobile-warning {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .browser-list {
            list-style: none;
            padding: 0;
        }
        .browser-list li {
            padding: 5px 0;
        }
        .browser-list i {
            width: 20px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="index.php">
                <i class="fas fa-qrcode me-2"></i>Kehadiran Ujian
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="index.php">Scan QR</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="data_kehadiran.php">Data Kehadiran</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="kelola_siswa.php">Kelola Siswa</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="generate_qr.php">Generate QR</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Alert Container untuk pesan global -->
    <div id="global-alert" class="alert-fixed" style="display: none;"></div>

    <!-- Konten Utama -->
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-8 mx-auto">
                
                <!-- Warning untuk Mobile -->
                <div id="mobile-warning" class="mobile-warning" style="display: none;">
                    <h5><i class="fas fa-mobile-alt me-2"></i>Tips untuk Perangkat Mobile</h5>
                    <p class="mb-2">Jika scanner tidak bekerja di perangkat mobile:</p>
                    <ul class="browser-list">
                        <li><i class="fas fa-check-circle"></i>Gunakan browser <strong>Chrome</strong> atau <strong>Firefox</strong></li>
                        <li><i class="fas fa-check-circle"></i>Pastikan mengakses via <strong>HTTPS</strong></li>
                        <li><i class="fas fa-check-circle"></i>Berikan izin kamera ketika diminta</li>
                        <li><i class="fas fa-check-circle"></i>Gunakan fitur <strong>Input Manual</strong> sebagai alternatif</li>
                    </ul>
                </div>

                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0"><i class="fas fa-camera me-2"></i>Scanner Kehadiran Ujian</h4>
                    </div>
                    <div class="card-body">
                        <!-- Pilih Mata Pelajaran -->
                        <div class="mb-4">
                            <label for="mapel" class="form-label">Pilih Mata Pelajaran</label>
                            <select class="form-select" id="mapel" required>
                                <option value="">-- Pilih Mata Pelajaran --</option>
                                <?php
                                $sql = "SELECT * FROM mata_pelajaran";
                                $result = $conn->query($sql);
                                while($row = $result->fetch_assoc()) {
                                    echo "<option value='{$row['kode_mapel']}'>{$row['nama_mapel']}</option>";
                                }
                                ?>
                            </select>
                        </div>

                        <!-- Info Izin Kamera -->
                        <div id="camera-permission" class="camera-permission">
                            <i class="fas fa-camera fa-3x text-muted mb-3"></i>
                            <p class="text-muted">Kamera akan diaktifkan ketika tombol "Mulai Scan" ditekan</p>
                            <small class="text-muted">Pastikan Anda memberikan izin akses kamera ketika diminta</small>
                            
                            <!-- Info Tambahan untuk Mobile -->
                            <div id="mobile-camera-info" style="display: none;" class="mt-3 p-3 bg-warning rounded">
                                <small>
                                    <i class="fas fa-info-circle me-1"></i>
                                    <strong>Tips Mobile:</strong> Jika kamera tidak bisa diakses, gunakan browser Chrome/Firefox atau gunakan fitur Input Manual di bawah.
                                </small>
                            </div>
                        </div>

                        <!-- Scanner QR Code -->
                        <div id="scanner-container" class="mb-3">
                            <video id="qr-video" playsinline></video>
                            <canvas id="qr-canvas"></canvas>
                            <div class="scan-overlay">
                                <div class="scan-line"></div>
                            </div>
                        </div>

                        <!-- Input Manual sebagai Fallback -->
                        <div id="manual-input" class="mb-3">
                            <div class="card">
                                <div class="card-header bg-warning">
                                    <h6 class="mb-0"><i class="fas fa-keyboard me-2"></i>Input Manual</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="manual-nis" class="form-label">NIS Siswa</label>
                                        <input type="text" class="form-control" id="manual-nis" placeholder="Masukkan NIS siswa">
                                    </div>
                                    <button id="submit-manual" class="btn btn-warning">
                                        <i class="fas fa-check me-2"></i>Simpan Kehadiran
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Status Scanner -->
                        <div id="scanner-status" class="alert alert-info text-center">
                            <i class="fas fa-info-circle me-2"></i>Pilih mata pelajaran dan mulai scan QR Code
                        </div>

                        <!-- Tombol Aksi -->
                        <div class="text-center">
                            <button id="start-scanner" class="btn btn-success">
                                <i class="fas fa-play me-2"></i>Mulai Scan
                            </button>
                            <button id="stop-scanner" class="btn btn-danger" disabled>
                                <i class="fas fa-stop me-2"></i>Stop Scan
                            </button>
                            <button id="toggle-manual" class="btn btn-warning">
                                <i class="fas fa-keyboard me-2"></i>Input Manual
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Hasil Scan -->
                <div id="scan-result" class="card mt-4" style="display: none;">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0"><i class="fas fa-check-circle me-2"></i>Kehadiran Terekam</h5>
                    </div>
                    <div class="card-body">
                        <div id="result-content"></div>
                    </div>
                </div>

                <!-- Error Message -->
                <div id="error-message" class="alert alert-danger mt-3" style="display: none;">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <span id="error-text"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Gunakan jsQR yang lebih ringan dan reliable -->
    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
    
    <script>
        // Inisialisasi variabel
        let videoStream = null;
        let isScannerActive = false;
        let scanInterval = null;
        let lastScannedCode = null;
        let scanCooldown = false;
        const video = document.getElementById('qr-video');
        const canvas = document.getElementById('qr-canvas');
        const scannerContainer = document.getElementById('scanner-container');
        const cameraPermission = document.getElementById('camera-permission');
        const manualInput = document.getElementById('manual-input');
        const startBtn = document.getElementById('start-scanner');
        const stopBtn = document.getElementById('stop-scanner');
        const toggleManualBtn = document.getElementById('toggle-manual');
        const submitManualBtn = document.getElementById('submit-manual');
        const manualNisInput = document.getElementById('manual-nis');
        const scannerStatus = document.getElementById('scanner-status');
        const scanResult = document.getElementById('scan-result');
        const resultContent = document.getElementById('result-content');
        const mapelSelect = document.getElementById('mapel');
        const errorMessage = document.getElementById('error-message');
        const errorText = document.getElementById('error-text');
        const globalAlert = document.getElementById('global-alert');
        const mobileWarning = document.getElementById('mobile-warning');
        const mobileCameraInfo = document.getElementById('mobile-camera-info');

        // Deteksi perangkat mobile
        function isMobileDevice() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
                   (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); // iPad
        }

        // Deteksi browser
        function getBrowserInfo() {
            const ua = navigator.userAgent;
            let browser = "Unknown";
            
            if (ua.includes("Chrome") && !ua.includes("Edg")) browser = "Chrome";
            else if (ua.includes("Firefox")) browser = "Firefox";
            else if (ua.includes("Safari") && !ua.includes("Chrome")) browser = "Safari";
            else if (ua.includes("Edg")) browser = "Edge";
            
            return browser;
        }

        // Deteksi protocol (HTTP/HTTPS)
        function isHTTPS() {
            return window.location.protocol === 'https:';
        }

        // Fungsi untuk menampilkan alert Bootstrap
        function showAlert(message, type = 'info', duration = 5000) {
            hideAlert();
            
            globalAlert.innerHTML = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    <i class="fas ${getAlertIcon(type)} me-2"></i>
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
            globalAlert.style.display = 'block';
            
            if (duration > 0) {
                setTimeout(hideAlert, duration);
            }
        }

        function getAlertIcon(type) {
            switch(type) {
                case 'success': return 'fa-check-circle';
                case 'warning': return 'fa-exclamation-triangle';
                case 'danger': return 'fa-times-circle';
                default: return 'fa-info-circle';
            }
        }

        function hideAlert() {
            const alert = globalAlert.querySelector('.alert');
            if (alert) {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }

        // Cek dukungan kamera dengan deteksi yang lebih baik
        function checkCameraSupport() {
            // Cek dasar support mediaDevices
            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                const message = isMobileDevice() ? 
                    'Browser tidak mendukung akses kamera. Gunakan Chrome atau Firefox di perangkat mobile.' :
                    'Browser tidak mendukung akses kamera. Gunakan browser modern seperti Chrome, Firefox, atau Edge.';
                showAlert(message, 'warning');
                return false;
            }

            // Cek khusus untuk mobile dan Safari
            if (isMobileDevice()) {
                const browser = getBrowserInfo();
                const isHTTPS = window.location.protocol === 'https:';
                
                if (browser === 'Safari' && !isHTTPS) {
                    showAlert('Di Safari iOS, kamera hanya bekerja dengan HTTPS. Gunakan Chrome atau akses via HTTPS.', 'warning');
                    return false;
                }
                
                // Tampilkan warning mobile
                mobileWarning.style.display = 'block';
                mobileCameraInfo.style.display = 'block';
            }

            return true;
        }

        // Tampilkan error
        function showError(message) {
            errorText.textContent = message;
            errorMessage.style.display = 'block';
        }

        // Sembunyikan error
        function hideError() {
            errorMessage.style.display = 'none';
        }

        // Toggle antara scanner dan input manual
        function toggleManualInput() {
            if (manualInput.style.display === 'none') {
                if (isScannerActive) {
                    stopScanner();
                }
                manualInput.style.display = 'block';
                scannerContainer.style.display = 'none';
                cameraPermission.style.display = 'none';
                toggleManualBtn.innerHTML = '<i class="fas fa-camera me-2"></i>Kembali ke Scan';
                toggleManualBtn.className = 'btn btn-info';
                scannerStatus.innerHTML = '<i class="fas fa-keyboard me-2"></i>Mode Input Manual - Masukkan NIS siswa';
                scannerStatus.className = 'alert alert-warning text-center';
            } else {
                manualInput.style.display = 'none';
                cameraPermission.style.display = 'block';
                toggleManualBtn.innerHTML = '<i class="fas fa-keyboard me-2"></i>Input Manual';
                toggleManualBtn.className = 'btn btn-warning';
                scannerStatus.innerHTML = '<i class="fas fa-info-circle me-2"></i>Pilih mata pelajaran dan mulai scan QR Code';
                scannerStatus.className = 'alert alert-info text-center';
                hideError();
            }
        }

        // Fungsi untuk memulai scanner dengan fallback
        async function startScanner() {
            if (!mapelSelect.value) {
                showAlert('Pilih mata pelajaran terlebih dahulu!', 'warning');
                return;
            }

            if (!checkCameraSupport()) {
                // Auto-switch ke input manual di mobile jika kamera tidak support
                if (isMobileDevice()) {
                    showAlert('Beralih ke mode Input Manual. Silakan masukkan NIS secara manual.', 'info');
                    if (manualInput.style.display === 'none') {
                        toggleManualInput();
                    }
                }
                return;
            }

            try {
                scannerStatus.innerHTML = '<i class="fas fa-camera me-2"></i>Mengaktifkan kamera...';
                scannerStatus.className = 'alert alert-warning text-center';
                
                startBtn.disabled = true;
                
                // Konfigurasi kamera untuk mobile dan desktop
                const constraints = {
                    video: {
                        facingMode: 'environment',
                        width: { ideal: isMobileDevice() ? 640 : 1280 },
                        height: { ideal: isMobileDevice() ? 480 : 720 }
                    }
                };

                videoStream = await navigator.mediaDevices.getUserMedia(constraints);

                video.srcObject = videoStream;
                
                video.onloadedmetadata = function() {
                    video.play();
                    
                    scannerContainer.style.display = 'block';
                    cameraPermission.style.display = 'none';
                    scannerStatus.innerHTML = '<i class="fas fa-camera me-2"></i>Scanner aktif - Arahkan kamera ke QR Code';
                    scannerStatus.className = 'alert alert-success text-center';
                    
                    startBtn.disabled = true;
                    stopBtn.disabled = false;
                    isScannerActive = true;
                    hideError();
                    
                    lastScannedCode = null;
                    scanCooldown = false;
                    
                    startScanning();
                };
                
            } catch (error) {
                console.error('Error starting scanner:', error);
                let errorMsg = 'Gagal mengaktifkan kamera: ';
                
                if (error.name === 'NotAllowedError') {
                    errorMsg = 'Izin kamera ditolak. ';
                    if (isMobileDevice()) {
                        errorMsg += 'Pastikan Anda memberikan izin akses kamera di pengaturan browser.';
                    } else {
                        errorMsg += 'Silakan berikan izin akses kamera.';
                    }
                } else if (error.name === 'NotFoundError') {
                    errorMsg = 'Tidak ada kamera yang ditemukan.';
                } else if (error.name === 'NotSupportedError') {
                    errorMsg = 'Browser tidak mendukung fitur ini.';
                } else if (error.name === 'NotReadableError') {
                    errorMsg = 'Kamera sedang digunakan oleh aplikasi lain.';
                } else if (error.name === 'OverconstrainedError') {
                    errorMsg = 'Kamera tidak mendukung resolusi yang diminta.';
                } else {
                    errorMsg += error.message;
                }
                
                showAlert(errorMsg, 'danger');
                scannerStatus.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i>Gagal mengaktifkan scanner';
                scannerStatus.className = 'alert alert-danger text-center';
                startBtn.disabled = false;

                // Auto-switch ke manual di mobile jika gagal
                if (isMobileDevice() && manualInput.style.display === 'none') {
                    setTimeout(() => {
                        showAlert('Beralih ke mode Input Manual. Silakan masukkan NIS secara manual.', 'info');
                        toggleManualInput();
                    }, 2000);
                }
            }
        }

        // Fungsi untuk memulai proses scanning
        function startScanning() {
            const canvasElement = document.getElementById('qr-canvas');
            const canvas = canvasElement.getContext('2d');

            scanInterval = setInterval(() => {
                if (video.readyState === video.HAVE_ENOUGH_DATA && !scanCooldown) {
                    canvasElement.height = video.videoHeight;
                    canvasElement.width = video.videoWidth;
                    canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
                    
                    const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
                    const code = jsQR(imageData.data, imageData.width, imageData.height, {
                        inversionAttempts: "dontInvert",
                    });
                    
                    if (code && code.data !== lastScannedCode) {
                        lastScannedCode = code.data;
                        handleScanResult(code.data);
                    }
                }
            }, 200);
        }

        // Fungsi untuk menghentikan scanner
        function stopScanner() {
            if (scanInterval) {
                clearInterval(scanInterval);
                scanInterval = null;
            }
            
            if (videoStream) {
                videoStream.getTracks().forEach(track => track.stop());
                videoStream = null;
            }
            
            if (video.srcObject) {
                video.srcObject = null;
            }
            
            scannerContainer.style.display = 'none';
            cameraPermission.style.display = 'block';
            scannerStatus.innerHTML = '<i class="fas fa-info-circle me-2"></i>Scanner dihentikan';
            scannerStatus.className = 'alert alert-info text-center';
            startBtn.disabled = false;
            stopBtn.disabled = true;
            isScannerActive = false;
            hideError();
            
            lastScannedCode = null;
            scanCooldown = false;
        }

        // Fungsi untuk input manual
        function submitManualAttendance() {
            const nis = manualNisInput.value.trim();
            if (!nis) {
                showAlert('Masukkan NIS siswa terlebih dahulu!', 'warning');
                return;
            }

            if (!mapelSelect.value) {
                showAlert('Pilih mata pelajaran terlebih dahulu!', 'warning');
                return;
            }

            fetch('cari_siswa.php?nis=' + encodeURIComponent(nis))
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        handleScanResult(`${data.siswa.nis}:${data.siswa.nama}:${data.siswa.kelas}`);
                        manualNisInput.value = '';
                    } else {
                        showAlert('Siswa dengan NIS ' + nis + ' tidak ditemukan!', 'warning');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('Terjadi kesalahan saat mencari data siswa', 'danger');
                });
        }

        // Event listeners
        startBtn.addEventListener('click', startScanner);
        stopBtn.addEventListener('click', stopScanner);
        toggleManualBtn.addEventListener('click', toggleManualInput);
        submitManualBtn.addEventListener('click', submitManualAttendance);
        manualNisInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                submitManualAttendance();
            }
        });

        // Fungsi untuk menangani hasil scan
        function handleScanResult(qrData) {
            const dataParts = qrData.split(':');
            if (dataParts.length !== 3) {
                showAlert('Format QR Code tidak valid! Pastikan QR Code berasal dari sistem ini.', 'warning');
                return;
            }

            const nis = dataParts[0];
            const nama = dataParts[1];
            const kelas = dataParts[2];
            const kodeMapel = mapelSelect.value;

            scanCooldown = true;
            setTimeout(() => {
                scanCooldown = false;
            }, 2000);

            scannerStatus.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Menyimpan data kehadiran...';
            scannerStatus.className = 'alert alert-warning text-center';

            fetch('proses_kehadiran.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `nis=${encodeURIComponent(nis)}&kode_mapel=${encodeURIComponent(kodeMapel)}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    resultContent.innerHTML = `
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>NIS:</strong> ${nis}</p>
                                <p><strong>Nama:</strong> ${nama}</p>
                                <p><strong>Kelas:</strong> ${kelas}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Mata Pelajaran:</strong> ${mapelSelect.options[mapelSelect.selectedIndex].text}</p>
                                <p><strong>Tanggal:</strong> ${data.tanggal}</p>
                                <p><strong>Jam:</strong> ${data.jam}</p>
                            </div>
                        </div>
                    `;
                    scanResult.style.display = 'block';
                    
                    if (isScannerActive) {
                        scannerStatus.innerHTML = '<i class="fas fa-camera me-2"></i>Scanner aktif - Arahkan kamera ke QR Code';
                        scannerStatus.className = 'alert alert-success text-center';
                    } else {
                        scannerStatus.innerHTML = '<i class="fas fa-keyboard me-2"></i>Mode Input Manual - Masukkan NIS siswa';
                        scannerStatus.className = 'alert alert-warning text-center';
                    }
                    
                    setTimeout(() => {
                        scanResult.style.display = 'none';
                    }, 5000);
                } else {
                    showAlert(data.message, 'warning');
                    if (isScannerActive) {
                        scannerStatus.innerHTML = '<i class="fas fa-camera me-2"></i>Scanner aktif - Arahkan kamera ke QR Code';
                        scannerStatus.className = 'alert alert-success text-center';
                    }
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('Terjadi kesalahan saat menyimpan data kehadiran', 'danger');
                if (isScannerActive) {
                    scannerStatus.innerHTML = '<i class="fas fa-camera me-2"></i>Scanner aktif - Arahkan kamera ke QR Code';
                    scannerStatus.className = 'alert alert-success text-center';
                }
            });
        }

        // Cleanup ketika halaman ditutup
        window.addEventListener('beforeunload', () => {
            if (isScannerActive) {
                stopScanner();
            }
        });

        // Inisialisasi saat halaman dimuat
        document.addEventListener('DOMContentLoaded', function() {
            // Deteksi perangkat dan tampilkan info yang sesuai
            if (isMobileDevice()) {
                mobileWarning.style.display = 'block';
                mobileCameraInfo.style.display = 'block';
                
                // Beri saran berdasarkan browser
                const browser = getBrowserInfo();
                if (browser === 'Safari' && !isHTTPS()) {
                    showAlert('Untuk Safari di iOS, gunakan Chrome atau akses via HTTPS untuk scanner kamera.', 'warning');
                }
            }
            
            if (!checkCameraSupport()) {
                startBtn.disabled = true;
            }
        });
    </script>
</body>
</html>