<div class="absolute top-0 left-0 z-20 bg-gray-800 p-2 sm:w-72 sm:ml-6 sm:mt-6" style="background: hsl(284, 51%, 22%)" x-cloak x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90 -translate-y-6 -translate-x-6" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90 -translate-y-6 -translate-x-6">
    <button @click="open = false" class="absolute group top-0 right-0" aria-label="Close">
        <svg class="h-6 w-6 m-2 fill-current text-gray-500 group-hover:text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
        </svg> </button>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.0/css/pikaday.min.css" integrity="sha512-yFCbJ3qagxwPUSHYXjtyRbuo5Fhehd+MCLMALPAUar02PsqX3LVI5RlwXygrBTyIqizspUEMtp0XWEUwb/huUQ==" crossorigin="anonymous" />

    <form id="booking-widget" class="max-w-5xl mx-auto px-4 pb-0" style="" method="get" action="https://booking.ihotelier.com/istay/istay.jsp" target="_blank" rel="noopener">

        <input type="hidden" name="HotelID" value="12571" />
        <input type="hidden" name="LanguageID" value="1" />
        <input type="hidden" name="Rooms" value="1" />
        <input type="hidden" id="DateIn" name="DateIn">
        <input type="hidden" id="DateOut" name="DateOut">

        <div class="flex flex-wrap content-between py-4 -mx-2">

            <div class="w-full mb-4 px-2 ie-hide">
                <label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="widget-ArrivalDate">
                    Arrival
                </label>
                <div class="relative">
                    <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 py-4 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="widget-ArrivalDate" name="arrival" type="text" placeholder="Arrival Date" autocomplete="off" readonly="">
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
                        <svg class="h-4 w-5 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M17 3h-1v2h-3V3H7v2H4V3H3c-1.101 0-2 .9-2 2v12c0 1.1.899 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V9h14v8zM6.5 1h-2v3.5h2V1zm9 0h-2v3.5h2V1z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="w-full mb-4 px-2 ie-hide">
                <label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="widget-DepartureDate">
                    Departure
                </label>
                <div class="relative">
                    <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 py-4 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="widget-DepartureDate" name="departure" type="text" placeholder="Departure Date" autocomplete="off" readonly="">

                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
                        <svg class="h-4 w-5 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M17 3h-1v2h-3V3H7v2H4V3H3c-1.101 0-2 .9-2 2v12c0 1.1.899 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V9h14v8zM6.5 1h-2v3.5h2V1zm9 0h-2v3.5h2V1z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="w-1/2 mb-4 px-2">
                <label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="Adults">
                    Adults
                </label>
                <div class="relative text-gray-500">
                    <select id="Adults" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-4 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="Adults">
                        <option value="1">1</option>
                        <option value="2" selected="selected">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-700">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="w-1/2 mb-4 px-2">
                <label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="Children">
                    Children
                </label>
                <div class="relative text-gray-500">
                    <select id="Children" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-4 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="Children">
                        <option value="0" selected="selected">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-700">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="w-full px-2 flex flex-col justify-end">
                <button type="submit" class="block mt-2 py-4 px-4 border border-white hover:bg-teal-600 focus:bg-teal-600 text-white uppercase" onclick="ga('send','event','Outgoing','Booking System')">
                    Search Availability
                </button>
            </div>
        </div>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js" integrity="sha512-XZSHSEFj4QeE0G4pwy4tToyAhF2VXoEcF9CP0t1PSZMP2XHhEEB9PjM9knsdzcEKbi6GRMazdt8tJadz0JTKIQ==" crossOrigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.0/pikaday.min.js" integrity="sha512-AWC8WaJpos1L8xD++XDtqY3znmqhqDY/o4KZ3wo7kmt1Hx6YjP4ZqPnYDrLg1ymG6iidGzq/UKHS/MxBwVAlwQ==" crossorigin="anonymous"></script>

    <script>
        /*
        Javascript for booking widget
        - using Pikaday for date widget
        - using Day.js for date manipulation
  
        Based on the following assumptions:
        - form method is POST
        - convert display dates to submitted dates using YYYYMMDD
        - submitted field names are:
              - DateIn
              - DateOut
              - Adults
              - Children
      */
        // Date picker for arrival date.
        // On select, set minDepartureDate + minNights for departure date widget
        const minNights = 1;
        const arrival = new Pikaday({
            field: document.querySelector('#widget-ArrivalDate'),
            format: 'YYYY-MM-DD',
            minDate: new Date(dayjs().add(1, 'day')),
            onSelect() {
                let selectedDate = new Date(this.getDate());
                const minDepartureDate = new Date(
                    selectedDate.getFullYear(),
                    selectedDate.getMonth(),
                    selectedDate.getDate() + minNights
                );
                depart.setMinDate(minDepartureDate);
                // set depart calendar to selected date, important when not in same month
                depart.gotoDate(selectedDate);
                // format date for submission
                return arrivalDateSubmitFormat = dayjs(this.getDate()).format('MM/DD/YYYY');
            },
        });
        // Date picker for departure date.
        // const departure_date = '';
        const depart = new Pikaday({
            field: document.querySelector('#widget-DepartureDate'),
            format: 'YYYY-MM-DD',
            minDate: new Date(dayjs().add(1 + minNights, 'day')),
            onSelect() {
                const selectedDate = new Date(this.getDate());
                const maxArrivalDate = new Date(
                    selectedDate.getFullYear(),
                    selectedDate.getMonth(),
                    selectedDate.getDate() - minNights
                );
                arrival.setMaxDate(maxArrivalDate);
                // format date for submission
                return departureDateSubmitFormat = dayjs(this.getDate()).format('MM/DD/YYYY');
            },
        });
        // Date conversion before submission
        const bookingWidget = document.querySelector('#booking-widget');
        const arrivalDisplayField = document.querySelector('#widget-ArrivalDate')
        const departureDisplayField = document.querySelector('#widget-DepartureDate')
        const arrivalSubmitField = document.querySelector('#DateIn')
        const departureSubmitField = document.querySelector('#DateOut')
        if (bookingWidget) {
            bookingWidget.addEventListener("submit", function(event) {
                // set the value of hidden fields to dates reformatted for submission
                arrivalSubmitField.value = arrivalDateSubmitFormat;
                departureSubmitField.value = departureDateSubmitFormat;
                // remove the name attribute or our arrival and departure display fields to avoid submitting
                arrivalDisplayField.removeAttribute('name');
                departureDisplayField.removeAttribute('name');
                // to test values without submitting form
                // event.preventDefault();
                // console.log('arrivalSubmitField: ' + arrivalSubmitField.value);
                // console.log('departureSubmitField: ' + departureSubmitField.value);
            });
        }
    </script>

    <script>
        var myForm = document.getElementById('booking-widget');
        addListener(myForm, 'submit', decorateForm);

        function decorateForm(event) {
            event = event || window.event; // Cross browser hoops.
            var target = event.target || event.srcElement;
            if (target && target.action) {
                ga('linker:decorate', target);
            }
        }
        // Cross browser way to listen for events.
        function addListener(element, type, callback) {
            if (element.addEventListener) element.addEventListener(type, callback);
            else if (element.attachEvent) element.attachEvent('on' + type, callback);
        }
    </script>