{% extends 'base.html.twig' %}

{% block title %}{% endblock %}

{% block body %}

<div>
    <div class="w-1/2 py-2 flex flex-col justify-center mt-5  mx-auto">
        <h1 class="text-2xl font-bold">Recherche de livre pour : {{ query }}</h1>
    </div>
    {% for book in datas.items %}
        <div class="relative flex rounded-xl border bg-white shadow-lg hover:shadow-xl transition-shadow duration-300 w-1/2 mx-auto py-2 mt-5">
            <div class="flex flex-col justify-start">
                <div class="flex flex-col p-2 text-2xl">
                    <h1 class="font-bold">{{ book.volumeInfo.title }}</h1>
                    {% if book.volumeInfo.authors is defined %}
                        <span class="text-lg">{{ book.volumeInfo.authors | join(", ") }}</span>
                    {% endif %}
                </div>
                <div class="flex">
                    <div class="flex flex-row w-1/4">
                        {% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
                            <img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2">
                        {% endif %}
                    </div>
                    <div class="w-9/12">
                        {% if book.volumeInfo.publisher is defined %}
                            <p class="p-2 italic font-bold">Aux éditions : <span class="font-normal">{{ book.volumeInfo.publisher }}</span></p>
                            <p class="p-2 italic font-bold">Date de publication : <span class="font-normal">{{ book.volumeInfo.publishedDate }}</span></p>
                            {% if book.volumeInfo.categories is defined %}
                                {% for categorie in book.volumeInfo.categories %}
                                    <p class="p-2 italic font-bold">Catégorie : <span class="font-normal">{{ categorie }}</span></p>
                                {% endfor %}
                            {% endif %}
                            <p class="p-2 italic font-bold">Nombres de pages : <span class="font-normal">{{ book.volumeInfo.pageCount }}</span></p>
                            <p class="p-2 italic font-bold">Description : <span class="font-normal">{{ book.searchInfo.textSnippet }}</span></p>
                        {% endif %}
                    </div>
                </div>
            </div>
        

            {% if app.user %}
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                 class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300"
                 x-data="{ liked: false }"
                 :fill="liked ? 'red' : 'none'"
                 :stroke="liked ? 'red' : 'currentColor'"
                 @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
            </svg>
            {% endif %}

            
        </div>
    {% endfor %}
</div>

<script>
    function toggleLike(idGoogle, liked) {
        // Si l'élément est déjà aimé (liked = true), on le retire des favoris
        if (liked) {
            fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({
                    // D'autres données peuvent être envoyées si nécessaire
                }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'removed') {
                    // Mettre à jour le SVG ou l'état du bouton pour retirer le like
                    console.log('Livre retiré des favoris');
                }
            })
            .catch(error => {
                console.error('Erreur AJAX', error);
            });
        } else { // Si l'élément n'est pas encore aimé (liked = false), on l'ajoute aux favoris
            fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({
                    // D'autres données peuvent être envoyées si nécessaire
                }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'added') {
                    // Mettre à jour le SVG ou l'état du bouton pour ajouter le like
                    console.log('Livre ajouté aux favoris');
                }
            })
            .catch(error => {
                console.error('Erreur AJAX', error);
            });
        }
    }
</script>

{% endblock %}