topRightOverlay.style.cssText = `
        position: absolute;
        top: 10px;
        right: 10px;
        width: 50px;
        height: 35px;
        background: rgba(0,0,0,0.8);
        z-index: 1000;
        pointer-events: none;
        border-radius: 4px;
    `;
    iframeContainer.appendChild(topRightOverlay);
    
    // Bottom left overlay to hide remaining branding
    const bottomLeftOverlay = document.createElement('div');
    bottomLeftOverlay.style.cssText = `
        position: absolute;
        bottom: 0;
        left: 0;
        width: 150px;
        height: 50px;
        background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, transparent 100%);
        z-index: 999;
        pointer-events: none;
        border-radius: 0 0 0 12px;
    `;
    iframeContainer.appendChild(bottomLeftOverlay);
}

function addBackToPlayerButton(iframeContainer, player, playerEl) {
    // Add a back button to return to custom player
    const backButton = document.createElement('div');
    backButton.style.cssText = `
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 8px 15px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        z-index: 1001;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 6px;
        backdrop-filter: blur(10px);
    `;
    backButton.innerHTML = `
        <i class="fas fa-arrow-left"></i>
        <span>Back to Player</span>
    `;
    
    // Add hover effect
    backButton.addEventListener('mouseenter', function() {
        this.style.background = 'rgba(0,0,0,0.95)';
        this.style.transform = 'scale(1.05)';
    });
    
    backButton.addEventListener('mouseleave', function() {
        this.style.background = 'rgba(0,0,0,0.8)';
        this.style.transform = 'scale(1)';
    });
    
    // Add click handler to go back to custom player
    backButton.addEventListener('click', function() {
        // Remove YouTube container
        iframeContainer.remove();
        
        // Show Video.js player again
        playerEl.style.display = 'block';
        
        // Reset player
        player.pause();
        player.currentTime(0);
    });
    
    iframeContainer.appendChild(backButton);
}

function extractYouTubeId(url) {
    const match = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/);
    return match ? match[1] : null;
}

function hideLoadingOverlay(loadingOverlay) {
    if (loadingOverlay) {
        loadingOverlay.style.display = 'none';
    }
}

function showErrorMessage(videoElement, loadingOverlay) {
    hideLoadingOverlay(loadingOverlay);
    
    const container = videoElement.parentElement;
    container.innerHTML = `
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f8f9fa; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #666;">
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-exclamation-triangle" style="font-size: 3rem; margin-bottom: 1rem; color: #ffc107;"></i>
                <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">Video Not Available</div>
                <div style="font-size: 0.9rem;">Please check back later or contact support.</div>
            </div>
        </div>
    `;
}

// Real-time Final Exam Approval Polling
let approvalPollingInterval = null;
let currentQuizId = 6;
let isPollingActive = false;

function startApprovalPolling() {
    }

function stopApprovalPolling() {
    if (approvalPollingInterval) {
        clearInterval(approvalPollingInterval);
        approvalPollingInterval = null;
        isPollingActive = false;
        console.log('Stopped final exam approval polling');
    }
}

function checkFinalExamApprovalStatus() {
    fetch(`/student/final-exam/status?quiz_id=${currentQuizId}`, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': 'aqs38uMia1QmsPuMDwGytemhFRnAYrIVMhhZNgZL'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.request) {
            if (data.request.status === 'approved') {
                // Approval detected! Update UI and stop polling
                console.log('Final exam approved! Updating UI...');
                stopApprovalPolling();
                handleFinalExamApproval();
            } else if (data.request.status === 'rejected') {
                // Request was rejected, stop polling
                console.log('Final exam request rejected');
                stopApprovalPolling();
                handleFinalExamRejection();
            }
        }
    })
    .catch(error => {
        console.error('Error checking final exam status:', error);
    });
}

function handleFinalExamApproval() {
    // Show success notification
    showNotification('🎉 Final Exam Approved!', 'Your final exam request has been approved. Starting exam...', 'success');
    
    // Update the UI by removing pending button and adding exam button
    updateExamButtons();
    
    // Auto-start the final exam after a short delay
    setTimeout(() => {
        window.location.href = `/student/quiz/${currentQuizId}/start?mode=exam`;
    }, 2000);
}

function handleFinalExamRejection() {
    // Show rejection notification
    showNotification('Final Exam Request Update', 'Your final exam request needs review. Please check the details.', 'warning');
    
    // Reload page to show updated status
    setTimeout(() => {
        window.location.reload();
    }, 3000);
}

function updateExamButtons() {
    // Find the pending button and replace with exam button
    const pendingButton = document.querySelector('.action-btn.final.pending');
    if (pendingButton) {
        pendingButton.outerHTML = `
            <button class="action-btn final" onclick="startFinalExam()">
                Start Final Exam
            </button>
        `;
    }
}

function startFinalExam() {
    window.location.href = `/student/quiz/${currentQuizId}/start?mode=exam`;
}

function showNotification(title, message, type = 'info') {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `quiz-notification quiz-notification-${type}`;
    notification.innerHTML = `
        <div class="notification-content">
            <h4>${title}</h4>
            <p>${message}</p>
        </div>
        <button class="notification-close" onclick="this.parentElement.remove()">&times;</button>
    `;
    
    // Add styles if not already present
    if (!document.getElementById('notification-styles')) {
        const styles = document.createElement('style');
        styles.id = 'notification-styles';
        styles.textContent = `
            .quiz-notification {
                position: fixed;
                top: 20px;
                right: 20px;
                background: white;
                border-radius: 12px;
                padding: 16px;
                box-shadow: 0 8px 32px rgba(0,0,0,0.15);
                z-index: 10000;
                max-width: 350px;
                border-left: 4px solid #007bff;
            }
            .quiz-notification-success { border-left-color: #28a745; }
            .quiz-notification-warning { border-left-color: #ffc107; }
            .quiz-notification-error { border-left-color: #dc3545; }
            .notification-content h4 { margin: 0 0 8px 0; font-size: 16px; }
            .notification-content p { margin: 0; font-size: 14px; color: #666; }
            .notification-close {
                position: absolute;
                top: 8px;
                right: 12px;
                background: none;
                border: none;
                font-size: 20px;
                cursor: pointer;
                color: #999;
            }
        `;
        document.head.appendChild(styles);
    }
    
    // Add to page
    document.body.appendChild(notification);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (notification.parentElement) {
            notification.remove();
        }
    }, 5000);
}

// Start polling when page loads
document.addEventListener('DOMContentLoaded', function() {
    startApprovalPolling();
    
    // Stop polling when user leaves page
    window.addEventListener('beforeunload', stopApprovalPolling);
    
    // Stop polling when page becomes hidden
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            stopApprovalPolling();
        } else {
            startApprovalPolling();
        }
    });
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="aqs38uMia1QmsPuMDwGytemhFRnAYrIVMhhZNgZL">

    <title>Computer Expert - Quiz Details - DITRP</title>
    <meta name="description" content="Master competitive exams with DITRP's comprehensive quiz platform. Expert guidance for UPSC, SSC, Banking, Railway exams and more.">

    <!-- PWA Meta Tags -->
    <link rel="manifest" href="https://ditrpcontest.in/manifest.json">
    <meta name="theme-color" content="#4f46e5">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="QuizMaster">
    <link rel="apple-touch-icon" href="https://ditrpcontest.in/pwa-icons/icon-192x192.png">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
