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

{% block title %}{{companyName}} | {% trans %}Accueil{% endtrans %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <link href="{{ asset('css/home.func.css') }}" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


    <style>



        .truncate-overflow {
            display: -webkit-box;

            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 14px;
        }
        .truncate-overflow:hover {

             cursor: pointer;

        }

        .zoom {
            transition: transform .2s; /* Animation */

            cursor: pointer;
        }
        .slick-next{
            width: 20px;
            height: 20px;
        }
        .slick-prev{
            width: 20px;
            height: 20px;
        }

        .zoom:hover {
            transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

        }
        .modal { width:75% !important ; height: 75% !important ; }

        div.ex3 {
            background-color: #ffffff;
            height: 250px;
            width: 100%;
            overflow-y: auto;
        }
        div.ex4 {
            background-color: #ffffff;
            height: 300px;
            border-radius: 30px;
            width: 100%;
            overflow-y: auto;
        }
    </style>
    <style>

       .pagination li{
            display:inline-block;
            margin: 0 2px;

            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            font-size: 18px;
            font-weight: 400;
            line-height: 30px;
            cursor: pointer;
           background-position: 0 -45px;
           transition: background-position 0.5s;
        }
       .pagination li.active{
           color:#fff;
           background-image: linear-gradient(#ff4568, #ff4568);
           background-repeat: no-repeat;
           background-position: 0 0;
       }
        .container-caroussel {
            position: relative;
            width: 50%;
        }

        .image-caroussel {
            display: block;
            width: 100%;
            height: auto;
        }

        .overlay-caroussel {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #008CBA;
            overflow: hidden;
            width: 100%;
            height: 0;
            transition: .5s ease;
        }

        .container-caroussel:hover .overlay {
            height: 100%;
        }

        .text-caroussel {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}


    <div class="row" id="content" style="margin-top: 80px; ">

        {% if type is not null%}

                        {% if type.enable ==true %}

                            <div id="building_{{type.id }}"
                                 class="col s12 " style=" margin-top: 40px;;

                                   z-index: 100; position: relative" >

                                <div class="col s12 card z-depth-3" style="   border-radius: 50px; background: -webkit-linear-gradient(90deg, rgba(192,220,126,0.7), rgba(192,220,126,0.73)) !important;; ">
                                    <div class="input-field col m6 s12 l3 m6" style="">

                                        <div class="col s12" >

                                            <i class="fas fa-bed" style=" font-size: 18px; position: absolute; margin-left: -25px;margin-top: 10px; float: right; z-index: 100 "></i>

                                            <select class="js-example-basic-single" name="destinationTown" id="destinationTown_{{type.id  }}" style="width: 100%;   ">
                                                {% for town in towns %}
                                                    <option value="{{ town.id }}">{{ town.townName }}</option>
                                                {%endfor %}

                                            </select>

                                        </div>


                                    </div>


                                    <div class="col m6 s12 l4  m6 ">

                                        <div class="col s12">
                                            <div class="col s6">

                                                <h6>Arrivée Le</h6>

                                                <input style="margin-top: -10px" type="datetime-local"  onchange="updateStartDate({{ type.id  }})"  value="{{ startDate }}" id="startDate_{{ type.id }}"  placeholder="Date d'arrivée" name="startDate"  class="col s12  "/>

                                            </div>
                                            <div class="col s6">

                                                <h6>Départ Le</h6>

                                                <input   style="margin-top: -10px" type="datetime-local"  onchange="updateEndDate({{ type.id  }})" value="{{ endDate }}" id="endDate_{{ type.id }}"  placeholder="Date de départ"  name="endDate"  class="col s12  "/>


                                            </div>
                                        </div>
                                    </div>


                                    <div class="col s12 l3 m6 ">
                                        <div class="col s12">
                                            <div class="col s3 pull-l1 "  style="margin-top: 20px">
                                                <h6 style="margin-left: -10px">
                                                    <i class="fas fa-user-friends " style="position: absolute; float: right; margin-left: -10px" ></i>

                                                    <span style="margin-left: 15px">Adultes</span>
                                                </h6>
                                            </div>

                                            <div class="s3 col"   style="margin-top: 20px">
                                                <input style="margin-top: -10px" min="1" value="{{ adult }}"  onchange="updateAdult({{type.id  }})"  type="number" id="adult_{{ type.id }}"   name="adult_{{ type.id }}"  class="col s12  "/>

                                            </div>
                                            <div class="s3 col "  style="margin-top: 20px">


                                                <h6 style="margin-left: -10px">
                                                    <i class="fas fa-baby " style="position: absolute; float: right; margin-left: -10px" ></i>

                                                    <span style="margin-left: 15px">Enfants</span>
                                                </h6>
                                            </div>
                                            <div class="s3 col"   style="margin-top: 20px">
                                                <input style="margin-top: -10px; margin-left: 10px; font-weight: 20;" min="0" value="{{ child  }}"  onchange="updateChild({{type.id  }})"  type="number" id="child_{{ type.id }}"   name="child_{{ type.id }}"  class="col s12  "/>

                                            </div>
                                        </div>
                                    </div>

                                    <a id="btn_search_{{ type.id }}" onclick="findBuilding({{ type.id }}, '{{ type.type }}')" href="#!" class="   card black-text  col m6 s12 l2 m6 button  waves-ripple waves-effect " style=" padding: 10px; border-radius: 20px; margin-top: 20px">
                                        <i class="fas fa-search" style="margin-left: 5px; margin-right:  5px"></i>
                                        <span class="" id="btn_text_{{ type.id }}">Rechercher</span>
                                        <img id="btn_loading_{{ type.id }}" src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">


                                    </a>
                                </div>
                            </div>

                        {% endif %}

            {% else %}
                <div class="col s10 offset-s1" style="margin-top: 30px;  ">
                    <ul class="tabs" style=" background-color: rgba(192,220,126,0);">



                        {% for buildingType in buildingTypes %}
                            {% if buildingType.enable ==true %}

                                <li class="tab col s3  " style="
                   margin: 5px;
 background-color: rgba(192,220,126,0.7);
                      ">

                                    <a href="#building_{{buildingType.id }}" class="black-text waves-ripple waves-effect">
                                        <i class="fas fa-hotel  " style="margin-left: -5px; margin-right:  50px"></i>
                                        {{buildingType.type }}

                                    </a></li>

                            {% endif %}
                        {%endfor %}
                    </ul>
                </div>
                {% for buildingType in buildingTypes %}
                    {% if buildingType.enable ==true %}

                        <div id="building_{{buildingType.id }}"
                             class="col s10 offset-s1  " style=" margin-top: 0px;

                     " >

                            <div class="col s12 card" style="  background-color: rgba(192,220,126,0.57);">
                                <div class="input-field col m6 s12 l3 m6">

                                    <div class="col s12" >

                                        <i class="fas fa-bed" style=" font-size: 18px; position: absolute; margin-left: -30px;margin-top: 10px; float: right; z-index: 100 "></i>


                                        <select class="js-example-basic-single" name="destinationTown" id="destinationTown_{{buildingType.id  }}" style="width: 100%;   ">
                                            {% for town in towns %}
                                                <option value="{{ town.id }}">{{ town.townName }}</option>
                                            {%endfor %}

                                        </select>
                                    </div>

                                </div>
                                <div class="col m6 s12 l4  m6 ">
                                    <div class="col s12">
                                        <div class="col s6">
                                            <h6>Arrivée Le</h6>
                                            <input style="margin-top: -10px" onchange="updateStartDate({{ buildingType.id  }})" type="datetime-local" id="startDate_{{ buildingType.id }}"  placeholder="Date d'arrivée" name="startDate"  class="col s12  "/>
                                        </div>
                                        <div class="col s6">
                                            <h6>Départ Le</h6>
                                            <input   style="margin-top: -10px"  onchange="updateEndDate({{ buildingType.id  }})" type="datetime-local" id="endDate_{{ buildingType.id }}"  placeholder="Date de départ"  name="endDate"  class="col s12  "/>

                                        </div>
                                    </div>
                                </div>


                                <div class="col s12 l3 m6 ">
                                    <div class="col s12">
                                        <div class="col s3 pull-l1 "  style="margin-top: 20px">
                                            <h6 style="margin-left: -10px">
                                                <i class="fas fa-user-friends " style="position: absolute; float: right; margin-left: -10px" ></i>

                                                <span style="margin-left: 15px">Adultes</span>
                                            </h6>
                                        </div>

                                        <div class="s3 col"   style="margin-top: 20px">
                                            <input style="margin-top: -10px" min="1" onchange="updateAdult({{buildingType.id  }})"  value="1" type="number" id="adult_{{ buildingType.id }}"   name="adult_{{ buildingType.id }}"  class="col s12  "/>

                                        </div>
                                        <div class="s3 col "  style="margin-top: 20px">


                                            <h6 style="margin-left: -10px">
                                                <i class="fas fa-baby " style="position: absolute; float: right; margin-left: -10px" ></i>

                                                <span style="margin-left: 15px">Enfants</span>
                                            </h6>
                                        </div>
                                        <div class="s3 col"   style="margin-top: 20px">
                                            <input style="margin-top: -10px; margin-left: 10px; font-weight: 20;" min="0"  onchange="updateChild({{buildingType.id  }})"  value="0" type="number" id="child_{{ buildingType.id }}"   name="child_{{ buildingType.id }}"  class="col s12  "/>

                                        </div>
                                    </div>
                                </div>

                                <a id="btn_search_{{ buildingType.id }}" onclick="findBuilding({{ buildingType.id }}, '{{ buildingType.type }}')" href="#!" class="   card black-text  col m6 s12 l2 m6 button  waves-ripple waves-effect " style=" padding: 10px; border-radius: 20px; margin-top: 20px">
                                    <i class="fas fa-search" style="margin-left: 5px; margin-right:  5px"></i>
                                    <span class="" id="btn_text_{{ buildingType.id }}">Rechercher</span>
                                    <img id="btn_loading_{{ buildingType.id }}" src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">


                                </a>
                            </div>
                        </div>

                    {% endif %}
                {%endfor %}
            {% endif %}


        <div class="col s10 offset-s1 b" style="margin-top: -2px">
            <a href="{{ path('app_home') }}" class="  ">Accueil</a>
            <i class="fas fa-chevron-right"></i>
            <img class="responsive-img circle"  style="max-height: 18px; margin-top: 1px; position: absolute"  src="{{ onlinePath }}/media/{{  town.country.countryFlag }}" alt="">

            <a href="#!" style="margin-left: 30px" class="  ">{{ town.country.countryName }}</a>
            <i class="fas fa-chevron-right"></i>
            <a href="#!" class="  ">{{ town.townName }}</a>

            <i class="fas fa-chevron-right"></i>

            {% if type is not null%}
            <a href="#!" class=" ">{{ type.type }}</a>
            {% else %}
                <a href="#!" class=" ">All</a>
            {% endif %}
        </div>

        <div class="col s12">

            <div class="col s12 l3 card">

                <div class="col s12" >
                    <div class="col s12 divider" style="margin-bottom: 10px"></div>
                    <b><h5  id="displayAmount" style="font-size: 16px; margin-top: 10px">
                            Prix max par nuité      </h5></b>


                    <p class="range-field">
                        <input onchange="displayAmount()" type="range" id="maxAmount" min="0" value="10000" max="400000" />
                    </p>

                </div>

                <br>





                <div class="col s12" >
                    <div class="col s12 divider" style="margin-bottom: 10px"></div>
                    <b>
                        <h5 style="font-size: 18px; margin-top: 15px">
                            Notiriété:
                            <i onmouseover="notority(1)" onmouseleave="unCheckNotority()" onclick="notorityShoose(1)" class="fas fa-star zoom-in animated" id="star_1" style="cursor: pointer ; color: palegoldenrod; margin-left: 10px"></i>
                            <i  onmouseover="notority(2)" onmouseleave="unCheckNotority()" onclick="notorityShoose(2)" class="fas fa-star" id="star_2" style="cursor: pointer ; color: palegoldenrod"></i>
                            <i   onmouseover="notority(3)" onmouseleave="unCheckNotority()" onclick="notorityShoose(3)" class="fas fa-star" id="star_3" style="cursor: pointer ; color: palegoldenrod"></i>
                            <i onmouseover="notority(4)" onmouseleave="unCheckNotority()" onclick="notorityShoose(4)" class="fas fa-star" id="star_4" style="cursor: pointer ; color: palegoldenrod"></i>
                            <i  onmouseover="notority(5)" onmouseleave="unCheckNotority()" onclick="notorityShoose(5)" class="fas fa-star" id="star_5" style="cursor: pointer ; color: palegoldenrod"></i>
                            <i  onmouseover="notority(6)" onmouseleave="unCheckNotority()" onclick="notorityShoose(6)" class="fas fa-star" id="star_6" style="cursor: pointer ; color: palegoldenrod"></i>

                        </h5></b>

                </div>

                <div class="col s12" >
                    <div class="col s12 divider" style="margin-bottom: 10px"></div>
                    <b><h5 style="font-size: 16px; margin-top: 10px">Promotions</h5></b>
                    <p>
                        <input type="checkbox" id="breakFast" />
                        <label for="breakFast">Petit déjeuner Gratuit</label>
                        <img class="responsive-img zoom"  style="float: right; margin-right:  5px; max-height: 25px" src="{{ asset('img/icon_restaurant.png') }}" alt="">

                    </p>
                </div>
                <div class="col s12" >
                    <div class="col s12 divider" style="margin-bottom: 10px"></div>
                    <b><h5 style="font-size: 16px; margin-top: 10px">Conditions de réservations</h5></b>
                    <p>
                        <input type="checkbox" id="cancelableBooking" />
                        <label for="cancelableBooking">Annulation Gratuite</label>
                    </p>
                    <p>
                        <input type="checkbox" id="payBefore" />
                        <label for="payBefore">Paiement à l'avance</label>
                    </p>
                </div>

                <div class="col s12">
                    <div class="col s12 divider" style="margin-bottom: 10px"></div>
                    <b><h5 style="font-size: 16px; margin-top: 10px">Les équipements</h5></b>

                    <p>
                        <input type="checkbox" id="pool" />
                        <label for="pool">Piscine  </label>
                        <img class="responsive-img zoom"  style="float: right; margin-right:  5px; max-height: 30px" src="{{ asset('img/icon_swimming.png') }}" alt="">

                    </p>
                    <p>
                        <input type="checkbox" id="mini_bar" />
                        <label for="mini_bar">Mini Bar  </label>
                        <img class="responsive-img zoom "   style="float: right; margin-right:  5px; max-height: 25px" src="{{ asset('img/icon_bar.png') }}" alt="">

                    </p>
                    <p>
                        <input type="checkbox" id="restaurant" />
                        <label for="restaurant">Restaurant   </label>
                        <img class="responsive-img zoom"  style="float: right; margin-right:  5px; max-height: 25px" src="{{ asset('img/icon_restaurant.png') }}" alt="">

                    </p>
                    <p>

                        <input type="checkbox" id="parking" />
                        <label for="parking">Parking</label>
                        <img class="responsive-img zoom"  style="float: right; margin-right:  5px; max-height: 25px" src="{{ asset('img/icon_parking.png') }}" alt="">
                    </p>
                    <p>
                        <input type="checkbox" id="conference_room" />
                        <label for="conference_room">
                            Salle de conference
                        </label>
                        <img class="responsive-img zoom"  style="float: right; margin-right:  5px; max-height: 25px" src="{{ asset('img/icon_conf_off.png') }}" alt="">

                    </p>

                </div>


            </div>


            <div class="col s12 l9">

                <div class="col s12">
                    {% if type is not null%}
                    <h5 style="font-weight: 20">{{ town.townName }}: {{ result|length }} {{ type.type}}  trouvé(e)s</h5>

                    {% else %}
                    <h5 style="font-weight: 20">{{ town.townName }}: {{ result|length }}  offre(s) trouvé(e)s</h5>
                    {% endif %}
                </div>
                <div class="col s12">


                    {% set buildingLenght=result|length %}


                    {%  if buildingLenght !=1 %}
                        {% set list=1 %}
                    {% for k in range(0, buildingLenght, showItem) %}

                       <div class="row hide " id="building_slide_{{ list }}">


                           {% for building in result|slice(k,k+showItem) %}


                           <div class="col s12 card " style="border-radius: 10px">

                               <div class="m3 l4 s12   col">

                                   <ul class="autoplayPack_{{ list }}">

                                       {% if building.picture1 is not empty %}
                                           <li>
                                               <img class=" zoom circle  image-n-margin  responsive-img halfway-fab hoverable"   src="{{ onlinePath }}/media/{{ building.picture1 }}" style=" width: 200px; height: 200px" alt="">
                                           </li>
                                       {% endif %}

                                       {% if building.picture2 is not empty %}
                                           <li>
                                               <img class="zoom  circle  image-n-margin responsive-img halfway-fab hoverable"  src="{{ onlinePath }}/media/{{ building.picture2 }}"  style=" width: 200px; height: 200px" alt="">
                                           </li>
                                       {% endif %}

                                       {% if building.picture3 is not empty %}
                                           <li>
                                               <img class="  zoom  circle    image-n-margin responsive-img halfway-fab hoverable"  src="{{ onlinePath }}/media/{{ building.picture3 }}"  style=" width: 200px; height: 200px" alt="">
                                           </li>
                                       {% endif %}


                                   </ul>
                               </div>
                               <div class=" col s12 m9 l8">
                                   <div class="col s12">
                                       <h5>
                                           {{ building.designation }}

                                       </h5>
                                       <p style="margin-top: -10px">
                                           {% for i in 0.. building.options.notiriety %}
                                               <i class="fas fa-star " style="font-size: 14px; color: gold"></i>
                                           {%endfor %}
                                       </p>
                                   </div>
                                   <div class="col s12" style="margin-top: -10px">

                                       <h6>Situé à {{ building.address.location }}</h6>
                                   </div>
                                   <div class="col s12">
                                       <p class="truncate-overflow">{{ building.description }}</p>
                                   </div>






                                   <div class="col s12 " style="margin-top: -20px">

                                       {% if building.options is not null %}
                                           <h5 class="left-align ">
                                               {% if building.options.miniBar == true %}
                                                   <img class="responsive-img zoom "   style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_bar.png') }}" alt="">
                                               {% endif %}

                                               {% if building.options.restaurant == true %}
                                                   <img class="responsive-img zoom"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_restaurant.png') }}" alt="">
                                               {% endif %}

                                               {% if building.options.parking == true  %}
                                                   <img class="responsive-img zoom"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_parking.png') }}" alt="">
                                               {% endif %}

                                               {% if building.options.pool == true  %}
                                                   <img class="responsive-img zoom"  style="margin: 5px; max-height: 30px" src="{{ asset('img/icon_swimming.png') }}" alt="">
                                               {% endif %}

                                               {% if building.options.conferenceRoom == true  %}
                                                   <img class="responsive-img zoom"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_conf_off.png') }}" alt="">
                                               {% endif %}

                                           </h5>
                                       {% endif %}
                                       <div class="col s12 right right-align right-aligned">
                                           <a id="btn_building_{{ building.id }}"  onclick="gotToBook({{ building.id }} )"  href="#!" class=" right right-align right-aligned  card black-text    button  waves-ripple waves-effect " style="margin-right: 30px;  padding: 10px; border-radius: 20px; margin-top: -20px; width: fit-content">
                                               <span class="" id="btn_text_{{ building.id }}">{{ building.rooms|length }} offre(s) disponible(s)</span>
                                               <i class="fas fa-eye" style="margin-left: 5px; margin-right:  5px"></i>
                                               <img id="building_loading_{{ building.id }}" src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">


                                           </a>

                                       </div>

                                       <img class="responsive-img "  style="margin-top: -15px; max-height: 30px; position: absolute; z-index: 100; right: 0; margin-right: 20px" src="{{ onlinePath }}/media/{{ building.company.companyLogoMain }}" alt="">

                                   </div>


                               </div>
                           </div>

                           {%endfor %}
                       </div>

                 {%  set list=list+1 %}
                    {%endfor %}

                    {% else %}
                        {% for building in result %}


                            <div class="col s12 card " style="border-radius: 10px">

                                <div class="m3 l4 s12   col">
                                    {% set list=1 %}
                                    <ul class="autoplayPack_{{ list }}">

                                        {% if building.picture1 is not empty %}
                                            <li>
                                                <img class=" zoom circle  image-n-margin  responsive-img halfway-fab hoverable"   src="{{ onlinePath }}/media/{{ building.picture1 }}" style=" width: 200px; height: 200px" alt="">
                                            </li>
                                        {% endif %}

                                        {% if building.picture2 is not empty %}
                                            <li>
                                                <img class="zoom  circle  image-n-margin responsive-img halfway-fab hoverable"  src="{{ onlinePath }}/media/{{ building.picture2 }}"  style=" width: 200px; height: 200px" alt="">
                                            </li>
                                        {% endif %}

                                        {% if building.picture3 is not empty %}
                                            <li>
                                                <img class="  zoom  circle    image-n-margin responsive-img halfway-fab hoverable"  src="{{ onlinePath }}/media/{{ building.picture3 }}"  style=" width: 200px; height: 200px" alt="">
                                            </li>
                                        {% endif %}


                                    </ul>
                                </div>


                                <div class=" col s12 m9 l8">
                                    <div class="col s12">
                                        <h5>
                                            {{ building.designation }}

                                        </h5>
                                        <p style="margin-top: -10px">
                                            {% for i in 0.. building.options.notiriety %}
                                                <i class="fas fa-star " style="font-size: 14px; color: gold"></i>
                                            {%endfor %}
                                        </p>
                                    </div>
                                    <div class="col s12" style="margin-top: -10px">

                                        <h6>Situé à {{ building.address.location }}</h6>
                                    </div>
                                    <div class="col s12">
                                        <p class="truncate-overflow">{{ building.description }}</p>
                                    </div>






                                    <div class="col s12 " style="margin-top: -20px">

                                        {% if building.options is not null %}
                                            <h5 class="left-align ">
                                                {% if building.options.miniBar == true %}
                                                    <img class="responsive-img zoom "   style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_bar.png') }}" alt="">
                                                {% endif %}

                                                {% if building.options.restaurant == true %}
                                                    <img class="responsive-img zoom"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_restaurant.png') }}" alt="">
                                                {% endif %}

                                                {% if building.options.parking == true  %}
                                                    <img class="responsive-img zoom"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_parking.png') }}" alt="">
                                                {% endif %}

                                                {% if building.options.pool == true  %}
                                                    <img class="responsive-img zoom"  style="margin: 5px; max-height: 30px" src="{{ asset('img/icon_swimming.png') }}" alt="">
                                                {% endif %}

                                                {% if building.options.conferenceRoom == true  %}
                                                    <img class="responsive-img zoom"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_conf_off.png') }}" alt="">
                                                {% endif %}

                                            </h5>
                                        {% endif %}
                                        <div class="col s12 right right-align right-aligned">
                                            <a id="btn_building_{{ building.id }}"  onclick="gotToBook({{ building.id }} )"  href="#!" class=" right right-align right-aligned  card black-text    button  waves-ripple waves-effect " style="margin-right: 30px;  padding: 10px; border-radius: 20px; margin-top: -20px; width: fit-content">
                                                <span class="" id="btn_text_{{ building.id }}">{{ building.rooms|length }} offre(s) disponible(s)</span>
                                                <i class="fas fa-eye" style="margin-left: 5px; margin-right:  5px"></i>
                                                <img id="building_loading_{{ building.id }}"  src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">


                                            </a>

                                        </div>

                                        <img class="responsive-img "  style="margin-top: -15px; max-height: 30px; position: absolute; z-index: 100; right: 0; margin-right: 20px" src="{{ onlinePath }}/media/{{ building.company.companyLogoMain }}" alt="">

                                    </div>


                                </div>
                            </div>

                        {%endfor %}

                    {% endif %}

                </div>



            <div class="col s12" style="border-radius: 10px; border-width: 2px; border-style: solid; border-color: lightgray">

            {% set lastPage = result|length/showItem + buildingLenght%showItem %}

                {% set currentPage = 1 %}
                {% set showAlwaysFirstAndLast = true %}
                {% set currentFilters = {} %}
                    {% if lastPage > 1 %}

                        {# the number of first and last pages to be displayed #}

                        {% set extremePagesLimit = 5 %}

                        {# the number of pages that are displayed around the active page #}
                        {% set nearbyPagesLimit = 5 %}
                        {% set j = currentPage - nearbyPagesLimit %}

                        <ul class="pagination">
                            {% if currentPage > 1 %}

                                <li class=" " onclick="backBtn()"><i class="fas fa-chevron-left"></i></li>

                                {% for i in range(1, extremePagesLimit) %}
                                    {%  if ( i < currentPage - nearbyPagesLimit ) %}

                                        <li class=" links_{{ i }}" value="{{ i }}" onclick=" activeLink({{ i }})">{{ i }}</li>

                                {% endif %}
                                {% endfor %}

                                {% if extremePagesLimit + 1 < currentPage - nearbyPagesLimit %}
                                    <span class="sep-dots">...</span>
                                {% endif %}

                                {% for i in range(currentPage-nearbyPagesLimit, currentPage-1) %}
                                    {%  if ( i > 0 ) %}

                                        <li class=" links_{{ i }}" value="{{ i }}" onclick=" activeLink({{ i }})">{{ i }}</li>

                                    {% endif %}
                                {% endfor %}
                            {% elseif showAlwaysFirstAndLast %}
                                <li class=" " onclick="backBtn()"><i class="fas fa-chevron-left"></i></li>

                            {% endif %}

                            <span class="sep-dots_start hide">...</span>
                            <li class=" active links_{{ currentPage}}" value="{{ currentPage }}" onclick=" activeLink({{ currentPage }})">{{ currentPage }}</li>


                            {% if currentPage < lastPage %}

                                {% for i in range(currentPage+1, currentPage + nearbyPagesLimit) %}
                                    {%     if ( i <= lastPage ) %}

                                        <span class="sep-dots_prev_{{ i }} hide">...</span>
                                        <li class=" links_{{ i }}" value="{{ i }}" onclick=" activeLink({{ i }})">{{ i }}</li>


                                    {% endif %}
                                {% endfor %}

                                {% if  (lastPage - extremePagesLimit) > (currentPage + nearbyPagesLimit) %}



                                    {% for j in currentPage + nearbyPagesLimit+1 .. lastPage - extremePagesLimit  %}
                                        <span class="sep-dots_prev_{{ j }} hide">...</span>
                                    <li class=" hide links_{{ j }}" value="{{ j }}" onclick=" activeLink({{ j }})">{{ j }}</li>
                                    {% endfor %}
                                    <span class="sep-dots_middle">...</span>


                                {% endif %}
                                <span class="sep-dots_end hide">...</span>
                                {% for i in range(lastPage - extremePagesLimit+1, lastPage)%}
                            {% if ( i > currentPage + nearbyPagesLimit ) %}
                                <span class="sep-dots_prev_{{ i }} hide">...</span>
                                <li class=" links_{{ i }}" value="{{ i }}" onclick=" activeLink({{ i }})">{{ i }}</li>

                            {% endif %}
                                {% endfor %}

                                <li class=" links" onclick="nextBtn()"><i class="fas fa-chevron-right"></i></li>

                            {% elseif showAlwaysFirstAndLast %}

                                <li class=" links" onclick="nextBtn()"><i class="fas fa-chevron-right"></i></li>
                            {% endif %}
                        </ul>
                    {% endif %}


            </div>
        </div>

    </div>



  </div>




{% endblock %}



  {% block javascripts %}
      {{ parent() }}
      <script src="{{ asset('js/home.func.js') }}"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


      <script type="text/javascript">


          var currentStartDate="{{ startDate }}";
          var currentEndDate="{{ endDate }}";
          var currentChild="{{ child }}";
          var currentAdult="{{ adult }}";

          function updateChild(type) {
              currentChild= $("#child_"+type).val()
          }
          function updateAdult(type) {
              currentAdult= $("#adult_"+type).val()
          }
          function updateEndDate(type) {
              currentEndDate= $("#endDate_"+type).val()
          }
          function updateStartDate(type) {
              currentStartDate= $("#startDate_"+type).val()
            }

          
          function gotToBook(building) {
              let timerInterval
              var isvalid_currentStartDate= moment(currentStartDate, 'DD/MM/YYYY',true).isValid();
              var isvalid_currentEndDate= moment(currentEndDate, 'DD/MM/YYYY',true).isValid();

              if(currentStartDate==="" && currentEndDate==="" ){

                  var currentDate=moment().format('DD/MM/YYYY');
                  var currentDatePlus=moment(). add(1, 'days').format('DD/MM/YYYY');
                  Swal.mixin({

                      imageUrl: '{{ asset('img/calendar-cancel.svg') }}',
                      imageHeight: 60,

                      imageAlt: 'Date not choose',
                      allowOutsideClick: false,
                      allowEscapeKey: false,

                      reverseButtons: true,
                      confirmButtonText:
                          '{% trans %}Suivant{% endtrans %} <i class="fa fa-arrow-right"></i>',

                      showCancelButton: true,
                      progressSteps: ['A','D'],
                      cancelButtonText:
                          '<i class="fa fa-trash"></i> Annuler',
                      cancelButtonAriaLabel: '{% trans %}Annuler{% endtrans %}'
                  }).
                  queue([
                      {
                          title: '{% trans %}Date d\'arrivée {% endtrans %}',


                          text: 'Enter a valid date like ('+currentDate+')',

                          inputPlaceholder: currentDate,
                          input: 'text',
                          inputValue: currentDate,


                          inputValidator: (result) => {
                              var now = moment(moment().format('DD/MM/YYYY'), 'DD/MM/YYYY');
                              var provideDate = moment(result, 'DD/MM/YYYY');
                              var isValid= moment(result, 'DD/MM/YYYY',true).isValid();

                              var isSame = provideDate.isSame(now);
                              var isafter = provideDate.isAfter(now);

                              console.log("provideDate 1",provideDate.format('DD/MM/YYYY'));
                              console.log("DAY 1",now.format('DD/MM/YYYY'));
                              console.log("isafter 1",isafter);
                              console.log("isSame 1",isSame);

                              currentStartDate=result;
                              if(!isValid){
                                  return 'Invalid date format should be DD/MM/YYYY'
                              }
                              if(isSame==false && isafter==false){

                                  return 'Invalid arrival date, It shall far from this day'
                              }
                          }
                      },
                      {
                          title: '{% trans %}Date de retour {% endtrans %}',


                          text: 'Enter a valid date like ('+currentDatePlus+')',


                          inputPlaceholder: currentDatePlus,
                          input: 'text',
                          inputValue: currentDatePlus,
                          inputValidator: (result) => {

                              var mEnd = moment(result,"DD/MM/YYYY");
                              var isValid= moment(result, 'DD/MM/YYYY',true).isValid();

                              console.log("isvalid",isValid)

                              console.log("currentStartDate",currentStartDate)

                              if(!isValid){
                                  return 'Invalid date format should be DD/MM/YYYY'
                              }
                              if(!mEnd.isAfter(currentStartDate)){

                                  return 'Invalid Arrival date, it is far from departure date'
                              }


                          }
                      },

                  ]).then((result) => {
                      if (result.value) {


                          console.log(result);

                          if(result.value[0]!==undefined){
                              currentStartDate=result.value[0];
                          }

                          if(result.value[1]!==undefined){
                              currentEndDate=result.value[1];
                          }


                          gotToBook(building);

                      }
                  });

                  return;
              }else

              if(currentStartDate==="" || !isvalid_currentStartDate || currentStartDate===undefined){


                  var currentDatePlus=moment( ).format('DD/MM/YYYY');

                  Swal.mixin({

                      imageUrl: '{{ asset('img/calendar-cancel.svg') }}',
                      imageHeight: 60,

                      imageAlt: 'Date not choosed',
                      allowOutsideClick: false,
                      allowEscapeKey: false,

                      reverseButtons: true,
                      confirmButtonText:
                          '{% trans %}Suivant{% endtrans %} <i class="fa fa-arrow-right"></i>',

                      showCancelButton: true,
                      progressSteps: ['1'],
                      cancelButtonText:
                          '<i class="fa fa-trash"></i> Annuler',
                      cancelButtonAriaLabel: '{% trans %}Annuler{% endtrans %}'
                  }).
                  queue([
                      {
                          title: '{% trans %}Date d\'arrivée {% endtrans %}',


                          text: 'Enter a valid date like ('+currentDatePlus+')',


                          inputPlaceholder: currentDatePlus,
                          input: 'text',
                          inputValue:currentDatePlus,
                          inputValidator: (result) => {
                              var provideDate = moment(result);
                               var isValid= moment(result, 'DD/MM/YYYY',true).isValid();

                              var isSame = provideDate.isSame(moment().format('DD/MM/YYYY'));
                              var isafter = provideDate.isAfter(moment().format('DD/MM/YYYY'));

                              console.log("isvalid 2",isValid)
                              console.log("isafter 2",isafter)

                              if(!isValid){
                                  return 'Invalid date format should be DD/MM/YYYY'
                              }
                              if(isafter==false && isSame==false ){
                                  currentStartDate="";
                                  return 'Invalid arrival date, It shall far from this day'
                              }
                          }
                      },

                  ]).then((result) => {
                      if (result.value) {


                          console.log(result);

                          if(result.value[0]!==undefined){
                              currentStartDate=result.value[0];
                          }
                          gotToBook(building);

                      }
                  });

                  $(".swal2-input").css("max-width","100%")

                  return

              }
              else if(currentEndDate==="" || !isvalid_currentEndDate || currentEndDate===undefined ){
                  var currentDatePlus=moment(currentStartDate, 'DD/MM/YYYY',true). add(1, 'days').format('DD/MM/YYYY');


                  Swal.mixin({

                      imageUrl: '{{ asset('img/calendar-cancel.svg') }}',
                      imageHeight: 60,
                      imageAlt: 'Date not choose',
                      allowOutsideClick: false,
                      allowEscapeKey: false,
                      reverseButtons: true,
                      confirmButtonText:
                          '{% trans %}Suivant{% endtrans %} <i class="fa fa-arrow-right"></i>',
                      showCancelButton: true,
                      progressSteps: ['1'],
                      cancelButtonText:
                          '<i class="fa fa-trash"></i> Annuler',
                      cancelButtonAriaLabel: '{% trans %}Annuler{% endtrans %}'
                  }).
                  queue([
                      {
                          title: '{% trans %}Date de retour {% endtrans %}',
                          text: 'Enter a valid date like ('+currentDatePlus+')',

                          inputValue: currentDatePlus,
                          inputPlaceholder: currentDatePlus,
                          input: 'text',
                          inputValidator: (result) => {

                              var mEnd = moment(result , "DD/MM/YYYY");


                              var isvalid= moment(result, 'DD/MM/YYYY',true).isValid();

                              var isafter = mEnd.isAfter(moment(currentStartDate , "DD/MM/YYYY"));

                              console.log("currentStartDate 3", currentStartDate)
                              console.log("currentEndDate 3", result)
                              console.log("isAfter", mEnd.isAfter(moment(currentStartDate , "DD/MM/YYYY")))

                              if(!isvalid){
                                  return 'Invalid date format should be DD/MM/YYYY'
                              }
                              if(!isafter){
                                  currentStartDate="";
                                  return 'Arrival date is far from departure date'
                              }


                          }
                      },

                  ]).then((result) => {
                      if (result.value) {


                          console.log(result);

                          if(result.value[0]!==undefined){
                              currentEndDate=result.value[0];
                          }

                          gotToBook(building)

                      }
                  });

                  $(".swal2-input").css("max-width","100%")

                  return;

              }
             else if(currentAdult===""){



                  Swal.mixin({

                      imageUrl: '{{ asset('img/adults-icon-5.jpg') }}',
                      imageHeight: 60,

                      imageAlt: 'Adult not provide',
                      allowOutsideClick: false,
                      allowEscapeKey: false,

                      reverseButtons: true,
                      confirmButtonText:
                          '{% trans %}Suivant{% endtrans %} <i class="fa fa-arrow-right"></i>',

                      showCancelButton: true,
                      progressSteps: ['1'],
                      cancelButtonText:
                          '<i class="fa fa-trash"></i> Annuler',
                      cancelButtonAriaLabel: '{% trans %}Annuler{% endtrans %}'
                  }).
                  queue([
                      {
                          title: '{% trans %}Nombre d\'aldute {% endtrans %}',


                          text: 'Combien d\'adulte pour cette location?',
                          inputValue: "01",

                          inputPlaceholder: '01',
                          input: 'number',
                          inputValidator: (result) => {

                              if(result===""){

                                  return "empty field";
                              }
                              if(parseInt(result)<1){
                                  return 'invalid number';
                              }

                          }
                      },

                  ]).then((result) => {
                      if (result.value) {


                          console.log(result);
                              currentAdult=result.value[0]

                          gotToBook(building)

                      }
                  });

                  $(".swal2-input").css("max-width","100%")



                  return

              }
             else if(currentChild===""){



                  Swal.mixin({

                      imageUrl: '{{ asset('img/children-icon-green.png') }}',
                      imageHeight: 60,

                      imageAlt: 'Child not provide',
                      allowOutsideClick: false,
                      allowEscapeKey: false,

                      reverseButtons: true,
                      confirmButtonText:
                          '{% trans %}Suivant{% endtrans %} <i class="fa fa-arrow-right"></i>',

                      showCancelButton: true,
                      progressSteps: ['1'],
                      cancelButtonText:
                          '<i class="fa fa-trash"></i> Annuler',
                      cancelButtonAriaLabel: '{% trans %}Annuler{% endtrans %}'
                  }).
                  queue([
                      {
                          title: '{% trans %}Nombre d\'enfants {% endtrans %}',


                          text: 'Combien d\'enfants pour cette location?',
                          inputValue: "0",

                          inputPlaceholder: '01',
                          input: 'number',
                          inputValidator: (result) => {

                              if(result===""){

                                  return "empty field";
                              }
                              if(parseInt(result)<0){
                                  return 'invalid number';
                              }

                          }
                      },

                  ]).then((result) => {
                      if (result.value) {


                          console.log(result);
                              currentChild=result.value[0]

                          gotToBook(building)

                      }
                  });

                  $(".swal2-input").css("max-width","100%")



                  return

              }

              $("#building_loading_"+building).removeClass("hide");

              setTimeout(function () {


                  window.location.assign("{{ path('app_building_navigation')}}"+"?building="+building+"&startDate="+currentStartDate+" 12:00&endDate="+currentEndDate+"12:00&adult="+currentAdult+"&child="+currentChild);

              }, 2000);

          }
          function formatNumber(number)
          {
              number = number.toFixed(2) + '';
              x = number.split('.');
              x1 = x[0];
              x2 = x.length > 1 ? ',' + x[1] : '';
              var rgx = /(\d+)(\d{3})/;
              while (rgx.test(x1)) {
                  x1 = x1.replace(rgx, '$1' + '.' + '$2');
              }
              return x1 + x2;
          }


          var  link=document.getElementsByClassName("links");
          var currentValue=1,i=0, lastPage={{ result|length  }}/{{ showItem }} + {{ result|length }}%{{ showItem }};

          $("#maxAmount").addClass("active");

          var amount= parseInt($("#maxAmount").val());
          $("#displayAmount").html("Coût Max Pour une Nuité <br>"+formatNumber(amount))

          function displayAmount() {
              var amount= parseInt($("#maxAmount").val());
              $("#displayAmount").html("Coût Max Pour une Nuité<br> "+formatNumber(amount))
          }

          var star=0;

          function notority(index) {
              var i=1;
              for(i=1; i<=index; i++){
                  $("#star_"+i).css("color","gold")
              }
              for(i=index+1; i<=6; i++){
                  $("#star_"+i).css("color","palegoldenrod")
              }
          }
          function notorityShoose(index) {
              star=index;
              var i=1;
              for(i=1; i<=index; i++){
                  $("#star_"+i).css("color","gold")
              }
              for(i=index+1; i<=6; i++){
                  $("#star_"+i).css("color","palegoldenrod")
              }
          }
          function unCheckNotority() {
              if(star!==0){
                  for(i=1; i<=star; i++){
                      $("#star_"+i).css("color","gold")
                  }
              }else{
                  for(i=1; i<=6; i++){
                      $("#star_"+i).css("color","palegoldenrod")
                  }
              }

          }
          $("#building_slide_1").removeClass("hide");
          $('.autoplayPack_1').slick({
              slidesToShow: 1,
              slidesToScroll: 1,
              autoplay: true,
              autoplaySpeed: 10000,
              responsive: [
                  {
                      breakpoint: 1024,
                      settings: {
                          slidesToShow: 1,
                          slidesToScroll: 1,
                          infinite: true,
                          dots: true
                      }
                  },
                  {
                      breakpoint: 600,
                      settings: {
                          slidesToShow: 1,
                          slidesToScroll: 1
                      }
                  },
                  {
                      breakpoint: 480,
                      settings: {
                          slidesToShow: 1,
                          slidesToScroll: 1
                      }
                  }
              ]
          });
          function activeLink(index) {

              for (i =1; i<=lastPage; i++){
                  $(".links_"+i).removeClass("active");
                  $("#building_slide_"+i).addClass("hide");
              }
              $("#building_slide_"+index).removeClass("hide");

              $(".links_"+index).addClass("active")

              currentValue=$(".links_"+index).val();
              console.log(currentValue);




              $('.autoplayPack_'+(index)).slick({
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  autoplay: true,
                  autoplaySpeed: 10000,
                  responsive: [
                      {
                          breakpoint: 1024,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1,
                              infinite: true,
                              dots: true
                          }
                      },
                      {
                          breakpoint: 600,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1
                          }
                      },
                      {
                          breakpoint: 480,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1
                          }
                      }
                  ]
              });
                  $(".links_"+(currentValue-1)).removeClass("hide");
                  $(".links_"+(currentValue+1)).removeClass("hide");

          }
          function backBtn() {

              if(currentValue>1){
                  for (i =1; i<=lastPage; i++){
                      $(".links_"+i).removeClass("active");
                      $("#building_slide_"+i).addClass("hide");
                  }


                  $(".links_"+(currentValue-1)).addClass("active").removeClass("hide")

                  $("#building_slide_"+currentValue-1).removeClass("hide");
                  $('.autoplayPack_'+(currentValue-1)).slick({
                      slidesToShow: 1,
                      slidesToScroll: 1,
                      autoplay: true,
                      autoplaySpeed: 10000,
                      responsive: [
                          {
                              breakpoint: 1024,
                              settings: {
                                  slidesToShow: 1,
                                  slidesToScroll: 1,
                                  infinite: true,
                                  dots: true
                              }
                          },
                          {
                              breakpoint: 600,
                              settings: {
                                  slidesToShow: 1,
                                  slidesToScroll: 1
                              }
                          },
                          {
                              breakpoint: 480,
                              settings: {
                                  slidesToShow: 1,
                                  slidesToScroll: 1
                              }
                          }
                      ]
                  });

                  if(lastPage-currentValue>5){


                      $(".links_"+(currentValue-2)).removeClass("hide");


                    if(lastPage-currentValue>=10){
                        $(".links_"+(currentValue+6)).addClass("hide");
                    }

                  }

                  if(currentValue>6){
                      $(".dots_prev_"+(currentValue+1)).addClass("hide");
                      $(".dots_prev_"+(currentValue-1)).removeClass("hide");
                  }
                  if(lastPage-currentValue>6){
                      $(".sep-dots_start").addClass("hide");
                      $(".sep-dots_middle").removeClass("hide");
                      $(".dots_prev_"+(currentValue+1)).addClass("hide");


                  }
                  currentValue--;
              }
          }
          function nextBtn() {



              if(currentValue<lastPage){

                  for (i =1; i<=lastPage; i++){
                      $(".links_"+i).removeClass("active");
                      $("#building_slide_"+i).addClass("hide");
                  }


                  $(".links_"+(currentValue+1)).addClass("active");
                  $("#building_slide_"+(currentValue+1)).removeClass("hide");

                  $('.autoplayPack_'+(currentValue+1)).slick({
                      slidesToShow: 1,
                      slidesToScroll: 1,
                      autoplay: true,
                      autoplaySpeed: 10000,
                      responsive: [
                          {
                              breakpoint: 1024,
                              settings: {
                                  slidesToShow: 1,
                                  slidesToScroll: 1,
                                  infinite: true,
                                  dots: true
                              }
                          },
                          {
                              breakpoint: 600,
                              settings: {
                                  slidesToShow: 1,
                                  slidesToScroll: 1
                              }
                          },
                          {
                              breakpoint: 480,
                              settings: {
                                  slidesToShow: 1,
                                  slidesToScroll: 1
                              }
                          }
                      ]
                  });
                  if(currentValue>5){

                      if(lastPage-currentValue>=10){
                  $(".links_"+(currentValue-6)).addClass("hide");}

                  $(".links_"+(currentValue+1)).removeClass("hide");


                  }
                  if(lastPage-currentValue<=6){
                      $(".sep-dots_middle").addClass("hide");
                      $(".sep-dots_start").removeClass("hide");
                  }
                  currentValue++;
                  console.log(currentValue);
              }
          }
          
          $(function() {
              var startDay = moment().format('MM/YYYY/DD');


              $('input[name="datetimes"]').daterangepicker({
                  timePicker: true,
                  startDate: moment().startOf('hour'),
                  endDate: moment().startOf('hour').add(32, 'hour'),
                  locale: {
                      format: 'M/DD hh:mm A'
                  },
                  minDate:  startDay,
                  minYear:  parseInt(moment().format('YYYY'),0),
                  maxYear: parseInt(moment().format('YYYY'),10)
              });
          });




          $(document).ready(function() {

              $('.js-example-basic-single').select2();

              $('.materialboxed').materialbox();
              $('.datepicker').pickadate({
                  selectMonths: true, // Creates a dropdown to control month
                  selectYears: 15, // Creates a dropdown of 15 years to control year,
                  today: 'Today',
                  clear: 'Clear',
                  close: 'Ok',
                  closeOnSelect: false, // Close upon selecting a date,
                  container: undefined, // ex. 'body' will append picker to body
              });


              $('.modal').modal({
                      dismissible: true, // Modal can be dismissed by clicking outside of the modal
                      opacity: .4, // Opacity of modal background
                      inDuration: 300, // Transition in duration
                      outDuration: 200, // Transition out duration
                      startingTop: '4%', // Starting top style attribute
                      endingTop: '15%', // Ending top style attribute
                      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.

                      },
                      complete: function() {


                      } // Callback for Modal close
                  }
              );


              $('.autoplayTestimony').slick({
                  slidesToShow: 3,
                  slidesToScroll: 1,
                  autoplay: true,
                  autoplaySpeed: 2000,
                  responsive: [
                      {
                          breakpoint: 2024,
                          settings: {
                              slidesToShow: 4,
                              slidesToScroll: 4,
                              infinite: true,
                              dots: true
                          }
                      },
                      {
                          breakpoint: 1424,
                          settings: {
                              slidesToShow: 3,
                              slidesToScroll: 3,
                              infinite: true,
                              dots: true
                          }
                      },
                      {
                          breakpoint: 900,
                          settings: {
                              slidesToShow: 2,
                              slidesToScroll: 2
                          }
                      },
                      {
                          breakpoint: 480,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1
                          }
                      }
                  ]
              })

              $('.autoplayPack').slick({
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  autoplay: true,
                  autoplaySpeed: 10000,
                  responsive: [
                      {
                          breakpoint: 1024,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1,
                              infinite: true,
                              dots: true
                          }
                      },
                      {
                          breakpoint: 600,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1
                          }
                      },
                      {
                          breakpoint: 480,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1
                          }
                      }
                  ]
              });
              $('.autoplayPack').slick({
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  autoplay: true,
                  autoplaySpeed: 10000,
                  responsive: [
                      {
                          breakpoint: 1024,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1,
                              infinite: true,
                              dots: true
                          }
                      },
                      {
                          breakpoint: 600,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1
                          }
                      },
                      {
                          breakpoint: 480,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1
                          }
                      }
                  ]
              });



              $('.autoplayBestProd').slick({
                  slidesToShow: 2,
                  slidesToScroll: 2,
                  autoplay: true,
                  autoplaySpeed: 2000,
                  responsive: [
                      {
                          breakpoint: 1024,
                          settings: {
                              slidesToShow: 2,
                              slidesToScroll: 2,
                              infinite: true,
                              dots: true
                          }
                      },
                      {
                          breakpoint: 600,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1
                          }
                      },
                      {
                          breakpoint: 480,
                          settings: {
                              slidesToShow: 1,
                              slidesToScroll: 1
                          }
                      }
                  ]
              });
          });



          var apiBaseUrl="{{ host }}"
          var loginUrl="{{ path('authentication_token') }}";


          getClientLocation ();


          function submitComment() {


              setTimeout(function () {
                  Swal.mixin({

                      imageUrl: '{{ asset('img/logo-logercm.png') }}',
                      imageHeight: 60,
                      background: '#fff url({{ asset('img/trees.png') }})',
                      imageAlt: 'Logo {{ companyName }}',
                      allowOutsideClick: false,
                      allowEscapeKey: false,

                      reverseButtons: true,
                      confirmButtonText:
                          '{% trans %}Suivant{% endtrans %} <i class="fa fa-arrow-right"></i>',

                      showCancelButton: true,
                      progressSteps: ['1', '2', '3','4','5'],
                      cancelButtonText:
                          '<i class="fa fa-trash"></i> Annuler',
                      cancelButtonAriaLabel: '{% trans %}Annuler{% endtrans %}'
                  }).
                  queue([
                      {
                          title: '{% trans %}Laissez-nous un témoignage{% endtrans %}',


                          text: '{% trans %}Votre Nom{% endtrans %}:',

                          inputPlaceholder: 'John Doe.',
                          input: 'text',
                          inputValidator: (result) => {
                              return !result && '{% trans %}Vous devez indiquer votre nom {% endtrans %}'
                          }
                      },
                      {
                          title: '{% trans %}Laissez-nous un témoignage{% endtrans %}',


                          text: '{% trans %}Votre contact{% endtrans %}:',

                          inputPlaceholder: '23760000000.',
                          input: 'text',
                          inputValidator: (result) => {
                              return !result && '{% trans %}Vous devez indiquer votre contact{% endtrans %}'
                          }
                      },
                      {
                          title: "{% trans %}Que pensez des produits et services biocarrylife?{% endtrans %}",

                          text: '{% trans %}Un petit commentaire{% endtrans %}',
                          inputAttributes: {
                              'maxlength': 1255,

                          },

                          inputPlaceholder: '{% trans %}Je suis satisfait des produits biocarrylife{% endtrans %}.',
                          input: 'textarea',
                          inputValidator: (result) => {
                              return !result && '{% trans %}Vous avez oublié votre appréciation{% endtrans %}.'
                          }
                      },

                      {
                          title: '{% trans %}Sur une echelle de 1 à 10 quelle est votre note?{% endtrans %}',
                          text: '{% trans %}Votre note{% endtrans %}:',
                          input: 'number',
                          inputPlaceholder: '5',

                          inputAttributes: {
                              min: 0,
                              max: 10
                          },
                          inputValidator: (value) => {
                              if (!value) {
                                  return '{% trans %}Ce champ est obligatoire{% endtrans %}!'
                              }
                              if(parseInt(value)<0 || parseInt(value)>10){
                                  return '{% trans %}Votre note doit être comprise entre 1 et 10{% endtrans %}!'
                              }
                          }
                      },


                      {
                          title: "{% trans %}Nous avons besoin d'une jolie photo de vous{% endtrans %}?",
                          text: '{% trans %}Cliquez ici pour charger une photo{% endtrans %}:',
                          input: 'file',
                          inputAttributes: {
                              'accept': 'image/*',
                              'aria-label': 'Upload your profile picture'
                          },
                      }


                  ]).then((result) => {
                      if (result.value) {





                          var form = new FormData();


                          form.append("file",  result.value[4]);

                          console.log(form);


                          var settings = {
                              "url": apiBaseUrl+"media_objects",
                              "method": "POST",
                              "timeout": 0,
                              "headers": {

                                  "Accept": "application/json",
                                  "Authorization": "Bearer "+ getCookie("{{ companyName }}_user_token")
                              },
                              "processData": false,
                              "mimeType": "multipart/form-data",
                              "contentType": false,
                              "data": form
                          };

                          $.ajax(settings).done(function (response) {
                              console.log(response);


                              var picture=JSON.parse(response);


                              $.ajax({
                                  method: "POST",
                                  tryCount  : 0,
                                  retryLimit  : 4,
                                  "url": apiBaseUrl+"testimonies",
                                  "headers": {
                                      "Content-Type":  "application/json",
                                      "Authorization": "Bearer "+ getCookie("{{ companyName }}_user_token")
                                  },
                                  data: JSON.stringify({


                                      "picture": apiBaseUrl+"media_objects/"+picture.id,
                                      "client": result.value[0],
                                      "message": result.value[2],
                                      "contact": result.value[1],
                                      "appreciation": parseInt(result.value[3]),
                                      "approved": false }),

                                  beforeSend:function () {

                                  },
                                  success: function(data){

                                      console.log(data);
                                      Swal.fire(
                                          '{% trans %}Super{% endtrans %}!',
                                          '{% trans %}Votre témoignage à été pris en compte{% endtrans %}!',
                                          'success'
                                      )


                                  },
                                  error:function (xhr, textStatus, errorThrown) {



                                  }

                              });

                          });


                      }
                  });

                  $(".swal2-input").css("max-width","100%")
              },500)


          }

          function getClientLocation () {


              var locationUrl="{{ path('client_location') }}";


              $.ajax({
                  method: "GET",
                  tryCount  : 0,
                  retryLimit  : 4,
                  url: "https://api.ipify.org?format=json",
                  "headers": {
                      "Content-Type": "application/json"
                  },


                  beforeSend:function () {

                  },
                  success: function(data){


                      console.log(data);

                      var api_address=data.ip;



                      $.ajax({
                          method: "POST",
                          tryCount  : 0,
                          retryLimit  : 4,
                          url: host+locationUrl,
                          "headers": {
                              "Content-Type": "application/json"
                          },
                          data: JSON.stringify({

                              "api_address":api_address}),

                          beforeSend:function () {

                          },
                          success: function(data){


                              setCookie("visitor",data,20)
                              console.log(data);


                          },
                          error:function (xhr, textStatus, errorThrown) {



                              console.log(xhr);

                          }

                      });

                  },
                  error:function (xhr, textStatus, errorThrown) {



                  }

              });



          }


          function refreshToken() {


              $.ajax({
                  method: "POST",
                  tryCount  : 0,
                  retryLimit  : 4,
                  url: host+loginUrl,
                  "headers": {
                      "Content-Type": "application/json"
                  },
                  data: JSON.stringify({

                      "username":getCookie("{{ companyName }}_user_username"),
                      "password":getCookie("{{ companyName }}_user_userpass")}),
                  beforeSend:function () {

                  },
                  success: function(data){


                      setCookie("{{ companyName }}_user_token",data.token,1);


                  },
                  error:function (xhr, textStatus, errorThrown) {



                  }

              });


          }
          function findBuilding(buildingType, type) {


              var destinationTown=$("#destinationTown_"+buildingType).val();
              var startDate=currentStartDate;
              var endDate=currentEndDate;
              var adult=$("#adult_"+buildingType).val();
              var child=$("#child_"+buildingType).val();

              $.ajax({
                  method: "POST",
                  tryCount  : 0,
                  retryLimit  : 4,
                  url: "{{ path("find_buildings") }}",
                  "headers": {
                      "Content-Type": "application/json"
                  },
                  data: JSON.stringify({

                      "town":destinationTown ,
                      "buildType": buildingType,
                      "startedDate": startDate,
                      "endDate": endDate,

                  }),
                  beforeSend:function () {


                      //btn_text_/btn_loading_/btn_search_

                      const button = document.getElementById("btn_search_"+buildingType);

// Disable the button
                      button.disabled = true;

                      $("#btn_search_"+buildingType).addClass("disabled");
                      $("#btn_loading_"+buildingType).removeClass("hide");
                      $("#btn_text_"+buildingType).html("Patientez... ");

                  },
                  success: function(data){

                      const button = document.getElementById("btn_search_"+buildingType);

// Disable the button
                      button.disabled = false;
                      console.log(data);

                      if(data.length===0){
                          var Toast = Swal.mixin({
                              toast: true,
                              position: 'top-end',
                              showConfirmButton: false,
                              timer: 14000,
                              timerProgressBar: true,
                              didOpen: (toast) => {
                                  toast.addEventListener('mouseenter', Swal.stopTimer)
                                  toast.addEventListener('mouseleave', Swal.resumeTimer)
                              }
                          })

                          {% if type is not null %}
                          Toast.fire({
                              icon: 'warning',
                              title: 'Aucun (e) '+type+" trouvé(e)"
                          });

                          {% else %}

                          Toast.fire({
                              icon: 'warning',
                              title: "Aucune offre trouvée"
                          });
                          {% endif %}
                      }else{



                          window.location.assign("{{ onlinePath}}/building/detail?destination="+destinationTown+"&buildingType="+buildingType+"&startDate="+startDate+"&endDate="+endDate+"&child="+child+"&=adult="+adult);
                      }
                      $("#btn_search_"+buildingType).removeClass("disabled");
                      $("#btn_loading_"+buildingType).addClass("hide");
                      $("#btn_text_"+buildingType).html("Rechercher");

                  },
                  error:function (xhr, textStatus, errorThrown) {


                      const button = document.getElementById("btn_search_"+buildingType);

// Disable the button
                      button.disabled = false;
                      $("#btn_search_"+buildingType).removeClass("disabled");
                      $("#btn_loading_"+buildingType).addClass("hide");
                      $("#btn_text_"+buildingType).html("Rechercher");
                  }

              });


          }



          /*  E-commerce part   */

          function reduceItem(productId){
              var currentQuantity=parseInt($("#item_"+productId).val());

              if(currentQuantity>1){
                  document.getElementById("item_"+productId).value =  (currentQuantity-1);
              }
          }
          function adjustItem(productId, stock){
              var currentQuantity=parseInt($("#item_"+productId).val());
              if(currentQuantity<parseInt(stock)){
                  document.getElementById("item_"+productId).value =  (currentQuantity+1);
              }


          }



          const nodeList = document.querySelectorAll(".ml12");

          for (let i = 0; i < nodeList.length; i++) {
              nodeList[i].innerHTML = nodeList[i].textContent.replace(/\S/g, "<span class='letter'>$&</span>");
          }

          const nodeList13 = document.querySelectorAll(".ml13");

          for (let i = 0; i < nodeList13.length; i++) {
              nodeList13[i].innerHTML = nodeList13[i].textContent.replace(/\S/g, "<span class='letter'>$&</span>");
          }


          anime.timeline({loop: true})
              .add({
                  targets: '.ml12 .letter',
                  scale: [2,1],
                  opacity: [0,1],
                  translateZ: 0,
                  easing: "easeInExpo",
                  duration: 950,
                  delay: (el, i) => 70*i
              }).add({
              targets: '.ml12',
              opacity: 0,
              duration: 13000,
              easing: "easeInExpo",
              delay: 800
          });


          anime.timeline({loop: true})
              .add({
                  targets: '.ml13 .letter',
                  translateX: [40,0],
                  translateZ: 0,
                  opacity: [0,1],
                  easing: "easeOutExpo",
                  duration: 1200,
                  delay: (el, i) => 500 + 30 * i
              }).add({
              targets: '.ml13 .letter',
              translateX: [0,-30],
              opacity: [1,0],
              easing: "easeInExpo",
              duration: 10500,
              delay: (el, i) => 100 + 30 * i
          });
      </script>
  {% endblock %}