www.virail.in Open in urlscan Pro
2606:4700:3108::ac42:2ae6  Public Scan

Form analysis
1 forms found in the DOM

GET

<form id="transport-route-form" action="" method="GET" class="m-0 p-0 w-full" x-data="Search()" x-init="init()" @submit="submit($event,$dispatch)" data-test-id="alpine-form">
  <input type="hidden" x-model="Alpine.store('search').departureCoord" name="from" value="">
  <input type="hidden" x-model="Alpine.store('search').destinationCoord" name="to" value="">
  <input type="hidden" name="dt" x-ref="dt" x-model="Alpine.store('search').departureDateFormatted" value="2022-01-18">
  <input type="hidden" name="rdt" x-ref="rdt" x-model="Alpine.store('search').returnDateFormatted" value="2022-01-18">
  <input type="hidden" name="t" x-ref="t" value="">
  <input type="hidden" name="custom-params" value="">
  <div class="flex gap-1">
    <div class="flex relative inline-block text-left ring-0 rounded-md z-30 isolate">
      <button id="headlessui-menu-button-1" @click="showTripSelector = true" x-bind:class="[showTripSelector ? 'shadow-md' : '']" type="button" aria-haspopup="true"
        class="group virail-green-wo-focus-button flex items-center w-full border-none rounded-lg focus:outline-none px-3 py-2 leading-7 z-30" data-test-id="alpine-form__tripmode-button">
        <span class="w-6 mr-2 flex flex-row justify-start">
          <span x-show="Alpine.store('search').formMode === 0">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
            </svg>
          </span>
          <span x-show="Alpine.store('search').formMode === 1" style="display: none;">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
              <polyline points="17 1 21 5 17 9"></polyline>
              <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
              <polyline points="7 23 3 19 7 15"></polyline>
              <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
            </svg>
          </span>
        </span>
        <span x-text="Alpine.store('search').formMode === 0 ? `जावक यात्रा` : `राउंड ट्रिप`" style="width: 87.5px" class="flex-grow text-left tracking-tighter font-light text-base whitespace-nowrap" data-test-id="tripmode-button__button-text">जावक
          यात्रा</span>
        <span class="ml-2">
          <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" :class="{'rotate-180': showTripSelector}" class="transform duration-200 transition rotate-0">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </span>
      </button>
      <div x-show="showTripSelector" x-transition:enter="transition ease-out origin-top duration-200" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition origin-top ease-in duration-100" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90"
        class="-mt-4 w-full absolute flex bg-white top-full z-20 shadow-md rounded-md" style="display: none;">
        <ul x-on:change-trip-type.window="changeTripType($dispatch,$event.detail)" class="w-full mt-5 mb-1 transition-colors tracking-tighter font-light text-base" data-test-id="tripmode-button__options">
          <li @click="changeTripType($dispatch, 0)" @click.away="showTripSelector = false" x-show="Alpine.store('search').formMode === 1"
            class="flex flex-row w-full cursor-pointer py-3 md:py-2 px-3 text-dove-gray focus:outline-none hover:bg-gray-200" style="display: none;">
            <div class="w-6 mr-2 flex flex-row justify-center items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </div>
            <div class="flex-grow text-base">जावक यात्रा</div>
          </li>
          <li @click="changeTripType($dispatch, 1)" @click.away="showTripSelector = false" x-show="Alpine.store('search').formMode === 0"
            class="flex flex-row w-full cursor-pointer py-3 md:py-2 px-3 text-dove-gray focus:outline-none hover:bg-gray-200">
            <div class="w-6 mr-2 flex flex-row justify-center items-center">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
                <polyline points="17 1 21 5 17 9"></polyline>
                <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
                <polyline points="7 23 3 19 7 15"></polyline>
                <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
              </svg>
            </div>
            <div class="flex-grow">राउंड ट्रिप</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="relative z-20" x-bind:class="[showdepartureOverlay == true || showdestinationOverlay == true ? 'z-40 md:z-20' : 'z-20']">
    <a @click="swap()" href="#" class="absolute z-10 right-3 top-5 group" data-test-id="swap-locations-button">
