{% 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>
        .modal { width:75% !important ; height: 75% !important ; }
        .truncate-overflow {
            display: -webkit-box;

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

            cursor: pointer;

        }
        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>
        .container-caroussel {
            position: relative;
            width: 50%;
        }

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

        .btn-a-body {

            --b: 3px;     /* the border thickness*/
            --g: 5px;    /* the gap */
            --c: rgba(3, 128, 13, 0.97); /* the color */
            background: -webkit-linear-gradient(45deg, rgba(3, 128, 13, 0.97), #16945b);
            margin-right: 15px;
            padding: 10px; border-radius: 20px;

            aspect-ratio: 0.5;

            color:white;
            cursor: pointer;
            transition: .3s;
        }
        .btn-a-body:hover {
            outline: var(--b) solid var(--c);
            outline-offset: var(--g);
            background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.85));

            color: rgba(3, 128, 13, 0.96);
        }
        .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="" id="content">
       <div class="row" style="margin-top: 20px;position: relative;
    background: -webkit-linear-gradient(45deg, rgba(25,118,210,0.38), rgba(25,118,210,0.38)) ;">

           <div class="slider     " style="">

               <ul class="slides" style="" >

                   {% for background in backgrounds %}

                       <li>
                           <img src="{{ asset('media/' ~ background.picture.filePath) | trans}}"  >

                           <div class="caption   left-align"
                                style="
                       background: -webkit-linear-gradient(45deg, rgba(179,177,169,0.25), rgba(152,149,133,0.26)) ;" >
                               <br>

                               {% if local =="fr" %}
                                   <h4 class="ml12 hide-on-small-only" style="margin-top: 40px; margin-left: 80px; margin-right: 40px;">

                                       {{ background.data.title }}

                                   </h4>
                                   <br>
                                   <h5 class="white-text ml13 hide-on-small-only " style="text-align: justify;
                                margin-left: 80px; margin-right: 40px">
                                       {{ background.data.message }}
                                   </h5>
                               {% endif %}
                               {% if local =="en" or local =="it" or local =="zh_CN"%}

                               {% endif %}


                           </div>
                       </li>
                   {% endfor %}


               </ul>

           </div>


       </div>


       <div class="row" style="margin-top: -180px; margin-bottom: 40px">
           <div class="col s10 offset-s1" style="margin-top: -30px; z-index: 100; position: absolute">
               <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: 20px;

                       z-index: 100; position: absolute" >

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

       </div>

       <div class="row" >

           <div class="col s10 offset-s1 hide-on-med-and-down hide-on-small-only hide-on-med-only" style="margin-top: 140px">
               <h5>Offres</h5>
               <h6>Promotions, deals and special offers for you</h6>
           </div>
           <div class="col s10 offset-s1  hide-on-large-only hide-on-extra-large-only " style="margin-top: 300px">
               <h5>Offres</h5>
               <h6>Promotions, deals and special offers for you</h6>
           </div>

           <div class="col s10 offset-s1 autoplayBestProd">

               {% for announce in announces %}
                   <div class="col s12 l5 " style="margin: 20px">
                       <div class="col s12 card">
                           <div class="col s7 ">
                               <h5>
                                   {{ announce.titleEn }}
                               </h5>
                               <p class="truncate-overflow">{{ announce.description }}</p>
                           </div>
                           <div class="col s5">
                               <img class="  card  image-n-margin  responsive-img halfway-fab hoverable"   src="{{ onlinePath }}/media/{{ announce.cover }}" style=" padding-top: 20px; border-radius: 20px; width: 200px; height: 200px" alt="">
                           </div>

                           <div class="col s12 " style="margin-top: 20px; margin-bottom: 20px">
                               <a href="{{ path('app_announce_detail',{'announce':announce.id}) }}" id="btnLocation" class=" hide-on-small-and-down hide-on-small-only   card btn-a-body" style="">
                                   En Savoir plus..
                                   <i class="fas fa-eye" style="margin-left: 15px; margin-right:  5px"></i>
                               </a>

                               <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
                                   {{ announce.amount|number_format(2, '.', ',')  }}


                                   <i class="fas fa-cart-plus"></i>
                               </h5>

                           </div>
                       </div>



                   </div>


               {%endfor %}
           </div>
       </div>

       <div class="row">



           <div class="col s10 offset-s1 hide-on-med-and-down hide-on-small-only hide-on-med-only" >
               <h5>Trending destinations</h5>
               <h6>Travellers searching for Chile also booked these</h6>
           </div>
           <div class="col s10 offset-s1  hide-on-large-only hide-on-extra-large-only " >
               <h5>Trending destinations</h5>
               <h6>Travellers searching for Chile also booked these</h6>
           </div>

           <div class="col s10 offset-s1 autoplayBestProd">

               {% for town in trendingDestinations %}

                   <div class="col s12 l5 " style="padding: 20px">
                       <div class="col s12  " style="  ">


                           <div class="col s12 card"   style="margin-bottom: -100px;  background: -webkit-linear-gradient(90deg, rgba(16,16,16,0.1), rgba(16,16,16,0.07)) ; ">

                               <h5 style="font-weight: bold; color: white">

                                   {{ town.town }}
                                   <span style="font-size: 15px">

                              ( {{ town.country.countryName }} )</span>
                                   <img class=" "   src="{{ onlinePath }}/media/{{ town.country.countryFlag }}" style="margin-left: 1px; width: 17px; height: 17px; " alt="">

                               </h5>

                           </div>
                           {%  if town.picture != NULL %}

                               <a href="{{ path('app_building_detail', {'destination': town.townId, 'buildingType': 'all','startDate':'', 'endDate': '','adult':'', 'child':'' }) }}">


                               <img class=" "   src="{{ onlinePath }}/media/{{ town.picture }}" style="  margin-top: -150px; width: 100%; height: 300px" alt="">

                               </a>
                           {%else %}
                               <a href="{{ path('app_building_detail', {'destination': town.townId, 'buildingType': 'all','startDate':'', 'endDate': '','adult':'', 'child':'' }) }}">


                               <img class=" "   src="{{ asset("img/default_town.jpg") }}" style=" width: 100%; height: 300px" alt="">

                               </a>
                           {%endif %}
                       </div>
                   </div>


               {%endfor %}
           </div>

       </div>

       <div class="row" id="residentCountry">

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

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


              $('.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: 2000,
                  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: 22000,
                  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",



                  beforeSend:function () {

                  },
                  success: function(data){


                      console.log("data ip");
                      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){
                              console.log("data location");

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

                              $("#residentCountry").append(`

                                <div class="col s10 offset-s1  " >
                           <h5>Trending destinations in `+data.country +` </h5>
                             <h6>Most visited places</h6>
                              </div>   <div class="col s10 offset-s1 residentCountry"> </div>

                              `);

                              var i=0;j=0;

                              if(data.trendingTown!==null){
                                  console.log("ok if");


                                  console.log("data.trendingTown.length "+data.trendingTown[0]);
                                  console.log("data.trendingTown.length "+ data.total);
                                  for(i=0; i< data.total; i++){
                                      console.log("ok for "+i);
                                      if(j<10){
                                          console.log("ok if j "+j);

                                          if(data.trendingTown[i].picture!==null){
                                              $(".residentCountry").append(`
                                              <div class="col s12 l5 " style="padding: 20px">
                <div class="col s12  " style="  ">

                   <div class="col s12 card" style="margin-bottom: -100px;  background: -webkit-linear-gradient(90deg, rgba(16,16,16,0.1), rgba(16,16,16,0.07)) ; ">

                       <h5 style="font-weight: bold; color: white">

                               `+data.trendingTown[i].town+`

                           <span style="font-size: 15px">

                              ( `+data.trendingTown[i].country+`)</span>
                           <img class=" "   src="{{ onlinePath }}/media/`+data.trendingTown[i].countryFlag +`" style="margin-left: 1px; width: 17px; height: 17px; " alt="">

                       </h5>

                   </div>

                          <a href="{{ onlinePath}}/building/detail?destination=`+data.trendingTown[i].townId+`&buildingType=all&startDate=&endDate=&child=&adult=">
                            <img class=" "   src="{{ onlinePath }}/media/`+ data.trendingTown[i].picture +`" style="  margin-top: -150px; width: 100%; height: 300px" alt="">

                        </a>


                </div>
            </div>

                                          `);
                                          }else{

                                              $(".residentCountry").append(`
                                              <div class="col s12 l5 " style="padding: 20px">
                <div class="col s12  " style="  ">

                   <div class="col s12 card" style="margin-bottom: -100px;  background: -webkit-linear-gradient(90deg, rgba(16,16,16,0.1), rgba(16,16,16,0.07)) ; ">

                       <h5 style="font-weight: bold; color: white">

                               `+data.trendingTown[i].town+`

                           <span style="font-size: 15px">

                              ( `+data.trendingTown[i].country+`)</span>
                           <img class=" "   src="{{ onlinePath }}/media/`+data.trendingTown[i].countryFlag +`" style="margin-left: 1px; width: 17px; height: 17px; " alt="">

                       </h5>

                   </div>

                        <a href="{{ onlinePath}}/building/detail?destination=`+data.trendingTown[i].townId+`&buildingType=all&startDate=&endDate=&child=&adult=">
                            <img class=" "   src="{{ asset("img/default_town.jpg") }}" style="  margin-top: -150px; width: 100%; height: 300px" alt="">

                        </a>


                </div>
            </div>

                                          `);
                                          }


                                          j++
                                      }


                                  }
                              }






                              setTimeout(function () {
                                  $('.residentCountry').slick({
                                      slidesToShow: 3,
                                      slidesToScroll: 3,
                                      autoplay: true,
                                      autoplaySpeed: 9000,
                                      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
                                              }
                                          }
                                      ]
                                  });
                              },3000)
                          },
                          error:function (xhr, textStatus, errorThrown) {



                              console.log(xhr);

                          }

                      });

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



                  }

              });



          }


          function refreshToken() {


              $.ajax({
                  method: "POST",
                  tryCount  : 0,
                  retryLimit  : 4,
                  url: 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=$("#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 %}