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

{% block title %}
    {{ realization.name }}
{% endblock %}

{% import 'macros/breadcrumbs.html.twig' as breadcrumbs %}
{% set crumbs = [
    { 'title': 'Accueil'|trans, 'url': path('home_index') },
    { 'title': 'Nos réalisations'|trans, 'url':  path('@Realization_index') },
    { 'title': realization.name|trans, 'url': null },
] %}

{% block body %}
    <section class="container">
        {{ breadcrumbs.breadcrumb(crumbs) }}
        <div class="">
            <h1 class="">{{ realization.name }}</h1>
            <div class="card p-3">
                <article class="realization-show py-3">
                    <div class="row">
                        <div class="col-12 col-lg-8">
                            {{ include('@Realization/front/gallery/_show.html.twig') }}
                        </div>
                        <div class="col-12 col-lg-4">
                            <small class="">
                                Imprimée le {{ realization.designedAt|date('d/m/Y') }}
                            </small>
                            {#                            <img class="img-fluid" #}
                            {#                                 src="{{ vich_uploader_asset(realization, 'imageFile', '\\App\\RealizationBundle\\Entity\\Realization') | mediaCache('medium_square') }}" #}
                            {#                                 alt=""/> #}
                            <div>
                                Largeur : {{ realization.dimensions.width|formatCentimeterToMeter }} m
                            </div>
                            <div>
                                Hauteur : {{ realization.dimensions.height|formatCentimeterToMeter }} m
                            </div>
                            <div>
                                Type de support : {{ realization.support.typeValue }}
                            </div>
                            <div>
                                Couleur de base du support : {{ realization.support.color }}
                            </div>
                            <div>
                                Temps d'impression : {{ realization.realizationTime|formatTimeToHour }}
                            </div>
                            {#                            {% if realization.realizationAmount is not empty %} #}
                            {#                                <div> #}
                            {#                                    Montant de l'impression : #}
                            {#                                    {{ realization.realizationAmount|formatPriceDevise }} #}
                            {#                                </div> #}
                            {#                            {% endif %} #}
                            {% if realization.video is not empty %}
                                <iframe class="embed-responsive-item" src="//www.youtube.com/embed/{{ realization.video }}" allowfullscreen></iframe>
                            {% endif %}
                            <div>
                                {{ include('@CMS/common/editorjs/_block.html.twig', {blocks:realization.description|cmsBlocks}) }}
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>
    <section class="bg-light mt-5">
        <div id="blog" class="py-3 overflow-hidden">
            <div class="container">
                <div class="realization-more text-center">
                    <div class="fan-container position-relative d-flex justify-content-center m-auto">
                        {% for realizationSample in realizationSamples %}
                            <img src="{{ vich_uploader_asset(realizationSample, 'imageFile', '\\App\\RealizationBundle\\Entity\\Realization') | mediaCache('small_outbound') }}" class="fan-img img-fluid position-absolute" alt="{{ realizationSample.name }}">
                        {% endfor %}
                    </div>
                    <h2 class="mt-5">On en a encore dans la cartouche !</h2>
                    <div class="cto">
                        {{ include('front/_parts/_btn_link.html.twig', {link:path('@Realization_index'), firstLabel:'Voir nos', secondLabel:"réalisations", position:'left'}) }}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .fan-container {
            width: 400px; /* largeur totale de la zone */
            height: 350px; /* hauteur suffisante pour les images */
            position: relative;
        }

        .fan-img {
            background: #fff;
            width: 100%;
            max-width: 250px;
            transition: transform 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            transform-origin:bottom;
        }

        .fan-img:nth-child(1) {
            transform: rotate(-30deg) translateX(-200px) translateY(-50px);
            z-index: 1;
        }

        .fan-img:nth-child(2) {
            transform: rotate(-18deg) translateX(-120px) translateY(-10px);
            z-index: 2;
        }

        .fan-img:nth-child(3) {
            transform: rotate(0deg) translateX(0px) translateY(0px);
            z-index: 3;
        }

        .fan-img:nth-child(4) {
            transform: rotate(18deg) translateX(70px) translateY(20px);
            z-index: 3;
        }

        .fan-img:nth-child(5) {
            transform: rotate(25deg) translateX(180px) translateY(10px);
            z-index: 3;
        }

        .fan-img:hover {z-index: 999;}
    </style>

    <!-- Modal -->
    <div class="modal fade js-modalAjax bg-blur" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="h1 modal-title fs-5" id="galleryModalLabel">Aperçu de l'image</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                </div>
            </div>
        </div>
    </div>
{% endblock %}