<div class="h-12 w-12 rounded-full virail-green-wo-focus-button flex items-center justify-center text-white shadow-md">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8" width="32" height="32">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
</div>
</a>
    <div class="mt-3">
      <div class="rounded-md shadow-md relative" @click.away="
        if (showdepartureOverlay == true){
          showdepartureOverlay == false
          Alpine.store('search').fillLocationVariablesFromObject('departure')
        }" data-test-id="autocomplete-departure">
        <div class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
          <span x-bind:class="{ 'text-flamingo-500': Alpine.store('search').departureIsEmptyError }" class="icon-departure text-virail-gray-300 text-xl pt-1">
          </span>
        </div>
        <div class="absolute inset-y-0 right-2 flex items-center text-flamingo-500 z-20 cursor-pointer" x-show="Alpine.store('search').departureIsEmptyError == true" data-test-id="icon-warning" style="display: none;">
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
            </svg>
          </div>
        </div>
        <div class="w-full">
          <div class="flex">
            <div x-ref="autocomplete-departure" class="w-full autocomplete">
              <div class="hidden header">
                <div class="rounded-full text-white text-sm flex justify-left items-center leading-none cursor-pointer"
                  @click="data.departure = []; selectedIndex= -1; $refs['departure'].value = ''; $refs['autocomplete-departure'].classList.remove('active')">
                  <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                    <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <div class="text-white text-sm flex justify-center items-center leading-none cursor-pointer" @click="data.departure = []; selectedIndex= -1; $refs['departure'].value = ''; $refs['autocomplete-departure'].classList.remove('active')">
                  Cancel</div>
              </div>
              <input x-ref="departure" x-bind:class="{ 'shadow-flamingo placeholder-flamingo-500': Alpine.store('search').departureIsEmptyError }"
                x-on:focus="Alpine.store('search').fillLocationObjectFromVariables('departure'); Alpine.store('search').departureIsEmptyError = false; $refs['autocomplete-departure'].classList.add('active'); showdepartureOverlay = true"
                x-on:focusout="showdepartureOverlay = false" type="text" @click="showdepartureOverlay = true; data.departure = [];" @input.debounce="fetchCities($event, 'departure'); selectedIndex = -1" @keydown.arrow-up.prevent="prevOption()"
                @keydown.arrow-down.prevent="nextOption('departure')" @keydown.escape.prevent="data.departure = []; selectedIndex= -1" @keydown.enter.prevent="selectOption('departure', $event)" @keydown.tab="selectOption('departure', $event)"
                class="placeholder-gray-400 w-full border-none pl-10 bg-white rounded text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out focus:ring-virail-500" placeholder="प्रस्थान का चयन करें"
                aria-label="Search" autocomplete="off" autocapitalize="off" autocorrect="off" data-lpignore="true" x-model="Alpine.store('search')['departure']">
              <ul x-on:click.away="data.departure = []; selectedIndex = -1;" x-ref="suggestions" x-show=" data.departure.length > 0"
                class="suggestions flex flex-col w-full max-h-64 absolute bg-white top-full overflow-y-auto transition-colors z-20 md:shadow md:divide-y md:divide-gray-100" data-test-id="autocomplete-list" style="display: none;">
                <template x-show="departure !== ''" x-for="(city, index) in data.departure" :key="city.k" style="display: none;">
                  <li @click="selectedIndex = index; selectOption('departure', $event)"
                    class="px-2 py-3 space-x-2 focus:bg-virail-500 focus:text-white focus:outline-none hover:bg-virail-500 hover:text-white hover:outline-none flex flex-row items-center space-x-1"
                    :class="{'bg-virail-500 text-white': index === selectedIndex}">
                    <span x-bind:class="'flag flag-' + city.c"></span>
                    <span class="name" x-text="city.n + ', ' + city.c"></span>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-3">
      <div class="rounded-md shadow-md relative" @click.away="
        if (showdestinationOverlay == true){
          showdestinationOverlay == false
          Alpine.store('search').fillLocationVariablesFromObject('destination')
        }" data-test-id="autocomplete-destination">
        <div class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
          <span x-bind:class="{ 'text-flamingo-500': Alpine.store('search').destinationIsEmptyError }" class="icon-destination text-virail-gray-300 text-xl pt-1">
          </span>
        </div>
        <div class="absolute inset-y-0 right-2 flex items-center text-flamingo-500 z-20 cursor-pointer" x-show="Alpine.store('search').destinationIsEmptyError == true" data-test-id="icon-warning" style="display: none;">
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
            </svg>
          </div>
        </div>
        <div class="w-full">
          <div class="flex">
            <div x-ref="autocomplete-destination" class="w-full autocomplete">
              <div class="hidden header">
                <div class="rounded-full text-white text-sm flex justify-left items-center leading-none cursor-pointer"
                  @click="data.destination = []; selectedIndex= -1; $refs['destination'].value = ''; $refs['autocomplete-destination'].classList.remove('active')">
                  <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                    <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <div class="text-white text-sm flex justify-center items-center leading-none cursor-pointer"
                  @click="data.destination = []; selectedIndex= -1; $refs['destination'].value = ''; $refs['autocomplete-destination'].classList.remove('active')">Cancel</div>
              </div>
              <input x-ref="destination" x-bind:class="{ 'shadow-flamingo placeholder-flamingo-500': Alpine.store('search').destinationIsEmptyError }"
                x-on:focus="Alpine.store('search').fillLocationObjectFromVariables('destination'); Alpine.store('search').destinationIsEmptyError = false; $refs['autocomplete-destination'].classList.add('active'); showdestinationOverlay = true"
                x-on:focusout="showdestinationOverlay = false" type="text" @click="showdestinationOverlay = true; data.destination = [];" @input.debounce="fetchCities($event, 'destination'); selectedIndex = -1"
                @keydown.arrow-up.prevent="prevOption()" @keydown.arrow-down.prevent="nextOption('destination')" @keydown.escape.prevent="data.destination = []; selectedIndex= -1" @keydown.enter.prevent="selectOption('destination', $event)"
                @keydown.tab="selectOption('destination', $event)"
                class="placeholder-gray-400 w-full border-none pl-10 bg-white rounded text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out focus:ring-virail-500" placeholder="एक गंतव्य चुनें"
                aria-label="Search" autocomplete="off" autocapitalize="off" autocorrect="off" data-lpignore="true" x-model="Alpine.store('search')['destination']">
              <ul x-on:click.away="data.destination = []; selectedIndex = -1;" x-ref="suggestions" x-show=" data.destination.length > 0"
                class="suggestions flex flex-col w-full max-h-64 absolute bg-white top-full overflow-y-auto transition-colors z-20 md:shadow md:divide-y md:divide-gray-100" data-test-id="autocomplete-list" style="display: none;">
                <template x-show="destination !== ''" x-for="(city, index) in data.destination" :key="city.k" style="display: none;">
                  <li @click="selectedIndex = index; selectOption('destination', $event)"
                    class="px-2 py-3 space-x-2 focus:bg-virail-500 focus:text-white focus:outline-none hover:bg-virail-500 hover:text-white hover:outline-none flex flex-row items-center space-x-1"
                    :class="{'bg-virail-500 text-white': index === selectedIndex}">
                    <span x-bind:class="'flag flag-' + city.c"></span>
                    <span class="name" x-text="city.n + ', ' + city.c"></span>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-3 grid grid-cols-8 gap-2 z-0">
    <div class="col-span-8 lg:col-span-2 order-3 lg:order-first" data-test-id="alpine-form__passenger-input">
      <div class="rounded-md shadow-md relative select-none isolate">
        <div class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
          <span class="text-gray-500 sm:text-sm">
            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="text-gray-400 group-hover:text-virail-700">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path>
            </svg>
          </span>
        </div>
        <div class="absolute inset-y-0 right-2 flex flex-row lg:flex-col items-center justify-center z-10 gap-x-2 lg:gap-x-0">
          <div class="text-gray-500 sm:text-sm cursor-pointer" @click="if(Alpine.store('search').passengers < Alpine.store('search').maxPassengers) changePassengerCount(Alpine.store('search').passengers+1)" data-test-id="passenger-increase-button">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 lg:h-4 lg:w-4" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="text-gray-500 sm:text-sm cursor-pointer" @click="if(Alpine.store('search').passengers > 1 )changePassengerCount(Alpine.store('search').passengers-1)" data-test-id="passenger-decrease-button">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 lg:h-4 lg:w-4" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
          </div>
        </div>
        <div class="w-full">
          <div @click="showPassengers = true"
            class="cursor-pointer w-full border-none bg-white rounded text-base outline-none text-gray-700 py-1 pl-10 pr-6 leading-8 h-10 transition-colors duration-200 ease-in-out focus:ring-virail-500 placeholder-gray-300">
            <span x-text="Alpine.store('search').passengersLabel" class="block lg:hidden leading-8" data-test-id="passenger-count-with-label">1 यात्री</span>
            <span x-text="Alpine.store('search').passengers" class="hidden lg:block leading-8" data-test-id="passenger-count-wo-label">1</span>
          </div>
          <ul x-show="showPassengers" class="w-full absolute bg-white border-2 border-gray-100 top-full transition-colors z-20" style="display: none;">
            <template x-for="i in Alpine.store('search').maxPassengers">
              <li @click="changePassengerCount(i)" @click.away="showPassengers = false" class="w-full cursor-pointer hover:bg-gray-200 text-gray-700 py-1 px-3 pl-10">
                <span x-text="window.virail.i18n._(&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u0940&quot;, i,&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u093f\u092f\u094b\u0902&quot;)" class="block lg:hidden leading-8"></span>
                <span x-text="i" class="hidden lg:block leading-8"></span>
              </li>
            </template>
            <li @click="changePassengerCount(i)" @click.away="showPassengers = false" class="w-full cursor-pointer hover:bg-gray-200 text-gray-700 py-1 px-3 pl-10">
              <span x-text="window.virail.i18n._(&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u0940&quot;, i,&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u093f\u092f\u094b\u0902&quot;)" class="block lg:hidden leading-8">1 यात्री</span>
              <span x-text="i" class="hidden lg:block leading-8">1</span>
            </li>
            <li @click="changePassengerCount(i)" @click.away="showPassengers = false" class="w-full cursor-pointer hover:bg-gray-200 text-gray-700 py-1 px-3 pl-10">
              <span x-text="window.virail.i18n._(&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u0940&quot;, i,&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u093f\u092f\u094b\u0902&quot;)" class="block lg:hidden leading-8">2 यात्रियों</span>
              <span x-text="i" class="hidden lg:block leading-8">2</span>
            </li>
            <li @click="changePassengerCount(i)" @click.away="showPassengers = false" class="w-full cursor-pointer hover:bg-gray-200 text-gray-700 py-1 px-3 pl-10">
              <span x-text="window.virail.i18n._(&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u0940&quot;, i,&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u093f\u092f\u094b\u0902&quot;)" class="block lg:hidden leading-8">3 यात्रियों</span>
              <span x-text="i" class="hidden lg:block leading-8">3</span>
            </li>
            <li @click="changePassengerCount(i)" @click.away="showPassengers = false" class="w-full cursor-pointer hover:bg-gray-200 text-gray-700 py-1 px-3 pl-10">
              <span x-text="window.virail.i18n._(&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u0940&quot;, i,&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u093f\u092f\u094b\u0902&quot;)" class="block lg:hidden leading-8">4 यात्रियों</span>
              <span x-text="i" class="hidden lg:block leading-8">4</span>
            </li>
            <li @click="changePassengerCount(i)" @click.away="showPassengers = false" class="w-full cursor-pointer hover:bg-gray-200 text-gray-700 py-1 px-3 pl-10">
              <span x-text="window.virail.i18n._(&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u0940&quot;, i,&quot;{{ n }} \u092f\u093e\u0924\u094d\u0930\u093f\u092f\u094b\u0902&quot;)" class="block lg:hidden leading-8">5 यात्रियों</span>
              <span x-text="i" class="hidden lg:block leading-8">5</span>
            </li>
          </ul>
          <input x-model="Alpine.store('search').passengers" type="hidden" name="passengers" id="passengers" value="1">
        </div>
      </div>
    </div>
    <div class="col-span-4 lg:col-span-3 order-first lg:order-2">
      <div class="rounded-md shadow-md relative">
        <div class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
          <span class="text-gray-500 sm:text-sm">
            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="text-gray-400 group-hover:text-virail-700">
              <path fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"></path>
            </svg>
          </span>
        </div>
        <div id="dt" class="w-full" x-data="DatePickerNew()" x-init="[initDate(Alpine.store('search').departureDate, 'departureDate', 'start-date-trigger')]" data-test-id="datepicker__start-date-trigger">
          <template x-if="'dt' == 'dt'">
            <div x-on:start-date-changed.window="dateChangedByAnotherInput($event.detail)" x-on:show-date-picker.window="showDatepicker = true" class="hidden"></div>
          </template>
          <div x-on:start-date-changed.window="dateChangedByAnotherInput($event.detail)" x-on:show-date-picker.window="showDatepicker = true" class="hidden"></div>
          <template x-if="'dt' == 'rdt'">
            <div x-on:return-date-changed.window="dateChangedByAnotherInput($event.detail)" class="hidden"></div>
          </template>
          <template x-if="'dt' == 'rdt' &amp;&amp; Alpine.store('search').formMode === 0 &amp;&amp; '' != ''">
            <div class="absolute flex items-center w-full h-full pl-8 md:pl-10 pr-3 py-2 text-sm tracking-tight text-gray-400 cursor-pointer overflow-hidden z-10"
              @click="$dispatch('change-trip-type',1); setTimeout(function () { showDatepicker = true }, 100);" x-transition:enter="transition ease-out duration-300 delay-150" x-transition:enter-start="opacity-0 transform scale-90"
              x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
              <span class="tracking-tighter" data-test-id="add-return-button">+वापसी</span>
            </div>
          </template>
          <div class=" w-full flex rounded-md overflow-hidden leading-8 h-10">
            <input id="start-date-trigger" type="text" readonly="" x-bind:disabled="(Alpine.store('search').formMode == 0 &amp;&amp; '' != '') ? true : false" x-model="datepickerValue" x-on:click="showDatepicker = !showDatepicker"
              x-on:keydown.escape="showDatepicker = false" x-on:change="stateChangeDatePicker" x-bind:class="{'': Alpine.store('search').formMode == 0}" placeholder=""
              class="w-full border-none pl-10 rounded text-base outline-none leading-8 transition-colors duration-200 ease-in-out focus:ring-virail-500 bg-white px-3 py-1 block text-gray-700"
              :class="[(Alpine.store('search').formMode == 0 &amp;&amp; 'dt' == 'rdt') ? 'hidden ' : 'block text-gray-700']">
          </div>
          <div class="bg-white md:mt-12 h-screen md:h-auto w-screen md:w-72 md:rounded-lg shadow px-4 md:p-4 fixed top-0 left-0 md:absolute md:top-0 md:left-0 z-50" x-show="showDatepicker" x-transition="" x-on:click.away="showDatepicker = false"
            data-test-id="datepicker-calendar" style="display: none;">
            <div x-show="screenWidth() < 768" class="w-full" style="display: none;">
              <button type="button" class=" my-10 focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer bg-virail-500 hover:bg-virail-200 p-1 rounded-full z-20"
                x-on:click="showDatepicker = false; dateRemainSame('departureDate', $dispatch)">
                <svg class="h-8 w-8 text-white inline-flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
              </button>
            </div>
            <div class="flex justify-between items-center mb-2">
              <div>
                <span x-text="MONTH_NAMES[month]" class="text-lg font-bold text-gray-800">जनवरी</span>
                <span x-text="year" class="ml-1 text-lg text-gray-600 font-normal">2022</span>
              </div>
              <div>
                <button type="button" x-bind:class="{'cursor-pointer hover:bg-gray-200': !previousMonthDisable, 'cursor-not-allowed': previousMonthDisable}"
                  class="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex p-1 rounded-full cursor-not-allowed" x-on:click="prevMonth">
                  <svg class="h-6 w-6 inline-flex text-gray-300" x-bind:class="{'text-gray-500': !previousMonthDisable, 'text-gray-300': previousMonthDisable}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                  </svg>
                </button>
                <button type="button" x-on:click="nextMonth" class="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full">
                  <svg class="h-6 w-6 text-gray-500 inline-flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                  </svg>
                </button>
              </div>
            </div>
            <div class="flex flex-wrap mb-3 -mx-1">
              <template x-for="(day, index) in DAYS" x-bind:key="index">
                <div style="width: 14.26%" class="px-1">
                  <div x-text="day" class="text-gray-800 font-medium text-center text-xs"></div>
                </div>
              </template>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">रवि</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">सोम</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">मंग</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">बुध</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">वीर</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">शुक्र</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">शनि</div>
              </div>
            </div>
            <div class="flex flex-wrap -mx-1" data-test-id="month-wrapper">
              <template x-for="blankday in blankdays">
                <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              </template>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <template x-for="(date, dateIndex) in no_of_days" x-bind:key="dateIndex">
                <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                  <div x-on:click="dateChanged(date, $dispatch)" class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center"
                    x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                    <span x-text="date"></span>
                  </div>
                </div>
              </template>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">1</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">2</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">3</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">4</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">5</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">6</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">7</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">8</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">9</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">10</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">11</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">12</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">13</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">14</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">15</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">16</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center bg-virail-500 text-white"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">17</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">18</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">19</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">20</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">21</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">22</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">23</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">24</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">25</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">26</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">27</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">28</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">29</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">30</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">31</span>
                </div>
              </div>
            </div>
          </div>
          <div class="vc-popover-content-wrapper" placement="bottom-start"></div>
        </div>
      </div>
    </div>
    <div class="col-span-4 lg:col-span-3 order-2 lg:order-3">
      <div class="rounded-md shadow-md relative">
        <div class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
          <span class="text-gray-500 sm:text-sm">
            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="text-gray-400 group-hover:text-virail-700">
              <path fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"></path>
            </svg>
          </span>
        </div>
        <div id="rdt" class="w-full" x-data="DatePickerNew()" x-init="[initDate(Alpine.store('search').returnDate, 'returnDate', 'return-date-trigger')]" data-test-id="datepicker__return-date-trigger">
          <template x-if="'rdt' == 'dt'">
            <div x-on:start-date-changed.window="dateChangedByAnotherInput($event.detail)" x-on:show-date-picker.window="showDatepicker = true" class="hidden"></div>
          </template>
          <template x-if="'rdt' == 'rdt'">
            <div x-on:return-date-changed.window="dateChangedByAnotherInput($event.detail)" class="hidden"></div>
          </template>
          <div x-on:return-date-changed.window="dateChangedByAnotherInput($event.detail)" class="hidden"></div>
          <template x-if="'rdt' == 'rdt' &amp;&amp; Alpine.store('search').formMode === 0 &amp;&amp; 'text-transparent bg-gray-200' != ''">
            <div class="absolute flex items-center w-full h-full pl-8 md:pl-10 pr-3 py-2 text-sm tracking-tight text-gray-400 cursor-pointer overflow-hidden z-10"
              @click="$dispatch('change-trip-type',1); setTimeout(function () { showDatepicker = true }, 100);" x-transition:enter="transition ease-out duration-300 delay-150" x-transition:enter-start="opacity-0 transform scale-90"
              x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
              <span class="tracking-tighter" data-test-id="add-return-button">+वापसी</span>
            </div>
          </template>
          <div class="absolute flex items-center w-full h-full pl-8 md:pl-10 pr-3 py-2 text-sm tracking-tight text-gray-400 cursor-pointer overflow-hidden z-10"
            @click="$dispatch('change-trip-type',1); setTimeout(function () { showDatepicker = true }, 100);" x-transition:enter="transition ease-out duration-300 delay-150" x-transition:enter-start="opacity-0 transform scale-90"
            x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
            <span class="tracking-tighter" data-test-id="add-return-button">+वापसी</span>
          </div>
          <div class="bg-gray-200 w-full flex rounded-md overflow-hidden leading-8 h-10">
            <input id="return-date-trigger" type="text" readonly="" x-bind:disabled="(Alpine.store('search').formMode == 0 &amp;&amp; 'text-transparent bg-gray-200' != '') ? true : false" x-model="datepickerValue"
              x-on:click="showDatepicker = !showDatepicker" x-on:keydown.escape="showDatepicker = false" x-on:change="stateChangeDatePicker" x-bind:class="{'text-transparent bg-gray-200': Alpine.store('search').formMode == 0}" placeholder=""
              class="w-full border-none pl-10 rounded text-base outline-none leading-8 transition-colors duration-200 ease-in-out focus:ring-virail-500 bg-white px-3 py-1 hidden text-transparent bg-gray-200"
              :class="[(Alpine.store('search').formMode == 0 &amp;&amp; 'rdt' == 'rdt') ? 'hidden text-transparent bg-gray-200' : 'block text-gray-700']" disabled="disabled">
          </div>
          <div class="bg-white md:mt-12 h-screen md:h-auto w-screen md:w-72 md:rounded-lg shadow px-4 md:p-4 fixed top-0 left-0 md:absolute md:top-0 md:left-0 z-50" x-show="showDatepicker" x-transition="" x-on:click.away="showDatepicker = false"
            data-test-id="datepicker-calendar" style="display: none;">
            <div x-show="screenWidth() < 768" class="w-full" style="display: none;">
              <button type="button" class=" my-10 focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer bg-virail-500 hover:bg-virail-200 p-1 rounded-full z-20"
                x-on:click="showDatepicker = false; dateRemainSame('returnDate', $dispatch)">
                <svg class="h-8 w-8 text-white inline-flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
              </button>
            </div>
            <div class="flex justify-between items-center mb-2">
              <div>
                <span x-text="MONTH_NAMES[month]" class="text-lg font-bold text-gray-800">जनवरी</span>
                <span x-text="year" class="ml-1 text-lg text-gray-600 font-normal">2022</span>
              </div>
              <div>
                <button type="button" x-bind:class="{'cursor-pointer hover:bg-gray-200': !previousMonthDisable, 'cursor-not-allowed': previousMonthDisable}"
                  class="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex p-1 rounded-full cursor-not-allowed" x-on:click="prevMonth">
                  <svg class="h-6 w-6 inline-flex text-gray-300" x-bind:class="{'text-gray-500': !previousMonthDisable, 'text-gray-300': previousMonthDisable}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                  </svg>
                </button>
                <button type="button" x-on:click="nextMonth" class="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full">
                  <svg class="h-6 w-6 text-gray-500 inline-flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                  </svg>
                </button>
              </div>
            </div>
            <div class="flex flex-wrap mb-3 -mx-1">
              <template x-for="(day, index) in DAYS" x-bind:key="index">
                <div style="width: 14.26%" class="px-1">
                  <div x-text="day" class="text-gray-800 font-medium text-center text-xs"></div>
                </div>
              </template>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">रवि</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">सोम</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">मंग</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">बुध</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">वीर</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">शुक्र</div>
              </div>
              <div style="width: 14.26%" class="px-1">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs">शनि</div>
              </div>
            </div>
            <div class="flex flex-wrap -mx-1" data-test-id="month-wrapper">
              <template x-for="blankday in blankdays">
                <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              </template>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
              <template x-for="(date, dateIndex) in no_of_days" x-bind:key="dateIndex">
                <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                  <div x-on:click="dateChanged(date, $dispatch)" class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center"
                    x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                    <span x-text="date"></span>
                  </div>
                </div>
              </template>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">1</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">2</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">3</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">4</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">5</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">6</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">7</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">8</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">9</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">10</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">11</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">12</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">13</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">14</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">15</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-400 cursor-not-allowed"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">16</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center bg-virail-500 text-white"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">17</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">18</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">19</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">20</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">21</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">22</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">23</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">24</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">25</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">26</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">27</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">28</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">29</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">30</span>
                </div>
              </div>
              <div style="width: 14.28%" class="px-1 mb-1" data-test-id="day-wrapper">
                <div x-on:click="dateChanged(date, $dispatch)"
                  class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100 w-10 h-10 md:w-auto md:h-auto flex items-center justify-center text-gray-700 hover:bg-gray-200"
                  x-bind:class="{'bg-virail-500 text-white': (selectedYear === year &amp;&amp; selectedMonth === month &amp;&amp; selectedDate === date ), 'text-gray-700 hover:bg-gray-200': !(selectedDate == date), 'text-gray-700 hover:bg-gray-200': _isToday(date) == false &amp;&amp; !(selectedDate == date) &amp;&amp; !_isBeforeToday(date, month, year), 'text-gray-400 cursor-not-allowed': _isBeforeToday(date, month, year) }">
                  <span x-text="date">31</span>
                </div>
              </div>
            </div>
          </div>
          <div class="vc-popover-content-wrapper" placement="bottom-start"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-3 hidden lg:block deal-options">
    <fieldset>
      <div class="flex">
        <span class="leading-7 text-sm font-bold text-gray-500">के लिए सर्वोत्तम डील दिखाएं</span>
        <div class="flex items-center ml-3"><input id="leisure" name="deal_type" type="radio" value="leisure" x-model="Alpine.store('search').type" class="focus:ring-0 h-4 w-4 text-virail-600 border-gray-300">
          <label for="leisure" class="ml-1 block text-sm font-medium text-gray-700">स्थानांतरण</label>
        </div>
        <div class="flex items-center ml-3"><input id="business" name="deal_type" type="radio" value="business" x-model="Alpine.store('search').type" class="focus:ring-0 h-4 w-4 text-virail-600 border-gray-300">
          <label for="business" class="ml-1 block text-sm font-medium text-gray-700">व्यवसाय</label>
        </div>
      </div>
    </fieldset>
  </div>
  <button id="search-button" class="virail-cta-button w-full mt-4 shadow-xl border-0 py-2 px-6 focus:outline-none rounded text-xl font-bold leading-8 tracking-wider">
    <span>खोज</span>
  </button>
  <div class="block mt-3 booking-options">
    <fieldset>
      <div class="flex">
        <div class="flex items-center justify-center">
          <div class="w-full max-w-xs mx-auto">
            <div class="flex items-center space-x-4">
              <div>
                <input type="checkbox" id="check-desktop" x-model="Alpine.store('search').isBooking" x-show="false" class="hidden" style="display: none;">
                <label class="flex items-center pa3" for="check-desktop">
                  <span aria-hidden="true"
                    class="relative inline-flex flex-shrink-0 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:shadow-outline bg-gray-200 h-6 w-11 bg-virail-500"
                    x-bind:class="[Alpine.store('search').isBooking ? 'bg-virail-500' : 'bg-gray-200']" x-ref="switchWrapper">
                    <span class="inline-block transition duration-200 ease-in-out transform bg-white rounded-full translate-x-0 w-5 h-5 ml-auto" x-bind:class="[Alpine.store('search').isBooking ? 'ml-auto' : '']" x-ref="switch"></span>
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
        <p class="leading-4 text-sm font-semibold text-gray-500 ml-3">खोज आवास</p>
      </div>
    </fieldset>
  </div>
  <input type="hidden" name="booking" value="false" x-ref="Alpine.store('search').isBooking">