.quiz-details-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px 0;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
}

.quiz-badges .badge {
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
}

.meta-item {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.9);
}

.quiz-action-card {
    position: sticky;
    top: 20px;
}

.quiz-placeholder {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
}

.section-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border: 1px solid #eee;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
}

.info-item h6 {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.prize-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px solid #eee;
    transition: all 0.3s ease;
}

.prize-card:hover {
    border-color: #007bff;
    transform: translateY(-2px);
}

.prize-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.prize-amount {
    font-size: 1.1rem;
    font-weight: 600;
    color: #007bff;
    margin-bottom: 0;
}

.material-item {
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.material-item:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.sidebar-card {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border: 1px solid #eee;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    color: #666;
    font-weight: 500;
}

.stat-value {
    font-weight: 600;
    color: #333;
}

.related-quiz-item {
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.related-quiz-item:last-child {
    border-bottom: none;
}

.quiz-name a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.quiz-name a:hover {
    color: #007bff;
}

.quiz-meta {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb {
    background: transparent;
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: white;
}

.breadcrumb-item.active {
    color: rgba(255,255,255,0.9);
}

/* Plyr CSS */
@import  url('https://cdn.plyr.io/3.7.8/plyr.css');

/* Custom video player styling */
.video-container {
    position: relative;
    overflow: hidden;
}

/* Plyr Video Player Custom Styling */
.plyr-video-player {
    border-radius: 12px;
    overflow: hidden;
}

.plyr--youtube .plyr__video-embed {
    border-radius: 12px;
}

/* Custom Plyr Controls */
.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
    background: #007bff;
}

.plyr__control--overlaid {
    background: rgba(255,255,255,0.9);
    color: #333;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.plyr__control--overlaid:hover {
    background: rgba(255,255,255,1);
    transform: scale(1.1);
}

.plyr--video .plyr__progress__played {
    background-color: #007bff;
}

.plyr--video .plyr__volume--display {
    background: #007bff;
}

/* Hide Plyr branding */
.plyr__poster {
    border-radius: 12px;
}

/* AGGRESSIVE YouTube branding blocking */
.plyr--youtube .plyr__video-embed {
    position: relative;
    overflow: hidden;
}

/* Block ALL iframe interactions except video playback */
.plyr--youtube iframe {
    pointer-events: none !important;
}

/* Ensure Plyr controls remain functional */
.plyr--youtube .plyr__controls,
.plyr--youtube .plyr__control,
.plyr--youtube .plyr__progress,
.plyr--youtube .plyr__volume {
    pointer-events: auto !important;
    z-index: 999 !important;
}

/* Multiple overlay approach to block YouTube branding */
.plyr--youtube .plyr__video-embed::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 35px;
    background: rgba(0, 0, 0, 0.01);
    z-index: 100;
    pointer-events: auto;
}

.plyr--youtube .plyr__video-embed::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 50;
    pointer-events: none;
}

/* Block YouTube title/channel overlay */
.plyr--youtube .plyr__video-embed .youtube-branding-blocker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: transparent;
    z-index: 101;
    pointer-events: auto;
}

/* Block bottom-right YouTube logo area */
.plyr--youtube .plyr__video-embed .youtube-logo-blocker {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 90px;
    height: 30px;
    background: rgba(0, 0, 0, 0.01);
    z-index: 102;
    pointer-events: auto;
}

/* Responsive design */
.plyr {
    border-radius: 12px;
}

.plyr iframe {
    border-radius: 12px;
}

/* Payment Modal Styles */
.payment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.payment-modal-content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes  modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.payment-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.payment-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.payment-modal-body {
    padding: 25px;
}

.price-display {
    text-align: center;
    margin-bottom: 25px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: #28a745;
    margin-bottom: 5px;
}

.price-label {
    color: #6c757d;
    font-size: 0.9rem;
}

.payment-methods {
    margin-bottom: 20px;
}

.payment-method-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-method-option:hover {
    border-color: #007bff;
    background: #f8f9ff;
}

.payment-method-option.selected {
    border-color: #007bff;
    background: #f8f9ff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.payment-method-option input[type="radio"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    accent-color: #007bff;
}

.payment-method-info {
    flex: 1;
}

.payment-method-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.payment-method-desc {
    font-size: 0.85rem;
    color: #6c757d;
}

.payment-method-icon {
    font-size: 1.5rem;
    margin-right: 10px;
    width: 30px;
    text-align: center;
}

.wallet-balance {
    background: #e8f5e8;
    border: 1px solid #c3e6c3;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 20px;
}

.balance-info {
    display: flex;
    align-items: center;
    color: #155724;
    font-weight: 500;
    font-size: 0.9rem;
}

.balance-info i {
    margin-right: 8px;
    color: #28a745;
}

.payment-modal-footer {
    padding: 20px 25px;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 10px;
}

.btn-cancel {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid #6c757d;
    background: transparent;
    color: #6c757d;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: #6c757d;
    color: white;
}

.btn-pay {
    flex: 2;
    padding: 12px 20px;
    border: none;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}

