<!DOCTYPE html>
<html lang="en">
    <head>
                    <script>
                window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('consent','default',{'ad_storage':"denied",'ad_user_data':"denied",'ad_personalization':"denied",'analytics_storage':"denied"});
            </script>
                            <script>
                (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer',"GTM-KX4QGTJF");
            </script>
                
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Mowiz - Choose your parking or your way of parking</title>
    <meta name="description" content="With mowiz you can enter the car park and pay automatically for the time you have parked, make a reservation and buy vouchers or monthly subscriptions">
        <link rel="stylesheet" href="https://mowiz.eu/flavour-styles.css">
        <link rel="preload" as="style" href="https://mowiz.eu/build/app.af2756ea.css" /><link rel="stylesheet" href="https://mowiz.eu/build/app.af2756ea.css" />        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" media="all" onload="this.media='all'"/>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
            <link rel="preload" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"/></noscript>

    <link rel="preload" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css"> </noscript>
        <link rel="icon" href="https://mowiz.eu/favicons/mowiz/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://mowiz.eu/favicons/mowiz/favicon.ico" type="image/x-icon">
            </head>
    <body>
                    <!-- Google Tag Manager (noscript) -->
            <noscript><iframe src="https://www.googletagmanager.com/ns.html?id='GTM-KX4QGTJF'"
            height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
            <!-- End Google Tag Manager (noscript) -->
                            <!-- top navbar -->
    <div x-data="{route: window.location.pathname.substring(1)}"
        class="h-12 md:px-10 xl:px-24 font-medium text-white bg-[#616E78] w-full hidden md:flex items-center z-[999]">
        <ul class="uppercase flex w-full justify-end px-6 md:px-0 gap-6 items-center tracking-wider md:text-[12.8px]">
                            <li class="hover:underline underline-offset-[10px] text-[12.8px]"
                :class="window.location.pathname === '/operators' && 'underline underline-offset-[15px]'">
                    <a href=https://mowiz.eu/operators x-ref="operatorslink">operators</a>
                </li>
                        <li>
                                    <div class="relative">
    <div class="relative">
        <select onchange="window.location.href = this.value" class="bg-inherit border border-slate-400 rounded-lg px-4 py-2 pl-8 pr-10 text-inherit focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors appearance-none w-full max-w-xs">
                            <option value="https://mowiz.eu/en?referrer=aparcalia.com" selected class="text-slate-600">
                    English
                </option>
                            <option value="https://mowiz.eu/es?referrer=aparcalia.com"  class="text-slate-600">
                    Español
                </option>
                            <option value="https://mowiz.eu/pt?referrer=aparcalia.com"  class="text-slate-600">
                    Português
                </option>
                            <option value="https://mowiz.eu/ca?referrer=aparcalia.com"  class="text-slate-600">
                    català
                </option>
                            <option value="https://mowiz.eu/de?referrer=aparcalia.com"  class="text-slate-600">
                    Deutsch
                </option>
                    </select>
        <span class="absolute left-2.5 top-1/2 -translate-y-1/2">🌐</span>
    </div>
</div>                            </li>
        </ul>
    </div>

    <!-- navbar -->
    <header class="sticky top-0 z-[900] flex items-center justify-between w-full h-16 px-5 text-sm text-center bg-white border-b text-secondary md:px-10 xl:px-24 print:hidden backdrop-blur">
        <a href=https://mowiz.eu>
            <img src=https://mowiz.eu/images/logo/logo_header_mowiz.svg class="w-36" alt='Mowiz logo' width="140" height="auto"/>
        </a>
        <div class="flex items-center gap-1">
                                        <div x-data="{ isOpen: false }" class="z-50 inline-block font-medium md:hidden">
    <!-- Dropdown toggle button -->
    <button @click="isOpen = !isOpen; document.body.classList.toggle('no-scroll')" class="relative z-50 block -mb-2 border border-transparent rounded-md text-secondary focus:outline-none">
        <span x-show="!isOpen"
        class="material-symbols-rounded notranslate">
            menu
        </span>
        <span x-show="isOpen"
        x-cloak
        class="material-symbols-rounded notranslate">
            close
        </span>
    </button>

    <!-- Dropdown menu -->
    <ul x-show="isOpen"
        @click.away="isOpen = false"
        x-cloak
        @keydown.escape.window="isOpen = false"
        x-transition.top.right
        class="z-40 absolute h-auto w-[70%] top-0 right-0 bg-white rounded-l-md shadow border px-1.5 py-3 text-sm font-normal space-y-1"
    >
        <li>
            <p class="w-fit font-semibold px-2 pt-1.5 pb-2 text-lg cursor-default">My account</p>
        </li>
        <hr/>
                        <li class="transition hover:bg-gray-100 rounded">
            <a href="https://mowiz.eu" class="space-x-2 flex items-center p-2">
                <span class="material-symbols-rounded notranslate icon-size-20">confirmation_number</span>
                <p>Parking reservation</p>
            </a>
        </li>
        <li class="transition hover:bg-gray-100 rounded">
            <a href="https://parquimetro.mowiz.eu" target="_blank" class="space-x-2 flex items-center p-2">
                <span class="material-symbols-rounded notranslate icon-size-20">parking_meter</span>
                <p>Parking meter</p>
            </a>
        </li>
        <li class="transition hover:bg-gray-100 rounded">
            <a href="https://mowiz.eu" class="space-x-2 flex items-center p-2">
                <span class="material-symbols-rounded notranslate icon-size-20">speed_camera</span>
                <p>Automatic access</p>
            </a>
        </li>
        <li class="transition hover:bg-gray-100 rounded">
            <a href="https://mowiz.eu" class="space-x-2 flex items-center p-2">
                <span class="material-symbols-rounded notranslate icon-size-20">book_online</span>
                <p>Vouchers and passes</p>
            </a>
        </li>
        <hr/>
        <li x-data="{ isCountryOpen: false }" @mouseover="isCountryOpen = true" @mouseover.outside="isCountryOpen = false" class="w-fit bg-white text-sm relative">
            <div class="flex items-center space-x-2 p-2 cursor-pointer">
                                <span class="fi-es fis mr-0.5 w-[18px] h-[18px] rounded-full"></span>
                <p>España</p>
                                <span class="material-symbols-rounded notranslate icon-size-20">chevron_right</span>
            </div>
            <div x-cloak x-transition.origin.left x-show="isCountryOpen" class="absolute left-[115px] bottom-0 space-y-1 border rounded-sm p-1.5 bg-white z-[60]">
                                <a href="https://mowiz.eu/pt?referrer=aparcalia.com" @click.stop="isCountryOpen = false" class="flex items-center space-x-2 hover:bg-gray-100 transition rounded p-2 pr-4">
                    <span class="fi-pt w-[18px] h-[18px] rounded-full bg-cover"></span>
                    <p>Portugal</p>
                </a>
                            </div>
        </li>
        <li x-data="{ isLanguageOpen: false }" @mouseover="isLanguageOpen = true" @mouseover.outside="isLanguageOpen = false" class="w-fit bg-white text-sm relative">
                                                <div class="flex items-center space-x-2 p-2 cursor-pointer">
                        <span class="material-symbols-rounded notranslate icon-size-20">language</span>
                        <span class="capitalize ml-1.5">English</span>
                        <span class="material-symbols-rounded notranslate icon-size-20">chevron_right</span>
                    </div>
                                                                                                                                                        <div x-cloak x-transition.origin.left x-show="isLanguageOpen" class="absolute left-[115px] bottom-0 space-y-1 border rounded-sm p-1.5 bg-white z-[60]">
                                    <a @click="isLanguageOpen = false" href="https://mowiz.eu/en?referrer=aparcalia.com" class="block text-start hover:bg-gray-100 transition rounded p-1.5 pr-4">English</a>
                                    <a @click="isLanguageOpen = false" href="https://mowiz.eu/es?referrer=aparcalia.com" class="block text-start hover:bg-gray-100 transition rounded p-1.5 pr-4">Español</a>
                                    <a @click="isLanguageOpen = false" href="https://mowiz.eu/pt?referrer=aparcalia.com" class="block text-start hover:bg-gray-100 transition rounded p-1.5 pr-4">Português</a>
                                    <a @click="isLanguageOpen = false" href="https://mowiz.eu/ca?referrer=aparcalia.com" class="block text-start hover:bg-gray-100 transition rounded p-1.5 pr-4">català</a>
                                    <a @click="isLanguageOpen = false" href="https://mowiz.eu/de?referrer=aparcalia.com" class="block text-start hover:bg-gray-100 transition rounded p-1.5 pr-4">Deutsch</a>
                            </div>
        </li>
        <li class="transition hover:bg-gray-100 rounded">
            <a href="https://mowizsupport-eu.zendesk.com/hc/en-150" target="_blank" class="space-x-2 flex items-center p-2">
                <span class="material-symbols-rounded notranslate icon-size-20">help</span>
                <p>Help</p>
            </a>
        </li>
                <li class="transition bg-secondary text-white hover:brightness-110 rounded">
            <a href="https://mowiz.eu/login?ui_locales=en'"  class="space-x-2 flex items-center p-2">
                <span class="material-symbols-rounded notranslate icon-size-20">login</span>
                <p>Log in</p>
            </a>
        </li>
            </ul>
</div>
                    </div>

        <ul class="items-center hidden md:space-x-4 xl:space-x-7 md:flex text-secondary">
                            <li class="transition hover:underline hover:text-gray-900 w-fit">
                    <a href=https://mowiz.eu/parking>Parking reservation</a>
                </li>
                                        <li class="transition hover:underline hover:text-gray-900 w-fit">
                    <a href="https://parquimetro.mowiz.eu" target="_blank">Parking meter</a>
                </li>
                        
                        <li class=" border border-secondary rounded-full py-0.5 cursor-pointer hover:text-gray-900 hover:border-gray-900 transition">
                <a id="header-login" href='https://mowiz.eu/login?ui_locales=en' class="flex items-center justify-around gap-1 px-3 -ml-2">
                    <span class="material-symbols-rounded notranslate">account_circle</span>
                    <p>Log in</p>
                </a>
            </li>
                    </ul>
    </header>
                <main class="relative flex text-secondary">
                            <script>
    document.addEventListener('DOMContentLoaded', () => {
        
        //error from session
        let error = sessionStorage.getItem("sessionError");
        if(error){
            Swal.fire({
                allowOutsideClick : false,
                icon: 'error',
                text: error,
                confirmButtonText: 'Accept',
                confirmButtonColor: '#f27474',
                customClass: {
                    content: 'sans-serif'
                }
            })
            sessionStorage.removeItem("sessionError");
        }

        
                    });
</script>

                <dialog id="referrer-modal" class="relative w-full p-6 font-light rounded md:max-w-xl text-secondary text-base">
  <span class="close absolute text-gray-400 transition duration-200 ease-in-out cursor-pointer material-symbols-rounded notranslate top-3 right-3 hover:text-secondary">close</span>
  <div class="flex flex-col items-center">
    <div class="flex items-center gap-2 mb-3 pt-2 md:pt-0">
      <h2 class="text-2xl font-medium">Aparcalia is now</h2>
      <img src=https://mowiz.eu/images/logo/logo_header_mowiz.svg alt='Mowiz logo' width="100"/>
    </div>
    <p class="pt-3 pb-5 leading-tight text-center max-w-md" style="text-wrap: pretty">Discover our new website and app, more modern, more intuitive, with the confidence of always, and get 30€ free on your next bookings</p>
    <div class="relative">
      
      <picture>
        <source srcset="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/promo_en.webp" type="image/webp"/>
        <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/promo_sm_en.png" width="300" height="268" alt='promotional app banner' class="shadow-lg rounded-lg max-w-[300px] w-full"/>
      </picture>
      <a href='https://play.google.com/store/apps/details?id=com.mowiz.android' target="_blank">
        <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/badge_google_play_en.svg" alt='google play badge' class="absolute w-[121px] bottom-4 left-6"/>
      </a>
      <a href='https://apps.apple.com/es/app/mowiz/id6446278726' target="_blank">
        <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/badge_app_store_en.svg" alt='app store badge' class="absolute w-28 bottom-4 right-6"/>
      </a>
    </div>
    <p class="py-3 font-medium text-lg text-center">Start booking your parking spaces with mowiz!</p>
  <p class="text-center text-sm"><a href="/login?ui_locales=en'" class="underline text-action hover:brightness-110">Log in here</a> or recover your password if you already have an account or to register as a new user</p>
    <div class="py-2 w-full">
      <button
    type="button"
     id="close-referrer"         class="flex-1 px-4 text-sm font-medium text-white border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed items-center justify-center flex max-h-[40px] h-[40px] min-h-[40px] w-full bg-secondary hover:bg-gray-800 focus:ring-gray-800">    
    <p  id="close-referrer-text"  class="flex items-center gap-2">
                Start using mowiz
    </p>
</button>    </div>
  </div>

</dialog>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const referrerModal = document.getElementById('referrer-modal')
    const closeButtons = document.querySelectorAll('#close-referrer')
    const promoImage = document.getElementById('promo-image')

    const urlParams = new URLSearchParams(window.location.search)

    if (urlParams.get('referrer') == 'aparcalia.com') {
      window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })

      // Delay opening the modal to ensure the scroll has completed
      setTimeout(() => {
        referrerModal.showModal()
        document.body.classList.add('overflow-hidden')
        promoImage.src = "https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/promo_sm_en.png"
      }, 100)
    }

    closeButtons.forEach(closeButton => {
      closeButton.addEventListener('click', () => {
        referrerModal.close()
        document.body.classList.remove('overflow-hidden')

        // Remove the referrer query parameter from the URL
        const url = new URL(window.location.href)
        url.searchParams.delete('referrer')
        history.pushState({}, '', url)
      })
    })
  })
