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

{% block title %}Gîte du bonheur - Les gîtes de Roquetoire{% endblock %}

{% block meta %}
    <meta name="description" content="Description du gîte du Bonheur">
{% endblock %}

{% block content %}

<div class="container mt-5">
    <a href="{{path ('app_gites') }}">
        <img src="{{ asset('assets/img/arrow-left.png')}}" alt="Retour en arrière" style="max-width: 60px;">
    </a>
    <h1 class="mt-3 text-center">{{ gite.name }}</h1>

    <div class="row">
        {% for image in images %}
            {% if loop.index == 1 %}
                <div class="col-md-4 d-flex align-items-center">
                    <img src="/uploads/{{ gite.illustration }}" class="img-fluid img-thumbnail mx-auto d-block" alt="{{ gite.name }}">
                </div>
            {% elseif loop.index <= 5 %}
                <div class="col-md-4">
                    <img src="/uploads/{{ image.illustration }}" class="img-fluid img-thumbnail" alt="Photo {{ loop.index }}">
                </div>
            {% elseif loop.index == 6 %}
                <div class="col-md-4 position-relative">
                    <img src="/uploads/{{ image.illustration }}" class="img-fluid img-thumbnail" alt="Photo {{ loop.index }}">
                    <div class="overlay">
                        <button type="button" class="btn btn-perso" data-bs-toggle="modal" data-bs-target="#galleryModal">Voir plus</button>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>

    <!-- Modal -->
    <div class="modal fade" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="galleryModalLabel">Toutes les photos de {{ gite.name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        {% for image in images %}
                            {% if loop.index > 5 %}
                                <div class="col-md-4 mb-3">
                                    <img src="/uploads/{{ image.illustration }}" class="img-fluid img-thumbnail" alt="Photo {{ loop.index }}">
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <hr>
    <h2>Description</h2>
    <p>
        On vous accueille dans notre chaleureuse maison pour 6 personnes, pour passer du bon temps avec votre famille ou vos amis,
        Soirée apéro, barbecue, jeux de plein air.
    </p>
    <hr>
    <div class="caracteristique">
        <div class="caracteristiques">
            <h2>Caractéristiques</h2>
            <div class="d-flex align-items-center">
                <img src="{{ asset('assets/img/home.png')}}" class="img-logo me-2" alt="Une maison">
                <h3 class="mb-0">Pièces</h5>
            </div>
            <ul class="tirets mt-3">
                <li>Rez de chaussée : 1 salon, 1 salle à manger et 1 cuisine ouverte</li>
                <li>Etages: 3 chambres, 1 mezzanine et 1 salle de bain</li>
            </ul>
        </div>
        <div class="equipements mt-4">
            <h2>Equipements</h2>
            <div class="d-flex align-items-center mt-3">
                <img src="{{ asset('assets/img/cuisine.png')}}" class="img-logo me-2" alt="Une cuisine">
                <h3 class="mb-0">Cuisine</h5>
            </div>
            <p>{{ gite.equipementKitchen|raw }}</p>
            <div class="d-flex align-items-center my-3">
                <img src="{{ asset('assets/img/lit.png')}}" class="img-logo me-2" alt="Une cuisine">
                <h3 class="mb-0">Chambre</h5>
            </div>
            <ul>
                <li>Chambres 1 : 1 lit 160 sur 190 et dressing</li>
                <li>Chambres 2 : 2 lit simple de 90</li>
                <li>Chambres 3 : 1 lit 160 sur 190</li>
            </ul>
            <div class="d-flex align-items-center my-3">
                <img src="{{ asset('assets/img/salle-de-bain.png')}}" class="img-logo me-2" alt="Une cuisine">
                <h3 class="mb-0">Salle de bain</h5>
            </div>
            <p>Baignoire et douche.</p>
            <div class="d-flex align-items-center my-3">
                <img src="{{ asset('assets/img/plus.png')}}" class="img-logo me-2" alt="Une cuisine">
                <h3 class="mb-0">Autre</h5>
            </div>
            <p>{{ gite.equipementOther|raw }}</p>
            <div class="d-flex align-items-center my-3">
                <img src="{{ asset('assets/img/terrasse.png')}}" class="img-logo me-2" alt="Une cuisine">
                <h3 class="mb-0">Extérieur</h5>
            </div>
            <p>{{ gite.equipementOutdoors|raw }}</p>
        </div>
    </div>
    <hr class="my-4">
    <div class="regles">
        <h2>Règles de la maison</h2>
        {% for regles in regles %}
        <div class="row my-3 align-items-center">
            <div class="col-md-2 mb-2">
                <img src="/uploads/{{ regles.illustration }}" class="img-logo" alt="{{ regles.name }}">
            </div>
            <div class="col-md-4">
                <h5 class="mb-0">{{ regles.name }}</h5>
            </div>
            <div class="col-md-4">
                <p>{{ regles.description|raw }}</p>
            </div>
        </div>
        {% endfor %}
    </div>
    <hr class="my-4">
    <h3>Tarif : {{ (gite.price / 100) |number_format(2, ',', '.') }} €</h3>
    <hr>
    <a href="{{ path('app_reservation', { 'slug' : gite.slug } ) }}" class="btn btn-perso mt-2 w-50">Voir le calendrier de réservation</a>
</div>

{% endblock %}