.btn-pay:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.loading-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes  spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #333;
    font-weight: 500;
}
</style>
    
    <style>
        :root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --font-family: 'Inter', sans-serif;
        }
        
        body {
            font-family: var(--font-family);
            line-height: 1.6;
            color: #212529;
            background-color: #ffffff;
            margin: 0;
            padding: 0;
        }
        
        /* Header Top */
        .header-top {
            background: var(--light-color);
            border-bottom: 1px solid #e9ecef;
            padding: 8px 0;
            font-size: 14px;
            margin-top: 0;
        }
        
        .header-top .contact-info a {
            color: var(--secondary-color);
            text-decoration: none;
            margin-right: 1.5rem;
        }
        
        .header-top .contact-info a:hover {
            color: var(--primary-color);
        }
        
        .header-top .auth-links a {
            color: var(--secondary-color);
            text-decoration: none;
            margin-left: 1rem;
            font-weight: 500;
        }
        
        .header-top .auth-links a:hover {
            color: var(--primary-color);
        }
        
        /* Main Navigation */
        .main-navbar {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        /* PWA Install Button */
        .pwa-install-btn {
            border: 1px solid #28a745;
            color: #28a745;
            background: transparent;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
            border-radius: 0.375rem;
        }
        
        .pwa-install-btn:hover {
            background: #28a745;
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
        }
        
        @media (max-width: 768px) {
            .pwa-install-btn {
                padding: 0.25rem 0.5rem;
                font-size: 0.8rem;
            }
            
            .pwa-install-btn .d-none.d-md-inline {
                display: none !important;
            }
        }
        
        .pwa-install-btn:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }
        
        .pwa-install-btn:hover:before {
            width: 100px;
            height: 100px;
        }
        
        .pwa-install-container {
            animation: fadeInRight 0.5s ease-out;
        }
        
        @keyframes  fadeInRight {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .navbar-brand {
            font-weight: 800;
            font-size: 1.5rem;
            color: var(--primary-color) !important;
        }
        
        .navbar-logo {
            height: 45px;
            width: auto;
            max-width: 150px;
            object-fit: contain;
        }
        
        .brand-text {
            font-weight: 800;
            font-size: 1.5rem;
            color: var(--primary-color);
        }
        
        .navbar-nav .nav-link {
            font-weight: 500;
            color: var(--dark-color) !important;
            padding: 0.75rem 1rem !important;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .navbar-nav .nav-link:hover {
            color: var(--primary-color) !important;
        }
        
        .navbar-nav .nav-link.active {
            color: var(--primary-color) !important;
        }
        
        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .navbar-nav .nav-link:hover::after,
        .navbar-nav .nav-link.active::after {
            width: 80%;
        }
        
        .dropdown-menu {
            border: none;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 1rem 0;
            margin-top: 0.5rem;
        }
        
        .dropdown-item {
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            color: var(--dark-color);
            transition: all 0.3s ease;
        }
        
        .dropdown-item:hover {
            background: var(--light-color);
            color: var(--primary-color);
            transform: translateX(5px);
        }
        
        .dropdown-divider {
            margin: 0.5rem 1rem;
        }
        
        /* Content Wrapper */
        .content-wrapper {
            min-height: calc(100vh - 200px);
        }
        
        /* Footer */
        .footer {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 3rem 0 1rem;
            margin-top: auto;
        }
        
        .footer h5 {
            color: #ecf0f1;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }
        
        .footer a {
            color: #bdc3c7;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer a:hover {
            color: white;
        }
        
        .footer .list-unstyled li {
            margin-bottom: 0.5rem;
        }
        
        .footer .social-links a {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            margin-right: 0.5rem;
            transition: all 0.3s ease;
        }
        
        .footer .social-links a:hover {
            background: var(--primary-color);
            transform: translateY(-2px);
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 1.5rem;
            margin-top: 2rem;
        }
        
        /* Responsive */
        @media (max-width: 991px) {
            .navbar-nav .nav-link::after {
                display: none;
            }
            
            .dropdown-menu {
                border: 1px solid #e9ecef;
                margin-top: 0;
            }
        }
        
        @media (max-width: 768px) {
            .header-top {
                display: none;
            }
            
            .main-navbar {
                padding: 0.5rem 0;
            }
            
            .navbar-brand {
                font-size: 1.25rem;
            }
        }
    </style>
</head>

<body>
    <!-- Header Top -->
    <div class="header-top d-none d-md-block">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="contact-info">
                        <a href="tel:+919876543210">
                            <i class="fas fa-phone me-1"></i> +91 7620 052 713
                        </a>
                        <a href="mailto:ditrpindia@gmail.com">
                            <i class="fas fa-envelope me-1"></i> ditrpindia@gmail.com
                        </a>
                    </div>
                </div>
                <div class="col-md-6 text-end">
                    <div class="auth-links">
                                                    <a href="https://ditrpcontest.in/login">
                                <i class="fas fa-sign-in-alt me-1"></i> Login
                            </a>
                            <a href="https://ditrpcontest.in/register">
                                <i class="fas fa-user-plus me-1"></i> Register
                            </a>
                                            </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Navbar -->
    <nav class="navbar navbar-expand-lg main-navbar">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="https://ditrpcontest.in">
                <img src="https://ditrpcontest.in/logo.png" 
                     class="navbar-logo me-2" 
                     onerror="this.style.display='none';">

            </a>
            
            <button class="navbar-toggler border-0" 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 me-auto">
                    <li class="nav-item">
                        <a class="nav-link " href="https://ditrpcontest.in">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="https://ditrpcontest.in/about-us">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="https://ditrpcontest.in/contact">Contact</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle active" href="#" id="quizDropdown" role="button" data-bs-toggle="dropdown">
                            Quiz Contest
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="https://ditrpcontest.in/quiz-categories">All Categories</a></li>
                                                            <li><hr class="dropdown-divider"></li>
                                                                                                                                        <li><a class="dropdown-item" href="https://ditrpcontest.in/quiz-category/15-aug-contest">
                                        <i class="fas fa-book text-secondary me-2"></i>15-AUG-CONTEST
                                    </a></li>
                                                                                                        <li><a class="dropdown-item" href="https://ditrpcontest.in/quiz-category/banking">
                                        <i class="fas fa-piggy-bank text-info me-2"></i>BANKING
                                    </a></li>
                                                                                                        <li><a class="dropdown-item" href="https://ditrpcontest.in/quiz-category/railway">
                                        <i class="fas fa-train text-warning me-2"></i>RAILWAY
                                    </a></li>
                                                                                                        <li><a class="dropdown-item" href="https://ditrpcontest.in/quiz-category/upsc">
                                        <i class="fas fa-university text-primary me-2"></i>UPSC
                                    </a></li>
                                                                                    </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="https://ditrpcontest.in/student-verification">Student Verification</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="https://ditrpcontest.in/results">Results Section</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="https://ditrpcontest.in/our-services">Our Services</a>
                    </li>
                </ul>
                
                <div class="d-flex align-items-center">
                    <!-- PWA Install Button -->
                    <div class="pwa-install-container me-3" id="pwaInstallContainer" style="display: none;">
                        <button class="btn btn-outline-success btn-sm pwa-install-btn d-flex align-items-center" id="pwaInstallBtn" title="Install QuizMaster App">
                            <i class="fas fa-download me-1"></i>
                            <span class="d-none d-md-inline">Install App</span>
                            <span class="d-md-none">App</span>
                        </button>
                    </div>
                    
                                    </div>
            </div>
        </div>
    </nav>
    
    <!-- Content -->
    <div class="content-wrapper">
        <!-- Quiz Details Hero Section -->
<div class="quiz-details-hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="hero-content">
                    <nav aria-label="breadcrumb" class="mb-3">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="https://ditrpcontest.in">Home</a></li>
                            <li class="breadcrumb-item"><a href="https://ditrpcontest.in/quiz-categories">Quiz Categories</a></li>
                                                            <li class="breadcrumb-item"><a href="https://ditrpcontest.in/quiz-category/15-aug-contest">15-aug-contest</a></li>
                                                        <li class="breadcrumb-item active" aria-current="page">Computer Expert</li>
                        </ol>
                    </nav>
                    
                    <div class="quiz-badges mb-3">
                                                    <span class="badge bg-primary me-2">15-AUG-CONTEST</span>
                                                                            <span class="badge bg-warning text-dark me-2">🔥 Popular</span>
                                                                            <span class="badge bg-success me-2">⭐ Recommended</span>
                                                                            <span class="badge bg-info">🏆 Certificate Available</span>
                                            </div>
                    
                    <h1 class="hero-title mb-3">Computer Expert</h1>
                    <p class="hero-description mb-4">Computer Expert</p>
                    
                    <div class="quiz-meta-info mb-4">
                        <div class="row">
                            <div class="col-md-3 col-6 mb-2">
                                <div class="meta-item">
                                    <i class="fas fa-clock text-primary me-2"></i>
                                    <span>60 minutes</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-2">
                                <div class="meta-item">
                                    <i class="fas fa-question-circle text-info me-2"></i>
                                    <span>20 questions</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-2">
                                <div class="meta-item">
                                    <i class="fas fa-users text-success me-2"></i>
                                    <span>100 participants</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-2">
                                <div class="meta-item">
                                                                            <i class="fas fa-tag text-warning me-2"></i>
                                        <span>₹100</span>
                                                                    </div>
                            </div>
                        </div>
                    </div>
                    
                                            <div class="quiz-rating mb-4">
                            <div class="stars">
                                                                                                            <i class="fas fa-star text-warning"></i>
                                                                                                                                                <i class="fas fa-star text-warning"></i>
                                                                                                                                                <i class="fas fa-star text-warning"></i>
                                                                                                                                                <i class="fas fa-star text-warning"></i>
                                                                                                                                                <i class="fas fa-star text-warning"></i>
                                                                                                    <span class="ms-2">5.0/5 (100 reviews)</span>
                            </div>
                        </div>
                                    </div>
            </div>
            
            <div class="col-lg-4">
                <div class="quiz-action-card">
                    <div class="card shadow-lg">
                        <div class="card-body text-center p-4">
                                                            <img src="https://ditrpcontest.in/storage/thumbnails/QAQO8fTIHoVvinVnIIf1SCm3d79QQeWMADmWuXso.png" 
                                     alt="Computer Expert" 
                                     class="img-fluid rounded mb-3" 
                                     style="max-height: 200px; object-fit: cover;"
                                     onerror="this.src='https://ditrpcontest.in/storage/defaults/quiz-15-aug-contest.jpg'; this.onerror=null; if(this.src.includes('quiz-default.jpg')){this.src='https://via.placeholder.com/400x250/667eea/fff?text=Computer+Expert'}">
                                                        
                            <h4 class="card-title">Computer Expert</h4>
                            
                                                            <div class="price-section mb-3">
                                    <h2 class="text-primary mb-0">₹100</h2>
                                    <small class="text-muted">One-time payment</small>
                                </div>
                                                        
                                                            <a href="https://ditrpcontest.in/login" class="btn btn-primary btn-lg w-100 mb-2">
                                    <i class="fas fa-sign-in-alt me-2"></i>Login to Start
                                </a>
                                <div class="text-center mt-2">
                                    <p class="text-muted small mb-2">Don't have an account?</p>
                                    <a href="https://ditrpcontest.in/register" class="btn btn-outline-success">
                                        <i class="fas fa-user-plus me-2"></i>Register Now
                                    </a>
                                </div>
                                                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quiz Details Content -->
<div class="quiz-details-content py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <!-- Quiz Overview -->
                <div class="section-card mb-4">
                    <h3 class="section-title">
                        <i class="fas fa-info-circle text-primary me-2"></i>Quiz Overview
                    </h3>
                    <div class="quiz-info-grid">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="info-item">
                                    <h6>Contest Code: <span class="text-muted">Contest001</span></h6>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="info-item">
                                    <h6>Contest Category: <span class="text-muted">15-aug-contest</span></h6>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="info-item">
                                    <h6>Duration</h6>
                                    <p class="text-muted">60 minutes</p>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="info-item">
                                    <h6>Questions per Exam</h6>
                                    <p class="text-muted">
                                        20
                                                                                    <small class="text-info">(randomly selected from 111 questions)</small>
                                                                            </p>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="info-item">
                                    <h6>Maximum Participants</h6>
                                    <p class="text-muted">100</p>
                                </div>
                            </div>
                                                            <div class="col-md-6 mb-3">
                                    <div class="info-item">
                                        <h6>Start Date</h6>
                                        <p class="text-muted">01 Aug 2025, 19:11 PM</p>
                                    </div>
                                </div>
                                                                                        <div class="col-md-6 mb-3">
                                    <div class="info-item">
                                        <h6>End Date</h6>
                                        <p class="text-muted">31 Aug 2025, 19:12 PM</p>
                                    </div>
                                </div>
                                                    </div>
                    </div>
                </div>

                <!-- Description -->
                                    <div class="section-card mb-4">
                        <h3 class="section-title">
                            <i class="fas fa-file-text text-info me-2"></i>Description
                        </h3>
                        <div class="description-content">
                            <div class="text-muted">Computer Expert</div>
                        </div>
                    </div>
                
                <!-- Eligibility Criteria -->
                                    <div class="section-card mb-4">
                        <h3 class="section-title">
                            <i class="fas fa-check-circle text-success me-2"></i>Eligibility
                        </h3>
                        <div class="eligibility-content">
                            <div class="text-muted">Computer Expert 2025</div>
                        </div>
                    </div>
                
                <!-- Prize Information -->
                                    <div class="section-card mb-4">
                        <h3 class="section-title">
                            <i class="fas fa-trophy text-warning me-2"></i>Prize Distribution
                        </h3>
                        <div class="prizes-grid">
                            <div class="row">
                                                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="prize-card text-center">
                                            <div class="prize-icon">🥇</div>
                                            <h6>1st Prize</h6>
                                            <p class="prize-amount">₹1,000</p>
                                        </div>
                                    </div>
                                                                                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="prize-card text-center">
                                            <div class="prize-icon">🥈</div>
                                            <h6>2nd Prize</h6>
                                            <p class="prize-amount">₹80</p>
                                        </div>
                                    </div>
                                                                                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="prize-card text-center">
                                            <div class="prize-icon">🥉</div>
                                            <h6>3rd Prize</h6>
                                            <p class="prize-amount">₹70</p>
                                        </div>
                                    </div>
                                                                                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="prize-card text-center">
                                            <div class="prize-icon">🏆</div>
                                            <h6>4th Prize</h6>
                                            <p class="prize-amount">₹60</p>
                                        </div>
                                    </div>
                                                            </div>
                        </div>
                    </div>
                
                <!-- Study Materials -->
                                    <div class="section-card mb-4">
                        <h3 class="section-title">
                            <i class="fas fa-book text-info me-2"></i>Study Materials
                        </h3>
                        <div class="study-materials-list">
                                                            <div class="material-item">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-file-pdf text-danger me-3"></i>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1">FREE</h6>
                                                                                            <p class="text-muted small mb-0">DSZDFSDF SDFSDFSDFSD</p>
                                                                                        <small class="text-muted">6.83 MB</small>
                                        </div>
                                        <a href="https://ditrpcontest.in/student/study-materials/download/5" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-download me-1"></i>Download
                                        </a>
                                    </div>
                                </div>
                                                    </div>
                    </div>
                
                <!-- Video Tutorial -->
                                    <div class="section-card mb-4">
                        <h3 class="section-title">
                            <i class="fas fa-play-circle text-danger me-2"></i>Video Tutorial
                        </h3>
                        <div class="video-container">
                            <div class="row">
                                <div class="col-md-8">
                                    <div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                                        
                                        <!-- Plyr Video Player - No Patches or Overlays -->
                                        <div id="plyr-player-6" class="plyr-video-player" data-youtube-id="KbjpvUUvBUE" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; overflow: hidden;">
                                            <!-- Plyr player will be initialized here -->
                                        </div>
                                        
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>Video Tutorial Available!</strong>
                                    </div>
                                    <h6><i class="fas fa-lightbulb text-warning me-2"></i>Learning Resource</h6>
                                    <p class="text-muted small">Watch this tutorial video to better understand the concepts covered in this quiz. The video provides additional context and explanations to help you prepare.</p>
                                    <ul class="list-unstyled small">
                                        <li><i class="fas fa-check text-success me-2"></i>Comprehensive explanations</li>
                                        <li><i class="fas fa-check text-success me-2"></i>Visual learning support</li>
                                        <li><i class="fas fa-check text-success me-2"></i>Fullscreen viewing available</li>
                                        <li><i class="fas fa-check text-success me-2"></i>No YouTube distractions</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                
                <!-- Certificate Information -->
                                    <div class="section-card mb-4">
                        <h3 class="section-title">
                            <i class="fas fa-certificate text-success me-2"></i>Certificate Sample
                        </h3>
                        <div class="certificate-info">
                            <div class="row">
                                <div class="col-md-8">
                                                                            <div class="certificate-preview-container" style="background: #f8f9fa; border: 2px solid #28a745; border-radius: 8px; padding: 20px; text-align: center;">
                                            <img src="https://ditrpcontest.in/storage/certificates/mIDu2jQivKxz3AnTQ8aZguvQqyBlc4r0WfX1ig3B.jpg" alt="Certificate Sample" style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.15);">
                                            <div class="mt-3">
                                                <a href="https://ditrpcontest.in/storage/certificates/mIDu2jQivKxz3AnTQ8aZguvQqyBlc4r0WfX1ig3B.jpg" class="btn btn-outline-primary me-2" target="_blank">
                                                    <i class="fas fa-eye me-1"></i>View Full Size
                                                </a>
                                                <a href="https://ditrpcontest.in/storage/certificates/mIDu2jQivKxz3AnTQ8aZguvQqyBlc4r0WfX1ig3B.jpg" class="btn btn-outline-success" download>
                                                    <i class="fas fa-download me-1"></i>Download Sample
                                                </a>
                                            </div>
                                        </div>
                                                                    </div>
                                <div class="col-md-4">
                                    <div class="alert alert-success">
                                        <i class="fas fa-check-circle me-2"></i>
                                        <strong>Certificate Available!</strong>
                                    </div>
                                    <h6><i class="fas fa-info-circle text-info me-2"></i>Certificate Information</h6>
                                    <ul class="list-unstyled">
                                        <li><i class="fas fa-percentage text-info me-2"></i>Minimum score: 60%</li>
                                        <li><i class="fas fa-download text-primary me-2"></i>PDF format</li>
                                        <li><i class="fas fa-clock text-warning me-2"></i>Issued instantly</li>
                                        <li><i class="fas fa-certificate text-success me-2"></i>Digitally signed</li>
                                    </ul>
                                                                        <h6 class="mt-3">Certificate Text:</h6>
                                    <p class="text-muted small">This is to certify that {name} has successfully completed the {quiz} with a score of {score}%.</p>
                                                                    </div>
                            </div>
                        </div>
                    </div>
                            </div>

            <div class="col-lg-4">
                <!-- Quick Stats -->
                <div class="sidebar-card mb-4">
                    <h5 class="card-title">
                        <i class="fas fa-chart-bar text-primary me-2"></i>Quick Stats
                    </h5>
                    <div class="stats-list">
                        <div class="stat-item">
                            <span class="stat-label">Total Participants</span>
                            <span class="stat-value">14</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">Average Score</span>
                            <span class="stat-value">
                                                                    0.0%
                                                            </span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">Pass Rate</span>
                            <span class="stat-value">
                                                                    0.0%
                                                            </span>
                        </div>
                    </div>
                </div>

                <!-- Related Quizzes -->
                                
                                    <div class="sidebar-card">
                        <h5 class="card-title">
                            <i class="fas fa-list text-info me-2"></i>Related Quizzes
                        </h5>
                        <div class="related-quizzes-list">
                                                            <div class="related-quiz-item">
                                    <h6 class="quiz-name">
                                        <a href="https://ditrpcontest.in/quiz-details/2">
                                            All Day Contest
                                        </a>
                                    </h6>
                                    <div class="quiz-meta">
                                        <span class="badge bg-secondary">15-aug-contest</span>
                                                                                    <span class="text-primary">₹1,000</span>
                                                                            </div>
                                </div>
                                                    </div>
                    </div>
                            </div>
        </div>
    </div>
</div>

<!-- Payment Modal -->
<div id="paymentModal" class="payment-modal" style="display: none;">
    <div class="payment-modal-content">
        <div class="payment-modal-header">
            <h3 id="modal-quiz-title">Quiz Purchase</h3>
            <button class="payment-modal-close" onclick="closePaymentModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="payment-modal-body">
            <div class="price-display">
                <div class="price-amount">₹<span id="modal-price">0</span></div>
                <div class="price-label">One-time payment</div>
            </div>
            
            <div class="payment-methods" id="payment-methods">
                <!-- Payment methods will be populated by JavaScript -->
            </div>
            
            <div class="wallet-balance" id="wallet-balance" style="display: none;">
                <div class="balance-info">
                    <i class="fas fa-wallet"></i>
                    <span>Wallet Balance: ₹<span id="user-balance">0</span></span>
                </div>
            </div>
        </div>
        
        <div class="payment-modal-footer">
            <button class="btn-cancel" onclick="closePaymentModal()">Cancel</button>
            <button class="btn-pay" id="pay-button" onclick="processPayment()">Pay Now</button>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay" style="display: none;">
    <div class="loading-content">
        <div class="loading-spinner"></div>
        <div class="loading-text">Processing Payment...</div>
    </div>
</div>

    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 mb-4">
                    <h5>DITRP</h5>
                    <p class="mb-3">Digital Information Technology & Research for Professionals. Building the skills to drive your career forward through comprehensive learning solutions.</p>
                    <div class="social-links">
                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>Quick Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="https://ditrpcontest.in">Home</a></li>
                        <li><a href="https://ditrpcontest.in/about-us">About Us</a></li>
                        <li><a href="https://ditrpcontest.in/quiz-categories">Quiz Categories</a></li>
                        <li><a href="https://ditrpcontest.in/our-services">Our Services</a></li>
                        <li><a href="https://ditrpcontest.in/contact">Contact</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>Categories</h5>
                    <ul class="list-unstyled">
                                                                                    <li><a href="https://ditrpcontest.in/quiz-category/15-aug-contest">15-AUG-CONTEST</a></li>
                                                            <li><a href="https://ditrpcontest.in/quiz-category/banking">BANKING</a></li>
                                                            <li><a href="https://ditrpcontest.in/quiz-category/railway">RAILWAY</a></li>
                                                            <li><a href="https://ditrpcontest.in/quiz-category/upsc">UPSC</a></li>
                                                                        </ul>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <h5>Contact Info</h5>
                    <div class="mb-2">
                        <i class="fas fa-map-marker-alt me-2"></i>
                        Room No 109, New Rushikesh Apartment<br>
                        <span class="ms-3">Near Cricket Ground, Virat Nagar</span><br>
                        <span class="ms-3">Virar West, Palghar, Mumbai - 401303</span><br>
                        <span class="ms-3">Maharashtra, India</span>
                    </div>
                    <div class="mb-2">
                        <i class="fas fa-phone me-2"></i>
                        <a href="tel:+919876543210">+91 7620 052 713</a>
                    </div>
                    <div class="mb-2">
                        <i class="fas fa-envelope me-2"></i>
                        <a href="mailto:ditrpindia@gmail.com">ditrpindia@gmail.com</a>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <p class="mb-0">&copy; 2025 DITRP OPC PVT LTD. All rights reserved.</p>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <a href="https://ditrpcontest.in/privacy-policy" class="me-3">Privacy Policy</a>
                        <a href="https://ditrpcontest.in/terms-and-conditions" class="me-3">Terms & Conditions</a>
                        <a href="https://ditrpcontest.in/refund-policy">Refund Policy</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    
    <!-- Plyr JavaScript -->
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>

<script>
// Clean Plyr Video Player - No Overlays or Patches
document.addEventListener('DOMContentLoaded', function() {
    // Initialize all Plyr video players
    const plyrPlayers = document.querySelectorAll('.plyr-video-player');
    
    if (plyrPlayers.length === 0) {
        console.log('No video players found on page, skipping video initialization');
        return;
    }
    
    plyrPlayers.forEach(function(playerElement) {
        initializePlyrPlayer(playerElement);
    });
});

function initializePlyrPlayer(playerElement) {
    const youtubeId = playerElement.getAttribute('data-youtube-id');
    if (!youtubeId || youtubeId.trim() === '') {
        console.log('No YouTube ID provided for player, skipping initialization');
        return;
    }
    
    // Create video element for Plyr
    const videoElement = document.createElement('div');
    videoElement.setAttribute('data-plyr-provider', 'youtube');
    videoElement.setAttribute('data-plyr-embed-id', youtubeId);
    
    // Add video element to container
    playerElement.appendChild(videoElement);
    
    // Initialize Plyr with complete YouTube branding suppression
    const player = new Plyr(videoElement, {
        youtube: {
            noCookie: true,        // Use youtube-nocookie.com for privacy
            modestbranding: 1,     // Minimize YouTube branding
            rel: 0,                // No related videos at end
            showinfo: 0,           // Hide video information
            iv_load_policy: 3,     // Hide video annotations
            cc_load_policy: 0,     // Hide closed captions by default
            fs: 0,                 // Disable fullscreen button to prevent YouTube redirect
            disablekb: 1,          // Disable keyboard shortcuts that show YouTube controls
            enablejsapi: 0,        // Disable JavaScript API
            autohide: 1,           // Auto-hide controls
            playsinline: 1,        // Play inline on mobile
            origin: window.location.origin  // Security origin
        },
        controls: [
            'play-large', 
            'play', 
            'progress', 
            'current-time', 
            'duration', 
            'mute', 
            'volume', 
            'settings', 
            'fullscreen'
        ],
        settings: ['quality', 'speed'],
        quality: {
            default: 720,
            options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
        },
        speed: {
            selected: 1,
            options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
        },
        ratio: '16:9',
        fullscreen: {
            enabled: true,
            fallback: true,
            iosNative: true
        },
        keyboard: {
            focused: true,
            global: false
        }
    });
    
    // Add event listeners for better user experience
    player.on('ready', function() {
        console.log('Plyr player ready for YouTube video:', youtubeId);
        
        // AGGRESSIVE YouTube branding blocking
        setTimeout(function() {
            const iframe = playerElement.querySelector('iframe');
            const videoEmbed = playerElement.querySelector('.plyr__video-embed');
            
            if (iframe && videoEmbed) {
                // Create blocking overlays
                createBrandingBlockers(videoEmbed);
                
                // Block all iframe interactions
                iframe.style.pointerEvents = 'none';
                iframe.addEventListener('contextmenu', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                });
                
                // Capture and block all click events on video area
                videoEmbed.addEventListener('click', function(e) {
                    // Only allow clicks on Plyr controls
                    if (!e.target.closest('.plyr__controls')) {
                        e.preventDefault();
                        e.stopPropagation();
                        e.stopImmediatePropagation();
                        return false;
                    }
                }, true);
                
                // Monitor for YouTube branding and block it
                monitorAndBlockBranding(videoEmbed);
            }
        }, 1000);
    });
    
    player.on('error', function(event) {
        console.error('Plyr player error:', event.detail);
        showErrorMessage(playerElement);
    });
}

function showErrorMessage(playerElement) {
    playerElement.innerHTML = `
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f8f9fa; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #666;">
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-exclamation-triangle" style="font-size: 3rem; margin-bottom: 1rem; color: #ffc107;"></i>
                <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">Video Not Available</div>
                <div style="font-size: 0.9rem;">Please check back later or contact support.</div>
            </div>
        </div>
    `;
}

function createBrandingBlockers(videoEmbed) {
    // Remove any existing blockers first
    const existingBlockers = videoEmbed.querySelectorAll('.youtube-branding-blocker, .youtube-logo-blocker');
    existingBlockers.forEach(blocker => blocker.remove());
    
    // Create title/channel area blocker
    const titleBlocker = document.createElement('div');
    titleBlocker.className = 'youtube-branding-blocker';
    titleBlocker.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: transparent;
        z-index: 101;
        pointer-events: auto;
        cursor: default;
    `;
    titleBlocker.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        return false;
    }, true);
    
    // Create logo area blocker
    const logoBlocker = document.createElement('div');
    logoBlocker.className = 'youtube-logo-blocker';
    logoBlocker.style.cssText = `
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 90px;
        height: 30px;
        background: transparent;
        z-index: 102;
        pointer-events: auto;
        cursor: default;
    `;
    logoBlocker.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        return false;
    }, true);
    
    // Create full overlay for pause state
    const pauseBlocker = document.createElement('div');
    pauseBlocker.className = 'youtube-pause-blocker';
    pauseBlocker.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 99;
        pointer-events: none;
        display: none;
    `;
    
    videoEmbed.appendChild(titleBlocker);
    videoEmbed.appendChild(logoBlocker);
    videoEmbed.appendChild(pauseBlocker);
}

function monitorAndBlockBranding(videoEmbed) {
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // Re-apply blocking if DOM changes
            setTimeout(function() {
                const iframe = videoEmbed.querySelector('iframe');
                if (iframe) {
                    iframe.style.pointerEvents = 'none';
                }
                
                // Ensure blockers are still in place
                if (!videoEmbed.querySelector('.youtube-branding-blocker')) {
                    createBrandingBlockers(videoEmbed);
                }
            }, 100);
        });
    });
    
    observer.observe(videoEmbed, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['style']
    });
    
    // Continuous monitoring
    setInterval(function() {
        const iframe = videoEmbed.querySelector('iframe');
        if (iframe && iframe.style.pointerEvents !== 'none') {
            iframe.style.pointerEvents = 'none';
        }
    }, 1000);
}

