Pagina risultati parcheggi

{{#extend "@template-master--checkout"}}

  {{!-- HEADER --}}
  {{#content "header"}}
    {{ render "@header--progress" header merge=true }}
  {{/content}}

  {{!-- FOOTER --}}
  {{#content "footer"}}
  {{/content}}

  {{!-- MAIN --}}
	{{#content "main"}}
    
    {{ render "@booking-info--fullbleed" booking-info merge=true }}

    <div grid="grid" class="u-mt-space-16">
      <div grid="12 7@lg">
        <div>
          <h1 class="u-typo-level-4 u-color-night-100 u-typo-weight-bold">Scegli il tuo parcheggio</h1>
          <p class="u-typo-level-2 u-mt-space-16">Il costo della sosta è calcolato in base ai dati dichiarati in fase di ricerca. Il costo potrebbe variare in base alla reale durata della sosta.</p>
        </div>
      </div>
    </div>

    <div grid="grid" class="u-mt-space-24 u-mt-space-40@lg">
      <div grid="12 7@lg">
        {{ render "@parkings" }}
      </div>

      <div grid="12 5@lg">
        {{ render "@cart--parkings" cart merge=true }}
      </div>

    </div>

	{{/content}}

  {{!-- SCRIPTS JS --}}
  {{#content "scripts" mode="append"}}
    <script src="{{ path '/js/footer.min.js' }}"></script>
    <script>
      $.tangible.bookingInfo();
      $.tangible.shortcutNavigation();
      // $.tangible.navToolbar();
      
      // initialization flatpickr https://flatpickr.js.org/getting-started/
      // if browser language is italian, set flatpickr language to italian https://flatpickr.js.org/localization/
      var userLang = navigator.language || navigator.userLanguage;
      
      if (userLang == 'it-IT') {
        flatpickr.localize(flatpickr.l10ns.it);
      }
       
      // gestione abiliata/disabilita plugin mobile/desktop
      function flatPickrController() {
        var date_entrance = flatpickr("#entrance-date-time-desktop.js-flatpickr"),
            date_exit = flatpickr("#exit-date-time-desktop.js-flatpickr"),
            mobileBreakPoint = 1024;

            // se la viewport è maggiore di 1024 (display input desktop), inizializzo i flatpickr
            if ($(window).width() > mobileBreakPoint) {

              // parking form - enter
              var date_entrance = flatpickr("#entrance-date-time-desktop.js-flatpickr", {
                dateFormat: "d F Y H:i",
                enableTime: true,
                minDate: "today", 
                minuteIncrement: 15,
                allowInput:true,
                onChange: function(dateStr, dateObj){
                  date_exit.set("minDate", dateObj);
                },
                plugins: [new confirmDatePlugin({
                  confirmText: "Conferma "
                })]
              });

              // parking form - exit
              var date_exit = flatpickr("#exit-date-time-desktop.js-flatpickr", {
                dateFormat: "d F Y H:i",   
                enableTime: true,
                minuteIncrement: 15,
                allowInput:true,
                plugins: [new confirmDatePlugin({
                  confirmText: "Conferma "
                })]
              });

            } else {
              // disabilita il plugin flatpickr, utilizza input normali
              date_entrance.destroy();
              date_exit.destroy();
            }
      }

      // al caricamento e al resize, chiama la funzione che abilita o disabilita il plugin
      $(window).on('load resize', flatPickrController);
      
    // LOGICA FORM PARCHEGGI - set min date
    var $dateInput1 = $("#entrance-date-mobile"),
        $dateInput2 = $("#exit-date-mobile"),
        $dateInputDetail1 = $(".c-time-detail #entrance-date-mobile"),
        $dateInputDetail2 = $(".c-time-detail #exit-date-mobile"),
        $today = new Date().toISOString().split("T")[0];

        $.merge($dateInput1, $dateInput2).attr('min', $today);
        $.merge($dateInputDetail1, $dateInputDetail2).attr('value', $today);   

    // LOGICA FORM PARCHEGGI - validazione
    $("#entrance-date-mobile, #entrance-time-mobile, #exit-date-mobile, #exit-time-mobile").change( function() {

        var $dateInput1 = $("#entrance-date-mobile"),
            $dateInput2 = $("#exit-date-mobile"),
            $timeInput1 = $("#entrance-time-mobile"),
            $timeInput2 = $("#exit-time-mobile"),
            $noteField = $("#parking-form-note");

        var $date1 = new Date($dateInput1.val()),
            $date2 = new Date($dateInput2.val()),
            $dateParse1 = Date.parse($date1),
            $dateParse2 = Date.parse($date2),
            $time1 = $timeInput1.val(),
            $time2 = $timeInput2.val(),
            $entranceData = $dateParse1 + $time1,
            $exitData = $dateParse2 + $time2;

        if ($entranceData >= $exitData) {            
            $noteField.addClass('is-negative');
            $noteField.removeClass('u-visuallyhidden');
        } else {            
            $noteField.removeClass('is-negative');
            $noteField.addClass('u-visuallyhidden');
        }
    })
 
    // CHROME FIX - rimuove e aggiunge gli attributi required per gli input e le select dei form e-commerce
    function checkInputVisibility() {
      // breakpoint desktop-mobile
      var breakPoint = 1024,
          // input mobile
          mobileInput = $('.c-time-detail--mobile input, .c-time-detail--mobile select'),
          // input desktop
          desktopInput = $('.c-time-detail--desktop input, .c-time-detail--desktop select');

        if ($(window).width() > breakPoint) {
          desktopInput.attr('required','required');
          mobileInput.removeAttr('required');
        } else if ($(window).width() < breakPoint){
          desktopInput.removeAttr('required');
          mobileInput.attr('required','required');          
        }
    }

    // al caricamento e al resize della pagina
    $(window).on('resize load', checkInputVisibility);
 
    </script>
  {{/content}}

{{/extend}}