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

{% block title %}Fiche Produit{% endblock %}

{% block body %}
<div class="max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg">
    <h1 class="text-4xl font-extrabold mb-6 text-center">Détails du Produit</h1>

    <div class="flex flex-col md:flex-row md:space-x-6">
        <!-- Slider pour les Images du Produit -->
        <div class="w-full md:w-1/2 flex items-center justify-center">
            {% if product.image|length > 0 %}
                <!-- Slider container -->
                <div class="swiper-container relative w-full h-64 bg-gray-200 overflow-hidden rounded-lg shadow-md">
                    <!-- Wrapper for slides -->
                    <div class="swiper-wrapper">
                        {% for img in product.image %}
                            <!-- Slide -->
                            <div class="swiper-slide">
                                <img src="{{ asset('images/products/' ~ img.imageName) }}" alt="{{ product.name }}" class="object-cover w-full h-full cursor-pointer" onclick="openFullscreen(this)">
                            </div>
                        {% endfor %}
                    </div>

                    <!-- Pagination (optional) -->
                    <div class="swiper-pagination"></div>

                    <!-- Navigation buttons (optional) -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            {% else %}
                <div class="w-full h-64 bg-gray-200 flex items-center justify-center rounded-lg shadow-md">
                    <span class="text-gray-600">Aucune Image</span>
                </div>
            {% endif %}
        </div>

        <!-- Détails du Produit -->
        <div class="w-full md:w-1/2 mt-6 md:mt-0">
            <div class="space-y-4">
                <div class="bg-gray-100 p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-semibold text-gray-800">Nom du Produit</h2>
                    <p class="text-gray-600">{{ product.name }}</p>
                </div>

                <div class="bg-gray-100 p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-semibold text-gray-800">Description</h2>
                    <p class="text-gray-600">{{ product.description }}</p>
                </div>

                <div class="bg-gray-100 p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-semibold text-gray-800">Prix</h2>
                    <p class="text-gray-900 text-xl">{{ product.price|number_format(2, '.', ',') }} EUR</p>
                </div>

                <div class="bg-gray-100 p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-semibold text-gray-800">Date de Création</h2>
                    <p class="text-gray-600">{{ product.createdAt ? product.createdAt|date('d/m/Y H:i') : 'N/A' }}</p>
                </div>

                <div class="bg-gray-100 p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-semibold text-gray-800">Stock du produit</h2>
                    <p class="text-gray-600">{{ product.stock }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="mt-6 flex justify-between">
{% if is_granted('ROLE_ADMIN') %}
        <div class="flex space-x-4">
            <a href="{{ path('app_product_edit', {'id': product.id}) }}" class="bg-blue-600 text-white px-6 py-3 rounded-lg text-lg font-medium hover:bg-blue-700 transition">Modifier</a>
            {{ include('product/_delete_form.html.twig') }}
        </div>
{% endif %}
    </div>
</div>

<!-- Fullscreen Modal -->
<div id="fullscreen-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
    <img id="fullscreen-image" src="" class="max-w-full max-h-full" alt="Product Image">
    <button aria-label="fermé" onclick="closeFullscreen()" class="absolute top-4 right-4 text-white text-2xl">&times;</button>
</div>

<script>
    // Initialize Swiper
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // Open image in fullscreen
    function openFullscreen(img) {
        var modal = document.getElementById("fullscreen-modal");
        var modalImg = document.getElementById("fullscreen-image");
        modal.style.display = "flex";
        modalImg.src = img.src;
    }

    // Close fullscreen
    function closeFullscreen() {
        var modal = document.getElementById("fullscreen-modal");
        modal.style.display = "none";
    }
</script>
{% endblock %}