{% 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>
        .asicLightbox {
            align-items: center;
            background: rgba(0,0,0,.8);
            display: flex;
            height: 100vh;
            justify-content: center;
            left: 0;
            opacity: .01;
            position: fixed;
            top: 0;
            transition: opacity .3s ease;
            width: 100%;
            will-change: opacity;
            z-index: 10000;
        }
        .thumbnail {

            display:block;
            z-index:10;
            cursor: pointer;
            -webkit-transition-property: all;
            -webkit-transition-duration: 0.3s;
            -webkit-transition-timing-function: ease;
        }

        /*change the number below to scale to the appropriate size*/
        .thumbnail:hover {
            transform: scale(3);


        }

        .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: 120px; ">

        <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="clim_option" />
                        <label for="clim_option">Clim  </label>
                        <img class="responsive-img zoom"  style="float: right; margin-right:  5px; max-height: 30px" src="{{ asset('img/icon_clim.png') }}" alt="">

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

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

                    </p>
                    <p>

                        <input type="checkbox" id="tv_option" />
                        <label for="tv_option">TV Watch</label>
                        <img class="responsive-img zoom"  style="float: right; margin-right:  5px; max-height: 25px" src="{{ asset('img/icon_tv.png') }}" alt="">
                    </p>
                    <p>
                        <input type="checkbox" id="fan_option" />
                        <label for="fan_option">
                            Fan
                        </label>
                        <img class="responsive-img zoom"  style="float: right; margin-right:  5px; max-height: 25px" src="{{ asset('img/icon_fan.png') }}" alt="">

                    </p>

                </div>


            </div>

            <div class="col s12 l9">

                <div class="col s12">
                    <h5 style="font-weight: 20"> {{ result|length }} offre(e)s pour {{ interval }} nuitée(s)</h5>
                </div>


                    {% 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 room in result|slice(k,k+showItem) %}


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

                                <button class="btn center center-align center-block " style="margin-left: 20px; position: relative; margin-top: 5%; width: fit-content; z-index: 12; background-color: rgba(3,128,13,0.78);   border-radius: 20px">
                                    {{ room.cost }} (CFA)
                                </button>
                                <ul class="autoplayPack_{{ list }}">

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

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

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


                                </ul>
                            </div>


                                <div class=" col s12 m9 l8">
                                    <div class="col s12">
                                        <h5>

                                            {{ room.roomType.type }} #{{ room.code }}
                                        </h5>

                                        <h6  style="margin-top: -5px; padding-bottom: 10px">   {{ room.building.designation }}</h6>
                                        <p style="margin-top: -15px">
                                            {% for i in 0.. room.building.options.notiriety %}
                                                <i class="fas fa-star " style="font-size: 12px; color: gold"></i>
                                            {%endfor %}
                                        </p>
                                    </div>
                                    <div class="col s12" style="margin-top: -10px">

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






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

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

                                                {% if room.options.toilet == true %}
                                                    <img class="responsive-img zoom  tooltipped" data-position="bottom" data-tooltip="Toilet"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_toillet.png') }}" alt="">
                                                {% endif %}

                                                {% if room.options.roomService == true  %}
                                                    <img class="responsive-img zoom tooltipped" data-position="bottom" data-tooltip="Room Service"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_room_service.png') }}" alt="">
                                                {% endif %}

                                                {% if room.options.availablePhone == true  %}
                                                    <img class="responsive-img zoom tooltipped" data-position="bottom" data-tooltip="Calling phone"   style="margin: 5px; max-height: 30px" src="{{ asset('img/icon_phone.jpg') }}" alt="">
                                                {% endif %}

                                                {% if room.options.television == true  %}
                                                    <img class="responsive-img zoom tooltipped" data-position="bottom" data-tooltip="TV Watch"   style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_tv.png') }}" alt="">
                                                {% endif %}
                                                {% if room.options.fan == true  %}
                                                    <img class="responsive-img zoom tooltipped" data-position="bottom" data-tooltip="Fan"   style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_fan.png') }}" alt="">
                                                {% endif %}

                                            </h5>
                                        {% endif %}
                                        <div class="col s12 right right-align right-aligned">

                                            {% if room.isFree== true%}
                                                <a id="btn_building_{{ room.id }}"   href="#!" onclick="booking({{ room.building.id }},{{ room.id }}, '{{ startDate }}','{{ endDate }}',{{ adult }},{{ child }} ,'{{ onlinePath }}/media/{{ room.picture1 }}')" 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_{{ room.id }}">
                                                       {% if room.payBefore== true%}
                                                           Payer pour Reserver
                                                       {% elseif room.payBefore== false or room.payBefore is null %}
                                                           Reserver
                                                       {% endif %}
                                                    </span>
                                                    <i class="fas fa-cart-plus" style="margin-left: 5px; margin-right:  5px"></i>
                                                    <img id="building_loading_{{ room.id }}" src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">
                                                </a>
                                            {% elseif room.isFree== false %}
                                                <a id="btn_building_{{ room.id }}"   href="#!" class=" disabled  right right-align right-aligned materialize-red  card white-text        " style="margin-right: 30px;  padding: 10px; border-radius: 20px; margin-top: -20px; width: fit-content">
                                                    <span class="" id="btn_text_{{ room.id }}">Oups!! Occupé </span>
                                                    <i class="fas fa-eye-slash" style="margin-left: 5px; margin-right:  5px"></i>
                                                    <img id="building_loading_{{ room.id }}" src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">
                                                </a>
                                            {% endif %}

                                        </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/{{ room.building.company.companyLogoMain }}" alt="">

                                    </div>


                                </div>

                        </div>

                        {%endfor %}
                    </div>

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

                    {% else %}
                        {% for room 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 room.picture is not empty %}
                                            <li>
                                                <img class=" thumbnail circle  image-n-margin  responsive-img halfway-fab hoverable"   src="{{ onlinePath }}/media/{{ room.picture }}" style="z-index: 300; width: 200px; height: 200px" alt="">
                                            </li>
                                        {% endif %}

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

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


                                    </ul>
                                </div>


                                <div class=" col s12 m9 l8">
                                    <div class="col s12">
                                        <h5>
                                            {{ room.roomType.type }} #{{ room.code }}

                                        </h5>

                                        <h6 style="margin-top: -5px; padding-bottom: 10px">
                                            {{ room.building.designation }}
                                            </h6>
                                        <p style="margin-top: -15px">
                                            {% for i in 0.. room.building.options.notiriety %}
                                                <i class="fas fa-star " style="font-size: 12px; color: gold"></i>
                                            {%endfor %}
                                        </p>
                                    </div>
                                    <div class="col s12" style="margin-top: -10px">

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






                                    <div class="col s12 " style="margin-top: -20px">
                                        {% if room.options is not null %}
                                            <h5 class="left-align ">
                                                {% if room.options.clim == true %}
                                                    <img class="responsive-img zoom "   style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_clim.png') }}" alt="">
                                                {% endif %}

                                                {% if room.options.toilet == true %}
                                                    <img class="responsive-img zoom  tooltipped" data-position="bottom" data-tooltip="Toilet"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_toillet.png') }}" alt="">
                                                {% endif %}

                                                {% if room.options.roomService == true  %}
                                                    <img class="responsive-img zoom tooltipped" data-position="bottom" data-tooltip="Room Service"  style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_room_service.png') }}" alt="">
                                                {% endif %}

                                                {% if room.options.availablePhone == true  %}
                                                    <img class="responsive-img zoom tooltipped" data-position="bottom" data-tooltip="Calling phone"   style="margin: 5px; max-height: 30px" src="{{ asset('img/icon_phone.jpg') }}" alt="">
                                                {% endif %}

                                                {% if room.options.television == true  %}
                                                    <img class="responsive-img zoom tooltipped" data-position="bottom" data-tooltip="TV Watch"   style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_tv.png') }}" alt="">
                                                {% endif %}
                                                {% if room.options.fan == true  %}
                                                    <img class="responsive-img zoom tooltipped" data-position="bottom" data-tooltip="Fan"   style="margin: 5px; max-height: 25px" src="{{ asset('img/icon_fan.png') }}" alt="">
                                                {% endif %}

                                            </h5>
                                        {% endif %}

                                        <div class="col s12 right right-align right-aligned">


                                            {% if room.isFree== true%}
                                                <a id="btn_building_{{ room.id }}"   href="#!" onclick="booking({{ room.building.id }},{{ room.id }}, '{{ startDate }}','{{ endDate }}',{{ adult }},{{ child }},'{{ onlinePath }}/media/{{ room.picture }}')" 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_{{ room.id }}">
                                                       {% if room.payBefore== true%}
                                                           Payer pour Reserver
                                                       {% elseif room.payBefore== false or room.payBefore is null %}
                                                           Reserver
                                                       {% endif %}
                                                    </span>
                                                <i class="fas fa-cart-plus" style="margin-left: 5px; margin-right:  5px"></i>
                                                <img id="building_loading_{{ room.id }}" src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">
                                            </a>

                                            {% elseif room.isFree== false %}
                                                <a id="btn_building_{{ room.id }}"   href="#!" class=" disabled  right right-align right-aligned materialize-red  card white-text        " style="margin-right: 30px;  padding: 10px; border-radius: 20px; margin-top: -20px; width: fit-content">
                                                    <span class="" id="btn_text_{{ room.id }}">Oups!! Occupé </span>
                                                    <i class="fas fa-eye-slash" style="margin-left: 5px; margin-right:  5px"></i>
                                                    <img id="building_loading_{{ room.id }}" src="{{ asset('img/loading.webp') }}" class="hide" style="max-height: 20px; position: absolute; float: right; right: 0; padding-right: 10px" alt="">


                                                </a>
                                            {% endif %}

                                        </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/{{ room.building.company.companyLogoMain }}" alt="">

                                    </div>


                                </div>
                            </div>

                        {%endfor %}

                    {% endif %}


                <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>

    <div id="modal1" class="modal ">
        <div class="modal-content">

            <div class="row">
                <form  data-aos="zoom-out-down"  data-aos-duration="2000"   onsubmit="return false;"
                       class="col m8 offset-m2 l6 offset-l3  s12   " id="login_form_customer" style="margin-top: 2px; border-radius: 20px; margin-bottom: 30px"   >

                    <div class="col s12 center center-block">
                        <img src="{{ asset('img/login.png') }}" style="max-height: 70px; margin-bottom: 20px" alt="" class="center center block">
                    </div>

                    <div class="col   s12   m10 offset-m1    input-field center center-block center-align">
                        <i class="fas fa-user-circle prefix" style="color:#e5bd02;font-size: 18px  ">  </i>
                        <input placeholder="john@gmail.com"  required="required" type="email" id="emailInput" name="email" class="validate"   />
                        <label for="emailInput" data-error="wrong" data-success="ok">Nom d'utilisateur </label>
                        <span id="username_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>

                    </div>

                    <div class="col   s12   m10 offset-m1    input-field center center-block center-align" style="margin-top: 5px">
                        <i class="fas fa-key prefix" style="color:#e5bd02;font-size: 18px  ">  </i>
                        <input   required="required" type="password" id="passwordInput" name="password" class="validate"  />

                        <label for="passwordInput" data-error="wrong" data-success="ok">Mot de Passe </label>
                        <span id="password_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>

                    </div>


                    <div class="col s12" >

                        <p style="margin-top: -1px; margin-bottom: 20px; margin-left: 50px">
                            <input type="checkbox" name="_remember_me" id="_remember_me" />
                            <label for="_remember_me">Remember Me</label>
                        </p>
                    </div>

                    <button

                          id="btnSubmitLog"  class="btn waves-effect indigo-text text-darken-4  waves-light col s10 offset-s1  m8 offset-m2 button" style=" height: 45px ; margin-bottom: 30px" type="submit"  ><span>Connexion</span>
                        <i class="fas fa-power-off right"> </i>
                    </button>

                    <div class="col s12 " style="margin-left:-20px; margin-bottom: 20px; margin-top: -20px">
                        <p class="right-align">Or   <a href="{{ path('app_register',

                                {'destination': path('app_building_navigation',
                                    {'destination':town, 'startDate':startDate,'endDate':endDate,'adult':adult,'child':child, 'building':building }) })
                            }}">Sign Up</a>

                            <a href="{{ path("app_forgot_password_request") }}" class="" style="margin-left: 30px">Reset Password</a>
                        </p>


                    </div>




                </form>

            </div>


        </div>
        <div class="modal-footer modal-fixed-footer fixed">
            <div class="row">
                <div class="col s12 divider"></div>
            </div>
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
        </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 capital=179;

          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);



              $('.tooltipped').tooltip({delay: 50});
              $('.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);
              }
          }
          $('.materialboxed').materialbox();
          $(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)
              });
          });

          var apiBaseUrl="{{ host }}"
          var loginUrl="{{ path('authentication_token') }}";
          $('#login_form_customer').submit(function(){
              login()
          });



          $(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
                          }
                      }
                  ]
              });
          });








          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",



                  beforeSend:function () {

                  },
                  success: function(data){




                      console.log(data);

                      var api_address=data.ip;


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

                              "api_address":api_address}),

                          beforeSend:function () {

                          },
                          success: function(data){

                              capital=data.capital;

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


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



                              console.log(xhr);

                          }

                      });

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



                  }

              });



          }

          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)
              }
          });
          function refreshToken() {


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

                      "email":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 login() {

              var passwordInput= $("#passwordInput").val();
              var emailInput= $("#emailInput").val();

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

                      "email": emailInput,
                      "password": passwordInput

                  }),
                  beforeSend:function () {

                      $("#btnSubmitLog").addClass("disabled").html("login in progress...");
                  },
                  success: function(data){

                      $("#btnSubmitLog").removeClass("disabled").html("Connexion")
                      setCookie("{{ companyName }}_user_token",data.token,1);
                      setCookie("{{ companyName }}_user_userpass",passwordInput,1);
                      setCookie("{{ companyName }}_user_username",emailInput,1);

                      $('#modal1').modal('close');

                      Toast.fire({
                          icon: 'success',
                          title: "Welcome Back"
                      });

                  },
                  error:function (xhr, textStatus, errorThrown) {
                      $("#btnSubmitLog").removeClass("disabled").html("Try Again")



                      Toast.fire({
                          icon: 'warning',
                          title: "Invalid Username or Password"
                      });

                      $("#passwordInput").addClass('invalid');
                      $("#emailInput").addClass('invalid');

                  }

              });


          }

          function bookingConfirm(buildingId, roomId,startDate,endDate,adult,child) {
              if(getCookie("{{ companyName }}_user_token")===""){
                  $('#modal1').modal('open',{
                      dismissible: true, // Modal can be dismissed by clicking outside of the modal
                      opacity: .8, // Opacity of modal background
                      inDuration: 300, // Transition in duration
                      outDuration: 200, // Transition out duration
                      startingTop: '2%', // Starting top style attribute
                      endingTop: '15%', // Ending top style attribute
                      width: '60%',
                      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.

                      },
                      complete: function() {


                      } // Callback for Modal close
                  });
                  return ;
              }

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

                      "buildingId":buildingId,
                      "roomId":roomId,
                      "startDate":startDate,
                      "endDate":endDate,
                      "adult":adult,
                      "child":child,
                      "townId":capital,
                      "_user_token":getCookie("{{ companyName }}_user_token"),
                      }),

                  beforeSend:function () {

                      $("#btn_building_"+roomId).addClass("disabled");
                      $("#building_loading_"+roomId).removeClass("hide");

                  },
                  success: function(data){

                      data=JSON.parse(data);
                      console.log(data);


                      $("#btn_building_"+roomId).removeClass("disabled");
                      $("#building_loading_"+roomId).addClass("hide");

                       if(data.resultCode===202 || data.resultCode===200){

                          $("#btn_building_"+roomId).html(` <span class="" id="btn_text_`+roomId+ ` ">Oups!! Occupé </span>
                                                    <i class="fas fa-eye-slash" style="margin-left: 5px; margin-right:  5px"></i>`).attr("onclick","confirmBooking()").addClass("red")

                            if(data.payBefore===1 || data.payBefore===true){

                                setTimeout(function () {
                                    window.location.assign(data.paymentLink);
                                }, 1000)
                                   }else{
                                confirmBooking()
                            }
                      }else {


                           Toast.fire({
                               icon: 'warning',
                               title: data.message
                           });

                       }

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

                      console.log(xhr);

                     var data=JSON.parse(xhr.responseJSON);

                      Swal.fire({
                          title: data.message,
                          icon: 'error',
                          text: "You can be redirected to the previous page",
                          showClass: {
                              popup: 'animate__animated animate__fadeInDown'
                          },
                          hideClass: {
                              popup: 'animate__animated animate__fadeOutUp'
                          }
                      })

                      if(data.resultCode===400){

                          setTimeout(function () {

                              window.location.assign("{{ onlinePath}}/building/detail?destination={{ buildingObjet.address.town.id }}&buildingType={{ buildingObjet.type.id }}&startDate="+startDate+"&endDate="+endDate+"&child="+child+"&adult="+adult);

                          }, 4000)
                      }

                      $("#btn_building_"+roomId).removeClass("disabled").html("Réessayer");
                      $("#building_loading_"+roomId).addClass("hide");

                  }

              });
          }

          function confirmBooking() {
              Swal.fire({
                  title: 'Votre reservation a été prise en considération',
                  icon: 'success',
                  showClass: {
                      popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                      popup: 'animate__animated animate__fadeOutUp'
                  }
              })
          }
          function booking(buildingId, roomId,startDate,endDate,adult,child,imageRoom) {



              const swalWithBootstrapButtons = Swal.mixin({
                  customClass: {
                      confirmButton: 'btn btn-success',
                      cancelButton: 'btn btn-danger'
                  },
                  buttonsStyling: false
              })

              swalWithBootstrapButtons.fire({
                  title: 'Are you sure?',
                  text: "You won't be able to revert this!",

                  imageUrl: ''+imageRoom,
                  imageWidth: 250,
                  imageHeight: 100,

                  showCancelButton: true,
                  confirmButtonText: 'Yes, book it!',
                  cancelButtonText: 'No, cancel!',
                  reverseButtons: true
              }).then((result) => {
                    if (
                      /* Read more about handling dismissals below */
                      result.dismiss === Swal.DismissReason.cancel
                  ) {
                      swalWithBootstrapButtons.fire(
                          'Cancelled',
                          'You have cancelled you booking)',
                          'error'
                      )
                  }else if (result) {
                        console.log("result");
                        console.log(result);
                        bookingConfirm(buildingId, roomId,startDate,endDate,adult,child)

                    }
              })




          }
          function findBuilding(buildingType, type) {


              var destinationTown=$("#destinationTown_"+buildingType).val();
              var startDate=$("#startDate_"+buildingType).val();
              var endDate=$("#endDate_"+buildingType).val();
              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)
                              }
                          })

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

                      }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 %}