templates/home/home_index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{companyName}} | {% trans %}Accueil{% endtrans %}{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  8.     <link href="{{ asset('css/home.func.css') }}" rel="stylesheet" />
  9.     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  12.     <style>
  13.         .modal { width:75% !important ; height: 75% !important ; }
  14.         .truncate-overflow {
  15.             display: -webkit-box;
  17.             -webkit-line-clamp: 4;
  18.             -webkit-box-orient: vertical;
  19.             overflow: hidden;
  20.             font-size: 14px;
  21.         }
  22.         .truncate-overflow:hover {
  24.             cursor: pointer;
  26.         }
  27.         div.ex3 {
  28.             background-color: #ffffff;
  29.             height: 250px;
  30.             width: 100%;
  31.             overflow-y: auto;
  32.         }
  33.         div.ex4 {
  34.             background-color: #ffffff;
  35.             height: 300px;
  36.             border-radius: 30px;
  37.             width: 100%;
  38.             overflow-y: auto;
  39.         }
  40.     </style>
  41.     <style>
  42.         .container-caroussel {
  43.             position: relative;
  44.             width: 50%;
  45.         }
  47.         .image-caroussel {
  48.             display: block;
  49.             width: 100%;
  50.             height: auto;
  51.         }
  53.         .btn-a-body {
  55.             --b: 3px;     /* the border thickness*/
  56.             --g: 5px;    /* the gap */
  57.             --c: rgba(3, 128, 13, 0.97); /* the color */
  58.             background: -webkit-linear-gradient(45deg, rgba(3, 128, 13, 0.97), #16945b);
  59.             margin-right: 15px;
  60.             padding: 10px; border-radius: 20px;
  62.             aspect-ratio: 0.5;
  64.             color:white;
  65.             cursor: pointer;
  66.             transition: .3s;
  67.         }
  68.         .btn-a-body:hover {
  69.             outline: var(--b) solid var(--c);
  70.             outline-offset: var(--g);
  71.             background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.85));
  73.             color: rgba(3, 128, 13, 0.96);
  74.         }
  75.         .overlay-caroussel {
  76.             position: absolute;
  77.             bottom: 0;
  78.             left: 0;
  79.             right: 0;
  80.             background-color: #008CBA;
  81.             overflow: hidden;
  82.             width: 100%;
  83.             height: 0;
  84.             transition: .5s ease;
  85.         }
  87.         .container-caroussel:hover .overlay {
  88.             height: 100%;
  89.         }
  91.         .text-caroussel {
  92.             color: white;
  93.             font-size: 20px;
  94.             position: absolute;
  95.             top: 50%;
  96.             left: 50%;
  97.             -webkit-transform: translate(-50%, -50%);
  98.             -ms-transform: translate(-50%, -50%);
  99.             transform: translate(-50%, -50%);
  100.             text-align: center;
  101.         }
  102.     </style>
  103. {% endblock %}
  105. {% block body %}
  106.     {{ parent() }}
  111.    <div class="" id="content">
  112.        <div class="row" style="margin-top: 20px;position: relative;
  113.     background: -webkit-linear-gradient(45deg, rgba(25,118,210,0.38), rgba(25,118,210,0.38)) ;">
  115.            <div class="slider     " style="">
  117.                <ul class="slides" style="" >
  119.                    {% for background in backgrounds %}
  121.                        <li>
  122.                            <img src="{{ asset('media/' ~ background.picture.filePath) | trans}}"  >
  124.                            <div class="caption   left-align"
  125.                                 style="
  126.                        background: -webkit-linear-gradient(45deg, rgba(179,177,169,0.25), rgba(152,149,133,0.26)) ;" >
  127.                                <br>
  129.                                {% if local =="fr" %}
  130.                                    <h4 class="ml12 hide-on-small-only" style="margin-top: 40px; margin-left: 80px; margin-right: 40px;">
  132.                                        {{ background.data.title }}
  134.                                    </h4>
  135.                                    <br>
  136.                                    <h5 class="white-text ml13 hide-on-small-only " style="text-align: justify;
  137.                                 margin-left: 80px; margin-right: 40px">
  138.                                        {{ background.data.message }}
  139.                                    </h5>
  140.                                {% endif %}
  141.                                {% if local =="en" or local =="it" or local =="zh_CN"%}
  143.                                {% endif %}
  146.                            </div>
  147.                        </li>
  148.                    {% endfor %}
  151.                </ul>
  153.            </div>
  156.        </div>
  159.        <div class="row" style="margin-top: -180px; margin-bottom: 40px">
  160.            <div class="col s10 offset-s1" style="margin-top: -30px; z-index: 100; position: absolute">
  161.                <ul class="tabs" style=" background-color: rgba(192,220,126,0);">
  165.                    {% for buildingType in buildingTypes %}
  166.                        {% if buildingType.enable ==true %}
  168.                            <li class="tab col s3  " style="
  169.                    margin: 5px;
  170.  background-color: rgba(192,220,126,0.7);
  171.                       ">
  173.                                <a href="#building_{{buildingType.id }}" class="black-text waves-ripple waves-effect">
  174.                                    <i class="fas fa-hotel  " style="margin-left: -5px; margin-right:  50px"></i>
  175.                                    {{buildingType.type }}
  177.                                </a></li>
  179.                        {% endif %}
  180.                    {%endfor %}
  181.                </ul>
  182.            </div>
  183.            {% for buildingType in buildingTypes %}
  184.                {% if buildingType.enable ==true %}
  186.                    <div id="building_{{buildingType.id }}"
  187.                         class="col s10 offset-s1  " style=" margin-top: 20px;
  189.                        z-index: 100; position: absolute" >
  191.                        <div class="col s12 card" style="  background-color: rgba(192,220,126,0.57);">
  192.                            <div class="input-field col m6 s12 l3 m6">
  194.                                <div class="col s12" >
  196.                                    <i class="fas fa-bed" style=" font-size: 18px; position: absolute; margin-left: -30px;margin-top: 10px; float: right; z-index: 100 "></i>
  198.                                    <select class="js-example-basic-single" name="destinationTown" id="destinationTown_{{buildingType.id  }}" style="width: 100%;   ">
  199.                                        {% for town in towns %}
  200.                                            <option value="{{ town.id }}">{{ town.townName }}</option>
  201.                                        {%endfor %}
  203.                                    </select>
  204.                                </div>
  206.                            </div>
  207.                            <div class="col m6 s12 l4  m6 ">
  208.                                <div class="col s12">
  209.                                    <div class="col s6">
  210.                                        <h6>Arrivée Le</h6>
  211.                                        <input style="margin-top: -10px" type="datetime-local" id="startDate_{{ buildingType.id }}"  placeholder="Date d'arrivée" name="startDate"  class="col s12  "/>
  212.                                    </div>
  213.                                    <div class="col s6">
  214.                                        <h6>Départ Le</h6>
  215.                                        <input   style="margin-top: -10px" type="datetime-local" id="endDate_{{ buildingType.id }}"  placeholder="Date de départ"  name="endDate"  class="col s12  "/>
  217.                                    </div>
  218.                                </div>
  219.                            </div>
  222.                            <div class="col s12 l3 m6 ">
  223.                                <div class="col s12">
  224.                                    <div class="col s3 pull-l1 "  style="margin-top: 20px">
  225.                                        <h6 style="margin-left: -10px">
  226.                                            <i class="fas fa-user-friends " style="position: absolute; float: right; margin-left: -10px" ></i>
  228.                                            <span style="margin-left: 15px">Adultes</span>
  229.                                        </h6>
  230.                                    </div>
  232.                                    <div class="s3 col"   style="margin-top: 20px">
  233.                                        <input style="margin-top: -10px" min="1" value="1" type="number" id="adult_{{ buildingType.id }}"   name="adult_{{ buildingType.id }}"  class="col s12  "/>
  235.                                    </div>
  236.                                    <div class="s3 col "  style="margin-top: 20px">
  239.                                        <h6 style="margin-left: -10px">
  240.                                            <i class="fas fa-baby " style="position: absolute; float: right; margin-left: -10px" ></i>
  242.                                            <span style="margin-left: 15px">Enfants</span>
  243.                                        </h6>
  244.                                    </div>
  245.                                    <div class="s3 col"   style="margin-top: 20px">
  246.                                        <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  "/>
  248.                                    </div>
  249.                                </div>
  250.                            </div>
  252.                            <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">
  253.                                <i class="fas fa-search" style="margin-left: 5px; margin-right:  5px"></i>
  254.                                <span class="" id="btn_text_{{ buildingType.id }}">Rechercher</span>
  255.                                <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="">
  258.                            </a>
  259.                        </div>
  260.                    </div>
  262.                {% endif %}
  263.            {%endfor %}
  265.        </div>
  267.        <div class="row" >
  269.            <div class="col s10 offset-s1 hide-on-med-and-down hide-on-small-only hide-on-med-only" style="margin-top: 140px">
  270.                <h5>Offres</h5>
  271.                <h6>Promotions, deals and special offers for you</h6>
  272.            </div>
  273.            <div class="col s10 offset-s1  hide-on-large-only hide-on-extra-large-only " style="margin-top: 300px">
  274.                <h5>Offres</h5>
  275.                <h6>Promotions, deals and special offers for you</h6>
  276.            </div>
  278.            <div class="col s10 offset-s1 autoplayBestProd">
  280.                {% for announce in announces %}
  281.                    <div class="col s12 l5 " style="margin: 20px">
  282.                        <div class="col s12 card">
  283.                            <div class="col s7 ">
  284.                                <h5>
  285.                                    {{ announce.titleEn }}
  286.                                </h5>
  287.                                <p class="truncate-overflow">{{ announce.description }}</p>
  288.                            </div>
  289.                            <div class="col s5">
  290.                                <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="">
  291.                            </div>
  293.                            <div class="col s12 " style="margin-top: 20px; margin-bottom: 20px">
  294.                                <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="">
  295.                                    En Savoir plus..
  296.                                    <i class="fas fa-eye" style="margin-left: 15px; margin-right:  5px"></i>
  297.                                </a>
  299.                                <h5 class="right right-align black-text" style="margin-top: -10px; padding-right: 0px; font-size: 23px">
  300.                                    {{ announce.amount|number_format(2, '.', ',')  }}
  303.                                    <i class="fas fa-cart-plus"></i>
  304.                                </h5>
  306.                            </div>
  307.                        </div>
  311.                    </div>
  314.                {%endfor %}
  315.            </div>
  316.        </div>
  318.        <div class="row">
  322.            <div class="col s10 offset-s1 hide-on-med-and-down hide-on-small-only hide-on-med-only" >
  323.                <h5>Trending destinations</h5>
  324.                <h6>Travellers searching for Chile also booked these</h6>
  325.            </div>
  326.            <div class="col s10 offset-s1  hide-on-large-only hide-on-extra-large-only " >
  327.                <h5>Trending destinations</h5>
  328.                <h6>Travellers searching for Chile also booked these</h6>
  329.            </div>
  331.            <div class="col s10 offset-s1 autoplayBestProd">
  333.                {% for town in trendingDestinations %}
  335.                    <div class="col s12 l5 " style="padding: 20px">
  336.                        <div class="col s12  " style="  ">
  339.                            <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)) ; ">
  341.                                <h5 style="font-weight: bold; color: white">
  343.                                    {{ town.town }}
  344.                                    <span style="font-size: 15px">
  346.                               ( {{ town.country.countryName }} )</span>
  347.                                    <img class=" "   src="{{ onlinePath }}/media/{{ town.country.countryFlag }}" style="margin-left: 1px; width: 17px; height: 17px; " alt="">
  349.                                </h5>
  351.                            </div>
  352.                            {%  if town.picture != NULL %}
  354.                                <a href="{{ path('app_building_detail', {'destination': town.townId, 'buildingType': 'all','startDate':'', 'endDate': '','adult':'', 'child':'' }) }}">
  357.                                <img class=" "   src="{{ onlinePath }}/media/{{ town.picture }}" style="  margin-top: -150px; width: 100%; height: 300px" alt="">
  359.                                </a>
  360.                            {%else %}
  361.                                <a href="{{ path('app_building_detail', {'destination': town.townId, 'buildingType': 'all','startDate':'', 'endDate': '','adult':'', 'child':'' }) }}">
  364.                                <img class=" "   src="{{ asset("img/default_town.jpg") }}" style=" width: 100%; height: 300px" alt="">
  366.                                </a>
  367.                            {%endif %}
  368.                        </div>
  369.                    </div>
  372.                {%endfor %}
  373.            </div>
  375.        </div>
  377.        <div class="row" id="residentCountry">
  379.        </div>
  380.    </div>
  381. {% endblock %}
  383.   {% block javascripts %}
  384.       {{ parent() }}
  385.       <script src="{{ asset('js/home.func.js') }}"></script>
  386.       <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  387.       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  390.       <script type="text/javascript">
  392.           $(function() {
  393.               var startDay = moment().format('MM/YYYY/DD');
  396.               $('input[name="datetimes"]').daterangepicker({
  397.                   timePicker: true,
  398.                   startDate: moment().startOf('hour'),
  399.                   endDate: moment().startOf('hour').add(32, 'hour'),
  400.                   locale: {
  401.                       format: 'M/DD hh:mm A'
  402.                   },
  403.                   minDate:  startDay,
  404.                   minYear:  parseInt(moment().format('YYYY'),0),
  405.                   maxYear: parseInt(moment().format('YYYY'),10)
  406.               });
  407.           });
  412.           $(document).ready(function() {
  413.               $('.js-example-basic-single').select2();
  416.               $('.datepicker').pickadate({
  417.                   selectMonths: true, // Creates a dropdown to control month
  418.                   selectYears: 15, // Creates a dropdown of 15 years to control year,
  419.                   today: 'Today',
  420.                   clear: 'Clear',
  421.                   close: 'Ok',
  422.                   closeOnSelect: false, // Close upon selecting a date,
  423.                   container: undefined, // ex. 'body' will append picker to body
  424.               });
  427.               $('.modal').modal({
  428.                       dismissible: true, // Modal can be dismissed by clicking outside of the modal
  429.                       opacity: .4, // Opacity of modal background
  430.                       inDuration: 300, // Transition in duration
  431.                       outDuration: 200, // Transition out duration
  432.                       startingTop: '4%', // Starting top style attribute
  433.                       endingTop: '15%', // Ending top style attribute
  434.                       ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
  436.                       },
  437.                       complete: function() {
  440.                       } // Callback for Modal close
  441.                   }
  442.               );
  443.               $('.autoplayTestimony').slick({
  444.                   slidesToShow: 3,
  445.                   slidesToScroll: 1,
  446.                   autoplay: true,
  447.                   autoplaySpeed: 2000,
  448.                   responsive: [
  449.                       {
  450.                           breakpoint: 2024,
  451.                           settings: {
  452.                               slidesToShow: 4,
  453.                               slidesToScroll: 4,
  454.                               infinite: true,
  455.                               dots: true
  456.                           }
  457.                       },
  458.                       {
  459.                           breakpoint: 1424,
  460.                           settings: {
  461.                               slidesToShow: 3,
  462.                               slidesToScroll: 3,
  463.                               infinite: true,
  464.                               dots: true
  465.                           }
  466.                       },
  467.                       {
  468.                           breakpoint: 900,
  469.                           settings: {
  470.                               slidesToShow: 2,
  471.                               slidesToScroll: 2
  472.                           }
  473.                       },
  474.                       {
  475.                           breakpoint: 480,
  476.                           settings: {
  477.                               slidesToShow: 1,
  478.                               slidesToScroll: 1
  479.                           }
  480.                       }
  481.                   ]
  482.               })
  484.               $('.autoplayPack').slick({
  485.                   slidesToShow: 1,
  486.                   slidesToScroll: 1,
  487.                   autoplay: true,
  488.                   autoplaySpeed: 2000,
  489.                   responsive: [
  490.                       {
  491.                           breakpoint: 1024,
  492.                           settings: {
  493.                               slidesToShow: 1,
  494.                               slidesToScroll: 1,
  495.                               infinite: true,
  496.                               dots: true
  497.                           }
  498.                       },
  499.                       {
  500.                           breakpoint: 600,
  501.                           settings: {
  502.                               slidesToShow: 1,
  503.                               slidesToScroll: 1
  504.                           }
  505.                       },
  506.                       {
  507.                           breakpoint: 480,
  508.                           settings: {
  509.                               slidesToShow: 1,
  510.                               slidesToScroll: 1
  511.                           }
  512.                       }
  513.                   ]
  514.               });
  515.               $('.autoplayBestProd').slick({
  516.                   slidesToShow: 2,
  517.                   slidesToScroll: 2,
  518.                   autoplay: true,
  519.                   autoplaySpeed: 22000,
  520.                   responsive: [
  521.                       {
  522.                           breakpoint: 1024,
  523.                           settings: {
  524.                               slidesToShow: 2,
  525.                               slidesToScroll: 2,
  526.                               infinite: true,
  527.                               dots: true
  528.                           }
  529.                       },
  530.                       {
  531.                           breakpoint: 600,
  532.                           settings: {
  533.                               slidesToShow: 1,
  534.                               slidesToScroll: 1
  535.                           }
  536.                       },
  537.                       {
  538.                           breakpoint: 480,
  539.                           settings: {
  540.                               slidesToShow: 1,
  541.                               slidesToScroll: 1
  542.                           }
  543.                       }
  544.                   ]
  545.               });
  546.           });
  549.           var apiBaseUrl="{{ host }}"
  550.           var loginUrl="{{ path('authentication_token') }}";
  553.           getClientLocation ();
  556.           function submitComment() {
  559.               setTimeout(function () {
  560.                   Swal.mixin({
  562.                       imageUrl: '{{ asset('img/logo-logercm.png') }}',
  563.                       imageHeight: 60,
  564.                       background: '#fff url({{ asset('img/trees.png') }})',
  565.                       imageAlt: 'Logo {{ companyName }}',
  566.                       allowOutsideClick: false,
  567.                       allowEscapeKey: false,
  569.                       reverseButtons: true,
  570.                       confirmButtonText:
  571.                           '{% trans %}Suivant{% endtrans %} <i class="fa fa-arrow-right"></i>',
  573.                       showCancelButton: true,
  574.                       progressSteps: ['1', '2', '3','4','5'],
  575.                       cancelButtonText:
  576.                           '<i class="fa fa-trash"></i> Annuler',
  577.                       cancelButtonAriaLabel: '{% trans %}Annuler{% endtrans %}'
  578.                   }).
  579.                   queue([
  580.                       {
  581.                           title: '{% trans %}Laissez-nous un témoignage{% endtrans %}',
  584.                           text: '{% trans %}Votre Nom{% endtrans %}:',
  586.                           inputPlaceholder: 'John Doe.',
  587.                           input: 'text',
  588.                           inputValidator: (result) => {
  589.                               return !result && '{% trans %}Vous devez indiquer votre nom {% endtrans %}'
  590.                           }
  591.                       },
  592.                       {
  593.                           title: '{% trans %}Laissez-nous un témoignage{% endtrans %}',
  596.                           text: '{% trans %}Votre contact{% endtrans %}:',
  598.                           inputPlaceholder: '23760000000.',
  599.                           input: 'text',
  600.                           inputValidator: (result) => {
  601.                               return !result && '{% trans %}Vous devez indiquer votre contact{% endtrans %}'
  602.                           }
  603.                       },
  604.                       {
  605.                           title: "{% trans %}Que pensez des produits et services biocarrylife?{% endtrans %}",
  607.                           text: '{% trans %}Un petit commentaire{% endtrans %}',
  608.                           inputAttributes: {
  609.                               'maxlength': 1255,
  611.                           },
  613.                           inputPlaceholder: '{% trans %}Je suis satisfait des produits biocarrylife{% endtrans %}.',
  614.                           input: 'textarea',
  615.                           inputValidator: (result) => {
  616.                               return !result && '{% trans %}Vous avez oublié votre appréciation{% endtrans %}.'
  617.                           }
  618.                       },
  620.                       {
  621.                           title: '{% trans %}Sur une echelle de 1 à 10 quelle est votre note?{% endtrans %}',
  622.                           text: '{% trans %}Votre note{% endtrans %}:',
  623.                           input: 'number',
  624.                           inputPlaceholder: '5',
  626.                           inputAttributes: {
  627.                               min: 0,
  628.                               max: 10
  629.                           },
  630.                           inputValidator: (value) => {
  631.                               if (!value) {
  632.                                   return '{% trans %}Ce champ est obligatoire{% endtrans %}!'
  633.                               }
  634.                               if(parseInt(value)<0 || parseInt(value)>10){
  635.                                   return '{% trans %}Votre note doit être comprise entre 1 et 10{% endtrans %}!'
  636.                               }
  637.                           }
  638.                       },
  641.                       {
  642.                           title: "{% trans %}Nous avons besoin d'une jolie photo de vous{% endtrans %}?",
  643.                           text: '{% trans %}Cliquez ici pour charger une photo{% endtrans %}:',
  644.                           input: 'file',
  645.                           inputAttributes: {
  646.                               'accept': 'image/*',
  647.                               'aria-label': 'Upload your profile picture'
  648.                           },
  649.                       }
  652.                   ]).then((result) => {
  653.                       if (result.value) {
  659.                           var form = new FormData();
  662.                           form.append("file",  result.value[4]);
  664.                           console.log(form);
  667.                           var settings = {
  668.                               "url": apiBaseUrl+"media_objects",
  669.                               "method": "POST",
  670.                               "timeout": 0,
  671.                               "headers": {
  673.                                   "Accept": "application/json",
  674.                                   "Authorization": "Bearer "+ getCookie("{{ companyName }}_user_token")
  675.                               },
  676.                               "processData": false,
  677.                               "mimeType": "multipart/form-data",
  678.                               "contentType": false,
  679.                               "data": form
  680.                           };
  682.                           $.ajax(settings).done(function (response) {
  683.                               console.log(response);
  686.                               var picture=JSON.parse(response);
  689.                               $.ajax({
  690.                                   method: "POST",
  691.                                   tryCount  : 0,
  692.                                   retryLimit  : 4,
  693.                                   "url": apiBaseUrl+"testimonies",
  694.                                   "headers": {
  695.                                       "Content-Type":  "application/json",
  696.                                       "Authorization": "Bearer "+ getCookie("{{ companyName }}_user_token")
  697.                                   },
  698.                                   data: JSON.stringify({
  701.                                       "picture": apiBaseUrl+"media_objects/"+picture.id,
  702.                                       "client": result.value[0],
  703.                                       "message": result.value[2],
  704.                                       "contact": result.value[1],
  705.                                       "appreciation": parseInt(result.value[3]),
  706.                                       "approved": false }),
  708.                                   beforeSend:function () {
  710.                                   },
  711.                                   success: function(data){
  713.                                       console.log(data);
  714.                                       Swal.fire(
  715.                                           '{% trans %}Super{% endtrans %}!',
  716.                                           '{% trans %}Votre témoignage à été pris en compte{% endtrans %}!',
  717.                                           'success'
  718.                                       )
  721.                                   },
  722.                                   error:function (xhr, textStatus, errorThrown) {
  726.                                   }
  728.                               });
  730.                           });
  733.                       }
  734.                   });
  736.                   $(".swal2-input").css("max-width","100%")
  737.               },500)
  740.           }
  742.           function getClientLocation () {
  745.               var locationUrl="{{ path('client_location') }}";
  748.               $.ajax({
  749.                   method: "GET",
  750.                   tryCount  : 0,
  751.                   retryLimit  : 4,
  752.                   url: "https://api.ipify.org?format=json",
  756.                   beforeSend:function () {
  758.                   },
  759.                   success: function(data){
  762.                       console.log("data ip");
  763.                       console.log(data);
  765.                       var api_address=data.ip;
  769.                       $.ajax({
  770.                           method: "POST",
  771.                           tryCount  : 0,
  772.                           retryLimit  : 4,
  773.                           url: locationUrl,
  774.                           "headers": {
  775.                               "Content-Type": "application/json"
  776.                           },
  777.                           data: JSON.stringify({
  779.                               "api_address":api_address}),
  781.                           beforeSend:function () {
  783.                           },
  784.                           success: function(data){
  785.                               console.log("data location");
  787.                               setCookie("visitor",data,20)
  788.                               console.log(data.trendingTown);
  790.                               $("#residentCountry").append(`
  792.                                 <div class="col s10 offset-s1  " >
  793.                            <h5>Trending destinations in `+data.country +` </h5>
  794.                              <h6>Most visited places</h6>
  795.                               </div>   <div class="col s10 offset-s1 residentCountry"> </div>
  797.                               `);
  799.                               var i=0;j=0;
  801.                               if(data.trendingTown!==null){
  802.                                   console.log("ok if");
  805.                                   console.log("data.trendingTown.length "+data.trendingTown[0]);
  806.                                   console.log("data.trendingTown.length "+ data.total);
  807.                                   for(i=0; i< data.total; i++){
  808.                                       console.log("ok for "+i);
  809.                                       if(j<10){
  810.                                           console.log("ok if j "+j);
  812.                                           if(data.trendingTown[i].picture!==null){
  813.                                               $(".residentCountry").append(`
  814.                                               <div class="col s12 l5 " style="padding: 20px">
  815.                 <div class="col s12  " style="  ">
  817.                    <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)) ; ">
  819.                        <h5 style="font-weight: bold; color: white">
  821.                                `+data.trendingTown[i].town+`
  823.                            <span style="font-size: 15px">
  825.                               ( `+data.trendingTown[i].country+`)</span>
  826.                            <img class=" "   src="{{ onlinePath }}/media/`+data.trendingTown[i].countryFlag +`" style="margin-left: 1px; width: 17px; height: 17px; " alt="">
  828.                        </h5>
  830.                    </div>
  832.                           <a href="{{ onlinePath}}/building/detail?destination=`+data.trendingTown[i].townId+`&buildingType=all&startDate=&endDate=&child=&adult=">
  833.                             <img class=" "   src="{{ onlinePath }}/media/`+ data.trendingTown[i].picture +`" style="  margin-top: -150px; width: 100%; height: 300px" alt="">
  835.                         </a>
  838.                 </div>
  839.             </div>
  841.                                           `);
  842.                                           }else{
  844.                                               $(".residentCountry").append(`
  845.                                               <div class="col s12 l5 " style="padding: 20px">
  846.                 <div class="col s12  " style="  ">
  848.                    <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)) ; ">
  850.                        <h5 style="font-weight: bold; color: white">
  852.                                `+data.trendingTown[i].town+`
  854.                            <span style="font-size: 15px">
  856.                               ( `+data.trendingTown[i].country+`)</span>
  857.                            <img class=" "   src="{{ onlinePath }}/media/`+data.trendingTown[i].countryFlag +`" style="margin-left: 1px; width: 17px; height: 17px; " alt="">
  859.                        </h5>
  861.                    </div>
  863.                         <a href="{{ onlinePath}}/building/detail?destination=`+data.trendingTown[i].townId+`&buildingType=all&startDate=&endDate=&child=&adult=">
  864.                             <img class=" "   src="{{ asset("img/default_town.jpg") }}" style="  margin-top: -150px; width: 100%; height: 300px" alt="">
  866.                         </a>
  869.                 </div>
  870.             </div>
  872.                                           `);
  873.                                           }
  876.                                           j++
  877.                                       }
  880.                                   }
  881.                               }
  888.                               setTimeout(function () {
  889.                                   $('.residentCountry').slick({
  890.                                       slidesToShow: 3,
  891.                                       slidesToScroll: 3,
  892.                                       autoplay: true,
  893.                                       autoplaySpeed: 9000,
  894.                                       responsive: [
  895.                                           {
  896.                                               breakpoint: 1024,
  897.                                               settings: {
  898.                                                   slidesToShow: 2,
  899.                                                   slidesToScroll: 2,
  900.                                                   infinite: true,
  901.                                                   dots: true
  902.                                               }
  903.                                           },
  904.                                           {
  905.                                               breakpoint: 600,
  906.                                               settings: {
  907.                                                   slidesToShow: 1,
  908.                                                   slidesToScroll: 1
  909.                                               }
  910.                                           },
  911.                                           {
  912.                                               breakpoint: 480,
  913.                                               settings: {
  914.                                                   slidesToShow: 1,
  915.                                                   slidesToScroll: 1
  916.                                               }
  917.                                           }
  918.                                       ]
  919.                                   });
  920.                               },3000)
  921.                           },
  922.                           error:function (xhr, textStatus, errorThrown) {
  926.                               console.log(xhr);
  928.                           }
  930.                       });
  932.                   },
  933.                   error:function (xhr, textStatus, errorThrown) {
  937.                   }
  939.               });
  943.           }
  946.           function refreshToken() {
  949.               $.ajax({
  950.                   method: "POST",
  951.                   tryCount  : 0,
  952.                   retryLimit  : 4,
  953.                   url: loginUrl,
  954.                   "headers": {
  955.                       "Content-Type": "application/json"
  956.                   },
  957.                   data: JSON.stringify({
  959.                       "username":getCookie("{{ companyName }}_user_username"),
  960.                       "password":getCookie("{{ companyName }}_user_userpass")}),
  961.                   beforeSend:function () {
  963.                   },
  964.                   success: function(data){
  967.                       setCookie("{{ companyName }}_user_token",data.token,1);
  970.                   },
  971.                   error:function (xhr, textStatus, errorThrown) {
  975.                   }
  977.               });
  980.           }
  981.           function findBuilding(buildingType, type) {
  984.               var destinationTown=$("#destinationTown_"+buildingType).val();
  985.               var startDate=$("#startDate_"+buildingType).val();
  986.               var endDate=$("#endDate_"+buildingType).val();
  987.               var adult=$("#adult_"+buildingType).val();
  988.               var child=$("#child_"+buildingType).val();
  990.               $.ajax({
  991.                   method: "POST",
  992.                   tryCount  : 0,
  993.                   retryLimit  : 4,
  994.                   url: "{{ path("find_buildings") }}",
  995.                   "headers": {
  996.                       "Content-Type": "application/json"
  997.                   },
  998.                   data: JSON.stringify({
  1000.                       "town":destinationTown ,
  1001.                       "buildType": buildingType,
  1002.                       "startedDate": startDate,
  1003.                       "endDate": endDate,
  1005.                       }),
  1006.                   beforeSend:function () {
  1009.                       //btn_text_/btn_loading_/btn_search_
  1011.                       const button = document.getElementById("btn_search_"+buildingType);
  1013. // Disable the button
  1014.                       button.disabled = true;
  1016.                       $("#btn_search_"+buildingType).addClass("disabled");
  1017.                       $("#btn_loading_"+buildingType).removeClass("hide");
  1018.                       $("#btn_text_"+buildingType).html("Patientez... ");
  1020.                   },
  1021.                   success: function(data){
  1023.                       const button = document.getElementById("btn_search_"+buildingType);
  1025. // Disable the button
  1026.                       button.disabled = false;
  1027.                       console.log(data);
  1029.                       if(data.length===0){
  1030.                           var Toast = Swal.mixin({
  1031.                               toast: true,
  1032.                               position: 'top-end',
  1033.                               showConfirmButton: false,
  1034.                               timer: 14000,
  1035.                               timerProgressBar: true,
  1036.                               didOpen: (toast) => {
  1037.                                   toast.addEventListener('mouseenter', Swal.stopTimer)
  1038.                                   toast.addEventListener('mouseleave', Swal.resumeTimer)
  1039.                               }
  1040.                           })
  1042.                           Toast.fire({
  1043.                               icon: 'warning',
  1044.                               title: 'Aucun (e) '+type+" trouvé(e)"
  1045.                           });
  1047.                       }else{
  1051.                           window.location.assign("{{ onlinePath}}/building/detail?destination="+destinationTown+"&buildingType="+buildingType+"&startDate="+startDate+"&endDate="+endDate+"&child="+child+"&adult="+adult);
  1053.                       }
  1054.                       $("#btn_search_"+buildingType).removeClass("disabled");
  1055.                       $("#btn_loading_"+buildingType).addClass("hide");
  1056.                       $("#btn_text_"+buildingType).html("Rechercher");
  1058.                   },
  1059.                   error:function (xhr, textStatus, errorThrown) {
  1062.                       const button = document.getElementById("btn_search_"+buildingType);
  1064. // Disable the button
  1065.                       button.disabled = false;
  1066.                       $("#btn_search_"+buildingType).removeClass("disabled");
  1067.                       $("#btn_loading_"+buildingType).addClass("hide");
  1068.                       $("#btn_text_"+buildingType).html("Rechercher");
  1069.                   }
  1071.               });
  1074.           }
  1078.           /*  E-commerce part   */
  1080.           function reduceItem(productId){
  1081.               var currentQuantity=parseInt($("#item_"+productId).val());
  1083.               if(currentQuantity>1){
  1084.                   document.getElementById("item_"+productId).value =  (currentQuantity-1);
  1085.               }
  1086.           }
  1087.           function adjustItem(productId, stock){
  1088.               var currentQuantity=parseInt($("#item_"+productId).val());
  1089.               if(currentQuantity<parseInt(stock)){
  1090.                   document.getElementById("item_"+productId).value =  (currentQuantity+1);
  1091.               }
  1094.           }
  1098.           const nodeList = document.querySelectorAll(".ml12");
  1100.           for (let i = 0; i < nodeList.length; i++) {
  1101.               nodeList[i].innerHTML = nodeList[i].textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  1102.           }
  1104.           const nodeList13 = document.querySelectorAll(".ml13");
  1106.           for (let i = 0; i < nodeList13.length; i++) {
  1107.               nodeList13[i].innerHTML = nodeList13[i].textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  1108.           }
  1111.           anime.timeline({loop: true})
  1112.               .add({
  1113.                   targets: '.ml12 .letter',
  1114.                   scale: [2,1],
  1115.                   opacity: [0,1],
  1116.                   translateZ: 0,
  1117.                   easing: "easeInExpo",
  1118.                   duration: 950,
  1119.                   delay: (el, i) => 70*i
  1120.               }).add({
  1121.               targets: '.ml12',
  1122.               opacity: 0,
  1123.               duration: 13000,
  1124.               easing: "easeInExpo",
  1125.               delay: 800
  1126.           });
  1129.           anime.timeline({loop: true})
  1130.               .add({
  1131.                   targets: '.ml13 .letter',
  1132.                   translateX: [40,0],
  1133.                   translateZ: 0,
  1134.                   opacity: [0,1],
  1135.                   easing: "easeOutExpo",
  1136.                   duration: 1200,
  1137.                   delay: (el, i) => 500 + 30 * i
  1138.               }).add({
  1139.               targets: '.ml13 .letter',
  1140.               translateX: [0,-30],
  1141.               opacity: [1,0],
  1142.               easing: "easeInExpo",
  1143.               duration: 10500,
  1144.               delay: (el, i) => 100 + 30 * i
  1145.           });
  1146.       </script>
  1147.   {% endblock %}