// Payment Modal Functions
let currentQuizData = {};
let selectedPaymentMethod = '';

// Show payment modal
function showPaymentModal(quizId, quizName, price, paymentMethods) {
    currentQuizData = {
        id: quizId,
        name: quizName,
        price: price,
        payment_methods: paymentMethods
    };
    
    document.getElementById('modal-quiz-title').textContent = quizName;
    document.getElementById('modal-price').textContent = parseFloat(price).toFixed(0);
    
    // Setup payment methods based on admin configuration
    setupPaymentMethods(paymentMethods);
    
    // Get user's wallet balance if wallet is available
    if (paymentMethods === 'wallet' || paymentMethods === 'both') {
        fetchWalletBalance();
    }
    
    document.getElementById('paymentModal').style.display = 'flex';
    document.body.style.overflow = 'hidden'; // Prevent background scrolling
}

// Close payment modal
function closePaymentModal() {
    document.getElementById('paymentModal').style.display = 'none';
    document.body.style.overflow = 'auto';
    selectedPaymentMethod = '';
}

// Setup payment methods based on admin configuration
function setupPaymentMethods(methods) {
    const container = document.getElementById('payment-methods');
    container.innerHTML = '';
    
    if (methods === 'wallet') {
        // Only wallet option
        container.innerHTML = createWalletOption();
        selectedPaymentMethod = 'wallet';
        updatePayButton();
    } else if (methods === 'gateway') {
        // Only payment gateway option
        container.innerHTML = createGatewayOption();
        selectedPaymentMethod = 'gateway';
        updatePayButton();
    } else {
        // Both options
        container.innerHTML = createWalletOption() + createGatewayOption();
        // Select default option
        setTimeout(() => {
            const firstOption = container.querySelector('input[type="radio"]');
            if (firstOption) {
                firstOption.checked = true;
                selectedPaymentMethod = firstOption.value;
                updatePayButton();
            }
        }, 100);
    }
    
    // Add event listeners to payment method options
    container.addEventListener('click', function(e) {
        if (e.target.type === 'radio' || e.target.closest('.payment-method-option')) {
            const radio = e.target.type === 'radio' ? e.target : e.target.closest('.payment-method-option').querySelector('input[type="radio"]');
            selectedPaymentMethod = radio.value;
            updatePayButton();
            
            // Update visual selection
            container.querySelectorAll('.payment-method-option').forEach(option => {
                option.classList.remove('selected');
            });
            radio.closest('.payment-method-option').classList.add('selected');
        }
    });
}