</script>
                <dialog id="llollo-referrer-modal" class="relative w-full p-6 font-light rounded md:max-w-xl text-secondary text-base">
    <span id="close-llollo-modal" class="absolute text-gray-400 transition duration-200 ease-in-out cursor-pointer material-symbols-rounded notranslate top-3 right-3 hover:text-secondary">close</span>
    <div class="flex flex-col items-center">
      <div class="flex items-center gap-2 mb-3 pt-2 md:pt-0">
        <img src=https://mowiz.eu/images/logo/llollo-logo.svg alt='Llollo logo' width="80"/>
        <p class="text-xl font-medium pr-1 h-[24px]">is now</p>
        <img src=https://mowiz.eu/images/logo/logo_header_mowiz.svg alt='Mowiz logo' width="108"/>
      </div>
      <p class="pt-3 pb-5 leading-tight font-normal text-center max-w-md" style="text-wrap: pretty">Discover our new app and website, more modern, more intuitive and with infinite possibilities</p>
      <div class="relative">
        <picture>
          <source srcset="https://mowiz23-static.s3.eu-south-2.amazonaws.com/banners_app/banner2_en.png" type="image/webp"/>
          <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/banners_app/banner2_en.png" width="300" height="268" alt='promotional app banner' class="shadow-lg rounded-lg max-w-[450px] my-3 w-full"/>
        </picture>
      </div>
      <div class="flex items-center justify-center space-x-6 w-full mb-2">
        <a href='https://play.google.com/store/apps/details?id=com.mowiz.android' target="_blank">
            <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/badge_google_play_en.svg" alt='google play badge' class="w-[121px]"/>
        </a>
        <a href='https://apps.apple.com/es/app/mowiz/id6446278726' target="_blank">
            <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/badge_app_store_en.svg" alt='app store badge' class="w-28"/>
        </a>
      </div>  
        <p class="py-3 font-normal max-w-md leading-tight text-center">Start booking your parking spaces with mowiz at airports, train stations and in your city!</p>
        <p class="text-center my-2 font-normal">Click <a href="/login?ui_locales=en'" class="underline text-primary">here</a> to register as a new user</p>
      <div class="py-2 w-full">
        <button
    type="button"
     id="close-llollo-modal"         class="flex-1 px-4 text-sm font-medium text-white border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed items-center justify-center flex max-h-[40px] h-[40px] min-h-[40px] w-full bg-secondary hover:bg-gray-800 focus:ring-gray-800">    
    <p  id="close-llollo-modal-text"  class="flex items-center gap-2">
                Start using mowiz
    </p>
</button>      </div>
    </div>
</dialog>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const llolloReferrerModal = document.getElementById('llollo-referrer-modal')
    const llolloCloseButtons = document.querySelectorAll('#close-llollo-modal')

    const urlParams = new URLSearchParams(window.location.search)

    if (urlParams.get('referrer') == 'llollo.com') {
    window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
    })

    // Delay opening the modal to ensure the scroll has completed
    setTimeout(() => {
        llolloReferrerModal.showModal()
        document.body.classList.add('overflow-hidden')
    }, 100)
    }

    llolloCloseButtons.forEach(closeButton => {
    closeButton.addEventListener('click', () => {
        llolloReferrerModal.close()
        document.body.classList.remove('overflow-hidden')

        // Remove the referrer query parameter from the URL
        const url = new URL(window.location.href)
        url.searchParams.delete('referrer')
        history.pushState({}, '', url)
    })
    })
})
</script>
                                      <div class="fixed bottom-0 z-50 flex items-center justify-center w-screen select-none" x-data="{showCookieBanner: Cookies.get('ec') !== '1'}">
    <section id="cookieBanner" class="w-full p-3 md:p-5 lg:px-24 xl:px-60 bg-secondary" x-show="showCookieBanner" x-cloak>
        <div class="items-center -mx-3 md:flex">
            <div class="px-3 mb-3 md:flex-1 md:mb-0">
                <p class="text-xs font-light leading-tight tracking-wide text-center text-white md:text-left lg:text-sm md:pr-12">To use these Services, we need your consent. By clicking on “Accept all”, you declare your consent to the use of all Services. You can also declare your consent by individually clicking on the sliders for each category of cookies and save.</p>
            </div>
            <div class="px-3 text-center flex flex-col gap-2 md:w-[300px]">
                <button id="accept-all-cookies" class="px-8 py-2 text-sm font-medium tracking-wide text-white rounded shadow-xl bg-primary hover:bg-green-500 accept-all" @click.prevent="showCookieBanner=!showCookieBanner">Accept cookies</button>
                <div class="flex gap-1.5">
                    <button id="cookie-settings" class="w-1/2 py-2 text-sm font-medium tracking-wide text-white bg-gray-800 rounded shadow-xl hover:bg-gray-900" @click.prevent="document.getElementById('cookiesModal').showModal(); document.body.style.overflow = 'hidden'">Configure</button>
                    <button id="reject-all-cookies" class="w-1/2 py-2 text-sm font-medium tracking-wide text-white bg-red-500 rounded shadow-md hover:bg-red-600 reject-all">Reject all cookies</button>
                </div>
                
            </div>
        </div>
    </section>
    <dialog id="cookiesModal" class="w-11/12 max-w-2xl p-0 overflow-hidden md:w-2/3 bg-gray-50 rounded-xl">
        <div class="flex flex-col w-full ">
            <div class="relative flex items-center w-full h-auto px-5 py-3">
                <div class="w-full text-xl font-medium tracking-wide text-center text-secondary">
                    Configure cookies
                </div>
                <button @click.prevent="document.getElementById('cookiesModal').close(); document.body.style.overflow = ''" class="cursor-pointer focus:outline-none text-secondary_light hover:text-secondary absolute right-4 top-3.5">
                    <span class="text-2xl material-symbols-rounded notranslate weight-500">
                        close
                        </span>
                </button>
            </div>
            <div class="max-h-[50vh] overflow-y-auto">
                <div class="flex items-center w-full px-5 py-3 font-medium tracking-wide bg-gray-100 border-b border-gray-200 text-secondary ">
                    <div class="flex-1">
                        <p class="text-sm md:text-base">Strictly necessary cookies</p>
                        <p class="font-light tracking-normal text-gray-500 text-justify text-[11px] md:text-sm">Essential cookies for the basic functioning of our website. These cookies enable core features such as page navigation, secure access to certain areas, and ensuring the website&#039;s overall performance. Without these cookies, our website may not function properly, and you may experience difficulties in accessing certain services.</p>
                    </div>
                    <div class="ml-4 md:ml-10">
                        <input type="checkbox" id="necessary-cookies" class="hidden peer" checked disabled>
                        <label for="necessary-cookies" class="rounded-full w-12 h-7 border border-gray-300 bg-white cursor-not-allowed px-0.5 flex items-center peer-checked:bg-primary peer-checked:justify-end">                         
                            <div class="w-5 h-5 bg-white rounded-full"></div>
                        </label>
                    </div>
                </div>
                <div class="flex items-center w-full px-5 py-3 font-medium tracking-wide bg-gray-100 border-b border-gray-200 text-secondary ">
                    <div class="flex-1">
                        <p class="text-sm md:text-base">Measurement cookies</p>
                        <p class="font-light tracking-normal text-gray-500 text-justify text-[11px] md:text-sm">These cookies help analyze and measure how visitors interact with our website. The information gathered through measurement cookies is used to improve the website&#039;s functionality, optimize its performance, and enhance the overall user experience.</p>
                    </div>
                    <div x-data="{ checked: Cookies.get('mc') === '1' }" class="ml-4 md:ml-10">
                        <input type="checkbox" id="marketing-cookies" class="hidden peer" x-model="checked">
                        <label for="marketing-cookies" class="rounded-full w-12 h-7 border border-gray-300 bg-white cursor-pointer px-0.5 flex items-center peer-checked:bg-primary transition ease-in duration-150 ml-0.5">                         
                            <div x-bind:class="{ 'bg-white translate-x-[1.3rem]': checked, 'bg-gray-300': !checked }" class="w-5 h-5 transition duration-300 ease-in-out rounded-full"></div>
                        </label>
                    </div>
                </div>
                <div class="flex items-center w-full px-5 py-3 font-medium tracking-wide bg-gray-100 border-b border-gray-200 text-secondary ">
                    <div class="flex-1">
                        <p class="text-sm md:text-base">Functional cookies</p>
                        <p class="font-light tracking-normal text-justify text-[11px] md:text-sm text-gray-500">Functional cookies enhance the usability and functionality of our website by remembering your preferences and choices. These cookies enable features such as language selection, font size customization, and personalized content. By accepting functional cookies, you can enjoy a more personalized and convenient browsing experience.</p>
                    </div>
                    <div x-data="{ checked: Cookies.get('fc') === '1' }" class="ml-4 md:ml-10">
                        <input type="checkbox" id="functional-cookies" class="hidden peer" x-model="checked" >
                        <label for="functional-cookies" class="rounded-full w-12 h-7 border border-gray-300 bg-white cursor-pointer px-0.5 flex items-center peer-checked:bg-primary transition ease-in duration-150 ml-0.5">                         
                            <div x-bind:class="{ 'bg-white translate-x-[1.3rem]': checked, 'bg-gray-300': !checked }" class="w-5 h-5 transition duration-300 ease-in-out rounded-full"></div>
                        </label>
                    </div>
                </div>
                <div class="flex items-center w-full px-5 py-3 font-medium tracking-wide bg-gray-100 text-secondary ">
                    <div class="flex-1">
                        <p class="text-sm md:text-base">Performance cookies</p>
                        <p class="font-light tracking-normal text-gray-500 text-justify text-[11px] md:text-sm">Performance cookies help us analyze and improve the performance of our website. These cookies collect anonymous data about how visitors interact with our site, including the pages they visit, the time spent on each page, and any error messages encountered. By accepting performance cookies, you allow us to optimize our website, identify areas for improvement, and enhance your overall browsing experience.</p>
                    </div>
                    <div x-data="{ checked: Cookies.get('pc') === '1' }" class="ml-4 md:ml-10">
                        <input type="checkbox" id="performance-cookies" class="hidden peer" x-model="checked" >
                        <label for="performance-cookies" class="rounded-full w-12 h-7 border border-gray-300 bg-white cursor-pointer px-0.5 flex items-center peer-checked:bg-primary transition ease-in duration-150 ml-0.5">                         
                            <div x-bind:class="{ 'bg-white translate-x-[1.3rem]': checked, 'bg-gray-300': !checked }" class="w-5 h-5 transition duration-300 ease-in-out rounded-full"></div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="flex flex-col items-center justify-center w-full gap-2 px-5 py-3 md:flex-row md:justify-end">
                <div class="flex w-full gap-2 lg:w-auto lg:justify-end">
                    <button id="reject-all-cookies-dialog" class="py-2 leading-tight w-1/2 md:w-[185px] md:px-8 bg-red-500 hover:bg-red-600 text-white rounded font-medium text-sm shadow-md tracking-wide reject-all">Reject all cookies</button>
                    <button id="save-cookie-settings" @click.prevent="document.getElementById('cookiesModal').close(); document.body.style.overflow = ''" class="py-2 leading-tight w-1/2 md:w-[185px] md:px-8 bg-secondary hover:bg-gray-900 text-white rounded font-medium text-sm shadow-md tracking-wide">Save settings</button>
                    <button id="accept-all-cookies-dialog" class="order-1 md:order-3 py-2 leading-tight w-1/2 md:w-[185px] md:px-8 bg-primary hover:brightness-105 text-white rounded font-medium text-sm shadow-md tracking-wide accept-all" @click.prevent="showCookieBanner=false; document.body.style.overflow = ''">Accept all cookies</button>
                </div>
            </div>
        </div>
    </dialog>
