{% extends 'base.html' %}
{% block content %}
<h1 class="text-center display">Semulateur</h1>

<h1>Sélectionner un auteur et un livre</h1>

    <label for="author">Auteur :</label>
    <select id="author" name="author">
        <option value="">Sélectionnez un auteur</option>
        {% for author in authors %}
            <option value="{{ author.id }}">{{ author.name }}</option>
        {% endfor %}
    </select>

    <label for="book">Livre :</label>
    <select id="book" name="book">
        <option value="">Sélectionnez un livre</option>
    </select>
    

    <script>
        $(document).ready(function() {
            // Quand l'auteur est sélectionné
            $('#author').change(function() {
                var authorId = $(this).val();
                
                // Réinitialise les options du select des livres
                $('#book').empty().append('<option value="">Sélectionnez un livre</option>');

                if (authorId) {
                    // Effectue une requête AJAX pour récupérer les livres
                    $.ajax({
                        url: "{% url 'produits:get_books' %}",
                        data: {
                            'author_id': authorId
                        },
                        success: function(data) {
                            // Ajoute chaque livre en option dans le select
                            $.each(data, function(index, book) {
                                $('#book').append('<option value="' + book.id + '">' + book.title + '</option>');
                            });
                        }
                    });
                }
            });
        });
    </script>




{% endblock %}