Lecture Sheets Library


<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;
        --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 h2 {
        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;
    }

    .content-card {
        background: white;
        border-radius: 16px;
        padding: 2rem;
        box-shadow: var(--card-shadow);
        margin-bottom: 2rem;
    }

    .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);
    }

    .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;
    }

    .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); }
    }

    .modal-xl {
        max-width: 1200px;
    }

    .modal-content {
        border-radius: 16px;
        border: none;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }

    .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;
    }

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

    .lecture-sheet-content {
        line-height: 1.8;
        font-size: 1rem;
    }

    .modal-footer {
        border-top: 2px solid #e5e7eb;
        padding: 1.25rem 2rem;
    }

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

        .lecture-card {
            padding: 1.25rem;
        }

        .lecture-card-footer {
            flex-direction: column;
        }
    }
</style>



<div class="container-fluid py-4">
    <!-- Page Header -->
    <div class="page-header">
        <h2><i class="fas fa-file-alt me-3"></i>Lecture Sheets Library</h2>
        <p>Access and view your saved lecture sheets from the database</p>
    </div>

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

    <!-- Empty State -->
    <div id="emptyState" class="empty-state" style="display: none;">
        <div class="empty-state-icon">
            <i class="fas fa-inbox"></i>
        </div>
        <h3>No Lecture Sheets Yet</h3>
        <p>You haven't saved any lecture sheets. Generate some lecture sheets to see them here!</p>
        <a href="/practice-exam/" class="btn btn-primary btn-lg">
            <i class="fas fa-plus-circle me-2"></i>Generate Lecture Sheet
        </a>
    </div>

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

<!-- Lecture Sheet Modal -->
<div class="modal fade" id="lectureSheetModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="modalTitle"><i class="fas fa-file-alt me-2"></i>Lecture Sheet</h5>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="modalContent">
                <!-- Content will be loaded here -->
            </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="printLectureSheet()">
                    <i class="fas fa-print me-2"></i>Print
                </button>
            </div>
        </div>
    </div>
</div>


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


<script>
document.addEventListener('DOMContentLoaded', function() {
    loadLectureSheets();

    async function loadLectureSheets() {
        try {
            const response = await fetch('/api/lecture-sheets/list/');
            const data = await response.json();
            
            document.getElementById('loadingContainer').style.display = 'none';
            
            if (data.success && data.lecture_sheets.length > 0) {
                displayLectureSheetsList(data.lecture_sheets);
            } else {
                document.getElementById('emptyState').style.display = 'block';
            }
        } catch (error) {
            console.error('Error loading lecture sheets:', error);
            document.getElementById('loadingContainer').innerHTML = `
                <div class="empty-state">
                    <div class="empty-state-icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <h3>Failed to Load</h3>
                    <p>There was an error loading your lecture sheets. Please try again.</p>
                    <button class="btn btn-primary btn-lg" onclick="location.reload()">
                        <i class="fas fa-redo me-2"></i>Retry
                    </button>
                </div>
            `;
        }
    }

    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 || 'Untitled Lecture Sheet'}</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="viewLectureSheet(${sheet.id})">
                            <i class="fas fa-eye"></i>
                            <span>View Full Content</span>
                        </button>
                    </div>
                </div>
            `;
            
            grid.appendChild(col);
        });
    }

    window.viewLectureSheet = async function(lectureSheetId) {
        try {
            const response = await fetch('/api/lecture-sheets/detail/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: JSON.stringify({
                    lecture_sheet_id: lectureSheetId
                })
            });

            const data = await response.json();
            
            if (data.success) {
                document.getElementById('modalTitle').innerHTML = 
                    `<i class="fas fa-file-alt me-2"></i>${data.lecture_sheet.saved_name}`;
                document.getElementById('modalContent').innerHTML = `
                    <div class="lecture-sheet-content">
                        ${data.lecture_sheet.content}
                    </div>
                `;
                
                const modal = new bootstrap.Modal(document.getElementById('lectureSheetModal'));
                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.printLectureSheet = function() {
        const content = document.getElementById('modalContent').innerHTML;
        const title = document.getElementById('modalTitle').textContent;
        
        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);
    };

    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;
    }
});
</script>