</form>

Text Content

We value your privacy!
We and our partners are using technologies like cookies and process personal
data like the IP-address or browser information in order to personalize the
advertising that you see. This helps us to show you more relevant ads and
improves your internet experience. We also use it in order to measure results or
align our website content. Because we value your privacy, we are herewith asking
for your permission to use these technologies. You can always change/withdraw
your consent later by clicking on the settings button on the left lower corner
of the page.
Function
Marketing
Measurement
Other
Save + Exit Accept all
Customize your choice | Cookies | Learn more | T&C | Legal notice
powered by consentmanager.net

कोरोनावाइरस (कोविड -19)
- अपनी यात्रा के बारे में सूचित रहें
नयी खोज
आपकी हाल की खोज
+

जनवरी 2022

रवि
सोम
मंग
बुध
वीर
शुक्र
शनि
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

होटल
virail India (HI)
 * virail Österreich
 * virail България
 * virail Belgium (FR)
 * virail Belgium (NL)
 * virail Belgium (DE)
 * virail Canada (EN)
 * virail Canada (FR)
 * virail en Català
 * virail Schweiz (DE)
 * virail Schweiz (FR)
 * virail Schweiz (IT)
 * virail Chile
 * virail 中国
 * virail Colombia
 * virail USA
 * virail Argentina
 * virail Australia
 * virail Brasil
 * virail Hrvatska
 * virail Mexico
 * virail Türkiye
 * virail України (UA)
 * virail України (RU)
 * virail New Zealand
 * virail ประเทศไทย
 * virail United Kingdom
 * virail Česká republika
 * virail Deutschland
 * virail Danmark
 * virail España
 * virail France
 * virail Ελλάδα
 * virail Magyarország
 * virail Ireland
 * virail India (HI)
 * virail India (EN)
 * virail Italia
 * virail ヴィレイル・日本
 * virail Luxembourg (DE)
 * virail Luxembourg (FR)
 * virail Malaysia
 * virail Nederland
 * virail Polsce
 * virail Portugal
 * virail Romania
 * Вираил Россия
 * virail Singapore
 * virail Việt Nam

