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

{% block title %}PixelのKami | Add{% endblock %}

{% block body %}
<style>
    body {
        background: radial-gradient(circle, #FF7221 0%,rgba(255, 255, 255, 0.15) 100%),#ff7221;
    }

    nav {
        display:none;
    }
</style>

<div class="flex grow flex-col text-center justify-items-center px-20 pt-20 pb-0">
    <h1 class="text-7xl font-bold mb-20">PixelのKami</h1>
    <div class="flex flex-col grow">
        <div id="filSelect" class="relative self-center flex w-72 h-12 mb-10 rounded-full bg-gray-200 overflow-hidden text-xl" style="min-height: 48px;">
            <div id="slider" class="absolute w-1/2 h-full bg-[#1F2223] rounded-full transition-transform duration-300 ease-in-out"></div>
            <p id="list" class="relative z-10 flex-1 text-center text-white font-semibold cursor-pointer flex items-center justify-center" onclick="changeFilMod('list')">Liste</p>
            <p id="add" class="relative z-10 flex-1 text-center text-[#1F2223] font-semibold cursor-pointer flex items-center justify-center" onclick="changeFilMod('add')">Ajouter</p>
        </div>
        <div id="animeList" class="w-1/2 self-center border-t-2">
        {% for anime in animes %}
            <div class="">
                <h1 class="border-2 border-t-0 py-2 text-lg" onclick="seeAnimeVideos({{ anime.id }})">{{ anime.name }}</h1>
                <div id="anime_{{ anime.id }}" class="bg-white hidden text-[#1F2223] py-4">
                    <div class="flex flex-col px-4 text-center">
                        <h2 class="mr-4 text-lg">Vidéos disponibles</h2>
                        <div class="flex justify-center mt-4 mb-6 space-x-2">
                            {% for video in anime.videos %}
                            <p class="rounded-lg bg-[#FF7221] w-fit px-2 py-1 text-white cursor-pointer" onclick="window.open('{{video.link}}', '_blank')">
                                {% if 'Opening' in video.type %}
                                    OP {{ video.type | replace({'Opening ': ''}) }}
                                {% elseif 'Ending' in video.type %}
                                    END {{ video.type | replace({'Ending ': ''}) }}
                                {% else %}
                                    {{ video.type }}
                                {% endif %}
                            </p>
                            {% endfor %}
                        </div>
                    </div>
                <!-- Champs d'ajout vidéo -->
                    <div>
                        <div class="flex">
                            <label for="type_{{ anime.id }}" class="w-[250px] text-lg content-center px-4">Type (Opening 1, ...)</label>
                            <input type="text" id="type_{{ anime.id }}" name="type" required class="border p-2 rounded w-full">
                        </div>
                        <div class="flex">
                            <label for="name_{{ anime.id }}" class="w-[250px] text-lg content-center px-4">Nom</label>
                            <input type="text" id="name_{{ anime.id }}" name="name" required class="border p-2 rounded w-full">
                        </div>
                        <div class="flex">
                            <label for="artist_{{ anime.id }}" class="w-[250px] text-lg content-center px-4">Artiste</label>
                            <input type="text" id="artist_{{ anime.id }}" name="artist" required class="border p-2 rounded w-full">
                        </div>
                        <div class="flex">
                            <label for="link_{{ anime.id }}" class="w-[250px] text-lg content-center px-4">Lien</label>
                            <input type="text" id="link_{{ anime.id }}" name="link" required class="border p-2 rounded w-full">
                        </div>
                        <button type="button" class="mt-4 bg-[#1F2223] text-white px-4 py-2 rounded" onclick="addVideo({{ anime.id }})">
                            Ajouter
                        </button>
                    </div>
                    <div id="responseMessage_{{ anime.id }}" class="mt-4"></div>
                </div>
            </div>
        {% endfor %}
        </div>
        <div id="form" class="hidden justify-items-center">
            <form action="/pixel/add-anime" method="POST" class="w-1/2 flex flex-col items-center">
                <div class="flex items-center">
                    <label for="name" class="w-[300px]">Nom de l'animé/saison</label>
                    <input type="text" id="name" name="name" required class="border p-2 rounded w-full">
                </div>
                <button type="submit" class="mt-10 bg-white text-[#FF7221] px-4 py-2 rounded w-fit">
                    Ajouter
                </button>
            </form>
        </div>
    </div>
    <footer class="py-6 mt-10 text-xl">
        <p>MLyshu © 2024. Tous droits réservés.</p>
    </footer>
</div>

<script>
    // Fonction pour envoyer les données via fetch
    async function addVideo(animeId) {
        // Récupérer les valeurs des champs correspondant à l'animé
        const type = document.getElementById(`type_${animeId}`).value;
        const name = document.getElementById(`name_${animeId}`).value;
        const artist = document.getElementById(`artist_${animeId}`).value;
        const link = document.getElementById(`link_${animeId}`).value;

        // Construire les données à envoyer
        const data = {
            type,
            name,
            artist,
            link,
            id: animeId,
        };

        try {
            // Envoyer une requête POST
            const response = await fetch('/pixel/add-video', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            });

            // Traiter la réponse
            const result = await response.json();
            const responseMessage = document.getElementById(`responseMessage_${animeId}`);
            if (response.ok) {
                responseMessage.textContent = 'Vidéo ajoutée avec succès !';
                responseMessage.className = 'text-green-500';
            } else {
                responseMessage.textContent = `Erreur : ${result.message || 'Une erreur est survenue.'}`;
                responseMessage.className = 'text-red-500';
            }
        } catch (error) {
            console.error('Erreur réseau ou serveur :', error);
            const responseMessage = document.getElementById(`responseMessage_${animeId}`);
            responseMessage.textContent = 'Erreur de connexion avec le serveur.';
            responseMessage.className = 'text-red-500';
        }
    }

    function changeFilMod(mod) {
        const slider = document.getElementById('slider');
        const list = document.getElementById('list');
        const add = document.getElementById('add');

        if (mod === 'list') {
            slider.style.transform = 'translateX(0)'; // Déplacer à gauche
            list.classList.add('text-white');
            list.classList.remove('text-[#1F2223]');
            add.classList.add('text-[#1F2223]');
            add.classList.remove('text-white');
            document.getElementById('animeList').classList.remove('hidden');
            document.getElementById('form').classList.add('hidden');

        } else if (mod === 'add') {
            slider.style.transform = 'translateX(100%)'; // Déplacer à droite
            add.classList.add('text-white');
            add.classList.remove('text-[#1F2223]');
            list.classList.add('text-[#1F2223]');
            list.classList.remove('text-white');
            document.getElementById('animeList').classList.add('hidden');
            document.getElementById('form').classList.remove('hidden');
        }
    }

    function seeAnimeVideos(id){
        document.getElementById("anime_" + id).classList.toggle('hidden');
    }
</script>

{% endblock %}