</div>

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
<script>
    (function() {
        const COOKIE_EXPIRATION = 365;
        const COOKIE_SAME_SITE = 'Lax';
        const COOKIENAME_MEASUMENT = 'mc';
        const COOKIENAME_FUNCTIONAL = 'fc';
        const COOKIENAME_PERFORMANCE = 'pc';

        function rejectOptionalCookies() {
            Cookies.set(COOKIENAME_MEASUMENT, '0', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE }); // Reject measurement cookies
            Cookies.set(COOKIENAME_FUNCTIONAL, '0', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE }); // Reject functional cookies
            Cookies.set(COOKIENAME_PERFORMANCE, '0', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE }); // Reject performance cookies

            gtag('consent', 'update', {
                'ad_user_data': 'denied',
                'ad_personalization': 'denied',
                'ad_storage': 'denied',
                'analytics_storage': 'denied'
            });
        };
        // Accept all cookies event listener
        const acceptAllCookiesBtns = document.querySelectorAll('.accept-all');

        acceptAllCookiesBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                Cookies.set(COOKIENAME_MEASUMENT, '1', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });
                Cookies.set(COOKIENAME_FUNCTIONAL, '1', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });
                Cookies.set(COOKIENAME_PERFORMANCE, '1', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });

                gtag('consent', 'update', {
                    'ad_user_data': 'granted',
                    'ad_personalization': 'granted',
                    'ad_storage': 'granted',
                    'analytics_storage': 'granted'
                });

                Cookies.set('ec', '1', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });
                document.getElementById('cookiesModal').close();
            });
        });

        // Configure cookies event listener
        const marketingCookiesCheckbox = document.getElementById('marketing-cookies');
        const functionalCookiesCheckbox = document.getElementById('functional-cookies');
        const performanceCookiesCheckbox = document.getElementById('performance-cookies');

        marketingCookiesCheckbox.checked = Cookies.get(COOKIENAME_MEASUMENT) === '1';
        functionalCookiesCheckbox.checked = Cookies.get(COOKIENAME_FUNCTIONAL) === '1';
        performanceCookiesCheckbox.checked = Cookies.get(COOKIENAME_PERFORMANCE) === '1';

        const saveCookieSettingsBtn = document.getElementById('save-cookie-settings');

        saveCookieSettingsBtn.addEventListener('click', () => {
            if (document.getElementById('marketing-cookies').checked) {
                Cookies.set(COOKIENAME_MEASUMENT, '1', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });

                gtag('consent', 'update', {
                    'analytics_storage': 'granted'
                });
            } else {
                Cookies.set(COOKIENAME_MEASUMENT, '0', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });

                gtag('consent', 'update', {
                    'analytics_storage': 'denied'
                });
            };

            if (document.getElementById('functional-cookies').checked) {
                Cookies.set(COOKIENAME_FUNCTIONAL, '1', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });
            } else {
                Cookies.set(COOKIENAME_FUNCTIONAL, '0', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });
            };

            if (document.getElementById('performance-cookies').checked) {
                Cookies.set(COOKIENAME_PERFORMANCE, '1', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });

                gtag('consent', 'update', {
                    'ad_user_data': 'granted',
                    'ad_personalization': 'granted',
                    'ad_storage': 'granted',
                });
            } else {
                Cookies.set(COOKIENAME_PERFORMANCE, '0', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });

                gtag('consent', 'update', {
                    'ad_user_data': 'denied',
                    'ad_personalization': 'denied',
                    'ad_storage': 'denied',
                });
            }
            Cookies.set('ec', '1', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });
        })

        const rejectAllCookiesBtn = document.querySelectorAll('.reject-all');

        rejectAllCookiesBtn.forEach(button => {
            button.addEventListener('click', () => {
                rejectOptionalCookies();
                Cookies.set('ec', '1', { expires: COOKIE_EXPIRATION, sameSite: COOKIE_SAME_SITE });
                document.getElementById('cookiesModal').close();
                document.getElementById('cookieBanner').classList.add('hidden');
            });
        });
    })();
</script>
                                        <div class="relative w-full overflow-clip">
                