function createWalletOption() {
    return `
        <div class="payment-method-option">
            <input type="radio" name="payment_method" value="wallet" id="wallet-option">
            <div class="payment-method-icon">
                <i class="fas fa-wallet" style="color: #28a745;"></i>
            </div>
            <div class="payment-method-info">
                <div class="payment-method-title">Wallet Payment</div>
                <div class="payment-method-desc">Pay using your wallet balance</div>
            </div>
        </div>
    `;
}

function createGatewayOption() {
    return `
        <div class="payment-method-option">
            <input type="radio" name="payment_method" value="gateway" id="gateway-option">
            <div class="payment-method-icon">
                <i class="fas fa-credit-card" style="color: #007bff;"></i>
            </div>
            <div class="payment-method-info">
                <div class="payment-method-title">Payment Gateway</div>
                <div class="payment-method-desc">Pay using UPI, Card, or Net Banking</div>
            </div>
        </div>
    `;
}

// Fetch user's wallet balance
function fetchWalletBalance() {
    fetch('/student/wallet/balance', {
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': 'aqs38uMia1QmsPuMDwGytemhFRnAYrIVMhhZNgZL'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('user-balance').textContent = parseFloat(data.balance).toFixed(2);
            document.getElementById('wallet-balance').style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Error fetching wallet balance:', error);
    });
}

