{% extends "base.html" %}

{% block title %}Devoirs - Fireflies{% endblock %}

{% block content %}
<h1 class="page-title">
    <i class="fas fa-book me-2"></i>Devoirs
</h1>

<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-filter me-2"></i>Options de filtrage</h5>
    </div>
    <div class="card-body">
        <form method="get" action="{{ url_for('homework') }}" class="row g-3 align-items-center">
            <div class="col-md-4">
                <label for="days" class="form-label">Jours à venir :</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-calendar-day"></i></span>
                    <input type="number" class="form-control" id="days" name="days" value="{{ days }}" min="1" max="30">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-check me-1"></i>Appliquer
                    </button>
                </div>
            </div>
            <div class="col-md-8">
                <div class="btn-group float-end" role="group">
                    <a href="{{ url_for('homework', days=7) }}" class="btn btn-outline-primary {% if days == 7 %}active{% endif %}">
                        <i class="fas fa-calendar-week me-1"></i>1 Semaine
                    </a>
                    <a href="{{ url_for('homework', days=14) }}" class="btn btn-outline-primary {% if days == 14 %}active{% endif %}">
                        <i class="fas fa-calendar-alt me-1"></i>2 Semaines
                    </a>
                    <a href="{{ url_for('homework', days=30) }}" class="btn btn-outline-primary {% if days == 30 %}active{% endif %}">
                        <i class="fas fa-calendar me-1"></i>1 Mois
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- View toggle buttons -->
<div class="mb-4">
    <ul class="nav nav-tabs" id="homeworkTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="list-tab" data-bs-toggle="tab" data-bs-target="#list-view" type="button" role="tab" aria-controls="list-view" aria-selected="true">
                <i class="fas fa-list me-1"></i>Liste ({{ days }} jours)
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="priority-tab" data-bs-toggle="tab" data-bs-target="#priority-view" type="button" role="tab" aria-controls="priority-view" aria-selected="false">
                <i class="fas fa-tasks me-1"></i>Priorités (tous les devoirs)
            </button>
        </li>
    </ul>
</div>