<section class="flex flex-col justify-between md:justify-around bg-hero-pattern h-[calc(83vh-63px)] md:h-[calc(90vh-110px)] relative py-5 md:py-0 px-5 md:px-20">
    <div class="flex justify-center md:justify-between items-start">
        <div class="flex flex-col gap-3 md:gap-2 lg:gap-3 w-full">
            <h1 class="text-5xl md:text-6xl 3xl:text-7xl 4xl:text-8xl text-white font-bold">Change the rules!</h1>
            <h2 class="text-2xl lg:text-3xl 3xl:text-4xl 4xl:text-5xl text-white font-medium md:px-4 py-1 w-fit">Parkings and parking meters in your city</h2>
        </div>
        <div class="bg-white cursor-default pb-2 lg:pb-4 px-3 pt-2 overflow-clip rounded-md hidden md:block">
            <p class="font-medium text-magenta text-center text-lg text-nowrap">Download the app</p>
            <img src='https://mowiz.eu/images/nfc/mowiz-qr.svg' alt='mowiz qr' width="200" height="200"/>
        </div>
    </div>
    <div class="flex flex-col gap-2 w-full mx-auto md:-mt-4 4xl:max-w-[70%]">
        <ul class="flex flex-wrap items-center justify-start gap-2 text-sm md:ml-6">
            <li class="select-none shadow">
                <input type="checkbox" id="airport" value="airport" class="sr-only peer" name="demand-vector">
                <label for="airport" class="inline-flex items-center justify-around px-3 py-1 transition ease-in-out bg-white border border-transparent rounded-md cursor-pointer text-secondary peer-checked:border-primary peer-hover:border-primary peer-checked:bg-primary peer-checked:text-white">
                    <div class="inline-flex items-center gap-2">
                        <span class="material-symbols-rounded notranslate">
                            flight_takeoff
                            </span>
                        <div class="w-full font-medium">Airport</div>
                    </div>
                </label>
            </li>
            <li class="select-none shadow">
                <input type="checkbox" id="train_station" value="train" class="sr-only peer" name="demand-vector">
                <label for="train_station" class="inline-flex items-center justify-around px-3 py-1 transition ease-in-out bg-white border border-transparent rounded-md cursor-pointer text-secondary peer-checked:border-primary peer-hover:border-primary peer-checked:bg-primary peer-checked:text-white">
                    <div class="inline-flex items-center gap-2">
                        <span class="material-symbols-rounded notranslate">
                            train
                            </span>
                        <div class="w-full font-medium">Station</div>
                    </div>
                </label>
            </li>
            <li class="select-none shadow">
                <input type="checkbox" id="city" value="city" class="sr-only peer" name="demand-vector">
                <label for="city" class="inline-flex items-center justify-around px-3 py-1 transition ease-in-out bg-white border border-transparent rounded-md cursor-pointer text-secondary peer-checked:border-primary peer-hover:border-primary peer-checked:bg-primary peer-checked:text-white">
                    <div class="inline-flex items-center gap-2">
                        <span class="material-symbols-rounded notranslate">
                            emoji_transportation
                            </span>
                        <div class="w-full font-medium">City</div>
                    </div>
                </label>
            </li>
            <li class="select-none shadow">
                <input type="checkbox" id="port" value="port" class="sr-only peer" name="demand-vector">
                <label for="port" class="inline-flex items-center justify-around px-3 py-1 transition ease-in-out bg-white border border-transparent rounded-md cursor-pointer text-secondary peer-checked:border-primary peer-hover:border-primary peer-checked:bg-primary peer-checked:text-white">
                    <div class="inline-flex items-center gap-2">
                        <span class="material-symbols-rounded notranslate">
                            directions_boat
                            </span>
                        <div class="w-full font-medium">Port</div>
                    </div>
                </label>
            </li>
        </ul>
        <div class="rounded md:rounded-full bg-white px-3 py-3 md:py-2 flex flex-col md:flex-row items-center shadow">
            <div x-data="selectConfigs()" x-init="initSelectConfigs()" x-ref="selectConfigsComponent" class="relative flex flex-col items-center flex-1 w-full md:w-auto">
                <div class="w-full">
                    <div @click.away="close()" class="flex items-center w-full p-1 bg-white">
                        <input
                            x-model="filter"
                            x-transition:leave="transition ease-in duration-100"
                            x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0"
                            @mousedown="open()"
                            @keydown.enter.stop.prevent="selectOption()"
                            @keydown.arrow-up.prevent="focusPrevOption()"
                            @keydown.arrow-down.prevent="focusNextOption()"
                            placeholder="Parking, place or city"
                            class="tracking-wide w-full p-1 text-gray-800 outline-none appearance-none location" />
                    </div>
                </div>
                <div x-show="isOpen()" class="absolute shadow bg-white top-full z-[999] w-full left-0 rounded max-h-[200px] overflow-y-auto text-secondary">
                    <div class="flex flex-col w-full">
                        <template x-for="(option, index) in filteredOptions()" :key="index">
                            <div @click="onOptionClick(index)" :class="classOption(option, index)" :aria-selected="focusedOptionIndex === index">
                                <div class="relative flex items-center w-full px-2 py-3 border-l-2 border-transparent hover:border-teal-100">
                                    <div class="flex items-center w-full">
                                        <div class="mx-2">
                                            <span x-text="getOptionText(option)"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <input type='hidden' x-model="selected.id" id="vectorId"/>
                <input type='hidden' id="demandVectorSelected"/>
            </div>
            <div class="flex flex-col md:flex-row items-center w-full md:w-auto pl-2 justify-between gap-3 md:gap-0 md:justify-normal md:pl-0">
                <div class="flex flex-col md:flex-row gap-3 md:gap-0 mt-2 md:mt-0 items-center w-full md:w-auto xl:w-[600px] xl:justify-around">
                    <div class="md:pl-2 w-full md:w-auto">
                                                <h3 class="text-gray-400 md:-mt-1 md:mb-1">Entry</h3>
                        <div x-data x-init="initFlatpickr()" class="flex justify-between gap-2">
                            <div class="flex items-center bg-white flex-1">
                                <span class="material-symbols-rounded notranslate text-gray-400 icon-size-20 -mt-1">calendar_month</span>
                                <input type="text" id="entry-date" name="entry-date" aria-label="Entry date" class="pl-1.5 font-normal tracking-wide cursor-pointer text-secondary focus:outline-none w-full md:w-24 checkIn"/>
                            </div>
                            <div class="flex items-center">
                                <span class="material-symbols-rounded notranslate text-gray-400 icon-size-20 -mt-0.5">schedule</span>
                                <select id="entry-time" aria-label="Entry time" class="border-none w-[70px] p-0 pr-5 font-normal tracking-wide text-center border rounded cursor-pointer text-secondary outline-none">
                                                                            <option value="00:00">00:00</option>
                                                                            <option value="00:15">00:15</option>
                                                                            <option value="00:30">00:30</option>
                                                                            <option value="00:45">00:45</option>
                                                                            <option value="01:00">01:00</option>
                                                                            <option value="01:15">01:15</option>
                                                                            <option value="01:30">01:30</option>
                                                                            <option value="01:45">01:45</option>
                                                                            <option value="02:00">02:00</option>
                                                                            <option value="02:15">02:15</option>
                                                                            <option value="02:30">02:30</option>
                                                                            <option value="02:45">02:45</option>
                                                                            <option value="03:00">03:00</option>
                                                                            <option value="03:15">03:15</option>
                                                                            <option value="03:30">03:30</option>
                                                                            <option value="03:45">03:45</option>
                                                                            <option value="04:00">04:00</option>
                                                                            <option value="04:15">04:15</option>
                                                                            <option value="04:30">04:30</option>
                                                                            <option value="04:45">04:45</option>
                                                                            <option value="05:00">05:00</option>
                                                                            <option value="05:15">05:15</option>
                                                                            <option value="05:30">05:30</option>
                                                                            <option value="05:45">05:45</option>
                                                                            <option value="06:00">06:00</option>
                                                                            <option value="06:15">06:15</option>
                                                                            <option value="06:30">06:30</option>
                                                                            <option value="06:45">06:45</option>
                                                                            <option value="07:00">07:00</option>
                                                                            <option value="07:15">07:15</option>
                                                                            <option value="07:30">07:30</option>
                                                                            <option value="07:45">07:45</option>
                                                                            <option value="08:00">08:00</option>
                                                                            <option value="08:15">08:15</option>
                                                                            <option value="08:30">08:30</option>
                                                                            <option value="08:45">08:45</option>
                                                                            <option value="09:00">09:00</option>
                                                                            <option value="09:15">09:15</option>
                                                                            <option value="09:30">09:30</option>
                                                                            <option value="09:45">09:45</option>
                                                                            <option value="10:00">10:00</option>
                                                                            <option value="10:15">10:15</option>
                                                                            <option value="10:30">10:30</option>
                                                                            <option value="10:45">10:45</option>
                                                                            <option value="11:00">11:00</option>
                                                                            <option value="11:15">11:15</option>
                                                                            <option value="11:30">11:30</option>
                                                                            <option value="11:45">11:45</option>
                                                                            <option value="12:00">12:00</option>
                                                                            <option value="12:15">12:15</option>
                                                                            <option value="12:30">12:30</option>
                                                                            <option value="12:45">12:45</option>
                                                                            <option value="13:00">13:00</option>
                                                                            <option value="13:15">13:15</option>
                                                                            <option value="13:30">13:30</option>
                                                                            <option value="13:45">13:45</option>
                                                                            <option value="14:00">14:00</option>
                                                                            <option value="14:15">14:15</option>
                                                                            <option value="14:30">14:30</option>
                                                                            <option value="14:45">14:45</option>
                                                                            <option value="15:00">15:00</option>
                                                                            <option value="15:15">15:15</option>
                                                                            <option value="15:30">15:30</option>
                                                                            <option value="15:45">15:45</option>
                                                                            <option value="16:00">16:00</option>
                                                                            <option value="16:15">16:15</option>
                                                                            <option value="16:30">16:30</option>
                                                                            <option value="16:45">16:45</option>
                                                                            <option value="17:00">17:00</option>
                                                                            <option value="17:15">17:15</option>
                                                                            <option value="17:30">17:30</option>
                                                                            <option value="17:45">17:45</option>
                                                                            <option value="18:00">18:00</option>
                                                                            <option value="18:15">18:15</option>
                                                                            <option value="18:30">18:30</option>
                                                                            <option value="18:45">18:45</option>
                                                                            <option value="19:00">19:00</option>
                                                                            <option value="19:15">19:15</option>
                                                                            <option value="19:30">19:30</option>
                                                                            <option value="19:45">19:45</option>
                                                                            <option value="20:00">20:00</option>
                                                                            <option value="20:15">20:15</option>
                                                                            <option value="20:30">20:30</option>
                                                                            <option value="20:45">20:45</option>
                                                                            <option value="21:00">21:00</option>
                                                                            <option value="21:15">21:15</option>
                                                                            <option value="21:30">21:30</option>
                                                                            <option value="21:45">21:45</option>
                                                                            <option value="22:00">22:00</option>
                                                                            <option value="22:15">22:15</option>
                                                                            <option value="22:30">22:30</option>
                                                                            <option value="22:45">22:45</option>
                                                                            <option value="23:00">23:00</option>
                                                                            <option value="23:15">23:15</option>
                                                                            <option value="23:30">23:30</option>
                                                                            <option value="23:45">23:45</option>
                                                                    </select>
                            </div>
                        </div>
                    </div>
                    <span class="hidden md:block material-symbols-rounded notranslate text-secondary mx-4">arrow_forward</span>
                    <div class="md:pl-3 md:pr-2 w-full md:w-auto">
                                                <h3 class="text-gray-400 md:-mt-1 md:mb-1">Exit</h3>
                        <div x-data x-init="initFlatpickr()" class="flex justify-between gap-2">
                            <div class="flex items-center bg-white flex-1">
                                <span class="material-symbols-rounded notranslate text-gray-400 icon-size-20 -mt-1">calendar_month</span>
                                <input type="text" id="exit-date" name="exit-date" aria-label="Exit date" class="pl-1.5 font-normal tracking-wide cursor-pointer text-secondary focus:outline-none md:w-24 checkOut w-full"/>
                            </div>
                            <div class="flex items-center">
                                <span class="material-symbols-rounded notranslate text-gray-400 icon-size-20 -mt-0.5">schedule</span>
                                <select id="exit-time" aria-label="Exit time" class="border-none w-[70px] p-0 pr-5 font-normal tracking-wide text-center border rounded cursor-pointer text-secondary outline-none">
                                                                            <option value="00:00">00:00</option>
                                                                            <option value="00:15">00:15</option>
                                                                            <option value="00:30">00:30</option>
                                                                            <option value="00:45">00:45</option>
                                                                            <option value="01:00">01:00</option>
                                                                            <option value="01:15">01:15</option>
                                                                            <option value="01:30">01:30</option>
                                                                            <option value="01:45">01:45</option>
                                                                            <option value="02:00">02:00</option>
                                                                            <option value="02:15">02:15</option>
                                                                            <option value="02:30">02:30</option>
                                                                            <option value="02:45">02:45</option>
                                                                            <option value="03:00">03:00</option>
                                                                            <option value="03:15">03:15</option>
                                                                            <option value="03:30">03:30</option>
                                                                            <option value="03:45">03:45</option>
                                                                            <option value="04:00">04:00</option>
                                                                            <option value="04:15">04:15</option>
                                                                            <option value="04:30">04:30</option>
                                                                            <option value="04:45">04:45</option>
                                                                            <option value="05:00">05:00</option>
                                                                            <option value="05:15">05:15</option>
                                                                            <option value="05:30">05:30</option>
                                                                            <option value="05:45">05:45</option>
                                                                            <option value="06:00">06:00</option>
                                                                            <option value="06:15">06:15</option>
                                                                            <option value="06:30">06:30</option>
                                                                            <option value="06:45">06:45</option>
                                                                            <option value="07:00">07:00</option>
                                                                            <option value="07:15">07:15</option>
                                                                            <option value="07:30">07:30</option>
                                                                            <option value="07:45">07:45</option>
                                                                            <option value="08:00">08:00</option>
                                                                            <option value="08:15">08:15</option>
                                                                            <option value="08:30">08:30</option>
                                                                            <option value="08:45">08:45</option>
                                                                            <option value="09:00">09:00</option>
                                                                            <option value="09:15">09:15</option>
                                                                            <option value="09:30">09:30</option>
                                                                            <option value="09:45">09:45</option>
                                                                            <option value="10:00">10:00</option>
                                                                            <option value="10:15">10:15</option>
                                                                            <option value="10:30">10:30</option>
                                                                            <option value="10:45">10:45</option>
                                                                            <option value="11:00">11:00</option>
                                                                            <option value="11:15">11:15</option>
                                                                            <option value="11:30">11:30</option>
                                                                            <option value="11:45">11:45</option>
                                                                            <option value="12:00">12:00</option>
                                                                            <option value="12:15">12:15</option>
                                                                            <option value="12:30">12:30</option>
                                                                            <option value="12:45">12:45</option>
                                                                            <option value="13:00">13:00</option>
                                                                            <option value="13:15">13:15</option>
                                                                            <option value="13:30">13:30</option>
                                                                            <option value="13:45">13:45</option>
                                                                            <option value="14:00">14:00</option>
                                                                            <option value="14:15">14:15</option>
                                                                            <option value="14:30">14:30</option>
                                                                            <option value="14:45">14:45</option>
                                                                            <option value="15:00">15:00</option>
                                                                            <option value="15:15">15:15</option>
                                                                            <option value="15:30">15:30</option>
                                                                            <option value="15:45">15:45</option>
                                                                            <option value="16:00">16:00</option>
                                                                            <option value="16:15">16:15</option>
                                                                            <option value="16:30">16:30</option>
                                                                            <option value="16:45">16:45</option>
                                                                            <option value="17:00">17:00</option>
                                                                            <option value="17:15">17:15</option>
                                                                            <option value="17:30">17:30</option>
                                                                            <option value="17:45">17:45</option>
                                                                            <option value="18:00">18:00</option>
                                                                            <option value="18:15">18:15</option>
                                                                            <option value="18:30">18:30</option>
                                                                            <option value="18:45">18:45</option>
                                                                            <option value="19:00">19:00</option>
                                                                            <option value="19:15">19:15</option>
                                                                            <option value="19:30">19:30</option>
                                                                            <option value="19:45">19:45</option>
                                                                            <option value="20:00">20:00</option>
                                                                            <option value="20:15">20:15</option>
                                                                            <option value="20:30">20:30</option>
                                                                            <option value="20:45">20:45</option>
                                                                            <option value="21:00">21:00</option>
                                                                            <option value="21:15">21:15</option>
                                                                            <option value="21:30">21:30</option>
                                                                            <option value="21:45">21:45</option>
                                                                            <option value="22:00">22:00</option>
                                                                            <option value="22:15">22:15</option>
                                                                            <option value="22:30">22:30</option>
                                                                            <option value="22:45">22:45</option>
                                                                            <option value="23:00">23:00</option>
                                                                            <option value="23:15">23:15</option>
                                                                            <option value="23:30">23:30</option>
                                                                            <option value="23:45">23:45</option>
                                                                    </select>
                            </div>
                        </div>
                    </div>
                </div>
                <button id="search-btn" type="button" class="flex flex-col items-center justify-center w-full md:w-14 h-9 md:h-14 rounded md:rounded-full bg-primary text-white hover:brightness-105 transition font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                    <span id="search-btn-text" class="invisible md:visible h-0 md:h-fit material-symbols-rounded notranslate weight-500">search</span>
                    <p class="md:hidden text-white font-medium text-center">Search parking</p>
                </button>
            </div>
        </div>
    </div>
</section>