// Update pay button based on selected method
function updatePayButton() {
    const payButton = document.getElementById('pay-button');
    
    if (selectedPaymentMethod === 'wallet') {
        payButton.innerHTML = '<i class="fas fa-wallet"></i> Pay from Wallet';
    } else if (selectedPaymentMethod === 'gateway') {
        payButton.innerHTML = '<i class="fas fa-credit-card"></i> Pay with Gateway';
    } else {
        payButton.innerHTML = 'Pay Now';
    }
}

// Process payment
function processPayment() {
    if (!selectedPaymentMethod) {
        alert('Please select a payment method');
        return;
    }
    
    // Show loading
    document.getElementById('loadingOverlay').style.display = 'flex';
    
    const paymentData = {
        quiz_id: currentQuizData.id,
        amount: currentQuizData.price,
        payment_method: selectedPaymentMethod
    };
    
    fetch('/student/quiz/purchase', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': 'aqs38uMia1QmsPuMDwGytemhFRnAYrIVMhhZNgZL',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify(paymentData)
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('loadingOverlay').style.display = 'none';
        
        if (data.success) {
            // Payment successful
            closePaymentModal();
            
            if (selectedPaymentMethod === 'gateway' && data.payment_url) {
                // Redirect to payment gateway
                window.location.href = data.payment_url;
            } else {
                // Wallet payment completed, show success and redirect to course details
                alert('Payment successful! You can now access the quiz.');
                if (data.redirect_url) {
                    window.location.href = data.redirect_url;
                } else {
                    window.location.reload();
                }
            }
        } else {
            alert(data.message || 'Payment failed. Please try again.');
        }
    })
    .catch(error => {
        document.getElementById('loadingOverlay').style.display = 'none';
        console.error('Payment error:', error);
        alert('Payment failed. Please try again.');
    });
}

