{% extends "base.html.twig" %}
{% block stylesheets %} 
<style>
   .banner-section {
        position: relative;
        overflow: hidden;
        padding: 150px 0px 225px 0px;
    } 
</style>

{% endblock %}
{% block body %}
<!-- banner-section -->
        <section class="banner-section centred p_relative" >
            <div class="bg-layer" style="background-image: url({% if slide %} {% if slide.image %} {{ asset('uploads/slides/' ~ slide.image) }} {% endif %}{% endif %}); " ></div>
            <div class="banner-carousel swiper-container">
                <div class="swiper-wrapper">
                    {% for slidedescription in slideDescription %}
                    <div class="swiper-slide">
                        <div class="auto-container">
                            <div class="inner-box">
                                <span>{{ slidedescription.libelle }}</span>
                                <h2>{{ slidedescription.description1 }}</h2>
                                <p>{{ slidedescription.description2 }}</p>
                                {% if slidedescription.lien %}
                                <div class="btn-box">
                                    <a href="{{ slidedescription.lien }}" class="theme-btn btn-one">Voir</a>
                                </div>
                                {% endif %}
                            </div> 
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        <!-- banner-section end -->

        <!-- appointment-section -->
        <section class="appointment-section alternat-2">
            <div class="auto-container">
                <div class="inner-container">
                    <form method="post" action="{{ path('home') }}">
                        <div class="form-group">
                            <label>Destination</label>
                            <div class="select-box">
                                <select class="wide">
                                   <option data-display="Ou voulez vous allez?">Ou voulez vous allez?</option>
                                    <option value="1">Canada </option>
                                    <option value="2">Schengen </option>
                                    <option value="3">Quatar </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Départ</label>
                            <input type="text" name="date" placeholder="Définir une date" id="datepicker">
                        </div>
                        <div class="form-group">
                            <label>Retour</label>
                            <input type="text" name="date" placeholder="Définir une date" id="datepicker2">
                        </div>
                        <div class="form-group">
                            <label>Activité</label>
                            <div class="select-box">
                                <select class="wide">
                                   <option data-display="Activité">Activité</option>
                                    <option value="1">Tourisme </option>
                                    <option value="1">Activité Pro </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group message-btn">
                            <button type="submit" class="theme-btn btn-three">Recherche</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- appointment-section end -->

        <!-- destinations-section -->