virail India (HI)
 * virail Österreich
 * virail България
 * virail Belgium (FR)
 * virail Belgium (NL)
 * virail Belgium (DE)
 * virail Canada (EN)
 * virail Canada (FR)
 * virail en Català
 * virail Schweiz (DE)
 * virail Schweiz (FR)
 * virail Schweiz (IT)
 * virail Chile
 * virail 中国
 * virail Colombia
 * virail USA
 * virail Argentina
 * virail Australia
 * virail Brasil
 * virail Hrvatska
 * virail Mexico
 * virail Türkiye
 * virail України (UA)
 * virail України (RU)
 * virail New Zealand
 * virail ประเทศไทย
 * virail United Kingdom
 * virail Česká republika
 * virail Deutschland
 * virail Danmark
 * virail España
 * virail France
 * virail Ελλάδα
 * virail Magyarország
 * virail Ireland
 * virail India (HI)
 * virail India (EN)
 * virail Italia
 * virail ヴィレイル・日本
 * virail Luxembourg (DE)
 * virail Luxembourg (FR)
 * virail Malaysia
 * virail Nederland
 * virail Polsce
 * virail Portugal
 * virail Romania
 * Вираил Россия
 * virail Singapore
 * virail Việt Nam



जावक यात्रा
 * जावक यात्रा
 * राउंड ट्रिप