// Close modal when clicking outside
document.getElementById('paymentModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closePaymentModal();
    }
});

// Prevent modal content click from closing modal
document.querySelector('.payment-modal-content').addEventListener('click', function(e) {
    e.stopPropagation();
});
</script>
    
    <script>
        $(document).ready(function() {
            // Initialize essential functionality that was in main.js
            
            // Handle preloader
            $('.preloader').fadeOut(500);
            
            // Smooth scroll for anchor links
            $('a[href*="#"]:not([href="#"])').click(function() {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html, body').animate({
                            scrollTop: target.offset().top - 70
                        }, 1000);
                        return false;
                    }
                }
            });
            
            // Counter animation for statistics
            $('.stat-number').each(function() {
                const $this = $(this);
                const countTo = parseInt($this.text().replace(/[^0-9]/g, ''));
                if (countTo > 0) {
                    $({ countNum: 0 }).animate({
                        countNum: countTo
                    }, {
                        duration: 2000,
                        easing: 'linear',
                        step: function() {
                            $this.text(Math.floor(this.countNum).toLocaleString());
                        },
                        complete: function() {
                            $this.text(countTo.toLocaleString() + ($this.data('suffix') || ''));
                        }
                    });
                }
            });
        });
        
        // Ensure page loading completes properly
        window.addEventListener('load', () => {
            // Force completion of any pending loading states
            document.body.classList.add('page-loaded');
            
            // Hide any loading indicators that might be stuck
            const loadingElements = document.querySelectorAll('.loading, .spinner, .preloader');
            loadingElements.forEach(el => {
                el.style.display = 'none';
                el.remove();
            });
            
            console.log('Page loaded successfully');
        });
        
        // Handle JavaScript errors gracefully
        window.addEventListener('error', function(e) {
            console.warn('JavaScript Error (handled):', e.error);
            // Continue page loading even with JS errors
        });
        
        // Force page completion after 3 seconds if still loading
        setTimeout(() => {
            document.body.classList.add('page-loaded');
            const loadingElements = document.querySelectorAll('.loading, .spinner, .preloader');
            loadingElements.forEach(el => {
                el.style.display = 'none';
                el.remove();
            });
        }, 3000);
        
        // PWA Install Functionality (Flipkart Style)
        let deferredPrompt;
        const pwaInstallContainer = document.getElementById('pwaInstallContainer');
        const pwaInstallBtn = document.getElementById('pwaInstallBtn');
        
        // Listen for beforeinstallprompt event
        window.addEventListener('beforeinstallprompt', (e) => {
            console.log('PWA: beforeinstallprompt fired');
            // Prevent Chrome 67 and earlier from automatically showing the prompt
            e.preventDefault();
            // Stash the event so it can be triggered later
            deferredPrompt = e;
            // Show the install button
            if (pwaInstallContainer) {
                pwaInstallContainer.style.display = 'block';
            }
        });
        
        // Handle PWA install button click
        if (pwaInstallBtn) {
            pwaInstallBtn.addEventListener('click', async () => {
                console.log('PWA: Install button clicked');
                
                if (deferredPrompt) {
                    // Show the install prompt
                    deferredPrompt.prompt();
                    
                    // Wait for the user to respond to the prompt
                    const { outcome } = await deferredPrompt.userChoice;
                    console.log(`PWA: User response: ${outcome}`);
                    
                    if (outcome === 'accepted') {
                        console.log('PWA: User accepted the install prompt');
                        // Show success message
                        showPWAInstallSuccess();
                    } else {
                        console.log('PWA: User dismissed the install prompt');
                    }
                    
                    // Clear the deferred prompt
                    deferredPrompt = null;
                    
                    // Hide the install button
                    if (pwaInstallContainer) {
                        pwaInstallContainer.style.display = 'none';
                    }
                } else {
                    // Fallback for browsers that don't support PWA or already installed
                    showPWAFallbackMessage();
                }
            });
        }
        
        // Check if PWA is already installed
        window.addEventListener('appinstalled', (evt) => {
            console.log('PWA: App was installed successfully');
            // Hide install button
            if (pwaInstallContainer) {
                pwaInstallContainer.style.display = 'none';
            }
            showPWAInstallSuccess();
        });
        
        // Check if running in standalone mode (PWA is installed)
        if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
            console.log('PWA: Running in standalone mode');
            // Hide install button if already installed
            if (pwaInstallContainer) {
                pwaInstallContainer.style.display = 'none';
            }
        }
        
        // Show PWA install success message
        function showPWAInstallSuccess() {
            const successMsg = document.createElement('div');
            successMsg.className = 'alert alert-success alert-dismissible fade show position-fixed';
            successMsg.style.cssText = 'top: 80px; right: 20px; z-index: 9999; max-width: 300px;';
            successMsg.innerHTML = `
                <i class="fas fa-check-circle me-2"></i>
                <strong>App Installed!</strong> You can now access QuizMaster from your home screen.
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.body.appendChild(successMsg);
            
            // Auto remove after 5 seconds
            setTimeout(() => {
                if (successMsg.parentNode) {
                    successMsg.remove();
                }
            }, 5000);
        }
        
        // Show PWA fallback message
        function showPWAFallbackMessage() {
            const fallbackMsg = document.createElement('div');
            fallbackMsg.className = 'alert alert-info alert-dismissible fade show position-fixed';
            fallbackMsg.style.cssText = 'top: 80px; right: 20px; z-index: 9999; max-width: 350px;';
            fallbackMsg.innerHTML = `
                <i class="fas fa-info-circle me-2"></i>
                <strong>Install App:</strong> To install our app, use your browser's "Add to Home Screen" option from the menu.
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.body.appendChild(fallbackMsg);
            
            // Auto remove after 8 seconds
            setTimeout(() => {
                if (fallbackMsg.parentNode) {
                    fallbackMsg.remove();
                }
            }, 8000);
        }
        
        // Show install button for supported browsers after page load
        window.addEventListener('load', () => {
            // For browsers that support PWA but don't fire beforeinstallprompt immediately
            setTimeout(() => {
                if (!deferredPrompt && 'serviceWorker' in navigator && pwaInstallContainer) {
                    // Check if it's a PWA-capable browser
                    const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
                    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
                    const isAndroid = /Android/.test(navigator.userAgent);
                    
                    if ((isAndroid || isIOS) && !isStandalone) {
                        pwaInstallContainer.style.display = 'block';
                        
                        // For iOS, show different message
                        if (isIOS) {
                            pwaInstallBtn.innerHTML = '<i class="fas fa-mobile-alt me-1"></i><span class="d-none d-md-inline">Add to Home</span>';
                            pwaInstallBtn.title = 'Add to Home Screen (iOS: Share → Add to Home Screen)';
                        }
                    }
                }
            }, 2000);
        });
        
        // Service Worker Registration
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then((registration) => {
                        console.log('PWA: Service Worker registered successfully:', registration.scope);
                    })
                    .catch((error) => {
                        console.log('PWA: Service Worker registration failed:', error);
                    });
            });
        }
    </script>
</body>
</html>