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

{% block title %}Ajouter un bloc à la page : {{ page.title }}{% endblock %}

{% block body %}
    <div class="flex items-center justify-between">
        <h1 class="text-xl font-semibold">Ajouter un bloc à la page : {{ page.title }}</h1>
        <a href="{{ path('admin_page_edit', {id: page.id}) }}" class="btn-secondary">Retour à la page</a>
    </div>

    <div class="card mt-4">
        <div class="card-body">
            {{ form_start(form, {'attr': {'id': 'block-form'}}) }}

            <div class="grid grid-cols-2 gap-4">
                <div>
                    {{ form_row(form.position) }}
                </div>
                <div>
                    {{ form_row(form.type, {'attr': {'id': 'block-type'}}) }}
                </div>
            </div>

            <div id="content-group" class="mt-4 hidden">
                {{ form_row(form.content) }}
            </div>

            <div id="image-group" class="mt-4 hidden">
                {{ form_row(form.imageFile) }}
            </div>

            <div id="video-group" class="mt-4 hidden">
                {{ form_row(form.videoUrl) }}
            </div>

            <div id="button-group" class="mt-4 hidden grid grid-cols-2 gap-4">
                <div>
                    {{ form_row(form.buttonText) }}
                </div>
                <div>
                    {{ form_row(form.buttonLink) }}
                </div>
            </div>

            <button class="btn-primary mt-4" type="submit">Enregistrer</button>

            {{ form_end(form) }}
        </div>
    </div>

{% endblock %}

{% block javascripts_end %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const blockType = document.getElementById('block-type');
            const contentGroup = document.getElementById('content-group');
            const imageGroup = document.getElementById('image-group');
            const videoGroup = document.getElementById('video-group');
            const buttonGroup = document.getElementById('button-group');

            function toggleFields() {
                const selectedType = blockType.value;

                contentGroup.classList.toggle('hidden', selectedType !== 'text');
                imageGroup.classList.toggle('hidden', selectedType !== 'image');
                videoGroup.classList.toggle('hidden', selectedType !== 'video');
                buttonGroup.classList.toggle('hidden', selectedType !== 'button');
            }

            blockType.addEventListener('change', toggleFields);
            toggleFields();
        });
    </script>
{% endblock %}