Cancel
Cancel
1 यात्री 1
   
 * 1 यात्री 1
 * 2 यात्रियों 2
 * 3 यात्रियों 3
 * 4 यात्रियों 4
 * 5 यात्रियों 5

+वापसी

जनवरी 2022

रवि
सोम
मंग
बुध
वीर
शुक्र
शनि
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

+वापसी
+वापसी

जनवरी 2022

रवि
सोम
मंग
बुध
वीर
शुक्र
शनि
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

के लिए सर्वोत्तम डील दिखाएं
स्थानांतरण
व्यवसाय
खोज

खोज आवास


अपनी यात्रा के लिये सबसे सस्ती ट्रेन खोजें




VIRAIL कैसे काम करता है

रूट चुनें तथा सारी उपलब्ध ट्रेने समय सूची तथा शुल्क के साथ पायें




तेज़ तथा आसान

हम सभी ट्रेन रूट खोजते हैं तथा आपके लिये सबसे अच्छा ले के आते हैं।




स्मार्टफ़ोन पर भी

अपने स्मार्टफ़ोन से वाईरेल प्रयोग करें तथा कहीं से भी अपने रेल टिकट बुक करें।



ट्रेन

ट्रेन मुम्बई - चेन्नई
ट्रेन मुम्बई - अहमदाबाद
ट्रेन मुम्बई - हैदराबाद
ट्रेन मुम्बई - पुणे
ट्रेन मुम्बई - सूरत
ट्रेन मुम्बई - कानपुर
ट्रेन मुम्बई - जयपुर
ट्रेन मुम्बई - लखनऊ
ट्रेन मुम्बई - नागपुर
ट्रेन मुम्बई - इन्दौर
ट्रेन मुम्बई - पटना
ट्रेन मुम्बई - भोपाल
ट्रेन मुम्बई - लुधियाना
ट्रेन मुम्बई - आगरा
ट्रेन मुम्बई - बड़ोदरा
ट्रेन मुम्बई - गोरखपुर
ट्रेन मुम्बई - नासिक
ट्रेन मुम्बई - चुनिए चिंचवाड़
ट्रेन मुम्बई - कल्याण
ट्रेन मुम्बई - ठाणे
ट्रेन मुम्बई - मेरठ
ट्रेन मुम्बई - फरीदाबाद
ट्रेन मुम्बई - गाजियाबाद
ट्रेन मुम्बई - राजकोट
ट्रेन मुम्बई - काशी
ट्रेन दिल्ली - चेन्नई
ट्रेन दिल्ली - अहमदाबाद
ट्रेन दिल्ली - हैदराबाद
ट्रेन दिल्ली - पुणे
ट्रेन दिल्ली - सूरत
ट्रेन दिल्ली - कानपुर
ट्रेन दिल्ली - जयपुर
ट्रेन दिल्ली - लखनऊ
ट्रेन दिल्ली - नागपुर
ट्रेन दिल्ली - इन्दौर
ट्रेन दिल्ली - पटना
ट्रेन दिल्ली - भोपाल
ट्रेन दिल्ली - लुधियाना
ट्रेन दिल्ली - आगरा
ट्रेन दिल्ली - बड़ोदरा
ट्रेन दिल्ली - गोरखपुर
ट्रेन दिल्ली - नासिक
ट्रेन दिल्ली - कल्याण
ट्रेन दिल्ली - ठाणे
ट्रेन दिल्ली - मेरठ
ट्रेन दिल्ली - फरीदाबाद
ट्रेन दिल्ली - गाजियाबाद
ट्रेन दिल्ली - राजकोट
ट्रेन दिल्ली - काशी
ट्रेन दिल्ली - अमृतसर
ट्रेन बंगलौर - चेन्नई
ट्रेन बंगलौर - अहमदाबाद

