Question Bank - Practice


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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>
    :root {
        --primary-color: #667eea;
        --primary-dark: #764ba2;
        --success-color: #10b981;
        --danger-color: #ef4444;
        --warning-color: #f59e0b;
        --info-color: #3b82f6;
        --light-bg: #f8f9fa;
        --card-shadow: 0 2px 12px rgba(0,0,0,0.08);
        --card-shadow-hover: 0 8px 24px rgba(102, 126, 234, 0.15);
    }

    body {
        background-color: var(--light-bg);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .page-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        padding: 2.5rem;
        border-radius: 16px;
        margin-bottom: 2rem;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
    }

    .page-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
    }

    .page-header h1 {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 1;
    }

    .page-header p {
        font-size: 1.1rem;
        opacity: 0.95;
        margin: 0;
        position: relative;
        z-index: 1;
    }

    .selection-card {
        background: white;
        border-radius: 16px;
        padding: 2.5rem;
        box-shadow: var(--card-shadow);
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }

    .selection-card:hover {
        box-shadow: var(--card-shadow-hover);
    }

    .form-section {
        margin-bottom: 1.75rem;
    }

    .form-section label {
        display: block;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.6rem;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .form-section label i {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

    .form-section select,
    .form-section input {
        width: 100%;
        padding: 0.875rem 1.125rem;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.2s ease;
        background: white;
    }

    .form-section select:focus,
    .form-section input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-section select:disabled {
        background: #f3f4f6;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .form-section select[multiple] {
        min-height: 160px;
        padding: 0.5rem;
    }

    .form-section select[multiple] option {
        padding: 0.75rem;
        margin-bottom: 0.25rem;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .form-section select[multiple] option:hover {
        background: #eff6ff;
    }

    .form-section select[multiple] option:checked {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
    }

    .chapters-help {
        font-size: 0.85rem;
        color: #6b7280;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
        background: #eff6ff;
        border-radius: 8px;
        border-left: 3px solid var(--info-color);
    }

    .btn-generate {
        width: 100%;
        padding: 1.125rem 2rem;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 1.125rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
    }

    .btn-generate:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    }

    .btn-generate:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .info-box {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border-left: 4px solid var(--primary-color);
        padding: 1.25rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        display: flex;
        align-items: start;
        gap: 1rem;
    }

    .info-box i {
        color: var(--primary-color);
        font-size: 1.5rem;
        margin-top: 0.25rem;
    }

    .question-card {
        background: white;
        border-radius: 12px;
        padding: 1.75rem;
        margin-bottom: 1.5rem;
        border: 2px solid #e5e7eb;
        transition: all 0.3s ease;
    }

    .question-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
    }

    .question-card h5 {
        color: #1f2937;
        margin-bottom: 1.25rem;
        font-weight: 600;
        line-height: 1.6;
    }

    .form-check {
        padding: 1rem;
        margin-bottom: 0.75rem;
        border-radius: 10px;
        border: 2px solid #f3f4f6;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .form-check:hover {
        background: #f9fafb;
        border-color: #e5e7eb;
    }

    .form-check-input:checked ~ .form-check-label {
        font-weight: 600;
        color: var(--primary-color);
    }

    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    /* Drag and Drop Styles */
    .fill-blank-container {
        margin-top: 1.5rem;
    }

    .answer-dropzone {
        min-height: 60px;
        padding: 1rem;
        border: 2px dashed #d1d5db;
        border-radius: 10px;
        background: #f9fafb;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .answer-dropzone.drag-over {
        border-color: var(--primary-color);
        background: #eff6ff;
        transform: scale(1.02);
    }

    .answer-dropzone.has-answer {
        border-style: solid;
        border-color: var(--success-color);
        background: #f0fdf4;
    }

    .answer-dropzone-placeholder {
        color: #9ca3af;
        font-style: italic;
        pointer-events: none;
    }

    .answer-chips-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1.25rem;
        background: #f3f4f6;
        border-radius: 10px;
        margin-top: 1rem;
        min-height: 80px;
    }

    .answer-chip {
        padding: 0.75rem 1.25rem;
        background: white;
        border: 2px solid #e5e7eb;
        border-radius: 25px;
        cursor: move;
        transition: all 0.3s ease;
        font-weight: 500;
        color: #1f2937;
        user-select: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .answer-chip:hover {
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
    }

    .answer-chip.dragging {
        opacity: 0.5;
        transform: rotate(5deg);
    }

    .answer-chip.in-dropzone {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        border-color: var(--primary-color);
        cursor: pointer;
    }

    .answer-chip.in-dropzone:hover {
        transform: translateY(-2px) scale(1.05);
    }

    .chips-help {
        font-size: 0.85rem;
        color: #6b7280;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
        background: white;
        border-radius: 8px;
        border-left: 3px solid var(--info-color);
    }

    .exam-modal .modal-dialog {
        height: 90vh;
        max-width: 1140px;
    }

    .exam-modal .modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        border: none;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }

    .exam-modal .modal-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        border-radius: 16px 16px 0 0;
        padding: 1.5rem 2rem;
        border-bottom: none;
    }

    .exam-modal .modal-body {
        overflow-y: auto;
        flex: 1 1 auto;
        padding: 2rem;
        padding-bottom: 120px;
    }

    .exam-modal .modal-footer {
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 5;
        border-top: 2px solid #e5e7eb;
        padding: 1.25rem 2rem;
        border-radius: 0 0 16px 16px;
    }

    .result-stat {
        text-align: center;
        padding: 2rem 1.5rem;
        border-radius: 12px;
        color: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: transform 0.3s ease;
    }

    .result-stat:hover {
        transform: translateY(-4px);
    }

    .result-stat h3 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        font-weight: 700;
    }

    .result-stat.correct { 
        background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
    }
    
    .result-stat.wrong { 
        background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    }
    
    .result-stat.total { 
        background: linear-gradient(135deg, var(--info-color) 0%, #2563eb 100%);
    }
    
    .result-stat.percentage { 
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    }

    #resultsModal .modal-body {
        max-height: 75vh;
        overflow-y: auto;
        padding: 2rem;
    }

    .chart-container {
        position: relative;
        height: 300px;
        margin: 2rem 0;
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: var(--card-shadow);
    }

    .chart-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .modal-backdrop.show {
        opacity: 0.7;
    }

    @media (max-width: 768px) {
        .page-header h1 { 
            font-size: 1.75rem; 
        }
        
        .page-header {
            padding: 2rem 1.5rem;
        }

        .selection-card {
            padding: 1.5rem;
        }

        .exam-modal .modal-dialog {
            height: 95vh;
            margin: 0.5rem;
        }

        .result-stat h3 {
            font-size: 2rem;
        }

        .chart-container {
            height: 250px;
        }

        .answer-chip {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }
    }

    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
    }

    .badge {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
    }


    .loading-container {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
}

