{% extends 'base.html' %}
{% block content %}
<div class="container-fluid mt-4">
    <h1 class="h3 mb-4 text-gray-800">Bienvenue sur CrossApp</h1>
    <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">
                            {{ course.nom }} ({{ course.date }})
                            <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">
                                    <i class="fas fa-qrcode" title="Accès au mode scan"></i>
                                </a>
                            </div>
                        </li>
                        {% empty %}
                        <li class="list-group-item">Aucune course enregistrée.</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <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">Actions</h6>
                </div>
                <div class="card-body d-flex justify-content-center gap-3">
                    <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>
                    <a href="{% url 'dossards' %}" class="btn btn-warning mb-2 ml-2">
                        <i class="fas fa-plus" title="Générer les dossards"></i>
                        &nbsp;
                        <i class="fas fa-qrcode" title="Générer les dossards"></i>
                    </a>
                    <form action="{% url 'logout' %}" method="post" style="display:inline;">
                        {% csrf_token %}
                        <input type="hidden" name="next" value="{% url 'login' %}">
                        <button type="submit" class="btn btn-danger mb-2 ml-2">
                            <i class="fas fa-sign-out-alt"></i>
                        </button>
                    </form>
                </div>
            </div>
            <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 id="newCourseError" class="alert alert-danger" style="display:none;"></div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-success">Créer et scanner</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
{% block extra_js %}
<script>
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 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)}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.href = `/scan/?course_id=${data.course_id}`;
        } else {
            document.getElementById('newCourseError').textContent = data.error;
            document.getElementById('newCourseError').style.display = 'block';
        }
    });
};
</script>
{% endblock %}
        </div>
    </div>
</div>
{% endblock %}