{% extends 'base.html' %}
{% block title %}Student Details{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto space-y-8 px-2 md:px-0">
    <!-- Back Button and Header -->
    <div class="flex justify-between items-center mb-2">
        <a href="{{ url_for('teacher.manage_students') }}" class="btn btn-outline btn-sm">
            <i class="fas fa-arrow-left mr-2"></i> <span class="hidden xs:inline">Back to Students</span>
        </a>
        <h1 class="text-lg sm:text-xl font-bold">Student Details</h1>
        <div class="w-8"></div> <!-- Empty div for flex spacing -->
    </div>
    
    <!-- Student Profile Card -->
    <div class="card bg-gradient-to-br from-primary/10 to-base-100 shadow-2xl border border-primary/20">
        <div class="card-body p-6 flex flex-col md:flex-row gap-6 items-center md:items-center">
            <div class="avatar placeholder">
                <div class="bg-primary text-primary-content rounded-full w-24 md:w-28 border-4 border-primary/30 shadow-lg">
                    <span class="text-3xl md:text-4xl">{{ student.username[:2].upper() }}</span>
                </div>
            </div>
            <div class="flex-1 text-center md:text-left">
                <div class="flex flex-col md:flex-row items-center md:items-start justify-between gap-2">
                    <h1 class="text-3xl md:text-4xl font-extrabold tracking-tight flex items-center gap-2">
                        <i class="fas fa-user-graduate text-primary"></i> {{ student.username }}
                    </h1>
                    <!-- Actions Dropdown -->
                    <div class="dropdown dropdown-end mt-2 md:mt-0">
                        <label tabindex="0" class="btn btn-ghost btn-sm btn-circle">
                            <i class="fas fa-ellipsis-v"></i>
                        </label>
                        <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                            <li>
                                <form method="POST" action="{{ url_for('teacher.reset_student_progress', student_id=student.id) }}" onsubmit="return confirm('Are you sure you want to reset all progress for this student?')">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <button type="submit" class="text-error">
                                        <i class="fas fa-trash-alt"></i> Reset All Progress
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 text-sm mt-4">
                    <div class="flex flex-col items-center md:items-start">
                        <span class="text-base-content/60 font-medium"><i class="fas fa-envelope mr-1"></i> Email</span>
                        <span class="font-semibold">{{ student.email }}</span>
                    </div>
                    {% if student.roll_number %}
                    <div class="flex flex-col items-center md:items-start">
                        <span class="text-base-content/60 font-medium"><i class="fas fa-id-badge mr-1"></i> Roll #</span>
                        <span class="font-semibold">{{ student.roll_number }}</span>
                    </div>
                    {% endif %}
                    {% if student.department %}
                    <div class="flex flex-col items-center md:items-start">
                        <span class="text-base-content/60 font-medium"><i class="fas fa-building mr-1"></i> Department</span>
                        <span class="font-semibold">{{ student.department }}</span>
                    </div>
                    {% endif %}
                    {% if student.program %}
                    <div class="flex flex-col items-center md:items-start">
                        <span class="text-base-content/60 font-medium"><i class="fas fa-book mr-1"></i> Program</span>
                        <span class="font-semibold">{{ student.program }}</span>
                    </div>
                    {% endif %}
                    {% if student.section %}
                    <div class="flex flex-col items-center md:items-start">
                        <span class="text-base-content/60 font-medium"><i class="fas fa-users mr-1"></i> Section</span>
                        <span class="font-semibold">{{ student.section }}</span>
                    </div>
                    {% endif %}
                    {% if student.semester %}
                    <div class="flex flex-col items-center md:items-start">
                        <span class="text-base-content/60 font-medium"><i class="fas fa-calendar-alt mr-1"></i> Semester</span>
                        <span class="font-semibold">{{ student.semester }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Progress Overview Cards (1 row, responsive) -->
    <div class="flex flex-col md:flex-row gap-4 md:gap-6 w-full">
        <!-- Topics Progress -->
        <div class="card flex-1 bg-base-100 shadow-xl">
            <div class="card-body p-4 sm:p-6 flex flex-col items-center">
                <h2 class="card-title text-base md:text-lg mb-2">
                    <i class="fas fa-book text-primary mr-2"></i>
                    Topics Progress
                </h2>
                <div class="text-center mt-2">
                    <div class="radial-progress text-primary" style="--value:{{ (real_progress_count / all_topics.values()|length * 100)|round|int if all_topics.values()|length > 0 else 0 }}; --size: 5rem;">
                        {{ (real_progress_count / all_topics.values()|length * 100)|round|int if all_topics.values()|length > 0 else 0 }}%
                    </div>
                    <p class="mt-2 text-xs md:text-sm">
                        <span class="font-bold">{{ real_progress_count }}</span> of <span class="font-bold">{{ all_topics.values()|length }}</span> topics started
                    </p>
                </div>
            </div>
        </div>
        <!-- Comprehension Score -->
        <div class="card flex-1 bg-base-100 shadow-xl">
            <div class="card-body p-4 sm:p-6 flex flex-col items-center">
                <h2 class="card-title text-base md:text-lg mb-2">
                    <i class="fas fa-brain text-accent mr-2"></i>
                    Avg. Comprehension
                </h2>
                <div class="text-center mt-2">
                    <div class="radial-progress text-accent" style="--value:{{ stats.avg_comprehension|round|int }}; --size: 5rem;">
                        {{ stats.avg_comprehension|round|int }}%
                    </div>
                    <p class="mt-2 text-xs md:text-sm text-base-content/70">Based on completed quizzes</p>
                </div>
            </div>
        </div>
        <!-- Speaking Score -->
        <div class="card flex-1 bg-base-100 shadow-xl">
            <div class="card-body p-4 sm:p-6 flex flex-col items-center">
                <h2 class="card-title text-base md:text-lg mb-2">
                    <i class="fas fa-microphone text-secondary mr-2"></i>
                    Avg. Speaking Score
                </h2>
                <div class="text-center mt-2">
                    <div class="radial-progress text-secondary" style="--value:{{ stats.avg_speaking|round|int }}; --size: 5rem;">
                        {{ stats.avg_speaking|round|int }}%
                    </div>
                    <p class="mt-2 text-xs md:text-sm text-base-content/70">Based on completed speaking exercises</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Detailed Topic Progress -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title mb-4">
                <i class="fas fa-tasks text-primary mr-2"></i>
                Detailed Topic Progress
            </h2>
            
            {% if progress_records %}
                <!-- Mobile Card View -->
                <div class="md:hidden space-y-4">
                    <input type="text" placeholder="Search topics..." class="input input-bordered w-full" id="topicSearchMobile">
                    {% for progress in progress_records %}
                        {% set topic = all_topics.get(progress.topic_id) %}
                        {% if topic %}
                            <div class="card bg-base-200 shadow-sm topic-card">
                                <div class="card-body p-4">
                                    <div class="flex justify-between items-start mb-2">
                                        <div class="flex-1">
                                            <h3 class="font-medium text-base topic-title">{{ topic.title }}</h3>
                                            <div class="text-sm text-base-content/70">{{ topic.category }}</div>
                                        </div>
                                        <button class="btn btn-ghost btn-xs ml-2" onclick="toggleDetails({{ loop.index }})">
                                            <i class="fas fa-chevron-down" id="chevron-{{ loop.index }}"></i>
                                        </button>
                                    </div>
                                    
                                    <!-- Progress Bar -->
                                    {% set completed_stages = 0 %}
                                    {% if progress.reading_completed %}{% set completed_stages = completed_stages + 1 %}{% endif %}
                                    {% if progress.speaking_completed %}{% set completed_stages = completed_stages + 1 %}{% endif %}
                                    {% if progress.comprehension_completed %}{% set completed_stages = completed_stages + 1 %}{% endif %}
                                    {% set progress_percentage = (completed_stages / 3 * 100)|round|int %}
                                    
                                    <div class="mb-3">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>Progress</span>
                                            <span>{{ progress_percentage }}%</span>
                                        </div>
                                        <progress class="progress progress-primary w-full" value="{{ progress_percentage }}" max="100"></progress>
                                    </div>
                                    
                                    <div class="hidden" id="details-{{ loop.index }}">
                                        <div class="divider my-2"></div>
                                        
                                        <div class="grid grid-cols-2 gap-2 text-sm">
                                            <div>
                                                <div class="font-medium mb-1">Reading</div>
                                                {% if progress.reading_completed %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-success badge-sm gap-1"><i class="fas fa-check"></i> Completed</span>
                                                        {% if progress.reading_time %}
                                                            <div class="text-xs text-base-content/60">{{ (progress.reading_time / 60)|round|int }} min</div>
                                                        {% endif %}
                                                    </div>
                                                {% elif progress.reading_started %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-warning badge-sm gap-1"><i class="fas fa-spinner"></i> Started</span>
                                                        {% if progress.reading_started %}
                                                            <div class="text-xs text-base-content/60">{{ progress.reading_started.strftime('%b %d') }}</div>
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                    <span class="badge badge-ghost badge-sm">Not Started</span>
                                                {% endif %}
                                            </div>
                                            
                                            <div>
                                                <div class="font-medium mb-1">Speaking</div>
                                                {% if progress.speaking_completed %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-success badge-sm gap-1"><i class="fas fa-check"></i> Completed</span>
                                                        {% if progress.overall_speaking_score %}
                                                            <span class="badge badge-accent badge-sm block w-fit">{{ progress.overall_speaking_score|round|int }}%</span>
                                                        {% endif %}
                                                    </div>
                                                {% elif progress.speaking_started %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-warning badge-sm gap-1"><i class="fas fa-spinner"></i> Started</span>
                                                        {% if progress.speaking_started %}
                                                            <div class="text-xs text-base-content/60">{{ progress.speaking_started.strftime('%b %d') }}</div>
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                    <span class="badge badge-ghost badge-sm">Not Started</span>
                                                {% endif %}
                                            </div>
                                            
                                            <div>
                                                <div class="font-medium mb-1">Comprehension</div>
                                                {% if progress.comprehension_completed %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-success badge-sm gap-1"><i class="fas fa-check"></i> Completed</span>
                                                        {% if progress.comprehension_score %}
                                                            <span class="badge badge-accent badge-sm block w-fit">{{ progress.comprehension_score|round|int }}%</span>
                                                        {% endif %}
                                                    </div>
                                                {% elif progress.comprehension_started %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-warning badge-sm gap-1"><i class="fas fa-spinner"></i> Started</span>
                                                        {% if progress.comprehension_started %}
                                                            <div class="text-xs text-base-content/60">{{ progress.comprehension_started.strftime('%b %d') }}</div>
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                    <span class="badge badge-ghost badge-sm">Not Started</span>
                                                {% endif %}
                                            </div>
                                            
                                            <div>
                                                <div class="font-medium mb-1">Overall Progress</div>
                                                {% if progress.completed_at %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-success badge-sm gap-1">
                                                            <i class="fas fa-check-circle"></i> Completed
                                                        </span>
                                                        <div class="text-xs text-base-content/60">{{ progress.completed_at.strftime('%b %d') }}</div>
                                                    </div>
                                                {% else %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-info badge-sm gap-1">
                                                            <i class="fas fa-hourglass-half"></i> In Progress
                                                        </span>
                                                        {% if progress.started_at %}
                                                            <div class="text-xs text-base-content/60">Started {{ progress.started_at.strftime('%b %d') }}</div>
                                                        {% endif %}
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
                
                <!-- Desktop Table View -->
                <div class="hidden md:block">
                    <div class="mb-4">
                        <input type="text" placeholder="Search topics..." class="input input-bordered w-full" id="topicSearchDesktop">
                    </div>
                    <div class="overflow-x-auto">
                        <table class="table w-full">
                            <thead>
                                <tr>
                                    <th>Topic & Category</th>
                                    <th>Progress Overview</th>
                                    <th>Reading Progress</th>
                                    <th>Speaking Progress</th>
                                    <th>Comprehension Progress</th>
                                    <th>Overall Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for progress in progress_records %}
                                    {% set topic = all_topics.get(progress.topic_id) %}
                                    {% if topic %}
                                        <tr class="topic-row">
                                            <td class="font-medium topic-title">
                                                <div>
                                                    <div class="font-medium">{{ topic.title }}</div>
                                                    <div class="text-sm text-base-content/70">{{ topic.category }}</div>
                                                </div>
                                            </td>
                                            <td>
                                                {% set completed_stages = 0 %}
                                                {% if progress.reading_completed %}{% set completed_stages = completed_stages + 1 %}{% endif %}
                                                {% if progress.speaking_completed %}{% set completed_stages = completed_stages + 1 %}{% endif %}
                                                {% if progress.comprehension_completed %}{% set completed_stages = completed_stages + 1 %}{% endif %}
                                                {% set progress_percentage = (completed_stages / 3 * 100)|round|int %}
                                                
                                                <div class="space-y-2">
                                                    <div class="flex justify-between text-xs">
                                                        <span>Progress</span>
                                                        <span>{{ progress_percentage }}%</span>
                                                    </div>
                                                    <progress class="progress progress-primary w-full" value="{{ progress_percentage }}" max="100"></progress>
                                                </div>
                                            </td>
                                            <td>
                                                {% if progress.reading_completed %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-success gap-1"><i class="fas fa-check"></i> Completed</span>
                                                        {% if progress.reading_time %}
                                                            <div class="text-xs text-base-content/60">{{ (progress.reading_time / 60)|round|int }} min</div>
                                                        {% endif %}
                                                    </div>
                                                {% elif progress.reading_started %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-warning gap-1"><i class="fas fa-spinner"></i> Started</span>
                                                        {% if progress.reading_started %}
                                                            <div class="text-xs text-base-content/60">{{ progress.reading_started.strftime('%b %d') }}</div>
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                    <span class="badge badge-ghost">Not Started</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if progress.speaking_completed %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-success gap-1"><i class="fas fa-check"></i> Completed</span>
                                                        {% if progress.overall_speaking_score %}
                                                            <span class="badge badge-accent">{{ progress.overall_speaking_score|round|int }}%</span>
                                                        {% endif %}
                                                    </div>
                                                {% elif progress.speaking_started %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-warning gap-1"><i class="fas fa-spinner"></i> Started</span>
                                                        {% if progress.speaking_started %}
                                                            <div class="text-xs text-base-content/60">{{ progress.speaking_started.strftime('%b %d') }}</div>
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                    <span class="badge badge-ghost">Not Started</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if progress.comprehension_completed %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-success gap-1"><i class="fas fa-check"></i> Completed</span>
                                                        {% if progress.comprehension_score %}
                                                            <span class="badge badge-accent">{{ progress.comprehension_score|round|int }}%</span>
                                                        {% endif %}
                                                    </div>
                                                {% elif progress.comprehension_started %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-warning gap-1"><i class="fas fa-spinner"></i> Started</span>
                                                        {% if progress.comprehension_started %}
                                                            <div class="text-xs text-base-content/60">{{ progress.comprehension_started.strftime('%b %d') }}</div>
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                    <span class="badge badge-ghost">Not Started</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if progress.completed_at %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-success gap-1">
                                                            <i class="fas fa-check-circle"></i> Completed
                                                        </span>
                                                        <div class="text-xs text-base-content/60">{{ progress.completed_at.strftime('%b %d') }}</div>
                                                    </div>
                                                {% else %}
                                                    <div class="space-y-1">
                                                        <span class="badge badge-info gap-1">
                                                            <i class="fas fa-hourglass-half"></i> In Progress
                                                        </span>
                                                        {% if progress.started_at %}
                                                            <div class="text-xs text-base-content/60">Started {{ progress.started_at.strftime('%b %d') }}</div>
                                                        {% endif %}
                                                    </div>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% else %}
                <div class="bg-base-200 text-center p-8 rounded-lg">
                    <div class="flex flex-col items-center">
                        <div class="bg-base-100 p-4 rounded-full mb-4">
                            <i class="fas fa-book-open text-4xl text-base-content/50"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">No Progress Yet</h3>
                        <p class="text-base-content/70">
                            This student hasn't started any topics yet.
                        </p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Recent Submissions -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">
                <i class="fas fa-clipboard-check text-primary mr-2"></i>
                Recent Submissions
            </h2>
            
            {% set submissions_found = false %}
            
            {% for progress in progress_records %}
                {% if progress.submissions %}
                    {% set submissions_found = true %}
                    {% for submission in progress.submissions[:3] %}
                        <div class="card bg-base-200 shadow-sm mt-4">
                            <div class="card-body p-4">
                                <div class="flex flex-col sm:flex-row justify-between sm:items-start gap-2">
                                    <div>
                                        <h3 class="font-bold">
                                            {{ all_topics.get(progress.topic_id).title if all_topics.get(progress.topic_id) else "Unknown Topic" }}
                                        </h3>
                                        <p class="text-sm text-base-content/70 mt-1">
                                            {{ submission.content_type|capitalize }} Submission • {{ submission.created_at.strftime('%b %d, %Y') }}
                                        </p>
                                    </div>
                                    <div class="badge {{ 'badge-warning' if submission.status == 'pending' else ('badge-success' if submission.status == 'approved' else 'badge-error') }}">
                                        {{ submission.status|capitalize }}
                                    </div>
                                </div>
                                
                                {% if submission.score %}
                                <div class="mt-2">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm text-base-content/70">Score:</span>
                                        <div class="badge {{ 'badge-success' if submission.score >= 70 else ('badge-warning' if submission.score >= 50 else 'badge-error') }}">
                                            {{ submission.score|round|int }}%
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                
                                <div class="card-actions justify-end mt-3">
                                    <a href="{{ url_for('teacher.review_submission', submission_id=submission.id) }}" class="btn btn-sm btn-primary w-full sm:w-auto">
                                        <i class="fas fa-eye mr-1"></i> View Details
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endfor %}
            
            {% if not submissions_found %}
                <div class="bg-base-200 text-center p-8 rounded-lg mt-4">
                    <div class="flex flex-col items-center">
                        <div class="bg-base-100 p-4 rounded-full mb-4">
                            <i class="fas fa-file-alt text-4xl text-base-content/50"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">No Submissions</h3>
                        <p class="text-base-content/70">
                            This student hasn't submitted any assignments yet.
                        </p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
    /* Customize the radial progress component */
    .radial-progress {
        --size: 8rem;
        --thickness: 0.8rem;
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    /* Define xs breakpoint for the "Back to Students" text */
    @media (min-width: 480px) {
        .xs\:inline {
            display: inline;
        }
    }
    
    /* Transition for expand/collapse */
    .hidden {
        display: none;
    }
</style>

<script>
    // Function to toggle details visibility
    function toggleDetails(index) {
        const detailsElement = document.getElementById(`details-${index}`);
        const chevronElement = document.getElementById(`chevron-${index}`);
        
        if (detailsElement.classList.contains('hidden')) {
            detailsElement.classList.remove('hidden');
            chevronElement.classList.remove('fa-chevron-down');
            chevronElement.classList.add('fa-chevron-up');
        } else {
            detailsElement.classList.add('hidden');
            chevronElement.classList.remove('fa-chevron-up');
            chevronElement.classList.add('fa-chevron-down');
        }
    }
    
    // Filter functions for mobile and desktop
    document.addEventListener('DOMContentLoaded', function() {
        const topicSearchMobile = document.getElementById('topicSearchMobile');
        const topicSearchDesktop = document.getElementById('topicSearchDesktop');
        
        if (topicSearchMobile) {
            topicSearchMobile.addEventListener('input', function() {
                filterTopics(this.value, 'mobile');
            });
        }
        
        if (topicSearchDesktop) {
            topicSearchDesktop.addEventListener('input', function() {
                filterTopics(this.value, 'desktop');
            });
        }
        
        function filterTopics(query, device) {
            query = query.toLowerCase();
            
            if (device === 'mobile') {
                const topicCards = document.querySelectorAll('.topic-card');
                topicCards.forEach(card => {
                    const title = card.querySelector('.topic-title').textContent.toLowerCase();
                    if (title.includes(query)) {
                        card.style.display = '';
                    } else {
                        card.style.display = 'none';
                    }
                });
            } else {
                const topicRows = document.querySelectorAll('.topic-row');
                topicRows.forEach(row => {
                    const title = row.querySelector('.topic-title').textContent.toLowerCase();
                    if (title.includes(query)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            }
        }
    });
</script>



{% endblock %}