<script>
    const startDateInput = document.getElementById('entry-date');
    const endDateInput = document.getElementById('exit-date');
    const startTimeInput = document.getElementById('entry-time');
    const endTimeInput = document.getElementById('exit-time');
    const vehicleType = document.getElementsByName('vehicle-type');
    const demandVectorType = document.getElementsByName('demand-vector');
    const selectedVector = document.getElementById('vectorId');
    const priceRangeValue = document.getElementById('price-range');
    const radiusRangeValue = document.getElementById('radius-range');
    const sortBy = document.getElementsByName('sort-by');
    const searchBtn = document.getElementById('search-btn');
    const searchBtnText = document.getElementById('search-btn-text');
    const retarificateBtn = document.getElementById('retarificate-btn');
    const retarificateBtnText = document.getElementById('retarificate-btn-text');
    const searchbox = document.getElementById('parking-searchbox');
    const dashedName = document.getElementById('dashed-parking-name');
    const dashedId = document.getElementById('dashed-parking-id');
    const priceRange = document.getElementById('price-range');
    const priceRangeText = document.getElementById('price-range-text');
    const radiusRange = document.getElementById('radius-range');
    const radiusRangeText = document.getElementById('radius-range-text');
    const demandVectors = document.getElementsByName('demand-vector');

    function buildSearchURL(startDateTime, endDateTime, demandVector, vectorId, sortedBy, vehicle, priceRange, radiusRange) {
        let searchURL = `startAt=${startDateTime}&endAt=${endDateTime}`

        if (demandVector) {
            searchURL += `&demandVector=${demandVector}`
        }

        if (vectorId) {
            searchURL += `&vectorId=${vectorId}`
        }

        if (sortedBy) {
            searchURL += `&sort=${sortedBy}`
        }

        if (vehicle) {
            searchURL += `&vehicle-type=${vehicle}`
        }

        if (priceRange && priceRange !== '0') {
            searchURL += `&priceRange=${priceRange}`
        }

        if (radiusRange && radiusRange !== '0') {
            searchURL += `&radiusRange=${radiusRange}`
        }

        return searchURL
    }

    function parkingSearch() {
        const demandVector = Array.from(document.querySelectorAll('input[name="demand-vector"]:checked')).map(input => input.value);
        const vectorId = selectedVector ? selectedVector.value : null
        const sortedBy = Array.from(sortBy).find(sortedBy => sortedBy.checked) ? Array.from(sortBy).find(sortedBy => sortedBy.checked).value : null
        const vehicle = Array.from(vehicleType).find(vehicle => vehicle.checked) ? Array.from(vehicleType).find(vehicle => vehicle.checked).value : null
        const startDateTimeInput = $('#entry-time option').filter(':selected').val();
        const endDateTimeInput =  $('#exit-time option').filter(':selected').val();
        const url = window.location.origin
        const parkingId = document.getElementById('dashed-parking-id') ? document.getElementById('dashed-parking-id').value : null
        const parkingName = document.getElementById('dashed-parking-name') ? document.getElementById('dashed-parking-name').value : null
        const rangePrice = priceRangeValue ? priceRangeValue.value : null
        const rangeRadius = radiusRangeValue ? radiusRangeValue.value : null
        const startAt = startDateInput.value
        const endAt = endDateInput.value
        const startDateTime = buildDateTimeWithoutTimezone(startAt, startDateTimeInput)
        const endDateTime = buildDateTimeWithoutTimezone(endAt, endDateTimeInput)

        // Start data layer code
        const parkingData = {
            'checkboxValues': demandVector,
            'checkIn': startDateTime,
            'checkOut': endDateTime,
            'location': vectorId,
            'city': demandVector.includes('city'),
            'train': demandVector.includes('train'),
            'port': demandVector.includes('port'),
            'airport': demandVector.includes('airport')
        };

        // Enviar datos al dataLayer
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'BookProcess',
            'parkingData': parkingData
        });
        // End data layer code

        const dashedParkingIdName = parkingId + '-' + parkingName

        const searchURL = buildSearchURL(startDateTime, endDateTime, demandVector, vectorId, sortedBy, vehicle, rangePrice, rangeRadius)
        toggleButtonLoadingState(searchBtn, searchBtnText, true)

        if (parkingId !== null) {
            window.location = 'https://mowiz.eu/parking' + `/${dashedParkingIdName}?` + searchURL
        } else {
            window.location = 'https://mowiz.eu/parking' + '?' + searchURL
        }
    }

    searchBtn && searchBtn.addEventListener('click', parkingSearch)
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            parkingSearch()
        }
    })

    function getDates() {
        const startDateTimeInput = document.querySelector("#entry-date")._flatpickr.altInput;
        const endDateTimeInput =  document.querySelector("#exit-date")._flatpickr.altInput;
        const startDateTimeInputDesktop = $('#entry-time option').filter(':selected').val();
        const endDateTimeInputDesktop =  $('#exit-time option').filter(':selected').val();
        const startAt = startDateInput.value
        const endAt = endDateInput.value
        const startDateTime = buildDateTimeWithoutTimezone(startAt, startDateTimeInputDesktop)
        const endDateTime = buildDateTimeWithoutTimezone(endAt, endDateTimeInputDesktop)

        return {
            startDateTime,
            endDateTime
        }
    }

    function initFlatpickr() {
        // Get URL parameters to populate dates after a search
        const urlParams = new URLSearchParams(window.location.search)
        const summaryStart = document.getElementById('summary-date-start')
        const summaryEnd = document.getElementById('summary-date-end')
        const locale = 'en'

        let startAtParam
        let endAtParam

        if (urlParams.get('startAt')) {
            startAtParam = urlParams.get('startAt')
        } else if (summaryStart) {
            const start = summaryStart.getAttribute('data-start')
            startAtParam = start
        } else {
            startAtParam = null
        }

        if (urlParams.get('endAt')) {
            endAtParam = urlParams.get('endAt')
        } else if (summaryEnd) {
            const start = summaryEnd.getAttribute('data-end')
            endAtParam = start
        } else {
            endAtParam = null
        }

        const today = new Date()
        const minDate = today
        const nextDay = new Date(today)
        nextDay.setDate(today.getDate() + 1)
        const dayAfterTomorrow = new Date(today)
        dayAfterTomorrow.setDate(today.getDate() + 2)

        const dateInputStart = flatpickr('#entry-date', {
            locale: locale,
            minDate: 'today',
            altInput: true,
            defaultDate: startAtParam ? startAtParam : nextDay,
            altFormat: 'd/m/Y',
            dateFormat: 'Y-m-dT',
            onChange: function (selectedDates) {
                const startDateTimeInput = document.querySelector("#entry-date")._flatpickr.altInput;
                startDateTimeInput.classList.remove('border-red-500');
                // Set minDate for exit based on the selected date in entry
                const minEndDate = selectedDates[0];
                const today = new Date();
                flatpickr('#exit-date', {
                    locale: locale,
                    minDate: minEndDate,
                    altInput: true,
                    defaultDate: endAtParam ? endAtParam : dayAfterTomorrow,
                    altFormat: 'd/m/Y',
                    dateFormat: 'Y-m-dT',
                    onChange: function (selectedDates) {
                        const endDateTimeInput = document.querySelector("#exit-date")._flatpickr.altInput;
                        endDateTimeInput.classList.remove('border-red-500');
                    }
                })
            }
        });

        const dateInputEnd = flatpickr('#exit-date', {
            locale: locale,
            minDate: 'today',
            altInput: true,
            defaultDate: endAtParam ? endAtParam : dayAfterTomorrow,
            altFormat: 'd/m/Y',
            dateFormat: 'Y-m-dT',
            onChange: function (selectedDates) {
                const endDateTimeInput = document.querySelector("#exit-date")._flatpickr.altInput;
                endDateTimeInput.classList.remove('border-red-500');
            }
        });

        document.querySelectorAll('.flatpickr-weekday').forEach(function(element) {
            element.classList.add('notranslate');
        });
    }

    // URL parameter handle after search
    document.addEventListener('DOMContentLoaded', () => {
        let startAtParam;
        let endAtParam;

        if (searchBtn) {
            toggleButtonLoadingState(searchBtn, searchBtnText, false)
        } else if (retarificateBtn) {
            toggleButtonLoadingState(retarificateBtn, retarificateBtnText, false)
        }

        const urlParams = new URLSearchParams(window.location.search)
        const summaryStart = document.getElementById('summary-date-start')
        const summaryEnd = document.getElementById('summary-date-end')

        if (urlParams.get('productType')) {
            const product = Array.from(productType).find(product => product.value === urlParams.get('productType'))

            if (product) {
                product.checked = true
            }
        }

        if (urlParams.get('vehicle-type')) {
            const vehicle = Array.from(vehicleType).find(vehicle => vehicle.value === urlParams.get('vehicle-type'))

            if (vehicle) {
                vehicle.checked = true
            }
        }

        if (urlParams.get('demandVector')) {
            const demandVector = Array.from(demandVectorType).find(demandVector => demandVector.value === urlParams.get('demandVector'))

            if (demandVector) {
                demandVector.checked = true
            }
        }

        if (urlParams.get('radiusRange')) {
            const radiusValue = urlParams.get('radiusRange')

            if (radiusValue && radiusRangeValue) {
                radiusRangeValue.value = radiusValue
                document.getElementById('radius-range-text').textContent = `${radiusValue} km`
            }
        }

        if (urlParams.get('priceRange')) {
            const priceValue = urlParams.get('priceRange')

            if (priceValue && priceRangeValue) {
                priceRangeValue.value = priceValue
                document.getElementById('price-range-text').textContent = `0-${priceValue} €`
            }
        }

        if (urlParams.get('startAt') || summaryStart && summaryStart.getAttribute('data-start')) {
            const timeStart = urlParams.get('startAt') ? new Date(urlParams.get('startAt')) : new Date(summaryStart.getAttribute('data-start'));
            startAtParam = timeStart.toLocaleTimeString('en-GB', {hour: "2-digit", minute: "2-digit"});
        } else {
            startAtParam = '09:00'
        }

        $('#entry-time').val(startAtParam);

        if (urlParams.get('endAt') || summaryEnd && summaryEnd.getAttribute('data-end')) {
            let timeEnd = urlParams.get('endAt') ? new Date(urlParams.get('endAt')) : new Date(summaryEnd.getAttribute('data-end'));
            endAtParam = timeEnd.toLocaleTimeString('es-ES', {hour: "2-digit", minute: "2-digit"});
        } else {
            endAtParam = '09:00'
        }
        $('#exit-time').val(endAtParam);
    })

    priceRange && priceRange.addEventListener('input', () => {
        if (priceRange.value == 0) {
            priceRangeText.classList.add('hidden')
        } else {
            priceRangeText.textContent = `0 - ${priceRange.value} €`
            priceRangeText.classList.remove('hidden')
        }
    })

    radiusRange && radiusRange.addEventListener('input', () => {
        if (radiusRange.value == 0) {
            radiusRangeText.classList.add('hidden')
        } else {
            radiusRangeText.textContent = `${radiusRange.value} km`
            radiusRangeText.classList.remove('hidden')
        }
    })

    demandVectors && demandVectors.forEach(vector => {
        vector.addEventListener('click', () => {
            const vectorId = vector.id
            checkboxState[vectorId.toUpperCase()] = vector.checked
            updateOptions()
        })
    })

    const checkboxState = {
        AIRPORT: false,
        TRAIN_STATION: false,
        CITY: false,
        PORT: false,
    }

    const vectorsList = {"AIRPORT":[{"id":2,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":38.287089938488,"longitude":-0.55685869438173},"name":"Alicante-Elche Airport","description":"<p>Parking Aeropuerto Alicante - El Altet Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci&oacute;n gratuita<\/p>"},{"id":3,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.845354,"longitude":-2.371588},"name":"Almeria Airport","description":"<p>Parking Aeropuerto Almer&iacute;a Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci&oacute;n gratuita<\/p>"},{"id":6,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.30875445170544,"longitude":2.07768742612636},"name":"Barcelona-El Prat Airport","description":"<p>Parking Aeropuerto Barcelona - El Prat Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci\u00f3n gratuita<\/p>"},{"id":10,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.184800802931,"longitude":-3.7769421951065},"name":"Granada-Ja\u00e9n Airport","description":"<p>Parking Aeropuerto Granada - Federico Garc&iacute;a Lorca Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci&oacute;n gratuita<\/p>"},{"id":19,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.30278789999999,"longitude":-2.9139544},"name":"Bilbao Airport","description":"<p>Parking Aeropuerto Bilbao - La Paloma - Loiu Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci\u00f3n gratuita<\/p>"},{"id":21,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.4781875,"longitude":-3.5636875},"name":"Madrid-Barajas Airport","description":"<p>Parking Aeropuerto Madrid - Barajas Larga Estancia. Traslados Gratuitos hasta la terminal t1, t2, t3 y t4. Mejor Precio Garantizado. Cancelaci&oacute;n gratuita<\/p>"},{"id":24,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.67750618621,"longitude":-4.492464232788},"name":"Malaga Airport","description":"<p>Parking Aeropuerto M&aacute;laga Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci&oacute;n gratuita<\/p>"},{"id":28,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.806062876072,"longitude":-1.1327174711304},"name":"Murcia-Corvera Airport","description":"<p>Parking Aeropuerto Murcia - San Javier Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci&oacute;n gratuita<\/p>"},{"id":29,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.552301861549,"longitude":2.7379561746215},"name":"Palma de Mallorca Airport","description":"<p>Parking Aeropuerto Palma de Mallorca - Son Sant Joan Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci&oacute;n gratuita<\/p>"},{"id":43,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.490032678654,"longitude":-0.47427915072626},"name":"Valencia Airport","description":"<p>Parking Aeropuerto Valencia - Manises Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci&oacute;n gratuita<\/p>"},{"id":45,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":42.22389378966579,"longitude":-8.633580687866273},"name":"Vigo Airport","description":"<p>Parking Aeropuerto Vigo - Peinador Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci\u00f3n gratuita<\/p>"},{"id":182,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.2414479,"longitude":-8.6786555},"name":"Oporto-Francisco S\u00e1 Carneiro Airport","description":"<p>Parking Aeropuerto Oporto - Franciso S&aacute; Carneiro Larga Estancia. Traslados Gratuitos hasta la terminal. Mejor Precio Garantizado. Cancelaci&oacute;n gratuita<\/p>"},{"id":183,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":38.7800385,"longitude":-9.1349596},"name":"Lisbon Airport","description":null},{"id":184,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.0165742,"longitude":-7.9705548},"name":"Faro Airport","description":"<p>Faro International Airport (FAO), Faro, Portugal. Aeropuerto de Faro. Aparcamiento y traslados.<\/p>"},{"id":232,"demandVectorType":"AIRPORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.4202698,"longitude":-5.890794},"name":"Seville Airport","description":null}],"TRAIN_STATION":[{"id":54,"demandVectorType":"TRAIN_STATION","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.40629055433,"longitude":-3.6917391098175},"name":"Madrid-Atocha Station","description":"<p>Parking Atocha - estaci&oacute;n de tren. Aparca en la estaci&oacute;n del AVE Madrid Puerta de Atocha. Mejor precio garantizado en reservas de larga estancia<\/p>"},{"id":56,"demandVectorType":"TRAIN_STATION","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.378966114809046,"longitude":2.1398234367370605},"name":"Estaci\u00f3n de Barcelona-Sants","description":"<p>Sants - estaci\u00f3n de tren<\/p>"},{"id":185,"demandVectorType":"TRAIN_STATION","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.4650977,"longitude":-3.8080383},"name":"Renfe Cercan\u00edas Pozuelo El Barrial","description":null},{"id":186,"demandVectorType":"TRAIN_STATION","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.5218503,"longitude":-3.8827563},"name":"Renfe Cercan\u00edas Pinar de las Rozas","description":null},{"id":187,"demandVectorType":"TRAIN_STATION","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.5523275,"longitude":-3.8967651},"name":"Renfe Cercan\u00edas Las Matas","description":null},{"id":188,"demandVectorType":"TRAIN_STATION","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.4937003,"longitude":-3.867807},"name":"Renfe Cercan\u00edas Las Rozas","description":null},{"id":189,"demandVectorType":"TRAIN_STATION","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.47423443559572,"longitude":-3.8462561608520462},"name":"Renfe Cercan\u00edas Majadahonda","description":null},{"id":233,"demandVectorType":"TRAIN_STATION","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.5376646,"longitude":-5.6757303},"name":"Gijon's train station","description":null}],"PORT":[{"id":62,"demandVectorType":"PORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.8357716622386,"longitude":-2.469166377445249},"name":"Almer\u00eda Port","description":"<p>Almeria Port Parking - Cruises. Enjoy your trip by parking your vehicle at the lowest price guaranteed.<\/p>"},{"id":256,"demandVectorType":"PORT","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.53513607481333,"longitude":-6.291552037865126},"name":"Puerto de C\u00e1diz","description":"<p>Puerto de C\u00e1diz<\/p>"}],"CITY":[{"id":64,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.3873974,"longitude":2.168568},"name":"Barcelona","description":"<p>Barcelona<\/p>"},{"id":172,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.385989459784,"longitude":-5.9865617518676},"name":"Sevilla","description":"<p>Ciudad de Sevilla<\/p>"},{"id":190,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.3982523,"longitude":-3.7846471},"name":"Ciudad de la Imagen","description":null},{"id":191,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.541818,"longitude":-4.6403588},"name":"Las Lagunas de Mijas-M\u00e1laga","description":null},{"id":192,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.4636346,"longitude":-3.8226402},"name":"Santander","description":"<p>Parking Tetu\u00e1n\n<\/p><p>Santander<\/p><p>\n<\/p>"},{"id":193,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":42.4181324,"longitude":2.8739219},"name":"La Jonquera","description":null},{"id":194,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.5858139,"longitude":-4.6425732},"name":"Montilla-C\u00f3rdoba","description":null},{"id":195,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.9591054,"longitude":-4.8328796},"name":"Talavera de la Reina-Toledo","description":"<p>Talavera de la Reina<\/p>\n<p>Toledo<\/p>"},{"id":197,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.7232788,"longitude":-3.9659611},"name":"Martos - Ja\u00e9n","description":"<p>Martos - Ja&eacute;n<\/p>\n<p>Mercado Santa Marta<\/p>"},{"id":198,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.3119652,"longitude":-1.8990764},"name":"Renteria Errenteria","description":"<p>Errenteria, Gipuzkoa, Spain<\/p>"},{"id":199,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.1112576,"longitude":1.1430029},"name":"Vilaseca-Tarrargona","description":"<p>Vilaseca-Tarrargona<\/p>"},{"id":200,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.6474339,"longitude":-0.8861451},"name":"Zaragoza","description":"<p>Hospital Miguel Servet<\/p>\n<p>Zaragoza<\/p>"},{"id":203,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.8043013,"longitude":3.0638999},"name":"Platja d'Aro- Gran Port","description":"<p>Platja d'Aro- Gran Port<\/p>\n<p>Punta prima<\/p>"},{"id":205,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.8893025,"longitude":-4.779275300000001},"name":"C\u00f3rdoba","description":"<p>C\u00f3rdoba - &nbsp;Plaza de la Rosa<\/p>"},{"id":206,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.755212,"longitude":-3.5212275},"name":"Motril-Granada","description":"<p>Motril - Granada- Hospital de Santa Ana<\/p>"},{"id":209,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.541818,"longitude":-4.6403588},"name":"Fuengirola - M\u00e1laga","description":null},{"id":211,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.5040814,"longitude":2.3922562},"name":"Vilassar de Mar-Barcelona","description":"<p>Vilassar de Mar-Barcelona<\/p>"},{"id":212,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":38.9680369528471,"longitude":-0.18454337531886633},"name":"Gand\u00eda - Valencia","description":null},{"id":213,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":38.5046684,"longitude":-0.2310369},"name":"Villajoyosa-Alicante","description":null},{"id":214,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.5963,"longitude":-4.63635},"name":"Mijas-M\u00e1laga","description":null},{"id":215,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.8330642,"longitude":-2.4647231},"name":"Almeria","description":null},{"id":217,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.7297841,"longitude":1.8225882},"name":"Manresa","description":null},{"id":218,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.659047,"longitude":-3.7613172},"name":"Aparca+T Colmenar viejo","description":null},{"id":219,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.8682657,"longitude":-4.7944978},"name":"C\u00f3rdoba-Hospital Universitario Reina Sof\u00eda","description":null},{"id":220,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.542261,"longitude":-6.2871887},"name":"C\u00e1diz","description":null},{"id":221,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.4736696,"longitude":-3.8684458},"name":"Majadahonda","description":"<p>Majadahonda<\/p>"},{"id":222,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.5765326,"longitude":-4.0057563},"name":"Galapagar","description":"<p>Galapagar<\/p>"},{"id":223,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.538900095586804,"longitude":-5.671296314757512},"name":"Gij\u00f3n","description":null},{"id":224,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.2263388,"longitude":-5.7814053},"name":"Mieres","description":null},{"id":229,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.4379523,"longitude":-3.6923428},"name":"Madrid","description":null},{"id":234,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.888295005335,"longitude":-0.083935729402107},"name":"Burriana","description":null},{"id":235,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":38.72826269999999,"longitude":0.1044712},"name":"Teulada","description":"<p>Teulada<\/p>"},{"id":236,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":38.6889452,"longitude":0.1325342},"name":"Moraira","description":"<p>Moraira<\/p>"},{"id":237,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.2633799,"longitude":-2.9348121},"name":"Bilbao","description":null},{"id":238,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.4211483,"longitude":-4.7562159},"name":"Llanes","description":null},{"id":239,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":42.344232164921,"longitude":-3.6970588459412},"name":"Burgos","description":"<p>Burgos<\/p>"},{"id":240,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.957893991539,"longitude":-3.5003131289964},"name":"Oca\u00f1a","description":"<p>Oca\u00f1a<\/p>"},{"id":241,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.5081188411229,"longitude":2.5027760525486276},"name":"Calvi\u00e0","description":"<p>Calvi\u00e0<\/p>"},{"id":242,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":38.985032628073,"longitude":1.5354252738201},"name":"Santa Eul\u00e0ria des Riu","description":null},{"id":243,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.307913851638,"longitude":-3.7314124543225},"name":"Getafe","description":null},{"id":245,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.521993754878324,"longitude":0.3379741651117474},"name":"Fraga","description":null},{"id":246,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.4353984,"longitude":-3.8140468},"name":"Pozuelo","description":null},{"id":247,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.81289105987209,"longitude":0.7107575418954681},"name":"L'Ampolla","description":"<p>L'Ampolla<\/p>"},{"id":248,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.386993400170596,"longitude":-5.768988792130811},"name":"Bejar","description":null},{"id":250,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.070286763921,"longitude":1.0624535630915},"name":"Cambrils","description":null},{"id":251,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.0701433881886,"longitude":1.0624638556904609},"name":"Vinyols i els Arcs","description":null},{"id":252,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":42.357162930618,"longitude":1.4596524617018},"name":"La Seu d'Urgell","description":null},{"id":253,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.776576035966,"longitude":-3.7903382443268},"name":"Jaen","description":null},{"id":254,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.16908600375224,"longitude":-3.599943626632449},"name":"Granada","description":"<p>Granada<\/p>"},{"id":255,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.19320466719577,"longitude":1.6263203649961522},"name":"Cunit","description":"<p>Cunit<\/p>"},{"id":258,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.5376485,"longitude":-6.2899979},"name":"Muelle Reina Sof\u00eda-Puerto de C\u00e1diz","description":"<p>Parking Muelle Reina Sof\u00eda-Puerto de C\u00e1diz<\/p>"},{"id":259,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.60660545043488,"longitude":-0.9883813390869056},"name":"Cartagena","description":"<p>Cartagena<\/p>"},{"id":260,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.9304097,"longitude":2.2530674},"name":"Vic","description":"<p>Vic<\/p>"},{"id":262,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.6274082,"longitude":-0.5968562},"name":"Ll\u00edria","description":"<p>Ll\u00edria<\/p>"},{"id":263,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.6480797,"longitude":1.1409432},"name":"T\u00e1rrega","description":"<p>Tarrega<\/p>"},{"id":264,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.8628316,"longitude":-4.0273231},"name":"Toledo","description":"<p>Toledo<\/p>"},{"id":265,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.35277576703873,"longitude":-8.40932833373963},"name":"A Coru\u00f1a","description":null},{"id":266,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":42.844125412974805,"longitude":-2.6683189053531575},"name":"Vitoria","description":"<p>Vitoria<\/p>"},{"id":267,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.310852,"longitude":-4.9139228},"name":"Medina del Campo","description":"<p>Medina del Campo<\/p>"},{"id":268,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.070996209939324,"longitude":-2.1358156991634925},"name":"Cuenca","description":null},{"id":269,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":42.46339229472412,"longitude":-2.4476214292566767},"name":"Logro\u00f1o","description":null},{"id":270,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.0470265452508,"longitude":-2.202446393197004},"name":"Beasain","description":null},{"id":271,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.33993014467185,"longitude":-1.1073023533881443},"name":"Teruel","description":null},{"id":272,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.660072200184686,"longitude":-4.561003729396855},"name":"Alhaur\u00edn de la Torre","description":null},{"id":273,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.69095750612381,"longitude":-4.4569915780983855},"name":"M\u00e1laga","description":null},{"id":275,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.24773420288761,"longitude":-1.8669659749900913},"name":"Vera","description":null},{"id":276,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.8265768,"longitude":2.8930502},"name":"Llagostera","description":null},{"id":277,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.565630732446,"longitude":2.6436822542819},"name":"Port of Palma","description":null},{"id":278,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.70194571536617,"longitude":2.8372370290371185},"name":"Lloret de Mar","description":null},{"id":279,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.45127926047751,"longitude":2.216045790039769},"name":"Santa Coloma de Gramanet","description":null},{"id":280,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.681425804464666,"longitude":-6.136667309317034},"name":"Jerez de la Frontera","description":null},{"id":281,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":42.13935286095952,"longitude":3.1163141602633138},"name":"L'Escala","description":null},{"id":282,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.6134239,"longitude":2.6537529},"name":"Calella","description":null},{"id":283,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.4493052,"longitude":2.2456681},"name":"Badalona","description":null},{"id":284,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":40.43405509999999,"longitude":-3.7177363},"name":"Moncloa","description":null},{"id":285,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":42.2405989,"longitude":-8.7207268},"name":"Vigo","description":null},{"id":286,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":39.468193694276,"longitude":-0.37809987843978},"name":"Valencia","description":null},{"id":287,"demandVectorType":"CITY","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":41.1167764,"longitude":1.2553338},"name":"Tarragona","description":null}],"POI":[{"id":204,"demandVectorType":"POI","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.4636346,"longitude":-3.8226402},"name":"Santander, Tetu\u00e1n","description":"<p>Parking Tetu\u00e1n<\/p>\n<p>Santander<\/p>"},{"id":208,"demandVectorType":"POI","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.4560769,"longitude":-3.8292103},"name":"Marqu\u00e9s de Valdecilla University Hospital - Santander","description":null},{"id":244,"demandVectorType":"POI","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":43.47946078806104,"longitude":-5.134460727206187},"name":"La Vega Beach","description":null},{"id":261,"demandVectorType":"POI","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":36.534538670517,"longitude":-6.2919316157042},"name":"Muelle Ciudad Alfonso XIII-Puerto de C\u00e1diz","description":"<p>Muelle Ciudad Alfonso XIII<\/p>"}],"SKI_STATION":[{"id":231,"demandVectorType":"SKI_STATION","demandVectorParentId":null,"demandVectorChildren":[],"coordinates":{"latitude":37.09662457533908,"longitude":-3.396492588020239},"name":"Monachil Sierra Nevada","description":"<p>Monachil Sierra Nevada<\/p>"}]}

    let newOptions = [].concat(...Object.values(vectorsList).map(category => category.map(vector => ({ id: vector.id, name: vector.name, demandVectorType: vector.demandVectorType }))))

    document.addEventListener('DOMContentLoaded', () => {
        const urlParams = new URLSearchParams(window.location.search)
        const demandVectorFromUrl = urlParams.get('demandVector')

        if (demandVectorFromUrl) {
            switch (demandVectorFromUrl) {
                case 'airport':
                    checkboxState.AIRPORT = true
                    break
                case 'train':
                    checkboxState.TRAIN_STATION = true
                    break
                case 'city':
                    checkboxState.CITY = true
                    break
                case 'port':
                    checkboxState.PORT = true
                    break
            }
        }

        updateOptions()
    })

    function updateOptions() {
        newOptions = []

        // Concatenate options from all checked categories
        Object.keys(checkboxState).forEach(category => {
            if (checkboxState[category] && vectorsList[category]) {
                newOptions.push(...vectorsList[category].map(vector => ({ id: vector.id, name: vector.name, demandVectorType: vector.demandVectorType })))
            }
        })

        // If no checkboxes are checked, populate newOptions with all values from vectorsList
        if (newOptions.length === 0) {
            newOptions = [].concat(...Object.values(vectorsList).map(category => category.map(vector => ({ id: vector.id, name: vector.name, demandVectorType: vector.demandVectorType }))))
        }

        const event = new CustomEvent('options-updated', {
            detail: {
                options: newOptions,
            },
        })

        document.dispatchEvent(event)
    }

    document.addEventListener('options-updated', (event) => {
        const newOptions = event.detail.options

        // Dispatch a custom event to notify the Alpine.js component
        const updateOptionsEvent = new CustomEvent('update-options', {
            detail: { options: newOptions },
        })

        const selectConfigsComponent = document.querySelector('[x-ref="selectConfigsComponent"]')
        if (selectConfigsComponent) {
            selectConfigsComponent.dispatchEvent(updateOptionsEvent)
        }
    })

    function selectConfigs() {
        const optionsState = {
            options: [],
        }

        return {
            filter: '',
            show: false,
            selected: { id: null, name: null },
            focusedOptionIndex: null,
            options: null,
            close() {
                this.show = false
                this.filter = this.selected ? this.selectedName() : ''
                this.focusedOptionIndex = this.selected ? this.focusedOptionIndex : null
            },
            open() {
                this.show = true
                this.filter = ''
            },
            toggle() {
                if (this.show) {
                    this.close()
                } else {
                    this.open()
                }
            },
            isOpen() {
                return this.show === true
            },
            selectedName() {
                return this.selected ? (this.selected.name ? this.selected.name.toString() : '') : this.filter;
            },
            classOption(option, index) {
                const isSelected = this.selected === option
                const isFocused = (index === this.focusedOptionIndex)
                return {
                    'cursor-pointer w-full border-gray-100 border-b hover:bg-blue-50': true,
                    'bg-blue-100': isSelected,
                    'bg-blue-50': isFocused
                }
            },
            setOptions(newOptions) {
                newOptions.sort(function(a, b) {
                    if (a.name.normalize('NFD').replace(/[\u0300-\u036f]/g, "") < b.name.normalize('NFD').replace(/[\u0300-\u036f]/g, "")) {
                        return -1;
                    }
                    if (a.name.normalize('NFD').replace(/[\u0300-\u036f]/g, "") > b.name.normalize('NFD').replace(/[\u0300-\u036f]/g, "")) {
                        return 1;
                    }
                    return 0;
                });
                // Update the local state with new options
                optionsState.options = newOptions
                this.options = newOptions
            },
            filteredOptions() {
                return this.options
                    ? this.options.filter(option => {
                        return option.name.toString().toLowerCase().indexOf(this.filter.toLowerCase()) > -1
                    })
                    : {}
            },
            onOptionClick(index) {
                this.focusedOptionIndex = index
                this.selectOption()
            },
            selectOption() {
                if (!this.isOpen()) {
                    return
                }
                this.focusedOptionIndex = this.focusedOptionIndex ?? 0
                const selected = this.filteredOptions()[this.focusedOptionIndex]
                this.selected = selected
                this.filter = this.selectedName()
                this.close()
                document.getElementById('vectorId').value = this.selected.id
                document.getElementById('demandVectorSelected').value = this.selected.demandVectorType.toLowerCase()
            },
            focusPrevOption() {
                if (!this.isOpen()) {
                    return
                }
                const optionsNum = this.filteredOptions().length - 1
                if (this.focusedOptionIndex > 0 && this.focusedOptionIndex <= optionsNum) {
                    this.focusedOptionIndex--
                } else if (this.focusedOptionIndex === 0) {
                    this.focusedOptionIndex = optionsNum
                }
            },
            focusNextOption() {
                const optionsNum = this.filteredOptions().length - 1
                if (!this.isOpen()) {
                    this.open()
                }
                if (this.focusedOptionIndex === null || this.focusedOptionIndex === optionsNum) {
                    this.focusedOptionIndex = 0
                } else if (this.focusedOptionIndex >= 0 && this.focusedOptionIndex < optionsNum) {
                    this.focusedOptionIndex++
                }
            },
            // Function to get the text displayed for each option
            getOptionText(option) {
                return option.name.toString()
            },
            initSelectConfigs() {
                // Listen for the custom event to update options
                this.$el.addEventListener('update-options', (event) => {
                    this.setOptions(event.detail.options);

                    // Retrieve vectorId from the URL
                    const urlParams = new URLSearchParams(window.location.search);
                    const vectorIdFromUrl = urlParams.get('vectorId');

                    // Select the vector based on vectorId from the URL
                    if (vectorIdFromUrl) {
                        const selectedVector = this.options.find(option => option.id == vectorIdFromUrl);

                        if (selectedVector) {
                            this.selected = selectedVector;
                            this.filter = this.selectedName();
                            document.getElementById('vectorId').value = this.selected.id;
                        }
                    }
                });
            },
        }
    }
</script>

<!-- Features -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-6">
        <div class="text-center mb-16">
            <h2 class="text-4xl lg:text-5xl font-bold text-slate-900 mb-4">
                What can you do with
                <span class="text-primary">
                    mowiz?
                </span>
            </h2>
            <p class="text-xl text-slate-600 max-w-3xl mx-auto text-balance">
                mowiz revolutionizes your parking experience. Reserve parking spaces, access parking automatically with your license plate, manage passes or bonuses easily and securely, and pay the parking meter from your mobile phone.
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            
            <!-- Feature 1 -->
            <div class="feature-card card-gradient rounded-2xl shadow-lg border border-slate-200/50 overflow-hidden">
                <div class="h-48 bg-hero-1 relative overflow-hidden">
                    <div class="absolute inset-0 bg-black/20"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <div class="bg-white/70 backdrop-blur-sm rounded-lg p-3">
                            <h3 class="font-bold text-slate-900">Book your parking</h3>
                        </div>
                    </div>
                    <div class="absolute top-4 right-4 flex items-center justify-center bg-primary rounded-md p-1 border border-gray-400">
                        <span class="material-symbols-rounded notranslate text-white icon-size-20">parking_sign</span>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-slate-600 leading-relaxed">
                        Pre-book and park at airports, train stations and in your city parkings
                    </p>
                </div>
            </div>

            <!-- Feature 2 -->
            <div class="feature-card card-gradient rounded-2xl shadow-lg border border-slate-200/50 overflow-hidden">
                <div class="h-48 bg-hero-2 relative overflow-hidden">
                    <div class="absolute inset-0 bg-black/20"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <div class="bg-white/70 backdrop-blur-sm rounded-lg p-3">
                            <h3 class="font-bold text-slate-900">Automatic access</h3>
                        </div>
                    </div>
                    <div class="absolute top-4 right-4 flex items-center justify-center bg-magenta rounded-md p-1 border border-gray-400">
                        <span class="material-symbols-rounded notranslate text-white icon-size-20">sensors</span>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-slate-600 leading-relaxed">
                        Enter and leave our car parks without the need for a ticket or to go through the cash desk, all automatically
                    </p>
                </div>
            </div>

            <!-- Feature 3 -->
            <div class="feature-card card-gradient rounded-2xl shadow-lg border border-slate-200/50 overflow-hidden">
                <div class="h-48 bg-hero-3 relative overflow-hidden">
                    <div class="absolute inset-0 bg-black/20"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <div class="bg-white/70 backdrop-blur-sm rounded-lg p-3">
                            <h3 class="font-bold text-slate-900">Vouchers and subscriptions</h3>
                        </div>
                    </div>
                    <div class="absolute top-4 right-4 flex items-center justify-center bg-cyan rounded-md p-1 border border-gray-400">
                        <span class="material-symbols-rounded notranslate text-white icon-size-20">confirmation_number</span>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-slate-600 leading-relaxed">
                       If you are going to use a car park on a regular basis, save with our vouchers and passes
                    </p>
                </div>
            </div>

            <!-- Feature 4 -->
            <a href="https://parquimetro.mowiz.eu" target="_blank" class="feature-card card-gradient rounded-2xl shadow-lg border border-slate-200/50 overflow-hidden">
                <div class="h-48 bg-hero-4 relative overflow-hidden">
                    <div class="absolute inset-0 bg-black/20"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <div class="bg-white/70 backdrop-blur-sm rounded-lg p-3">
                            <h3 class="font-bold text-slate-900">Parking meters</h3>
                        </div>
                    </div>
                    <div class="absolute top-4 right-4 flex items-center justify-center bg-secondary rounded-md p-1 border border-gray-400">
                        <span class="material-symbols-rounded notranslate text-white icon-size-20">parking_meter</span>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-slate-600 leading-relaxed">
                        Pay your parking meter from your mobile phone. No physical tickets, no coins!
                    </p>
                </div>
            </a>
        </div>
    </div>
</section>

<!-- App section -->
    <section class="py-20 bg-pattern-2 relative overflow-hidden">    
    <div class="max-w-[110rem] mx-auto px-6 md:px-10 xl:px-24 relative z-10">
        <div class="text-center lg:text-left mb-10 md:mb-4">
            <h2 class="text-4xl lg:text-5xl font-bold text-slate-900">
                An app, 
                <span class="text-magenta">
                    infinite possibilities
                </span>
            </h2>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-3 lg:gap-6 justify-items-center items-start text-sm">
            <!-- App Mockup -->
            <div class="flex justify-center lg:justify-end relative md:py-6 pb-6 lg:pb-0">
                <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/mockups/mockup_en.webp" width="240" height="auto" alt="mobiles mockups" class="md:w-[340px]"/>
            </div>

            <!-- Features List -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-10 lg:col-span-2 lg:mt-10">
                <div class="space-y-8">
                    <h2 class="font-semibold text-xs text-slate-400 uppercase -mb-3">Parkings</h2>
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                            <span class="material-symbols-rounded text-white">box</span>
                        </div>
                        <div>
                            <h3 class="font-semibold text-slate-900 mb-1">Choose the product that best suits your needs</h3>
                            <p class="text-slate-600 leading-relaxed text-balance">
                                Book a parking space, access automatically or buy a parking pass or voucher.
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                            <span class="material-symbols-rounded text-white">sensors</span>
                        </div>
                        <div>
                            <h3 class="font-semibold text-slate-900 mb-1">Activate mowiz flow</h3>
                            <p class="text-slate-600 leading-relaxed text-balance">
                                Activate mowiz flow and the number plate reader will automatically open the barrier for you.
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                            <span class="material-symbols-rounded text-white">smartphone</span>
                        </div>
                        <div>
                            <h3 class="font-semibold text-slate-900 mb-1">Manage your parking</h3>
                            <p class="text-slate-600 leading-relaxed text-balance">
                                Manage your parking on your mobile. Safe and quality car parks. Cancel for free until the last minute.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="space-y-8">
                    <h2 class="font-semibold text-xs text-slate-400 uppercase -mb-3">Parking meters</h2>
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                            <span class="material-symbols-rounded text-white">parking_meter</span>
                        </div>
                        <div>
                            <h3 class="font-semibold text-slate-900 mb-1">Pay in regulated zones</h3>
                            <p class="text-slate-600 leading-relaxed text-balance">
                                Park in regulated zones and pay using your mobile phone wherever you are with your bank card, Bizum, Apple Pay or Google Pay.
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                            <span class="material-symbols-rounded text-white">more_time</span>
                        </div>
                        <div>
                            <h3 class="font-semibold text-slate-900 mb-1">Extend your parking time</h3>
                            <p class="text-slate-600 leading-relaxed text-balance">
                                Extend your parking time with your mobile phone and receive alerts about your ticket.
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                            <span class="material-symbols-rounded text-white">gavel</span>
                        </div>
                        <div>
                            <h3 class="font-semibold text-slate-900 mb-1">Check and cancel fines</h3>
                            <p class="text-slate-600 leading-relaxed text-balance">
                                Consult and cancel fines instantly via the app.
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                            <span class="material-symbols-rounded text-white">history</span>
                        </div>
                        <div>
                            <h3 class="font-semibold text-slate-900 mb-1">View your ticket history</h3>
                            <p class="text-slate-600 leading-relaxed text-balance">
                                View your parking ticket history from the app.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Download Section -->
        <div class="px-4 mt-10 lg:-mt-16 xl:-mt-32 flex justify-end">
            <div class="w-fit">
                <p class="hidden md:block font-semibold text-secondary text-2xl text-nowrap pb-4">Download the app</p>
                <div class="w-full flex flex-col lg:flex-row gap-6 items-center justify-center md:justify-end">
                    <div class="card-gradient rounded-2xl shadow-xl w-fit px-2 flex flex-col items-center justify-center border border-slate-200/50">
                        <div class="flex gap-5 py-2 items-center">
                            <img src='https://mowiz.eu/images/nfc/mowiz-qr.svg' alt='mowiz qr' width="130" height="auto" class="md:w-48"/>
                        </div>
                    </div>
                    <div class="flex flex-col gap-5">
                        <a href="https://play.google.com/store/apps/details?id=com.mowiz.android" target="_blank">
                            <picture>
                                <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/badge_google_play_en.svg" alt="google play link" width="140" height="auto" class="md:w-48"/>
                            </picture>
                        </a>
                        <a href='https://apps.apple.com/es/app/mowiz/id6446278726' target="_blank">
                            <picture>
                                <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/badge_app_store_en.svg" alt="app store link" width="140" height="auto" class="md:w-48"/>
                            </picture>
                        </a>
                    </div>
                </div>
            </div>
        </div>  
    </div>
</section>
<script>
    window.onload = init;
    window.addEventListener('pageshow', init);

    function init() {
        const productBtn = document.getElementById('search-btn');
        const productBtnText = document.getElementById('search-btn-text');
        if (productBtn && productBtnText) {
            toggleButtonLoadingState(productBtn, productBtnText, false);
        }
    }
    document.addEventListener('DOMContentLoaded',()=>{const e=document.getElementById('search-btn'),t=document.getElementById('search-btn-text');if(e&&t){toggleButtonLoadingState(e,t,!1);}});
</script>
            </div>
        </main>
                    <footer class="bg-gray-100 text-slate-800 border-t border-gray-200 relative overflow-hidden">    
    <div class="relative z-10">
        <!-- Main Footer Content -->
        <div class="px-5 md:px-10 xl:px-24 mx-auto py-16">
            <div class="grid grid-cols-1 lg:grid-cols-5 gap-12">
                
                <!-- Brand & Settings Column -->
                <div class="lg:col-span-2 space-y-8">
                    <!-- Logo -->
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 bg-primary rounded-lg flex items-center justify-center">
                            <img src="https://mowiz.eu/images/logo/icon_mowiz.svg" loading="lazy" alt="mowiz logo" width="24px" height="24px" class="w-6 h-6"/>
                        </div>
                        <img src="https://mowiz.eu/images/logo/logo_header_mowiz.svg" loading="lazy" alt="mowiz logo" width="128" height="auto" class="w-28 md:w-32"/>
                    </div>
                    
                    <p class="text-slate-600 leading-relaxed max-w-md">
                        Revolutionise your parking experience with the most comprehensive parking app.
                    </p>
                    
                    <!-- Language Selectors -->
                        
                    <div class="text-slate-600">
                        <label class="text-sm font-medium text-slate-800 block mb-2">Language</label>
                        <div class="relative">
    <div class="relative">
        <select onchange="window.location.href = this.value" class="bg-inherit border border-slate-400 rounded-lg px-4 py-2 pl-8 pr-10 text-inherit focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors appearance-none w-full max-w-xs">
                            <option value="https://mowiz.eu/en?referrer=aparcalia.com" selected class="text-slate-600">
                    English
                </option>
                            <option value="https://mowiz.eu/es?referrer=aparcalia.com"  class="text-slate-600">
                    Español
                </option>
                            <option value="https://mowiz.eu/pt?referrer=aparcalia.com"  class="text-slate-600">
                    Português
                </option>
                            <option value="https://mowiz.eu/ca?referrer=aparcalia.com"  class="text-slate-600">
                    català
                </option>
                            <option value="https://mowiz.eu/de?referrer=aparcalia.com"  class="text-slate-600">
                    Deutsch
                </option>
                    </select>
        <span class="absolute left-2.5 top-1/2 -translate-y-1/2">🌐</span>
    </div>
</div>                    </div>
                    
                    <!-- Payment Methods -->
                    <div>
                        <h4 class="text-center md:text-start text-sm font-medium text-slate-800 mb-3">Your payments secure</h4>
                        <div class="flex items-center justify-center md:justify-start space-x-3">
                            <img src='https://mowiz.eu/images/payment_methods/visa-24.svg' alt='visa card' width="40"/>
                            <img src='https://mowiz.eu/images/payment_methods/mc-24.svg' alt='mastercard' width="40"/>
                            <img src='https://mowiz.eu/images/payment_methods/applepay-24.svg' alt='apple pay' width="40"/>
                            <img src='https://mowiz.eu/images/payment_methods/gpay-24.svg' alt='google pay' width="40"/>
                            <span class="text-blue-600 font-semibold text-[11px] p-[5px] border rounded border-gray-300 bg-white">bizum</span>
                        </div>
                    </div>

                    <div class="flex gap-4 items-center justify-center md:justify-start my-10 md:my-0">
                        <a href="https://play.google.com/store/apps/details?id=com.mowiz.android" target="_blank" class="hover:scale-105 transition">
                            <picture>
                                <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/badge_google_play_en.svg" alt="google play link" width="125" height="auto"/>
                            </picture>
                        </a>
                        <a href='https://apps.apple.com/app/id6446278726' target="_blank" class="hover:scale-105 transition">
                            <picture>
                                <img src="https://mowiz23-static.s3.eu-south-2.amazonaws.com/bannerweb/badge_app_store_en.svg" alt="app store link" width="115" height="auto"/>
                            </picture>
                        </a>
                    </div>
                </div>
                
                <!-- Products Column -->
                                <div class="md:pt-[70px]">
                    <h3 class="text-lg font-semibold text-slate-700 mb-6 flex items-center gap-2">
                        <span class="material-symbols-rounded weight-500 text-magenta">apps</span>
                        Products
                    </h3>
                    <ul class="space-y-4">
                        <li>
                            <a href="https://mowiz.eu/parking" class="text-slate-600 hover:text-magenta transition-colors flex items-center gap-2 group">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-magenta icon-size-20">parking_sign</span>
                                Parking reservation
                            </a>
                        </li>
                                                <li>
                            <a href="https://parquimetro.mowiz.eu" target="_blank" class="text-slate-600 hover:text-magenta transition-colors flex items-center gap-2 group">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-magenta icon-size-20">parking_meter</span>
                                Parking meters
                            </a>
                        </li>
                                                
                    </ul>
                </div>
                                
                <!-- Support Column -->
                <div class="md:pt-[70px]">
                    <h3 class="text-lg font-semibold text-slate-700 mb-6 flex items-center gap-2">
                        <span class="material-symbols-rounded weight-500 text-sky-500">support_agent</span>
                        Support
                    </h3>
                    <ul class="space-y-4">
                        <li>
                            <a href="https://mowizsupport-eu.zendesk.com/hc/en-150/requests/new" target="_blank" class="text-slate-600 hover:text-sky-500 transition-colors flex items-center gap-2 group">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-sky-500 icon-size-20">contact_support</span>
                                Contact us
                            </a>
                        </li>
                        <li>
                            <a href="https://mowizsupport-eu.zendesk.com/hc/en-150" target="_blank" class="text-slate-600 hover:text-sky-500 transition-colors flex items-center gap-2 group">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-sky-500 icon-size-20">help</span>
                                Help
                            </a>
                        </li>
                        <li>
                            <a href="https://mowiz.eu/my-account" class="text-slate-600 hover:text-sky-500 transition-colors flex items-center gap-2 group">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-sky-500 icon-size-20">account_circle</span>
                                My account
                            </a>
                        </li>
                                                <li>
                            <a href="https://mowiz.eu/operators" class="text-slate-600 hover:text-sky-500 transition-colors flex items-center gap-2 group">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-sky-500 icon-size-20">parking_valet</span>
                                Operators
                            </a>
                        </li>
                                            </ul>
                </div>
                
                <!-- Legal Column -->
                <div class="md:pt-[70px]">
                    <h3 class="text-lg font-semibold text-slate-700 mb-6 flex items-center gap-2">
                        <span class="material-symbols-rounded weight-500 text-primary">gavel</span>
                        Legal
                    </h3>
                    <ul class="space-y-4">
                        <li>
                            <a href="https://mowiz.eu/legal/terms" class="text-slate-600 hover:text-primary transition-colors flex items-center gap-2 group">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-primary icon-size-20">description</span>
                                Terms and conditions
                            </a>
                        </li>
                        <li>
                            <a href="https://mowiz.eu/legal/privacy" class="text-slate-600 hover:text-primary transition-colors flex items-center gap-2 group">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-primary icon-size-20">privacy_tip</span>
                                Privacy Policy
                            </a>
                        </li>
                        <li>
                            <a href="https://mowiz.eu/legal/cookies-policy" class="text-slate-600 hover:text-primary transition-colors flex items-center gap-2 group">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-primary icon-size-20">cookie</span>
                                Cookies Policy
                            </a>
                        </li>
                        <li>
                            <button type="button" @click.prevent="$dispatch('open-cookies-modal')" class="text-slate-600 hover:text-primary transition-colors flex items-start gap-2 group text-start">
                                <span class="material-symbols-rounded weight-500 text-sm group-hover:text-primary icon-size-20">settings</span>
                                Cookies settings
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Bottom Bar -->
        <div class="bg-gray-200">
            <div class="max-w-7xl mx-auto px-6 py-6">
                <div class="flex items-center justify-center gap-3">
                    <div class="w-9 h-9 bg-primary rounded-lg flex items-center justify-center">
                        <img src="https://mowiz.eu/images/logo/icon_mowiz.svg" loading="lazy" alt="mowiz logo" width="24px" height="24px" class="w-6 h-6"/>
                    </div>
                    <span class="text-slate-800">© <script>document.write(new Date().getFullYear())</script> Mowiz. All rights reserved.</span>
                </div>
            </div>
        </div>
    </div>
</footer>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('cookiesModal', () => ({
            showModal: false,
            openModal() {
                this.showModal = true;
            },
            closeModal() {
                this.showModal = false;
            },
        }));

        document.addEventListener('open-cookies-modal', () => {
            const cookiesModal = document.getElementById('cookiesModal');
            if (cookiesModal) {
                cookiesModal.showModal();
            }
        });
    });
</script>
            
        
        <link rel="preload" as="style" href="https://mowiz.eu/build/app.09ce02ce.css" /><link rel="modulepreload" as="script" href="https://mowiz.eu/build/app.c7e7892c.js" /><link rel="stylesheet" href="https://mowiz.eu/build/app.09ce02ce.css" /><script type="module" src="https://mowiz.eu/build/app.c7e7892c.js"></script>        <script src="https://mowiz.eu/js/utils.js?v=1.35"></script>
            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n"></script>
        
    </body>
</html>
