{% extends 'base.html' %}
{% block content %}
{% load temps_format %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Liste des courses</h6>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        {% for course in courses %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="row align-items-center col-xs-12 col-lg-4">
                                <span>{{ course.nom }}<br/>{{ course.date|format_date }}<br/>{{ course.scan_count }} scan{% if course.scan_count > 1 %}s{% endif %}</span>
                                {% if course.type == 'unique' %}
                                <span class="badge badge-primary ml-2 mr-1">Unique</span>
                                {% elif course.type == 'multi' %}
                                <span class="badge badge-info ml-2 mr-1">Multi</span>
                                {% endif %}
                                {% if course.status == 'not_started' %}
                                <span class="badge badge-danger ml-1 mr-1">En attente</span>
                                {% elif course.status == 'ongoing' %}
                                <span class="badge badge-success ml-1 mr-1">En cours</span>
                                {% elif course.status == 'finished' %}
                                <span class="badge badge-secondary ml-1 mr-1">Terminée</span>
                                {% endif %}
                            </div>
                            <div>
                                <a href="{% url 'course_detail' course.id %}" class="btn btn-primary btn-sm mr-2">
                                    <i class="fas fa-eye" title="Détails de la course"></i>
                                </a>
                                <a href="{% url 'scan' %}?course_id={{ course.id }}" class="btn btn-info btn-sm mr-2">
                                    <i class="fas fa-qrcode" title="Accès au mode scan"></i>
                                </a>
                                <button class="btn btn-danger btn-sm btn-delete-course" data-course-id="{{ course.id }}" data-course-nom="{{ course.nom }}" title="Supprimer la course" data-toggle="modal" data-target="#deleteCourseModal">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </li>
                        {% empty %}
                        <li class="list-group-item">Aucune course enregistrée.</li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="card-body d-flex">
                        <button class="btn btn-success mb-2" id="btnNewCourse">
                            <i class="fas fa-plus" title="Créer une nouvelle course"></i>
                            &nbsp;
                            <i class="fas fa-running" title="Créer une nouvelle course"></i>
                        </button>
                    </div>
            </div>
        </div>
    </div>
        <!-- Modal de confirmation de suppression -->
        <div class="modal fade" id="deleteCourseModal" tabindex="-1" role="dialog" aria-labelledby="deleteCourseModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteCourseModalLabel">Confirmer la suppression</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p id="deleteCourseModalText">Voulez-vous vraiment supprimer cette course ? Cette action est irréversible.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-danger" id="confirmDeleteCourseBtn">Supprimer</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
         <div class="col-12">
            <div id="newCourseModal" class="modal" tabindex="-1" role="dialog" style="display:none;">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form id="newCourseForm" method="post">
                            {% csrf_token %}
                            <div class="modal-header">
                                <h5 class="modal-title">Créer une nouvelle course</h5>
                                <button type="button" class="close" id="closeModal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="courseName">Nom de la course</label>
                                    <input type="text" class="form-control" name="nom" id="courseName" required>
                                </div>
                                <div class="form-group">
                                    <label for="courseType">Type de course</label>
                                    <select class="form-control" name="type" id="courseType" required>
                                        <option value="unique">Unique</option>
                                        <option value="multi">Multi</option>
                                    </select>
                                </div>
                                <div id="newCourseError" class="alert alert-danger" style="display:none;"></div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-success">Créer la course</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
{% block extra_js %}
<script>
// Suppression d'une course avec confirmation via modal
var courseIdToDelete = null;
var courseNomToDelete = '';
document.querySelectorAll('.btn-delete-course').forEach(function(btn) {
    btn.addEventListener('click', function() {
        courseIdToDelete = this.getAttribute('data-course-id');
        courseNomToDelete = this.getAttribute('data-course-nom');
        document.getElementById('deleteCourseModalText').textContent = `Voulez-vous vraiment supprimer la course "${courseNomToDelete}" ? Cette action est irréversible.`;
        // Le modal est affiché automatiquement par data-toggle="modal"
    });
});
document.getElementById('confirmDeleteCourseBtn').onclick = function() {
    if (!courseIdToDelete) return;
    fetch(`/course/${courseIdToDelete}/delete/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            window.location.reload();
        } else {
            alert(data.error || 'Erreur lors de la suppression.');
        }
    });
    // Fermer le modal
    $('#deleteCourseModal').modal('hide');
};
document.getElementById('btnNewCourse').onclick = function() {
    document.getElementById('newCourseModal').style.display = 'block';
};
document.getElementById('closeModal').onclick = function() {
    document.getElementById('newCourseModal').style.display = 'none';
};
document.getElementById('newCourseForm').onsubmit = function(e) {
    e.preventDefault();
    const nom = document.getElementById('courseName').value;
    const type = document.getElementById('courseType').value;
    const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;
    fetch('', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: `csrfmiddlewaretoken=${encodeURIComponent(csrf)}&nom=${encodeURIComponent(nom)}&type=${encodeURIComponent(type)}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Redirige vers la vue principale (reload la page)
            window.location.href = '/';
        } else {
            document.getElementById('newCourseError').textContent = data.error;
            document.getElementById('newCourseError').style.display = 'block';
        }
    });
};
</script>
{% endblock %}
        </div>
    </div>
</div>
{% endblock %}