<div class="tab-content" id="homeworkTabsContent">
    <!-- List View Tab -->
    <div class="tab-pane fade show active" id="list-view" role="tabpanel" aria-labelledby="list-tab">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-list-check me-2"></i>Liste des devoirs</h5>
                            <span class="badge bg-primary">{{ homework|length }} devoirs</span>
                        </div>
                    </div>
                    <div class="card-body">
                        {% if homework %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th style="width: 20%">Matière</th>
                                        <th style="width: 45%">Description</th>
                                        <th style="width: 15%">Date limite</th>
                                        <th style="width: 10%">Statut</th>
                                        <th style="width: 10%">Jours restants</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for hw in homework %}
                                    {% set days_left = days_between(hw.date, today) %}
                                    <tr class="{% if days_left <= 1 and not hw.done %}table-danger{% elif days_left <= 3 and not hw.done %}table-warning{% elif hw.done %}table-success{% endif %}">
                                        <td>
                                            <span class="fw-bold">{{ hw.subject }}</span>
                                        </td>
                                        <td>
                                            <div class="homework-description">{{ hw.description }}</div>
                                        </td>
                                        <td>{{ hw.date }}</td>
                                        <td>
                                            <button class="btn btn-sm toggle-homework-btn {% if hw.done %}btn-success{% else %}btn-warning{% endif %}"
                                                    data-homework-id="{{ hw.id }}"
                                                    data-status="{% if hw.done %}done{% else %}pending{% endif %}">
                                                {% if hw.done %}
                                                <i class="fas fa-check-circle me-1"></i>Fait
                                                {% else %}
                                                <i class="fas fa-clock me-1"></i>Marquer comme fait
                                                {% endif %}
                                            </button>
                                        </td>
                                        <td>
                                            {% if days_left < 0 %}
                                                <span class="badge bg-danger" data-days-left="{{ days_left }}">En retard</span>
                                            {% elif days_left == 0 %}
                                                <span class="badge bg-danger" data-days-left="0">Aujourd'hui</span>
                                            {% elif days_left == 1 %}
                                                <span class="badge bg-warning text-dark" data-days-left="1">Demain</span>
                                            {% else %}
                                                <span class="badge bg-info" data-days-left="{{ days_left }}">{{ days_left }} jours</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-book text-muted" style="font-size: 4rem;"></i>
                            <h4 class="mt-3">Aucun devoir trouvé pour la période sélectionnée</h4>
                            <p class="text-muted">Essayez d'ajuster votre filtre ou profitez de votre temps libre !</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Priority View Tab -->
    <div class="tab-pane fade" id="priority-view" role="tabpanel" aria-labelledby="priority-tab">
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>À propos du système de priorité</h5>
                    </div>
                    <div class="card-body">
                        <p>Le système de priorité organise automatiquement <strong>tous vos devoirs</strong> en fonction de :</p>
                        <ul>
                            <li><strong>Date d'échéance</strong> - Les devoirs à rendre bientôt ont une priorité plus élevée</li>
                            <li><strong>Temps estimé</strong> - Vous pouvez définir le temps nécessaire pour chaque devoir</li>
                            <li><strong>Importance de la matière</strong> - Basée sur vos habitudes d'étude et préférences</li>
                        </ul>
                        <p>Cela vous aide à vous concentrer sur ce qui est le plus important et à ne jamais manquer une échéance.</p>
                        
                        <div class="alert alert-info">
                            <i class="fas fa-lightbulb me-2"></i>
                            <strong>Astuce :</strong> Mettez à jour le temps estimé pour chaque devoir afin d'obtenir des priorités plus précises. Cette vue affiche tous vos devoirs, indépendamment du filtre de jours sélectionné.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card border-danger">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0"><i class="fas fa-exclamation-circle me-2"></i>Priorité Haute</h5>
                    </div>
                    <div class="card-body">
                        {% if high_priority %}
                            <div class="list-group">
                                {% for hw in high_priority %}
                                <div class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">{{ hw.subject }}</h6>
                                        <small>
                                            {% if hw.days_until_due < 0 %}
                                                <span class="badge bg-danger">En retard</span>
                                            {% elif hw.days_until_due == 0 %}
                                                <span class="badge bg-danger">Aujourd'hui</span>
                                            {% elif hw.days_until_due == 1 %}
                                                <span class="badge bg-warning text-dark">Demain</span>
                                            {% else %}
                                                <span class="badge bg-info">{{ hw.days_until_due }} jours</span>
                                            {% endif %}
                                        </small>
                                    </div>
                                    <p class="mb-1">{{ hw.description|truncate(100) }}</p>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <small class="text-muted">Pour le : {{ hw.date }}</small>
                                        <div class="input-group input-group-sm" style="max-width: 150px;">
                                            <input type="number" class="form-control form-control-sm estimated-time-input" 
                                                   data-homework-id="{{ hw.id }}" value="{{ hw.estimated_time|default(60) }}" min="5" max="480">
                                            <span class="input-group-text">min</span>
                                            <button class="btn btn-sm btn-outline-primary save-time-btn" data-homework-id="{{ hw.id }}">
                                                <i class="fas fa-save"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                                <h5 class="mt-3">Aucun devoir à priorité haute</h5>
                                <p class="text-muted">Vous êtes à jour !</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="card border-warning">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0"><i class="fas fa-clock me-2"></i>Priorité Moyenne</h5>
                    </div>
                    <div class="card-body">
                        {% if medium_priority %}
                            <div class="list-group">
                                {% for hw in medium_priority %}
                                <div class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">{{ hw.subject }}</h6>
                                        <small>
                                            <span class="badge bg-info">{{ hw.days_until_due }} jours</span>
                                        </small>
                                    </div>
                                    <p class="mb-1">{{ hw.description|truncate(100) }}</p>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <small class="text-muted">Pour le : {{ hw.date }}</small>
                                        <div class="input-group input-group-sm" style="max-width: 150px;">
                                            <input type="number" class="form-control form-control-sm estimated-time-input" 
                                                   data-homework-id="{{ hw.id }}" value="{{ hw.estimated_time|default(60) }}" min="5" max="480">
                                            <span class="input-group-text">min</span>
                                            <button class="btn btn-sm btn-outline-primary save-time-btn" data-homework-id="{{ hw.id }}">
                                                <i class="fas fa-save"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                                <h5 class="mt-3">Aucun devoir à priorité moyenne</h5>
                                <p class="text-muted">Vous êtes en bonne voie !</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="card border-info">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>Priorité Basse</h5>
                    </div>
                    <div class="card-body">
                        {% if low_priority %}
                            <div class="list-group">
                                {% for hw in low_priority %}
                                <div class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">{{ hw.subject }}</h6>
                                        <small>
                                            <span class="badge bg-info">{{ hw.days_until_due }} jours</span>
                                        </small>
                                    </div>
                                    <p class="mb-1">{{ hw.description|truncate(100) }}</p>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <small class="text-muted">Pour le : {{ hw.date }}</small>
                                        <div class="input-group input-group-sm" style="max-width: 150px;">
                                            <input type="number" class="form-control form-control-sm estimated-time-input" 
                                                   data-homework-id="{{ hw.id }}" value="{{ hw.estimated_time|default(60) }}" min="5" max="480">
                                            <span class="input-group-text">min</span>
                                            <button class="btn btn-sm btn-outline-primary save-time-btn" data-homework-id="{{ hw.id }}">
                                                <i class="fas fa-save"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4">
                                <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                                <h5 class="mt-3">Aucun devoir à priorité basse</h5>
                                <p class="text-muted">Votre emploi du temps est dégagé !</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>Statut des devoirs</h5>
                </div>
                <div class="card-body">
                    {% set done_count = homework|selectattr('done', 'eq', true)|list|length %}
                    {% set pending_count = homework|length - done_count %}

                    <div class="row text-center">
                        <div class="col-6">
                            <div class="p-3 border rounded bg-light">
                                <h3 class="text-success">{{ done_count }}</h3>
                                <p class="mb-0">Fait</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 border rounded bg-light">
                                <h3 class="text-warning">{{ pending_count }}</h3>
                                <p class="mb-0">En attente</p>
                            </div>
                        </div>
                    </div>

                    <div class="progress mt-4" style="height: 25px;">
                        {% if homework|length > 0 %}
                        <div class="progress-bar bg-success" role="progressbar"
                             style="width: {{ (done_count / homework|length * 100)|int }}%;"
                             aria-valuenow="{{ (done_count / homework|length * 100)|int }}"
                             aria-valuemin="0" aria-valuemax="100">
                            {{ (done_count / homework|length * 100)|int }}% Terminé
                        </div>
                        {% else %}
                        <div class="progress-bar" role="progressbar" style="width: 0%;"
                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-calendar-check me-2"></i>À rendre bientôt</h5>
                </div>
                <div class="card-body">
                    {% set due_soon = [] %}
                    {% for hw in homework %}
                        {% set days_left = days_between(hw.date, today) %}
                        {% if days_left <= 3 and not hw.done %}
                            {% set _ = due_soon.append(hw) %}
                        {% endif %}
                    {% endfor %}

                    {% if due_soon|length > 0 %}
                        <div class="list-group">
                            {% for hw in due_soon %}
                                {% set days_left = days_between(hw.date, today) %}
                                <div class="list-group-item list-group-item-action" data-homework-id="{{ hw.id }}">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">{{ hw.subject }}</h6>
                                        <small>
                                            {% if days_left < 0 %}
                                                <span class="badge bg-danger" data-days-left="{{ days_left }}">En retard</span>
                                            {% elif days_left == 0 %}
                                                <span class="badge bg-danger" data-days-left="0">Aujourd'hui</span>
                                            {% elif days_left == 1 %}
                                                <span class="badge bg-warning text-dark" data-days-left="1">Demain</span>
                                            {% else %}
                                                <span class="badge bg-info" data-days-left="{{ days_left }}">{{ days_left }} jours</span>
                                            {% endif %}
                                        </small>
                                    </div>
                                    <p class="mb-1 small">{{ hw.description|truncate(50) }}</p>
                                    <small>Pour le : {{ hw.date }}</small>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                            <h5 class="mt-3">Rien à rendre prochainement</h5>
                            <p class="text-muted">Vous êtes à jour !</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add event listeners to all toggle buttons
        const toggleButtons = document.querySelectorAll('.toggle-homework-btn');

        toggleButtons.forEach(button => {
            button.addEventListener('click', function() {
                const homeworkId = this.getAttribute('data-homework-id');
                const currentStatus = this.getAttribute('data-status');
                const button = this;

                // Disable button and show loading state
                button.disabled = true;
                const originalButtonText = button.innerHTML;
                button.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Mise à jour...';

                // Send request to toggle homework status
                // Remove any fragment identifiers from the homework ID
                const cleanHomeworkId = homeworkId.split('#')[0];

                fetch(`/toggle_homework/${cleanHomeworkId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    // Send the full ID in the request body to ensure we have the complete ID
                    body: JSON.stringify({ homeworkId: homeworkId })
                })
                .then(response => {
                    // Even if we get a non-200 response, try to parse the JSON
                    return response.json().catch(e => {
                        // If JSON parsing fails, create a simple error object
                        return {
                            success: false,
                            message: `Failed to parse response: ${e.message}. Status: ${response.status}`
                        };
                    }).then(data => {
                        // After parsing JSON (or creating error object), check if response was ok
                        if (!response.ok) {
                            // Add the HTTP status to the data
                            data.httpStatus = response.status;
                            data.success = false;
                            if (!data.message) {
                                data.message = `HTTP error! Status: ${response.status}`;
                            }
                        }
                        return data;
                    });
                })
                .then(data => {
                    // If we got a 401 Unauthorized error, try to handle it by reloading the page
                    if (data.httpStatus === 401) {
                        alert('Votre session a expiré. La page va se recharger pour actualiser votre session.');
                        window.location.reload();
                        return;
                    }

                    // For other errors, show the error and revert the UI change
                    if (!data.success) {
                        console.error('Error updating homework status:', data.message);
                        alert('Échec de la mise à jour du statut du devoir dans Pronote. Veuillez réessayer.');
                        // Restore original button state and exit without changing UI
                        button.disabled = false;
                        button.innerHTML = originalButtonText;
                        return;
                    }

                    // If we got here, the API call was successful
                    console.log('Successfully updated homework status in Pronote API');

                    // Check if we have gamification data
                    if (data.gamification && data.gamification.points_earned > 0) {
                        // Show gamification message
                        const gamificationMessage = document.createElement('div');
                        gamificationMessage.className = 'alert alert-info alert-dismissible fade show position-fixed';
                        gamificationMessage.style.top = '70px';
                        gamificationMessage.style.right = '10px';
                        gamificationMessage.style.zIndex = '9999';
                        gamificationMessage.innerHTML = `
                            <i class="fas fa-trophy me-2 text-warning"></i>${data.gamification.message}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        `;
                        document.body.appendChild(gamificationMessage);

                        // Remove the message after 5 seconds
                        setTimeout(() => {
                            gamificationMessage.remove();
                        }, 5000);
                    }

                    // Update the UI to reflect the new status
                    const newStatus = currentStatus === 'done' ? 'pending' : 'done';
                    button.setAttribute('data-status', newStatus);
                    
                    if (newStatus === 'done') {
                        button.classList.remove('btn-warning');
                        button.classList.add('btn-success');
                        button.innerHTML = '<i class="fas fa-check-circle me-1"></i>Fait';
                    } else {
                        button.classList.remove('btn-success');
                        button.classList.add('btn-warning');
                        button.innerHTML = '<i class="fas fa-clock me-1"></i>Marquer comme fait';
                    }
                    
                    // Re-enable the button
                    button.disabled = false;
                    
                    // Reload the page to update all UI elements
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Une erreur est survenue lors de la mise à jour du statut du devoir. Veuillez réessayer.');
                    
                    // Restore original button state
                    button.disabled = false;
                    button.innerHTML = originalButtonText;
                });
            });
        });

        // Add event listeners to all save time buttons
        const saveTimeButtons = document.querySelectorAll('.save-time-btn');
        
        saveTimeButtons.forEach(button => {
            button.addEventListener('click', function() {
                const homeworkId = this.getAttribute('data-homework-id');
                const input = document.querySelector(`.estimated-time-input[data-homework-id="${homeworkId}"]`);
                const estimatedTime = parseInt(input.value);
                
                // Validate input
                if (isNaN(estimatedTime) || estimatedTime < 5 || estimatedTime > 480) {
                    alert('Veuillez entrer un temps valide entre 5 et 480 minutes');
                    return;
                }
                
                // Show loading state
                this.disabled = true;
                const originalHTML = this.innerHTML;
                this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
                
                // Send request to update estimated time
                fetch('/api/homework/update_time', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        homework_id: homeworkId,
                        estimated_time: estimatedTime
                    })
                })
                .then(response => response.json())
                .then(data => {
                    // Reset button state
                    this.disabled = false;
                    this.innerHTML = originalHTML;
                    
                    if (data.success) {
                        // Show success message
                        const successIcon = document.createElement('i');
                        successIcon.className = 'fas fa-check text-success';
                        this.appendChild(successIcon);
                        
                        // Remove success icon after 2 seconds
                        setTimeout(() => {
                            this.innerHTML = originalHTML;
                        }, 2000);
                    } else {
                        alert('Erreur lors de la mise à jour du temps estimé: ' + data.message);
                    }
                })
                .catch(error => {
                    // Reset button state
                    this.disabled = false;
                    this.innerHTML = originalHTML;
                    
                    console.error('Error:', error);
                    alert('Erreur lors de la mise à jour du temps estimé');
                });
            });
        });
    }); seconds
                        setTimeout(() => {
                            gamificationMessage.remove();
                        }, 5000);
                    }

                    // Show a brief success message
                    const statusMessage = document.createElement('div');
                    statusMessage.className = 'alert alert-success alert-dismissible fade show position-fixed';
                    statusMessage.style.top = '10px';
                    statusMessage.style.right = '10px';
                    statusMessage.style.zIndex = '9999';
                    statusMessage.innerHTML = `
                        <i class="fas fa-check-circle me-2"></i>Statut du devoir mis à jour dans Pronote
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    `;
                    document.body.appendChild(statusMessage);

                    // Remove the message after 3 seconds
                    setTimeout(() => {
                        statusMessage.remove();
                    }, 3000);

                    // Update button appearance based on new status
                    if (currentStatus === 'done') {
                        // Homework was marked as done, now being unmarked
                        button.classList.remove('btn-success');
                        button.classList.add('btn-warning');
                        button.innerHTML = "<i class=\"fas fa-clock me-1\"></i>Marquer comme fait";
                        button.setAttribute('data-status', 'pending');

                        // Update row color
                        const row = button.closest('tr');
                        row.classList.remove('table-success');

                        // Calculate days left to determine new row color
                        const daysLeft = parseInt(row.querySelector('td:last-child .badge').getAttribute('data-days-left') || 0);
                        if (daysLeft <= 1) {
                            row.classList.add('table-danger');
                        } else if (daysLeft <= 3) {
                            row.classList.add('table-warning');
                        }

                        // Check if this homework should be in the "Due Soon" section
                        if (daysLeft <= 3) {
                            // Find or create the due soon item for this homework
                            let dueSoonItem = document.querySelector(`.list-group-item[data-homework-id="${homeworkId}"]`);
                            const dueSoonContainer = document.querySelector('.list-group');
                            const dueSoonCard = document.querySelector('.col-md-6:last-child .card-body');
                            const nothingDueSoonMessage = document.querySelector('.text-center.py-4');

                            // If the due soon container doesn't exist, we need to create it
                            if (!dueSoonContainer && dueSoonCard) {
                                // Remove the "nothing due soon" message if it exists
                                if (nothingDueSoonMessage) {
                                    dueSoonCard.removeChild(nothingDueSoonMessage);
                                }

                                // Create a new list group
                                const newListGroup = document.createElement('div');
                                newListGroup.className = 'list-group';
                                dueSoonCard.appendChild(newListGroup);
                            }

                            // If the item doesn't exist in the due soon section, create it
                            if (!dueSoonItem) {
                                // Get homework details from the table row
                                const subject = row.querySelector('td:nth-child(1)').textContent.trim();
                                const description = row.querySelector('td:nth-child(2)').textContent.trim();
                                const dueDate = row.querySelector('td:nth-child(3)').textContent.trim();

                                // Create a new due soon item
                                dueSoonItem = document.createElement('div');
                                dueSoonItem.className = 'list-group-item list-group-item-action';
                                dueSoonItem.setAttribute('data-homework-id', homeworkId);
                                dueSoonItem.style.display = 'flex';

                                // Create badge based on days left
                                let badgeHTML = '';
                                if (daysLeft < 0) {
                                    badgeHTML = `<span class="badge bg-danger" data-days-left="${daysLeft}">{{ _('Overdue') }}</span>`;
                                } else if (daysLeft === 0) {
                                    badgeHTML = `<span class="badge bg-danger" data-days-left="0">{{ _('Today') }}</span>`;
                                } else if (daysLeft === 1) {
                                    badgeHTML = `<span class="badge bg-warning text-dark" data-days-left="1">{{ _('Tomorrow') }}</span>`;
                                } else {
                                    badgeHTML = `<span class="badge bg-info" data-days-left="${daysLeft}">${daysLeft} {{ _('days') }}</span>`;
                                }

                                // Set the HTML content
                                dueSoonItem.innerHTML = `
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">${subject}</h6>
                                        <small>${badgeHTML}</small>
                                    </div>
                                    <p class="mb-1 small">${description.length > 50 ? description.substring(0, 47) + '...' : description}</p>
                                    <small>Due: ${dueDate}</small>
                                `;

                                // Add the item to the due soon list
                                document.querySelector('.list-group').appendChild(dueSoonItem);
                            } else {
                                // Just make the existing item visible
                                dueSoonItem.style.display = 'flex';
                            }
                        }
                    } else {
                        // Homework was pending, now being marked as done
                        button.classList.remove('btn-warning');
                        button.classList.add('btn-success');
                        button.innerHTML = "<i class=\"fas fa-check-circle me-1\"></i>Fait";
                        button.setAttribute('data-status', 'done');

                        // Update row color
                        const row = button.closest('tr');
                        row.classList.remove('table-danger', 'table-warning');
                        row.classList.add('table-success');
                    }

                    // Update the homework status statistics
                    updateHomeworkStats();

                    // Re-enable button
                    button.disabled = false;
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while updating homework status: ' + error.message);
                    // Restore original button state
                    button.innerHTML = originalButtonText;
                    button.disabled = false;
                });
            });
        });

        // Function to update homework statistics
        function updateHomeworkStats() {
            const totalHomework = document.querySelectorAll('.toggle-homework-btn').length;
            const doneHomework = document.querySelectorAll('.toggle-homework-btn[data-status="done"]').length;
            const pendingHomework = totalHomework - doneHomework;

            // Update counts
            document.querySelector('.col-6:first-child h3').textContent = doneHomework;
            document.querySelector('.col-6:last-child h3').textContent = pendingHomework;

            // Update progress bar
            const percentage = totalHomework > 0 ? Math.round((doneHomework / totalHomework) * 100) : 0;
            const progressBar = document.querySelector('.progress-bar');
            progressBar.style.width = `${percentage}%`;
            progressBar.setAttribute('aria-valuenow', percentage);
            progressBar.textContent = `${percentage}% {{ _('Complete') }}`;

            // Update due soon list
            const dueSoonItems = document.querySelectorAll('.list-group-item');
            dueSoonItems.forEach(item => {
                const homeworkId = item.getAttribute('data-homework-id');
                if (homeworkId) {
                    // Find the corresponding button in the table
                    const correspondingButton = document.querySelector(`.toggle-homework-btn[data-homework-id="${homeworkId}"]`);
                    if (correspondingButton) {
                        // Check if the homework is marked as done
                        const isDone = correspondingButton.getAttribute('data-status') === 'done';
                        if (isDone) {
                            item.style.display = 'none';
                        } else {
                            // Make sure to show the item if it's not done
                            item.style.display = 'flex'; // Using flex to maintain the original layout
                        }
                    }
                }
            });

            // Check if all due soon items are hidden or if any are visible
            const visibleDueSoonItems = Array.from(dueSoonItems).filter(item => item.style.display !== 'none');
            const dueSoonContainer = document.querySelector('.list-group');
            const nothingDueSoonMessage = document.querySelector('.text-center.py-4');
            const dueSoonCard = document.querySelector('.col-md-6:last-child .card-body');

            if (visibleDueSoonItems.length === 0) {
                // No visible items - show the "nothing due" message
                if (dueSoonContainer) {
                    dueSoonContainer.style.display = 'none';
                }

                if (nothingDueSoonMessage) {
                    nothingDueSoonMessage.style.display = 'block';
                } else {
                    // Create the "nothing due" message if it doesn't exist
                    dueSoonCard.innerHTML = `
                        <div class="text-center py-4">
                            <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                            <h5 class="mt-3">Nothing due soon</h5>
                            <p class="text-muted">You're all caught up!</p>
                        </div>
                    `;
                }
            } else {
                // We have visible items - show the list and hide the message
                if (dueSoonContainer) {
                    dueSoonContainer.style.display = 'block';
                } else if (dueSoonCard && nothingDueSoonMessage) {
                    // The list doesn't exist anymore but we need to show items
                    // This happens when all items were previously marked as done
                    // and now one is unmarked

                    // First, create a new list container
                    const newListContainer = document.createElement('div');
                    newListContainer.className = 'list-group';

                    // Add all the visible items to it
                    visibleDueSoonItems.forEach(item => {
                        const clonedItem = item.cloneNode(true);
                        clonedItem.style.display = 'flex';
                        newListContainer.appendChild(clonedItem);
                    });

                    // Replace the "nothing due" message with the list
                    dueSoonCard.innerHTML = '';
                    dueSoonCard.appendChild(newListContainer);
                }

                // Hide the "nothing due" message if it exists
                if (nothingDueSoonMessage) {
                    nothingDueSoonMessage.style.display = 'none';
                }
            }
        }
    });
</script>
<style>
    .homework-description {
        max-height: 100px;
        overflow-y: auto;
    }

    .toggle-homework-btn {
        width: 120px;
        transition: all 0.3s ease;
    }

    .toggle-homework-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
</style>
{% endblock %}