बस

बस दिल्ली - चंडीगढ़
बस बंगलौर - हैदराबाद
बस बंगलौर - ठाणे
बस बंगलौर - कोयंबतूर
बस हैदराबाद - ठाणे
बस हैदराबाद - कोयंबतूर
बस ठाणे - हैदराबाद
बस चंडीगढ़ - दिल्ली
बस कोयंबतूर - मुम्बई
बस कोयंबतूर - बंगलौर
बस कोयंबतूर - हैदराबाद

ट्रेनें

बस गोवा में ट्रेने दिल्ली - बंगलौर ट्रेने दिल्ली - मुम्बई ट्रेने दिल्ली -
रामेश्वरम शहर ट्रेने दिल्ली - जम्मू ट्रेने उदयपुर - अहमदाबाद
बस

बस दिल्ली - चंडीगढ़ बस दिल्ली - देहरादून बस चंडीगढ़ - दिल्ली बस Sax - एलिकांटे
फ्लाइट्स

फ्लाइट अहमदाबाद - लखनऊ फ्लाइट चेन्नई - पटना फ्लाइट सोफिया - लियोन फ्लाइट
अहमदाबाद - पटना फ्लाइट न्यूयॉर्क - नई दिल्ली


हमारे बारे में




VIRAIL भारत

 * फ्लाइट समय भारत
 * ट्रेन समय भारत