<section class="destinations-section pt_150 pb_150" id="destination">
            <div class="auto-container">
                <div class="sec-title text-center mb_60">
                    <span class="sub-title">Top Destinations</span>
                    <h2>Destinations populaires</h2>
                    <br />
                    <p>Envie d’évasion ? <br />
                        Laissez-vous séduire par les lieux les plus prisés aux quatre coins du monde.<br /> 
                        Des plages paradisiaques aux métropoles vibrantes,<br />
                        en passant par les trésors culturels et les paysages naturels à couper le souffle, <br />
                        chaque destination vous promet une expérience unique.
                        <br />
                         <br> 
                        </p>
                </div>
            </div>
            <div class="outer-container">
                <div class="destinations-carousel swiper-container">
                    <div class="swiper-wrapper">
                    {% for destination in destinations %}
                        <div class="swiper-slide">
                            <div class="destination-block-one">
                                <div class="inner-box">
                                    <figure class="image-box"><img src="{{asset('uploads/destinations/' ~ destination.image1)}}" alt=""></figure>
                                    <div class="content-box">
                                        <span class="rating"><i class="icon-2"></i>4.5</span>
                                        <div class="text-box centred">
                                            <p>{{destination.site}}</p>
                                            <h3><a href="{{ path('destination_home', {id: destination.id}) }}">{{destination.pays}}</a></h3>
                                            <div class="link"><a href="{{ path('destination_home', {id: destination.id}) }}" class="theme-btn btn-two">Decouvrez</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    </div>
                </div>
                <div class="btn-box centred mt_50">
                    <a href="{{ path('destination_toutes') }}" class="theme-btn btn-three">voir toutes Destinations</a>
                </div>
            </div>
        </section>
        <!-- destinations-section end -->


        <!-- discount-section -->
        <section class="discount-section">
            <div class="auto-container">
                <div class="inner-container">
                    <div class="row clearfix">
                        
                        <div class="col-lg-7 col-md-12 col-sm-12 discount-block">
                            <div class="discount-block-two">
                                <div class="inner-box">
                                    <div class="bg-layer" style="background-image:url({{asset('assets/assets/images/resource/discount-2.jpg')}});"></div>
                                    <div class="content-box">
                                        <span>Profitez de services sur-mesure </span>
                                        <h2>Nos prestations</h2>
                                        <a href="{{ path('circuit_home') }}" class="theme-btn btn-two">Decouvrez</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-5 col-md-12 col-sm-12 discount-block">
                            <div class="discount-block-one">
                                <div class="inner-box">
                                    <div class="bg-layer" style="background-image:url({{asset('assets/assets/images/resource/discount-1.jpg')}});"></div>
                                    <div class="content-box">
                                        <h2>Contactez-nous <br /> sans hésiter</h2>
                                        <a href="{{path('circuit_home')}}" class="theme-btn btn-one">Contacts</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
        <!-- discount-section end -->


        <!-- tours-section -->
         <!---->
        <section class="tours-section pt_150 pb_120" id="tour">
            <div class="pattern-layer" style="background-image: url({{ asset('assets/assets/images/shape/shape-1.png') }});"></div>
            <div class="auto-container">
                <div class="sec-title mb_60">
                    <span class="sub-title">Découvrez nos circuits</span>
                    <h2>Visites les plus populaires</h2>
                    <p>Découvrez les destinations incontournables qui séduisent chaque année des milliers<br>
                        de voyageurs. Des plages paradisiaques aux villes historiques, chaque lieu offre <br>
                        une expérience unique et mémorable.</p>
                    <a href="{{ path('service_categorie_circuit') }}" class="theme-btn btn-two">Voir plus de Destinations</a>
                </div>
                <div class="inner-container">
                    <div class="row clearfix">
                        {% for circuit in circuits %}
                        <div class="col-lg-4 col-md-6 col-sm-12 tour-block">
                            <div class="tour-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                                <div class="inner-box">
                                    <div class="image-box">
                                        <figure class="image">
                                            <img src="{{ asset('uploads/circuits/' ~ circuit.image1) }}" alt="">
                                            <span>{{ circuit.Jour }}</span>
                                            <button class="like-btn"><i class="icon-3"></i></button>
                                        </figure>
                                        <ul class="image-list clearfix">
                                            <li><img src="{{ asset('uploads/circuits/' ~ circuit.image2) }}" alt=""></li>
                                            <li><img src="{{ asset('uploads/circuits/' ~ circuit.image3) }}" alt=""></li>
                                            <li><img src="{{ asset('uploads/circuits/' ~ circuit.image4) }}" alt=""></li>
                                        </ul>
                                    </div>
                                    <div class="lower-content">
                                        <ul class="info-list">
                                            <li class="time"><i class="icon-5"></i>{{ circuit.Jour }}</li>
                                            <li class="rating">
                                                <i class="icon-2"></i>
                                                <i class="icon-2"></i>
                                                <i class="icon-2"></i>
                                                <i class="icon-2"></i>
                                                <i class="icon-2 light"></i>
                                                4.5
                                            </li>
                                        </ul>
                                        <h3><a href="tour-details.html">{{circuit.libelle}}</a></h3>
                                        <span class="location-box gradient-color"><i class="icon-6 gradient-color"></i> {{circuit.ville}}, {{circuit.ville}}</span>
                                        <div class="lower-box">
                                            <h3>{{circuit.montant}} <del>{{circuit.montant}}</del></h3>
                                            <a href="{{ path('service_categorie_circuit') }}" class="theme-btn btn-one">Explorez</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </section>
        <!-- tours-section end -->


        <!-- funfact-section -->
        <section class="funfact-section centred pt_160 pb_150">
            <div class="bg-layer parallax-bg" data-parallax='{"y": 100}' style="background-image: url({{ asset('assets/assets/images/background/funfact-bg.jpg') }});"></div>
            <div class="auto-container">
                <div class="inner-container">
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="arrow-shape" style="background-image: url({{ asset('assets/assets/images/shape/shape-2.png') }});"></div>
                            <div class="icon-box"><i class="icon-7"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="500">0</span>
                            </div>
                            <h3>Réservation de vol</h3>
                        </div>
                    </div>
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="arrow-shape" style="background-image: url({{ asset('assets/assets/images/shape/shape-3.png') }});"></div>
                            <div class="icon-box"><i class="icon-8"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="250">0</span>
                            </div>
                            <h3>Réservation de croisières</h3>
                        </div>
                    </div>
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="arrow-shape" style="background-image: url({{ asset('assets/assets/images/shape/shape-2.png') }});"></div>
                            <div class="icon-box"><i class="icon-9"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="750">0</span>
                            </div>
                            <h3>Visite incroyable</h3>
                        </div>
                    </div>
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="icon-box"><i class="icon-10"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="150">0</span>
                            </div>
                            <h3>Réservation d'hôtel</h3>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- funfact-section end -->


        <!-- category-section -->
        <section class="category-section pt_150 pb_120 bg-color-1" id="category">
            <div class="pattern-layer" style="background-image: url({{ asset('assets/assets/images/shape/shape-4.png') }});"></div>
            <div class="auto-container">
                <div class="sec-title mb_60 centred">
                    <span class="sub-title">🌐 Parcourir par catégorie</span>
                    <h2>Trouvez l'inspiration pour votre prochain voyage</h2>
                    <p>
                            Trouvez l’inspiration pour votre prochain voyage en explorant nos destinations <br />
                            selon vos envies. Que vous soyez passionné par les plages paradisiaques, <br />
                            les grandes villes culturelles, les aventures en pleine nature ou les escapades<br />
                             romantiques, chaque catégorie vous ouvre les portes d’expériences uniques. 
                        </p>
                </div>
                <div class="row clearfix">
                    {% for categorie in categories %}
                    <div class="col-lg-3 col-md-6 col-sm-12 category-block">
                        <div class="category-block-one">
                            <div class="inner-box">
                                <figure class="image-box"><img src="{{ asset('uploads/categories/' ~ categorie.image) }}" alt=""></figure>
                                <h3><a href="{{ path('service_categorie_circuit') }}">{{ categorie.libelle }}</a></h3>
                                <p>{{ categorie.description}}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    
                </div>
            </div>
        </section>
        <!-- category-section end -->


         <!-- chooseus-section -->
        <section class="chooseus-section pt_150 pb_150">
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content_block_one">
                            <div class="content-box mr_30">
                                <div class="sec-title mb_60">
                                    <span class="sub-title">Pourquoi nous choisir ?</span>
                                    <h2>Découvrez notre guide de voyage</h2>
                                    <p>Faites confiance à notre expertise pour préparer des voyages sur mesure, sûrs et mémorables.</p>
                                </div>
                                <ul class="list-style-one clearfix pb_30"><li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Guides professionnels</a></li>
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Fiabilité</a></li>
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Flexibilité</a></li>
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Disponibilité</a></li>
                                </ul>
                                <div class="btn-box">
                                     <a href="{{ path('contact') }}" class="theme-btn btn-three">Nous Contacter</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="offer-box">
                <div class="bg-layer" style="background-image: url({{asset('assets/assets/images/background/chooseus-bg.jpg')}});"></div>
                <div class="content_block_two">
                    <div class="content-box">
                        <span class="sub-title">À découvrir</span>
                        <p>Places limitées ! Réservez vite</p>
                        <h2 class="gradient-color">15 <span>% DE RÉDUCTION</span></h2>
                        <h3>Nouvelle expérience en Thaïlande</h3>
                        {# <div class="timer mb_60">
                            <div class="cs-countdown clearfix" data-countdown="12/28/2027 05:06:59"></div>
                        </div> #}
                        <div class="btn-box"><a href="{{ path('service_categorie_circuit') }}" class="theme-btn btn-one">Réservez maintenant</a></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- chooseus-section end -->


        <!-- testimonial-section -->
            <!--
        <section class="testimonial-section pt_150 pb_120 bg-color-1" id="testimonial">
            <div class="thumb-inner">
                <figure class="thumb thumb-1"><img src="{{ asset('assets/assets/images/resource/thumb-1.png') }}" alt=""></figure>
                <figure class="thumb thumb-2"><img src="{{ asset('assets/assets/images/resource/thumb-2.png') }}" alt=""></figure>
                <figure class="thumb thumb-3"><img src="{{ asset('assets/assets/images/resource/thumb-3.png') }}" alt=""></figure>
                <figure class="thumb thumb-4"><img src="{{ asset('assets/assets/images/resource/thumb-4.png') }}" alt=""></figure>
                <figure class="thumb thumb-5"><img src="{{ asset('assets/assets/images/resource/thumb-5.png') }}" alt=""></figure>
                <figure class="thumb thumb-6"><img src="{{ asset('assets/assets/images/resource/thumb-6.png') }}" alt=""></figure>
            </div>
            <div class="pattern-layer" style="background-image: url({{ asset('assets/assets/images/shape/shape-4.png') }});"></div>
            <div class="auto-container">
                <div class="sec-title centred mb_60">
                    <span class="sub-title">Testimonials</span>
                    <h2>What Our Happy Clients Say</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br />tempor incididunt ut labore</p>
                </div>
                <div class="testimonial-carousel swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="testimonial-block-one">
                                <div class="inner-box">
                                    <div class="shape-1"></div>
                                    <div class="shape-2"></div>
                                    <div class="icon-box gradient-color"><i class="icon-22"></i></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan.</p>
                                    <div class="author-box">
                                        <figure class="thumb-box"><img src="assets/images/resource/testimonial-1.png" alt=""></figure>
                                        <h3>Jenny Wilson</h3>
                                        <span class="designation gradient-color">Web Designer</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-block-one">
                                <div class="inner-box">
                                    <div class="shape-1"></div>
                                    <div class="shape-2"></div>
                                    <div class="icon-box gradient-color"><i class="icon-22"></i></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan.</p>
                                    <div class="author-box">
                                        <figure class="thumb-box"><img src="assets/images/resource/testimonial-1.png" alt=""></figure>
                                        <h3>Alex Hels</h3>
                                        <span class="designation gradient-color">Web Designer</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-block-one">
                                <div class="inner-box">
                                    <div class="shape-1"></div>
                                    <div class="shape-2"></div>
                                    <div class="icon-box gradient-color"><i class="icon-22"></i></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan.</p>
                                    <div class="author-box">
                                        <figure class="thumb-box"><img src="assets/images/resource/testimonial-1.png" alt=""></figure>
                                        <h3>Tomas Adison</h3>
                                        <span class="designation gradient-color">Web Designer</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial__pagination"></div>
                </div>
            </div>
        </section> 
    -->
        <!-- testimonial-section end -->


        <!-- video-section -->
         <!--
        <section class="video-section pt_200 pb_200 centred">
            <div class="bg-layer parallax-bg" data-parallax='{"y": 100}' style="background-image: url({{ asset('assets/assets/images/background/video-bg.jpg') }});"></div>
            <div class="auto-container">
                <div class="inner-box z_2">
                    <span class="sub-title">Our Video</span>
                    <h2>Travel Tips And Advice</h2>
                    <a href="https://www.youtube.com/watch?v=nfP5N9Yc72A&amp;t=28s" class="lightbox-image video-btn" data-caption=""><i class="icon-12"></i></a>
                </div>
            </div>
        </section>-->
        <!-- video-section end -->


        <!-- news-section -->
        <section class="news-section pt_150 pb_120" id="news">
            <div class="auto-container">
                <div class="sec-title centred mb_60">
                    <span class="sub-title">Notre blog</span>
                    <h2>Nos derniers Articles</h2>
                    <p>
                        Plongez dans nos articles et publications récentes pour découvrir des conseils pratiques, <br>
                        des récits de voyage inspirants et des actualités sur les destinations les plus prisées.  <br>
                        Chaque article est pensé pour vous offrir une nouvelle perspective, enrichir vos connaissances  <br>
                        et éveiller votre curiosité. <br>
                    </p>
                </div>
                <div class="row clearfix">
                    {% for blog in blogs %}
                     <div class="col-lg-6 col-md-12 col-sm-12 news-block">
                        <div class="news-block-one">
                            <div class="inner-box">
                                <figure class="image-box"><a href="{{ path('blog_show_home', {'id': blog.id}) }}"><img src="{{ asset('uploads/blogs/' ~ blog.image) }}" alt=""></a></figure>
                                <div class="content-box">
                                    <ul class="post-info">
                                        <li><a href="{{ path('blog_show_home', {'id': blog.id}) }}">{{blog.editeur}}</a></li>
                                    </ul>
                                    <ul class="post-info">
                                        <li>{{ blog.dateCreation|date('M Y') }}</li>
                                    </ul>
                                    <h3><a href="{{ path('blog_show_home', {'id': blog.id}) }}">{{ blog.libelle }}</a></h3>
                                    <p>{{ blog.description|slice(0, 150) }}...</p>
                                    <div class="btn-box">
                                        <a href="{{ path('blog_show_home', {'id': blog.id}) }}" class="blog-btn"><span>Lire plus</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                </div>
            </div>
        </section>
        <!-- news-section end -->


      
{% endblock %}