.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid #f3f4f6;
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1.5rem;
}

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

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
}

.empty-state-icon {
    font-size: 5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.empty-state h3 {
    color: #1f2937;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.empty-state p {
    color: #6b7280;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.lecture-card {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.lecture-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--primary-color);
}

.lecture-card-header {
    margin-bottom: 1rem;
}

.lecture-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: start;
    gap: 0.75rem;
}

.lecture-card-title i {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.lecture-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.meta-badge {
    padding: 0.4rem 0.875rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meta-badge.primary {
    background: #eff6ff;
    color: var(--primary-color);
}

.meta-badge.success {
    background: #f0fdf4;
    color: var(--success-color);
}

.lecture-card-preview {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1;
}

.lecture-card-footer {
    display: flex;
    gap: 0.75rem;
}

.btn-view {
    flex: 1;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}


/* Sharing Section Styles */
.sharing-section {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-radius: 16px;
    border: 2px solid #e5e7eb;
}

.sharing-header {
    text-align: center;
    margin-bottom: 2rem;
}

.sharing-header h5 {
    color: #1f2937;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.sharing-header p {
    color: #6b7280;
    font-size: 1rem;
    margin: 0;
}

.sharing-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.share-btn i {
    font-size: 2rem;
}

.share-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.share-btn.whatsapp {
    color: #25D366;
    border-color: #25D366;
}

.share-btn.whatsapp:hover {
    background: #25D366;
    color: white;
}

.share-btn.link {
    color: #667eea;
    border-color: #667eea;
}

.share-btn.link:hover {
    background: #667eea;
    color: white;
}

.share-btn.email {
    color: #ef4444;
    border-color: #ef4444;
}

.share-btn.email:hover {
    background: #ef4444;
    color: white;
}

.share-btn.download {
    color: #10b981;
    border-color: #10b981;
}

.share-btn.download:hover {
    background: #10b981;
    color: white;
}

.link-copied-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .sharing-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .share-btn {
        padding: 1.25rem 0.75rem;
    }
    
    .share-btn i {
        font-size: 1.5rem;
    }
    
    .share-btn span {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .sharing-buttons {
        grid-template-columns: 1fr;
    }
}

</style>



<div class="container-fluid py-4">
    <!-- Page Header -->

    <div class="page-header">
        <h1><i class="fas fa-book-reader me-3"></i>Question Bank</h1>
        <p>Practice questions and access lecture sheets from our comprehensive database</p>
    </div>

    <!-- Tabs Navigation -->
    <ul class="nav nav-tabs mb-4" id="mainTabs" role="tablist" style="border-bottom: 3px solid #e5e7eb;">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="questions-tab" data-bs-toggle="tab" data-bs-target="#questions-content" type="button" role="tab" style="font-weight: 600; font-size: 1.1rem; padding: 1rem 2rem; border: none; color: #6b7280; transition: all 0.3s;">
                <i class="fas fa-question-circle me-2"></i>Practice Questions
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="lecture-sheets-tab" data-bs-toggle="tab" data-bs-target="#lecture-sheets-content" type="button" role="tab" style="font-weight: 600; font-size: 1.1rem; padding: 1rem 2rem; border: none; color: #6b7280; transition: all 0.3s;">
                <i class="fas fa-file-alt me-2"></i>Lecture Sheets
            </button>
        </li>
    </ul>

    <style>
        .nav-tabs .nav-link {
            background: transparent;
            border-radius: 12px 12px 0 0;
        }
        .nav-tabs .nav-link:hover {
            color: var(--primary-color) !important;
            background: #eff6ff;
        }
        .nav-tabs .nav-link.active {
            color: var(--primary-color) !important;
            background: white !important;
            border-bottom: 3px solid var(--primary-color) !important;
            margin-bottom: -3px;
        }
    </style>

    <!-- Tab Contents -->
    <div class="tab-content" id="mainTabsContent">
        <!-- Questions Tab -->
        <div class="tab-pane fade show active" id="questions-content" role="tabpanel">
            <!-- Selection Form -->
            <div class="selection-card">
                <!-- ... rest of your existing selection form code ... -->
            </div>
        </div>

        <!-- Lecture Sheets Tab -->
        <!-- Lecture Sheets Tab -->
<div class="tab-pane fade" id="lecture-sheets-content" role="tabpanel">
    <!-- Selection Form for Lecture Sheets -->
    <div class="selection-card">
        <div class="info-box">
            <i class="fas fa-lightbulb"></i>
            <div>
                <strong>How it works:</strong> Select category, course, and one or more chapters to load lecture sheets from our database.
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-section">
                    <label for="lectureCategorySelect">
                        <i class="fas fa-layer-group"></i>
                        Select Category *
                    </label>
                    <select id="lectureCategorySelect" required>
                        <option value="">-- Choose Category --</option>
                    </select>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-section">
                    <label for="lectureCourseSelect">
                        <i class="fas fa-graduation-cap"></i>
                        Select Course *
                    </label>
                    <select id="lectureCourseSelect" disabled required>
                        <option value="">-- First select a category --</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-section">
                    <label for="lectureChapterSelect">
                        <i class="fas fa-book"></i>
                        Select Chapters * (Hold Ctrl/Cmd to select multiple)
                    </label>
                    <select id="lectureChapterSelect" multiple disabled required>
                        <option value="">-- First select a course --</option>
                    </select>
                    <div class="chapters-help">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Tip:</strong> Hold down Ctrl (Windows) or Cmd (Mac) to select multiple chapters
                    </div>
                </div>
            </div>
        </div>

        <button id="loadLectureSheetsBtn" class="btn-generate" disabled>
            <i class="fas fa-file-alt"></i>
            <span>Load Lecture Sheets</span>
        </button>
    </div>

    <!-- Loading State -->
    <div id="lectureLoadingContainer" class="loading-container" style="display: none;">
        <div class="spinner"></div>
        <p style="color: #6b7280; font-size: 1.1rem;">Loading lecture sheets...</p>
    </div>

    <!-- Empty State -->
    <div id="lectureEmptyState" class="empty-state" style="display: none;">
        <div class="empty-state-icon">
            <i class="fas fa-inbox"></i>
        </div>
        <h3>No Lecture Sheets Found</h3>
        <p>No lecture sheets found for the selected chapters. Try selecting different chapters.</p>
    </div>

    <!-- Lecture Sheets Grid -->
    <div id="lectureSheetsGrid" class="row" style="display: none; margin-top: 2rem;"></div>
</div>
    </div>


    <div class="page-header">
        <h1><i class="fas fa-book-reader me-3"></i>Question Bank Practice</h1>
        <p>Select your preferences and practice from our comprehensive question database</p>
    </div>

    <!-- Selection Form -->
    <div class="selection-card">
        <div class="info-box">
            <i class="fas fa-lightbulb"></i>
            <div>
                <strong>How it works:</strong> Select category, course, and one or more chapters to load questions from our database. For fill-in-the-blank questions, drag answer chips or double-click to move them!
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-section">
                    <label for="categorySelect">
                        <i class="fas fa-layer-group"></i>
                        Select Category *
                    </label>
                    <select id="categorySelect" required>
                        <option value="">-- Choose Category --</option>
                    </select>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-section">
                    <label for="courseSelect">
                        <i class="fas fa-graduation-cap"></i>
                        Select Course *
                    </label>
                    <select id="courseSelect" disabled required>
                        <option value="">-- First select a category --</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-section">
                    <label for="chapterSelect">
                        <i class="fas fa-book"></i>
                        Select Chapters * (Hold Ctrl/Cmd to select multiple)
                    </label>
                    <select id="chapterSelect" multiple disabled required>
                        <option value="">-- First select a course --</option>
                    </select>
                    <div class="chapters-help">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Tip:</strong> Hold down Ctrl (Windows) or Cmd (Mac) to select multiple chapters for a comprehensive practice session
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-section">
                    <label for="questionCount">
                        <i class="fas fa-list-ol"></i>
                        Number of Questions *
                    </label>
                    <select id="questionCount">
                        <option value="5">5 Questions</option>
                        <option value="10" selected>10 Questions</option>
                        <option value="15">15 Questions</option>
                        <option value="20">20 Questions</option>
                        <option value="25">25 Questions</option>
                        <option value="30">30 Questions</option>
                    </select>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-section">
                    <label for="questionType">
                        <i class="fas fa-tasks"></i>
                        Question Type
                    </label>
                    <select id="questionType">
                        <option value="all">All Types (Mixed)</option>
                        <option value="mcq">Multiple Choice (MCQ)</option>
                        <option value="true_false">True/False</option>
                        <option value="fill_blanks">Fill in the Blanks</option>
                    </select>
                </div>
            </div>
        </div>

        <button id="startExamBtn" class="btn-generate" disabled>
            <i class="fas fa-play-circle"></i>
            <span>Start Practice Exam</span>
        </button>
    </div>
</div>

<!-- Exam Modal -->
<div class="modal fade exam-modal" id="examModal" tabindex="-1" data-bs-scroll="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="examTitle">Practice Exam</h5>
                    <p class="mb-0" style="opacity: 0.9; font-size: 0.9rem;" id="examSubtitle"></p>
                </div>
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <span id="examTimer" class="badge bg-light text-dark">
                        <i class="far fa-clock me-2"></i>00:00
                    </span>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
            </div>
            <div class="modal-body" id="questionsContainer"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-lg" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Cancel
                </button>
                <button type="button" class="btn btn-primary btn-lg" id="submitExamBtn">
                    <i class="fas fa-check-circle me-2"></i>Submit Answers
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Results Modal -->
<div class="modal fade exam-modal" id="resultsModal" tabindex="-1" data-bs-scroll="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-chart-bar me-2"></i>Exam Results</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="resultsContent"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-lg" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Close
                </button>
                <button type="button" class="btn btn-primary btn-lg" onclick="location.reload()">
                    <i class="fas fa-redo me-2"></i>Practice Again
                </button>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>


<script>
// ============================================================================
// GLOBAL UTILITY FUNCTIONS
// ============================================================================

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// ============================================================================
// GLOBAL SHARING FUNCTIONS
// ============================================================================

window.shareViaWhatsApp = function(summary) {
    const courseTitle = document.getElementById('courseSelect').options[document.getElementById('courseSelect').selectedIndex].text;
    
    const message = `🎓 *Exam Results - ${courseTitle}*\n\n` +
                   `✅ Correct: ${summary.correct}\n` +
                   `❌ Wrong: ${summary.wrong}\n` +
                   `📊 Total: ${summary.total}\n` +
                   `🎯 Score: ${summary.percentage}%\n\n` +
                   `Check out my performance! 💪`;
    
    const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(message)}`;
    window.open(whatsappUrl, '_blank');
};

window.copyResultLink = function(resultId, summary) {
    const courseTitle = document.getElementById('courseSelect').options[document.getElementById('courseSelect').selectedIndex].text;
    
    const resultUrl = `${window.location.origin}/results/${resultId}`;
    const shareText = `📚 ${courseTitle} - Exam Results\n` +
                     `Score: ${summary.percentage}% (${summary.correct}/${summary.total} correct)\n` +
                     `Link: ${resultUrl}`;
    
    navigator.clipboard.writeText(shareText).then(() => {
        const message = document.getElementById('linkCopiedMessage');
        message.style.display = 'flex';
        
        setTimeout(() => {
            message.style.display = 'none';
        }, 3000);
    }).catch(err => {
        console.error('Failed to copy:', err);
        const textArea = document.createElement('textarea');
        textArea.value = shareText;
        textArea.style.position = 'fixed';
        textArea.style.opacity = '0';
        document.body.appendChild(textArea);
        textArea.select();
        try {
            document.execCommand('copy');
            const message = document.getElementById('linkCopiedMessage');
            message.style.display = 'flex';
            setTimeout(() => {
                message.style.display = 'none';
            }, 3000);
        } catch (err) {
            alert('Failed to copy link. Please try again.');
        }
        document.body.removeChild(textArea);
    });
};

window.shareViaEmail = function(summary) {
    const courseTitle = document.getElementById('courseSelect').options[document.getElementById('courseSelect').selectedIndex].text;
    
    const subject = encodeURIComponent(`My Exam Results - ${courseTitle}`);
    const body = encodeURIComponent(
        `Hello,\n\n` +
        `I wanted to share my recent exam results with you:\n\n` +
        `Course: ${courseTitle}\n` +
        `Correct Answers: ${summary.correct}\n` +
        `Wrong Answers: ${summary.wrong}\n` +
        `Total Questions: ${summary.total}\n` +
        `Score: ${summary.percentage}%\n\n` +
        `Best regards`
    );
    
    const mailtoUrl = `mailto:?subject=${subject}&body=${body}`;
    window.location.href = mailtoUrl;
};

window.downloadResultsPDF = function(summary, results) {
    const courseTitle = document.getElementById('courseSelect').options[document.getElementById('courseSelect').selectedIndex].text;
    
    const printContent = `
        <!DOCTYPE html>
        <html>
        <head>
            <title>Exam Results - ${courseTitle}</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    padding: 40px;
                    line-height: 1.6;
                    color: #1f2937;
                }
                .header {
                    text-align: center;
                    margin-bottom: 40px;
                    border-bottom: 3px solid #667eea;
                    padding-bottom: 20px;
                }
                .header h1 {
                    color: #667eea;
                    margin-bottom: 10px;
                }
                .summary {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 20px;
                    margin-bottom: 40px;
                }
                .stat-box {
                    text-align: center;
                    padding: 20px;
                    border-radius: 10px;
                    background: #f3f4f6;
                }
                .stat-box h2 {
                    font-size: 2rem;
                    margin: 0;
                }
                .stat-box.correct { background: #d1fae5; color: #065f46; }
                .stat-box.wrong { background: #fee2e2; color: #991b1b; }
                .stat-box.total { background: #dbeafe; color: #1e40af; }
                .stat-box.percentage { background: #e0e7ff; color: #4338ca; }
                .question {
                    margin-bottom: 30px;
                    padding: 20px;
                    border: 2px solid #e5e7eb;
                    border-radius: 10px;
                    page-break-inside: avoid;
                }
                .question.correct { border-color: #10b981; background: #f0fdf4; }
                .question.wrong { border-color: #ef4444; background: #fef2f2; }
                .question h3 {
                    margin-top: 0;
                }
                .answer-section {
                    margin-top: 15px;
                }
                .answer-section p {
                    margin: 8px 0;
                }
                .correct-answer { color: #10b981; font-weight: 600; }
                .wrong-answer { color: #ef4444; font-weight: 600; }
                .explanation {
                    margin-top: 15px;
                    padding: 15px;
                    background: #f9fafb;
                    border-left: 4px solid #667eea;
                    font-style: italic;
                }
                @media print {
                    body { padding: 20px; }
                    .no-print { display: none; }
                }
            </style>
        </head>
        <body>
            <div class="header">
                <h1>📚 Exam Results</h1>
                <h2>${courseTitle}</h2>
                <p>Generated on ${new Date().toLocaleDateString()} at ${new Date().toLocaleTimeString()}</p>
            </div>
            
            <div class="summary">
                <div class="stat-box correct">
                    <h2>${summary.correct}</h2>
                    <p>Correct</p>
                </div>
                <div class="stat-box wrong">
                    <h2>${summary.wrong}</h2>
                    <p>Wrong</p>
                </div>
                <div class="stat-box total">
                    <h2>${summary.total}</h2>
                    <p>Total</p>
                </div>
                <div class="stat-box percentage">
                    <h2>${summary.percentage}%</h2>
                    <p>Score</p>
                </div>
            </div>
            
            <h2 style="margin-top: 40px; margin-bottom: 20px;">Detailed Results:</h2>
            
            ${results.map((result, index) => `
                <div class="question ${result.is_correct ? 'correct' : 'wrong'}">
                    <h3>${result.is_correct ? '✅' : '❌'} Question ${index + 1}</h3>
                    <p><strong>${result.question}</strong></p>
                    <div class="answer-section">
                        <p><strong>Your Answer:</strong> <span class="${result.is_correct ? 'correct-answer' : 'wrong-answer'}">${result.user_answer || 'Not answered'}</span></p>
                        ${!result.is_correct ? `<p><strong>Correct Answer:</strong> <span class="correct-answer">${result.correct_answer}</span></p>` : ''}
                    </div>
                    <div class="explanation">
                        <strong>💡 Explanation:</strong> ${result.explanation}
                    </div>
                </div>
            `).join('')}
            
            <div style="margin-top: 50px; text-align: center; color: #6b7280; border-top: 2px solid #e5e7eb; padding-top: 20px;">
                <p>Keep practicing to improve your scores! 🎯</p>
            </div>
        </body>
        </html>
    `;
    
    const printWindow = window.open('', '_blank');
    printWindow.document.write(printContent);
    printWindow.document.close();
    
    setTimeout(() => {
        printWindow.print();
    }, 500);
};

window.generateResultId = function() {
    return 'result_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
};

window.viewLectureSheetContent = function(lectureSheetId) {
    fetch('/api/lecture-sheets/content/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: JSON.stringify({
            lecture_sheet_id: lectureSheetId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const modalHtml = `
                <div class="modal fade" id="lectureSheetViewModal" tabindex="-1">
                    <div class="modal-dialog modal-xl modal-dialog-scrollable">
                        <div class="modal-content" style="border-radius: 16px;">
                            <div class="modal-header" style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: white; border-radius: 16px 16px 0 0;">
                                <h5 class="modal-title">
                                    <i class="fas fa-file-alt me-2"></i>${data.lecture_sheet.saved_name}
                                </h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body" style="padding: 2rem; max-height: 70vh; overflow-y: auto;">
                                <div class="lecture-sheet-content" style="line-height: 1.8;">
                                    ${data.lecture_sheet.content}
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary btn-lg" data-bs-dismiss="modal">
                                    <i class="fas fa-times me-2"></i>Close
                                </button>
                                <button type="button" class="btn btn-primary btn-lg" onclick="printLectureSheetContent('${data.lecture_sheet.saved_name.replace(/'/g, "\\'")}', \`${data.lecture_sheet.content.replace(/`/g, '\\`').replace(/\$/g, '\\$')}\`)">
                                    <i class="fas fa-print me-2"></i>Print
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            const existingModal = document.getElementById('lectureSheetViewModal');
            if (existingModal) {
                existingModal.remove();
            }
            
            document.body.insertAdjacentHTML('beforeend', modalHtml);
            
            const modal = new bootstrap.Modal(document.getElementById('lectureSheetViewModal'));
            modal.show();
        } else {
            alert('Failed to load lecture sheet: ' + (data.error || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error loading lecture sheet:', error);
        alert('Failed to load lecture sheet. Please try again.');
    });
};

window.printLectureSheetContent = function(title, content) {
    const printWindow = window.open('', '', 'height=700,width=900');
    printWindow.document.write('<html><head><title>' + title + '</title>');
    printWindow.document.write(`
        <style>
            body {
                font-family: Arial, sans-serif;
                padding: 20px;
                line-height: 1.6;
            }
            h1, h2, h3, h4, h5, h6 {
                margin-top: 1em;
                margin-bottom: 0.5em;
                color: #1f2937;
            }
            table {
                width: 100%;
                border-collapse: collapse;
                margin: 1em 0;
            }
            table th, table td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }
            table th {
                background-color: #f3f4f6;
                font-weight: 600;
            }
            @media print {
                body {
                    padding: 0;
                }
            }
        </style>
    `);
    printWindow.document.write('</head><body>');
    printWindow.document.write('<h1>' + title + '</h1>');
    printWindow.document.write(content);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    
    setTimeout(() => {
        printWindow.print();
    }, 250);
};

// ============================================================================
// MAIN APPLICATION CODE
// ============================================================================

document.addEventListener('DOMContentLoaded', function() {
    const categorySelect = document.getElementById('categorySelect');
    const courseSelect = document.getElementById('courseSelect');
    const chapterSelect = document.getElementById('chapterSelect');
    const startExamBtn = document.getElementById('startExamBtn');
    
    let timerInterval;
    let startTime;
    let currentQuestions = [];

    // Load categories on page load
    loadCategories();

    async function loadCategories() {
        try {
            const response = await fetch('/api/practice/categories/alphagenedu/');
            const data = await response.json();
            console.log('Categories response:', data);
            
            if (data.success) {
                categorySelect.innerHTML = '<option value="">-- Choose Category --</option>';
                data.categories.forEach(cat => {
                    categorySelect.innerHTML += `<option value="${cat.id}">${cat.name}</option>`;
                });
            } else {
                alert('Failed to load categories: ' + (data.error || 'Unknown error'));
            }
        } catch (error) {
            console.error('Error loading categories:', error);
            alert('Failed to load categories. Please refresh the page.');
        }
    }

    categorySelect.addEventListener('change', async function() {
        const categoryId = this.value;
        courseSelect.disabled = true;
        chapterSelect.disabled = true;
        startExamBtn.disabled = true;
        
        courseSelect.innerHTML = '<option value="">Loading...</option>';

        if (!categoryId) {
            courseSelect.innerHTML = '<option value="">-- Select a category first --</option>';
            return;
        }

        try {
            const response = await fetch(`/api/practice/courses/${categoryId}/`);
            const data = await response.json();
            console.log('Courses response:', data);
            
            if (data.success) {
                courseSelect.innerHTML = '<option value="">-- Select a course --</option>';
                data.courses.forEach(course => {
                    courseSelect.innerHTML += `<option value="${course.id}">${course.title}</option>`;
                });
                courseSelect.disabled = false;
            } else {
                courseSelect.innerHTML = '<option value="">No courses found</option>';
                alert('Failed to load courses: ' + (data.error || 'Unknown error'));
            }
        } catch (error) {
            console.error('Error loading courses:', error);
            courseSelect.innerHTML = '<option value="">Error loading courses</option>';
            alert('Failed to load courses. Please try again.');
        }
    });

    courseSelect.addEventListener('change', async function() {
        const courseId = this.value;
        chapterSelect.disabled = true;
        startExamBtn.disabled = true;
        
        chapterSelect.innerHTML = '<option value="">Loading...</option>';

        if (!courseId) {
            chapterSelect.innerHTML = '<option value="">-- Select a course first --</option>';
            return;
        }

        try {
            const response = await fetch(`/api/practice/chapters/${courseId}/`);
            const data = await response.json();
            console.log('Chapters response:', data);
            
            if (data.success) {
                chapterSelect.innerHTML = '';
                data.chapters.forEach(chapter => {
                    chapterSelect.innerHTML += `<option value="${chapter.id}">${chapter.title}</option>`;
                });
                chapterSelect.disabled = false;
            } else {
                chapterSelect.innerHTML = '<option value="">No chapters found</option>';
                alert('Failed to load chapters: ' + (data.error || 'Unknown error'));
            }
        } catch (error) {
            console.error('Error loading chapters:', error);
            chapterSelect.innerHTML = '<option value="">Error loading chapters</option>';
            alert('Failed to load chapters. Please try again.');
        }
    });

    chapterSelect.addEventListener('change', function() {
        startExamBtn.disabled = chapterSelect.selectedOptions.length === 0;
    });

    startExamBtn.addEventListener('click', async function() {
        const selectedChapters = Array.from(chapterSelect.selectedOptions).map(opt => opt.value);
        const questionCount = document.getElementById('questionCount').value;
        const questionType = document.getElementById('questionType').value;

        if (selectedChapters.length === 0) {
            alert('Please select at least one chapter');
            return;
        }

        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Loading Questions...';

        try {
            const response = await fetch('/api/database/questions/load/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: JSON.stringify({
                    chapter_ids: selectedChapters,
                    question_count: questionCount,
                    question_type: questionType
                })
            });

            const data = await response.json();
            console.log('Database questions response:', data);
            
            if (data.success && Array.isArray(data.questions) && data.questions.length > 0) {
                currentQuestions = data.questions.map(q => ({
                    ...q,
                    id: String(q.id)
                }));
                displayExam({
                    ...data,
                    questions: currentQuestions
                });
                const modal = new bootstrap.Modal(document.getElementById('examModal'));
                modal.show();
                startTimer();
            } else {
                alert('Error: ' + (data.error || 'No questions found.'));
            }
        } catch (error) {
            console.error('Error loading questions:', error);
            alert('Failed to load questions. Please try again.');
        } finally {
            this.disabled = false;
            this.innerHTML = '<i class="fas fa-play-circle me-2"></i><span>Start Practice Exam</span>';
        }
    });

    function displayExam(data) {
        const courseTitle = courseSelect.options[courseSelect.selectedIndex].text;
        document.getElementById('examTitle').textContent = 'Practice Exam';
        document.getElementById('examSubtitle').textContent = 
            `${courseTitle} • ${data.total_questions} questions from ${chapterSelect.selectedOptions.length} chapter(s)`;
        
        const container = document.getElementById('questionsContainer');
        container.innerHTML = '';

        data.questions.forEach((q, index) => {
            const questionCard = document.createElement('div');
            questionCard.className = 'question-card';
            questionCard.dataset.questionId = String(q.id);

            let optionsHTML = '';
            
            if (q.type === 'mcq' && q.options) {
                let options = q.options;
                if (Array.isArray(options)) {
                    options = options.reduce((obj, item, idx) => {
                        obj[String.fromCharCode(65 + idx)] = item;
                        return obj;
                    }, {});
                }

                Object.entries(options).forEach(([key, value]) => {
                    optionsHTML += `
                        <div class="form-check">
                            <input class="form-check-input" type="radio" 
                                   name="q${q.id}" value="${key}" id="q${q.id}_${key}">
                            <label class="form-check-label" for="q${q.id}_${key}">
                                <strong>${key}.</strong> ${value}
                            </label>
                        </div>
                    `;
                });
            } else if (q.type === 'true_false') {
                optionsHTML = `
                    <div class="form-check">
                        <input class="form-check-input" type="radio" 
                               name="q${q.id}" value="True" id="q${q.id}_true">
                        <label class="form-check-label" for="q${q.id}_true">True</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" 
                               name="q${q.id}" value="False" id="q${q.id}_false">
                        <label class="form-check-label" for="q${q.id}_false">False</label>
                    </div>
                `;
            } else {
                optionsHTML = createFillBlankInterface(q);
            }

            questionCard.innerHTML = `
                <h5>
                    <span style="color: var(--primary-color);">Question ${index + 1}:</span> 
                    ${q.question}
                </h5>
                ${optionsHTML}
            `;
            container.appendChild(questionCard);
        });

        initializeDragDrop();
    }

    function createFillBlankInterface(question) {
        const correctAnswer = question.correct_answer || '';
        const answerOptions = generateAnswerOptions(correctAnswer);
        
        const chipsHTML = answerOptions.map((answer, idx) => 
            `<div class="answer-chip" draggable="true" data-answer="${answer}" data-chip-id="${question.id}_${idx}">
                ${answer}
            </div>`
        ).join('');

        return `
            <div class="fill-blank-container">
                <div class="answer-dropzone" data-question-id="${question.id}">
                    <span class="answer-dropzone-placeholder">Drag an answer here or double-click a chip below</span>
                </div>
                <div class="answer-chips-container" id="chips_${question.id}">
                    ${chipsHTML}
                </div>
                <div class="chips-help">
                    <i class="fas fa-hand-pointer me-2"></i>
                    <strong>Tip:</strong> Drag and drop an answer into the box above, or double-click a chip to move it
                </div>
            </div>
        `;
    }

    function generateAnswerOptions(correctAnswer) {
        const options = [correctAnswer];
        
        if (correctAnswer.length > 0) {
            const distractors = [
                correctAnswer.toUpperCase(),
                correctAnswer.toLowerCase(),
                'None of the above',
                'Not applicable'
            ].filter(d => d !== correctAnswer).slice(0, 3);
            
            options.push(...distractors);
        }
        
        return options.sort(() => Math.random() - 0.5);
    }

    function initializeDragDrop() {
        const chips = document.querySelectorAll('.answer-chip');
        const dropzones = document.querySelectorAll('.answer-dropzone');

        chips.forEach(chip => {
            chip.addEventListener('dragstart', handleDragStart);
            chip.addEventListener('dragend', handleDragEnd);
            chip.addEventListener('dblclick', handleDoubleClick);
        });

        dropzones.forEach(zone => {
            zone.addEventListener('dragover', handleDragOver);
            zone.addEventListener('dragleave', handleDragLeave);
            zone.addEventListener('drop', handleDrop);
        });
    }

    let draggedElement = null;

    function handleDragStart(e) {
        draggedElement = this;
        this.classList.add('dragging');
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.innerHTML);
    }

    function handleDragEnd(e) {
        this.classList.remove('dragging');
    }

    function handleDragOver(e) {
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.dataTransfer.dropEffect = 'move';
        this.classList.add('drag-over');
        return false;
    }

    function handleDragLeave(e) {
        this.classList.remove('drag-over');
    }

    function handleDrop(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        }
        e.preventDefault();

        this.classList.remove('drag-over');

        if (draggedElement) {
            this.querySelectorAll('.answer-chip').forEach(chip => {
                const originalContainer = document.getElementById('chips_' + this.dataset.questionId);
                if (originalContainer) {
                    chip.classList.remove('in-dropzone');
                    originalContainer.appendChild(chip);
                }
            });

            const clone = draggedElement.cloneNode(true);
            clone.classList.add('in-dropzone');
            clone.draggable = true;
            
            clone.addEventListener('dragstart', handleDragStart);
            clone.addEventListener('dragend', handleDragEnd);
            clone.addEventListener('dblclick', handleDoubleClick);
            
            const placeholder = this.querySelector('.answer-dropzone-placeholder');
            if (placeholder) placeholder.remove();
            
            this.appendChild(clone);
            this.classList.add('has-answer');

            draggedElement.remove();
        }

        return false;
    }

    function handleDoubleClick(e) {
        const chip = e.target;
        const isInDropzone = chip.classList.contains('in-dropzone');
        
        if (isInDropzone) {
            const dropzone = chip.closest('.answer-dropzone');
            const questionId = dropzone.dataset.questionId;
            const chipsContainer = document.getElementById('chips_' + questionId);
            
            chip.classList.remove('in-dropzone');
            chipsContainer.appendChild(chip);
            
            if (dropzone.querySelectorAll('.answer-chip').length === 0) {
                dropzone.innerHTML = '<span class="answer-dropzone-placeholder">Drag an answer here or double-click a chip below</span>';
                dropzone.classList.remove('has-answer');
            }
        } else {
            const chipsContainer = chip.closest('.answer-chips-container');
            const questionId = chipsContainer.id.replace('chips_', '');
            const dropzone = document.querySelector(`.answer-dropzone[data-question-id="${questionId}"]`);
            
            dropzone.querySelectorAll('.answer-chip').forEach(existingChip => {
                existingChip.classList.remove('in-dropzone');
                chipsContainer.appendChild(existingChip);
            });
            
            const placeholder = dropzone.querySelector('.answer-dropzone-placeholder');
            if (placeholder) placeholder.remove();
            
            chip.classList.add('in-dropzone');
            dropzone.appendChild(chip);
            dropzone.classList.add('has-answer');
        }
    }

    function startTimer() {
        startTime = Date.now();
        if (timerInterval) clearInterval(timerInterval);
        timerInterval = setInterval(() => {
            const elapsed = Math.floor((Date.now() - startTime) / 1000);
            const minutes = Math.floor(elapsed / 60);
            const seconds = elapsed % 60;
            document.getElementById('examTimer').innerHTML = 
                `<i class="far fa-clock me-2"></i>${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }, 1000);
    }
    
    const examModalEl = document.getElementById('examModal');
    examModalEl.addEventListener('hidden.bs.modal', function () {
        if (timerInterval) clearInterval(timerInterval);
    });

    document.getElementById('submitExamBtn').addEventListener('click', async function() {
        if (timerInterval) clearInterval(timerInterval);
        
        const container = document.getElementById('questionsContainer');
        const answers = {};

        container.querySelectorAll('.question-card').forEach(card => {
            const questionId = String(card.dataset.questionId);
            
            const radioInput = card.querySelector('input[type="radio"]:checked');
            if (radioInput) {
                answers[questionId] = radioInput.value;
            } else {
                const dropzone = card.querySelector('.answer-dropzone');
                if (dropzone) {
                    const chipInDropzone = dropzone.querySelector('.answer-chip.in-dropzone');
                    if (chipInDropzone) {
                        answers[questionId] = chipInDropzone.dataset.answer;
                    } else {
                        answers[questionId] = '';
                    }
                } else {
                    const textInput = card.querySelector('input[type="text"]');
                    if (textInput) {
                        answers[questionId] = textInput.value;
                    }
                }
            }
        });

        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Validating...';

        try {
            const response = await fetch('/api/database/exam/validate/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: JSON.stringify({
                    questions: currentQuestions.map(q => ({
                        id: String(q.id),
                        question: q.question,
                        correct_answer: q.correct_answer,
                        type: q.type,
                        explanation: q.explanation
                    })),
                    user_answers: answers
                })
            });

            const data = await response.json();
            console.log('Validate exam response:', data);
            
            if (data.success) {
                const examModalEl = document.getElementById('examModal');
                const examModal = bootstrap.Modal.getInstance(examModalEl) || new bootstrap.Modal(examModalEl);
                examModal.hide();
                displayResults(data);
            } else {
                alert('Error: ' + (data.error || 'Validation failed.'));
            }
        } catch (error) {
            console.error('Error submitting exam:', error);
            alert('Failed to submit exam'); 
        } finally {
            this.disabled = false;
            this.innerHTML = '<i class="fas fa-check-circle me-2"></i>Submit Answers';
        }
    });

    function displayResults(data) {
        const summary = data.summary;
        const resultId = window.generateResultId();
        
        const summaryJSON = JSON.stringify(summary);
        const resultsJSON = JSON.stringify(data.results);
        
        let html = `
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="result-stat correct">
                        <h3>${summary.correct}</h3>
                        <p class="mb-0"><i class="fas fa-check-circle me-2"></i>Correct</p>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="result-stat wrong">
                        <h3>${summary.wrong}</h3>
                        <p class="mb-0"><i class="fas fa-times-circle me-2"></i>Wrong</p>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="result-stat total">
                        <h3>${summary.total}</h3>
                        <p class="mb-0"><i class="fas fa-list me-2"></i>Total</p>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="result-stat percentage">
                        <h3>${summary.percentage}%</h3>
                        <p class="mb-0"><i class="fas fa-chart-line me-2"></i>Score</p>
                    </div>
                </div>
            </div>

            <div class="chart-row">
                <div class="chart-container">
                    <h5 style="text-align: center; margin-bottom: 1rem; color: #1f2937;">
                        <i class="fas fa-chart-pie me-2"></i>Performance Overview
                    </h5>
                    <canvas id="pieChart"></canvas>
                </div>
                <div class="chart-container">
                    <h5 style="text-align: center; margin-bottom: 1rem; color: #1f2937;">
                        <i class="fas fa-chart-bar me-2"></i>Score Breakdown
                    </h5>
                    <canvas id="barChart"></canvas>
                </div>
            </div>
            
            <h5 class="mb-3 mt-4"><i class="fas fa-clipboard-list me-2"></i>Detailed Results:</h5>
        `;

        data.results.forEach((result, index) => {
            const borderClass = result.is_correct ? 'border-success' : 'border-danger';
            const icon = result.is_correct ? 
                '<i class="fas fa-check-circle text-success"></i>' : 
                '<i class="fas fa-times-circle text-danger"></i>';
            
            const questionNumber = index + 1;
            
            html += `
                <div class="question-card ${borderClass}" style="border-width: 3px;">
                    <h5>${icon} Question ${questionNumber}: ${result.question}</h5>
                    <p class="mb-1"><strong>Your Answer:</strong> 
                        <span class="${result.is_correct ? 'text-success' : 'text-danger'}">
                            ${result.user_answer || 'Not answered'}
                        </span>
                    </p>
                    ${!result.is_correct ? `<p class="mb-1"><strong>Correct Answer:</strong> <span class="text-success">${result.correct_answer}</span></p>` : ''}
                    <p class="mb-0 text-muted"><em><i class="fas fa-lightbulb me-2"></i>${result.explanation || 'No explanation provided'}</em></p>
                </div>
            `;
        });

        html += `
            <div class="sharing-section">
                <div class="sharing-header">
                    <h5><i class="fas fa-share-alt me-2"></i>Share Your Results</h5>
                    <p>Share your exam performance with friends, teachers, or on social media</p>
                </div>
                
                <div class="sharing-buttons">
                    <button class="share-btn whatsapp" onclick='window.shareViaWhatsApp(${summaryJSON})'>
                        <i class="fab fa-whatsapp"></i>
                        <span>WhatsApp</span>
                    </button>
                    
                    <button class="share-btn link" onclick='window.copyResultLink("${resultId}", ${summaryJSON})'>
                        <i class="fas fa-link"></i>
                        <span>Copy Link</span>
                    </button>
                    
                    <button class="share-btn email" onclick='window.shareViaEmail(${summaryJSON})'>
                        <i class="fas fa-envelope"></i>
                        <span>Email</span>
                    </button>
                    
                    <button class="share-btn download" onclick='window.downloadResultsPDF(${summaryJSON}, ${resultsJSON})'>
                        <i class="fas fa-download"></i>
                        <span>Download PDF</span>
                    </button>
                </div>
                
                <div id="linkCopiedMessage" class="link-copied-message" style="display: none;">
                    <i class="fas fa-check-circle me-2"></i>Link copied to clipboard!
                </div>
            </div>
        `;

        document.getElementById('resultsContent').innerHTML = html;
        
        const modal = new bootstrap.Modal(document.getElementById('resultsModal'));
        modal.show();

        setTimeout(() => {
            renderCharts(summary);
        }, 300);
    }

    function renderCharts(summary) {
        const pieCtx = document.getElementById('pieChart');
        if (pieCtx) {
            new Chart(pieCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Correct', 'Wrong'],
                    datasets: [{
                        data: [summary.correct, summary.wrong],
                        backgroundColor: [
                            'rgba(16, 185, 129, 0.8)',
                            'rgba(239, 68, 68, 0.8)'
                        ],
                        borderColor: [
                            'rgba(16, 185, 129, 1)',
                            'rgba(239, 68, 68, 1)'
                        ],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 15,
                                font: {
                                    size: 13
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = ((value / total) * 100).toFixed(1);
                                    return `${label}: ${value} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        }

        const barCtx = document.getElementById('barChart');
        if (barCtx) {
            new Chart(barCtx, {
                type: 'bar',
                data: {
                    labels: ['Correct', 'Wrong', 'Total'],
                    datasets: [{
                        label: 'Questions',
                        data: [summary.correct, summary.wrong, summary.total],
                        backgroundColor: [
                            'rgba(16, 185, 129, 0.8)',
                            'rgba(239, 68, 68, 0.8)',
                            'rgba(59, 130, 246, 0.8)'
                        ],
                        borderColor: [
                            'rgba(16, 185, 129, 1)',
                            'rgba(239, 68, 68, 1)',
                            'rgba(59, 130, 246, 1)'
                        ],
                        borderWidth: 2,
                        borderRadius: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label}: ${context.parsed.y} questions`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });
        }
    }

    // ============================================================================
    // LECTURE SHEETS TAB FUNCTIONALITY
    // ============================================================================

    const lectureCategorySelect = document.getElementById('lectureCategorySelect');
    const lectureCourseSelect = document.getElementById('lectureCourseSelect');
    const lectureChapterSelect = document.getElementById('lectureChapterSelect');
    const loadLectureSheetsBtn = document.getElementById('loadLectureSheetsBtn');

    document.getElementById('lecture-sheets-tab').addEventListener('click', function() {
        if (lectureCategorySelect.options.length <= 1) {
            loadLectureCategories();
        }
    });

    async function loadLectureCategories() {
        try {
            const response = await fetch('/api/practice/categories/');
            const data = await response.json();
            
            if (data.success) {
                lectureCategorySelect.innerHTML = '<option value="">-- Choose Category --</option>';
                data.categories.forEach(cat => {
                    lectureCategorySelect.innerHTML += `<option value="${cat.id}">${cat.name}</option>`;
                });
            }
        } catch (error) {
            console.error('Error loading categories:', error);
        }
    }

    lectureCategorySelect.addEventListener('change', async function() {
        const categoryId = this.value;
        lectureCourseSelect.disabled = true;
        lectureChapterSelect.disabled = true;
        loadLectureSheetsBtn.disabled = true;
        
        lectureCourseSelect.innerHTML = '<option value="">Loading...</option>';

        if (!categoryId) {
            lectureCourseSelect.innerHTML = '<option value="">-- Select a category first --</option>';
            return;
        }

        try {
            const response = await fetch(`/api/practice/courses/${categoryId}/`);
            const data = await response.json();
            
            if (data.success) {
                lectureCourseSelect.innerHTML = '<option value="">-- Select a course --</option>';
                data.courses.forEach(course => {
                    lectureCourseSelect.innerHTML += `<option value="${course.id}">${course.title}</option>`;
                });
                lectureCourseSelect.disabled = false;
            }
        } catch (error) {
            console.error('Error loading courses:', error);
            lectureCourseSelect.innerHTML = '<option value="">Error loading courses</option>';
        }
    });

    lectureCourseSelect.addEventListener('change', async function() {
        const courseId = this.value;
        lectureChapterSelect.disabled = true;
        loadLectureSheetsBtn.disabled = true;
        
        lectureChapterSelect.innerHTML = '<option value="">Loading...</option>';

        if (!courseId) {
            lectureChapterSelect.innerHTML = '<option value="">-- Select a course first --</option>';
            return;
        }

        try {
            const response = await fetch(`/api/practice/chapters/${courseId}/`);
            const data = await response.json();
            
            if (data.success) {
                lectureChapterSelect.innerHTML = '';
                data.chapters.forEach(chapter => {
                    lectureChapterSelect.innerHTML += `<option value="${chapter.id}">${chapter.title}</option>`;
                });
                lectureChapterSelect.disabled = false;
            }
        } catch (error) {
            console.error('Error loading chapters:', error);
            lectureChapterSelect.innerHTML = '<option value="">Error loading chapters</option>';
        }
    });

    lectureChapterSelect.addEventListener('change', function() {
        loadLectureSheetsBtn.disabled = lectureChapterSelect.selectedOptions.length === 0;
    });

    loadLectureSheetsBtn.addEventListener('click', async function() {
        const selectedChapters = Array.from(lectureChapterSelect.selectedOptions).map(opt => opt.value);

        if (selectedChapters.length === 0) {
            alert('Please select at least one chapter');
            return;
        }

        document.getElementById('lectureSheetsGrid').style.display = 'none';
        document.getElementById('lectureEmptyState').style.display = 'none';
        document.getElementById('lectureLoadingContainer').style.display = 'block';

        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Loading Lecture Sheets...';

        try {
            const response = await fetch('/api/lecture-sheets/load/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: JSON.stringify({
                    chapter_ids: selectedChapters
                })
            });

            const data = await response.json();
            console.log('Lecture sheets response:', data);
            
            document.getElementById('lectureLoadingContainer').style.display = 'none';
            
            if (data.success && data.lecture_sheets.length > 0) {
                displayLectureSheetsList(data.lecture_sheets);
            } else {
                document.getElementById('lectureEmptyState').style.display = 'block';
            }
        } catch (error) {
            console.error('Error loading lecture sheets:', error);
            document.getElementById('lectureLoadingContainer').style.display = 'none';
            document.getElementById('lectureEmptyState').style.display = 'block';
        } finally {
            this.disabled = false;
            this.innerHTML = '<i class="fas fa-file-alt me-2"></i><span>Load Lecture Sheets</span>';
        }
    });

    function displayLectureSheetsList(sheets) {
        const grid = document.getElementById('lectureSheetsGrid');
        grid.style.display = 'flex';
        grid.innerHTML = '';
        
        sheets.forEach(sheet => {
            const col = document.createElement('div');
            col.className = 'col-md-6 col-lg-4 mb-4';
            
            col.innerHTML = `
                <div class="lecture-card">
                    <div class="lecture-card-header">
                        <div class="lecture-card-title">
                            <i class="fas fa-file-alt"></i>
                            <span>${sheet.saved_name}</span>
                        </div>
                        <div class="lecture-card-meta">
                            <span class="meta-badge primary">
                                <i class="fas fa-book"></i>
                                ${sheet.course_title}
                            </span>
                            <span class="meta-badge success">
                                <i class="fas fa-language"></i>
                                ${sheet.language}
                            </span>
                        </div>
                    </div>
                    <div class="lecture-card-preview">
                        ${sheet.content_preview}
                    </div>
                    <div style="margin-bottom: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;">
                        <small style="color: #9ca3af;">
                            <i class="far fa-calendar me-2"></i>${sheet.created_at}
                        </small>
                    </div>
                    <div class="lecture-card-footer">
                        <button class="btn-view" onclick="viewLectureSheetContent(${sheet.id})">
                            <i class="fas fa-eye"></i>
                            <span>View Full Content</span>
                        </button>
                    </div>
                </div>
            `;
            
            grid.appendChild(col);
        });
    }
});
</script>