अंतरराष्ट्रीय

 * अंतरराष्ट्रीय उड़ानें
 * ट्रेन की समय सारिणी विदेश में

बाजार
virail India (HI)
 * virail Österreich
 * virail България
 * virail Belgium (FR)
 * virail Belgium (NL)
 * virail Belgium (DE)
 * virail Canada (EN)
 * virail Canada (FR)
 * virail en Català
 * virail Schweiz (DE)
 * virail Schweiz (FR)
 * virail Schweiz (IT)
 * virail Chile
 * virail 中国
 * virail Colombia
 * virail USA
 * virail Argentina
 * virail Australia
 * virail Brasil
 * virail Hrvatska
 * virail Mexico
 * virail Türkiye
 * virail України (UA)
 * virail України (RU)
 * virail New Zealand
 * virail ประเทศไทย
 * virail United Kingdom
 * virail Česká republika
 * virail Deutschland
 * virail Danmark
 * virail España
 * virail France
 * virail Ελλάδα
 * virail Magyarország
 * virail Ireland
 * virail India (HI)
 * virail India (EN)
 * virail Italia
 * virail ヴィレイル・日本
 * virail Luxembourg (DE)
 * virail Luxembourg (FR)
 * virail Malaysia
 * virail Nederland
 * virail Polsce
 * virail Portugal
 * virail Romania
 * Вираил Россия
 * virail Singapore
 * virail Việt Nam

 * Omio 10% cashback

 * Booking.com 4% cashback

 * Rentalcars.com

 * modal.deal.exclusiveAccessInfo


~
05
दिन
:
02

:
05

:
04











 
 
Privacy settings