{{!--{#--}}
{{!--===========================================================--}}
{{!--Booking widget partial.--}}
{{!--===========================================================--}}
{{!--#}--}}

{{!--{#<link rel="stylesheet" type="text/css"#}--}}
{{!--{#      href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">#}--}}

{{!--{#{% css "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" %}#}--}}
<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="{{ style }}" method="get"
      action="https://booking.ihotelier.com/istay/istay.jsp" target="_blank" rel="noopener">

{{!--    {# Travelclick Params and formatting--}}

{{!--        Form action URL: https://booking.ihotelier.com/istay/istay.jsp--}}
{{!--        Method: get--}}

{{!--        HotelID=12571--}}
{{!--        DateIn=04/22/2021--}}
{{!--        DateOut=04/26/2021 or Length=4--}}
{{!--        Adults=1--}}
{{!--        Children=0--}}
{{!--        LanguageID=1--}}
{{!--        Rooms=1--}}
{{!--    #}--}}

    <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">

{{!--        {% namespace 'widget' %}--}}
        <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>

{{!--        {% endnamespace %}--}}

        <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://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></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>

{{!--{% js %}--}}
<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>
{{!--{% endjs %}--}}

{{!--{#--}}
{{!--The following code is for Google Analytics to decorate the booking form with domain linking parameters--}}
{{!--see https://developers.google.com/analytics/devguides/collection/analyticsjs/cross-domain#decorateforms for more details--}}
{{!--#}--}}

{{!--{# todo: check if this is still needed#}--}}

{{!--{% js %}--}}
<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>
{{!--{% endjs %}--}}