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

{% block title %}Recherche | {{ query }}{% 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">Résultats pour :
				{{ query }}</h1>
		</div>
        <div class="w-1/2 pb-1 flex flex-col justify-center  mx-auto">
            <p>
                {{ datas.totalItems }} résultats trouvés
            </p>
        </div>
		{% for book in datas.items %}
			{% include '/apiSearch/modal.html.twig' with { 'loop': loop} %}
			<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>
                                {% endif %}
                                {% if book.volumeInfo.publishedDate is defined %}
                                    <p class="p-2 italic font-bold">Date de publication :
									<span class="font-normal">{{ book.volumeInfo.publishedDate }}</span>
								</p>
                                {% endif %}

								{% 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 :
									{% if book.searchInfo is defined %}
										<span class="font-normal">{{ book.searchInfo.textSnippet | raw }}</span>
									{% endif %}
								</p>

						</div>
					</div>
					<div class="w-full p-2">
						<button id="openModalBtn-{{ loop.index }}" class="dark:bg-[#263B46] text-white px-4 py-2 rounded-lg mt-4 w-full">
							Voir plus
						</button>
					</div>
				</div>


				{% if app.user %}
            {% set isLiked = book.id in favoris|map(f => f.getIdGoogle()) %}
        <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="{{ isLiked ? 'red' : 'none' }}"
    stroke="{{ isLiked ? 'red' : 'currentColor' }}"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
    class="like-button absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300"
    data-id-google="{{ book.id }}"
    data-liked="{{ isLiked ? 'true' : 'false' }}"
    data-edition="{{ book.volumeInfo.publisher | default('') }}"
    data-categorie="{{ book.volumeInfo.categories is defined ? book.volumeInfo.categories | join(', ') : '' }}"
    data-title="{{ book.volumeInfo.title | default('Titre non disponible') }}"
    data-authors="{{ book.volumeInfo.authors is defined ? book.volumeInfo.authors | join(', ') : '' }}"
    data-images="{{ book.volumeInfo.imageLinks.smallThumbnail is defined ? book.volumeInfo.imageLinks.smallThumbnail : '' }}"
    data-description="{{ book.volumeInfo.description is defined and book.volumeInfo.description is not empty ? book.volumeInfo.description | raw : '' }}"
    data-date="{{ book.volumeInfo.publishedDate | default('') }}"
    data-pages="{{ book.volumeInfo.pageCount | default('0') }}">
    <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 id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50">
					<div class="relative bg-white p-6 rounded-lg w-1/3">
						<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>
						<svg id="closeModalSvg-{{ loop.index }}" 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 text-gray-500 hover:text-gray-700">
							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
						</svg>

						{% if book.volumeInfo.title is defined and book.volumeInfo.title is not empty %}
							<p class="p-2 italic font-bold">Titre : <span class="font-normal">{{ book.volumeInfo.title }}</span></p>
						{% endif %}

						{% if book.volumeInfo.authors is defined %}
							<p class="p-2 italic font-bold"> Auteur(s) : <span class="font-normal"> {{ book.volumeInfo.authors | join(", ") }}</span></p>
						{% endif %}

						{% if book.volumeInfo.publisher is defined and book.volumeInfo.publisher is not empty %}
							<p class="p-2 italic font-bold">Aux éditions : <span class="font-normal">{{ book.volumeInfo.publisher }}</span></p>
						{% endif %}

						{% if book.volumeInfo.publishedDate is defined and book.volumeInfo.publishedDate is not empty %}
							<p class="p-2 italic font-bold">Date de publication : <span class="font-normal">{{ book.volumeInfo.publishedDate }}</span></p>
						{% endif %}

						{% if book.volumeInfo.categories is defined and book.volumeInfo.categories is not empty %}
							{% for categorie in book.volumeInfo.categories %}
								<p class="p-2 italic font-bold">Catégorie : <span class="font-normal">{{ categorie }}</span></p>
							{% endfor %}
						{% endif %}

						{% if book.volumeInfo.pageCount is defined and book.volumeInfo.pageCount is not empty %}
							<p class="p-2 italic font-bold">Nombre de pages : <span class="font-normal">{{ book.volumeInfo.pageCount }}</span></p>
						{% endif %}

						{% if book.volumeInfo is defined and book.volumeInfo.description is defined and book.volumeInfo.description is not empty %}
							<p class="p-2 italic font-bold">Description : <span class="font-normal">{{ book.volumeInfo.description | raw }}</span></p>
						{% endif %}

						<button id="closeModalBtn-{{ loop.index }}" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 mt-4">
							Fermer
						</button>
					</div>
				</div>




			</div>
		{% endfor %}
        {% set nb_items = datas.totalItems %}
{% set nb_pages = nb_items / 10 %}
{% set current_page = app.request.get('page') ? app.request.get('page') : 1 %}

{% if nb_pages > 1 %}
    <div class="flex justify-center mt-8 mb-8">
        <ul class="flex">
            {# Flèche "Précédent" #}
            {% if current_page > 1 %}
                <li class="mx-2">
                    <a href="{{ path('api_search', {'q': query, 'page': current_page - 1}) }}" class="px-3 py-3 dark:bg-[#263B46] text-white rounded-lg mr-32">Précédent</a>
                </li>
            {% else %}
                <li class="mx-2">
                </li>
            {% endif %}

            {# Liens des pages proches de la page actuelle #}
            {% for i in current_page - 3..current_page + 3 %}
                {% if i > 0 and i <= nb_pages %}
                    <li class="mx-2">
                        <a href="{{ path('api_search', {'q': query, 'page': i}) }}" class="px-4 py-3 text-white {{ i == current_page ? 'dark:bg-[#9db1bd] text-gray-700' : 'bg-gray-200 text-black' }} rounded-lg">{{ i }}</a>
                    </li>
                {% endif %}
            {% endfor %}

            {# Flèche "Suivant" #}
            {% if current_page < nb_pages %}
                <li class="mx-2">
                    <a href="{{ path('api_search', {'q': query, 'page': current_page + 1}) }}" class="px-3 py-3 dark:bg-[#263B46] text-white rounded-lg ml-32">Suivant</a>
                </li>
            {% else %}
                <li class="mx-2">
                    <span class="px-3 py-3 dark:bg-[#263B46] text-white rounded-lg  cursor-not-allowed ml-32">Suivant</span>
                </li>
            {% endif %}
        </ul>
    </div>
{% endif %}
	</div>

	<script>
        function toggleLike(idGoogle, liked, element, bookDetails) {
    const url = liked 
        ? "{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle)
        : "{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle);

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify(bookDetails)
    })
    .then(response => response.json())
    .then(data => {
        if ((liked && data.status === 'removed') || (!liked && data.status === 'added')) {
            // Mettre à jour l'état visuel
            const newLikedState = !liked;
            element.setAttribute('data-liked', newLikedState.toString());
            element.querySelector('path').setAttribute('fill', newLikedState ? 'red' : 'none');
            element.querySelector('path').setAttribute('stroke', newLikedState ? 'red' : 'currentColor');
        }
    })
    .catch(error => {
        console.error('Erreur AJAX', error);
    });
}

document.querySelectorAll('.like-button').forEach(button => {
    button.addEventListener('click', function() {
        const idGoogle = this.dataset.idGoogle;
        const liked = this.getAttribute('data-liked') === 'true'; // Lire l'état actuel
        const bookDetails = {
            title: this.dataset.title,
            authors: this.dataset.authors,
            images: this.dataset.images,
            description: this.dataset.description,
            date: this.dataset.date,
            pages: this.dataset.pages,
            edition: this.dataset.edition,
            categorie: this.dataset.categorie
        };

        toggleLike(idGoogle, liked, this, bookDetails);
    });
});

        document.addEventListener('DOMContentLoaded', () => {
            {% for book in datas.items %}
            const openModalBtn{{ loop.index }} = document.getElementById('openModalBtn-{{ loop.index }}');
            const closeModalSvg{{ loop.index }} = document.getElementById('closeModalSvg-{{ loop.index }}');
            const closeModalBtn{{ loop.index }} = document.getElementById('closeModalBtn-{{ loop.index }}');
            const modal{{ loop.index }} = document.getElementById('myModal-{{ loop.index }}');

            if (openModalBtn{{ loop.index }}) {
                openModalBtn{{ loop.index }}.addEventListener('click', () => {
                    modal{{ loop.index }}.classList.remove('hidden');
                });
            }

            if (closeModalSvg{{ loop.index }}) {
                closeModalSvg{{ loop.index }}.addEventListener('click', () => {
                    modal{{ loop.index }}.classList.add('hidden');
                });
            }

            if (closeModalBtn{{ loop.index }}) {
                closeModalBtn{{ loop.index }}.addEventListener('click', () => {
                    modal{{ loop.index }}.classList.add('hidden');
                });
            }
            {% endfor %}
        });

	</script>

{% endblock %}