<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <!--folio template -->
    <template id="portal_my_prechekin_folio" name="My precheckin in folio">
         <t t-call="portal.portal_layout">
            <t t-foreach="folio.reservation_ids" t-as="reservation">
                <t t-set="reservation" t-value="reservation" />
                 <form
                    t-att-action="folio.get_portal_url(suffix='/reservations/'+str(reservation.id)+'/checkins')"
                    method="post"
                >
                  <div class="reservation-card">
                      <button id="btn-room" type="submit" class="btn-room">
                          <div style="margin-left:6px;">
                              <span t-field="reservation.folio_sequence" />
                                <span t-field="reservation.room_type_id.name" />

                          </div>
                         <div style="margin-right:6px;">
                             <span class="fa fa-user-o" />
                             <t
                                    t-esc="reservation.adults - reservation.pending_checkin_data"
                                /> /
                             <span t-field="reservation.adults" /> completed
                         </div>

                        <span id="pending-data" class="d-none"><t
                                    t-esc="reservation.pending_checkin_data"
                                /></span>

                      </button>
                </div>
                 </form>

            </t>
         </t>
        <script>
            var adultsIncompleted = document.getElementById("pending-data").innerText;
            if(!adultsIncompleted){
                var buttonRoom = document.getElementById("btn-room");
                buttonRoom.style.backgroundColor = #6c757d;
            }
        </script>
        <style>
            .reservation-card {
              width: 100%;
              height:36px;
              border-radius: 5px;
              margin-top: 4px;
            }
            .reservation-card:hover {
              box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            }
            .btn-room{
                display:flex;
                justify-content: space-between;
                align-items: center;
                background-color: #3AADAA;
                border: none;
                color: #FFFFFF;
                width: 100%;
                height:36px;
                border-radius: 5px;
            }
        </style>
    </template>
    <!-- reservation template -->
    <template id="portal_my_prechekin_reservation" name="My precheckin in folio">
         <t t-call="portal.portal_layout">
             <t t-set="checkins_count" t-value="1" />
            <t t-foreach="reservation.checkin_partner_ids" t-as="checkin_partner">
               <form t-att-action="checkin_partner.get_portal_url()" method="post">
                  <div class="checkin-card">
                         <input
                            class="d-none"
                            id="folio_access_token"
                            name="folio_access_token"
                            t-att-value="folio_access_token"
                        />
                      <t t-if="checkin_partner.state not in ['dummy','draft']">
                          <button disabled="disabled" class="btn-host-complete">
                              <span style="margin-left: 6px"><t
                                        t-esc="checkin_partner.name"
                                    /></span>

                              <span style="margin-right: 6px"> Complete data</span>
                          </button>
                          <t t-set="checkins_count" t-value="checkins_count + 1" />
                      </t>

                      <t t-else="">
                          <button type="submit" class="btn-host">
                             <span style="margin-left: 6px">Host <t
                                        t-esc="checkins_count"
                                    /></span>
                                 <span style="margin-right: 6px"> Incomplete data</span>
                          </button>
                          <t t-set="checkins_count" t-value="checkins_count + 1" />
                      </t>


                </div>
                 </form>
            </t>
         </t>
        <script />
        <style>
            .checkin-card {
              width: 100%;
              height:36px;
              border-radius: 5px;
              margin-top: 4px;
            },
            .checkin-card:hover {
              box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            }
            .btn-host{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #3AADAA;
                border: none;
                color: #FFFFFF;
                width: 100%;
                height:36px;
                border-radius: 5px;
                text-align: left;
            }
            .btn-host-complete{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #CED4DA;
                border: none;
                color: #000000;
                width: 100%;
                height:36px;
                border-radius: 5px;
                text-align: left;
            }
        </style>
    </template>
    <!-- checkin form -->
    <template id="portal_my_precheckin_detail" name="My Precheckin">
        <t t-call="portal.portal_layout">
            <form
                id="checkinForm"
                t-att-action="checkin_partner.get_portal_url(suffix='/submit')"
                method="post"
            >
                <div class="row o_portal_details">
                    <div
                        id="title"
                        class="form-group col-xl-12"
                        style="margin-top:6px;"
                    >
                        <center>
                                <h4 class="font-weight-bold">PreCheckin in <span
                                    t-field="folio.pms_property_id.name"
                                /></h4>
                            <h5 class="font-weight-bold mt-2">Room: <span
                                    t-field="reservation.folio_sequence"
                                />  <span
                                    t-field="reservation.room_type_id.name"
                                /></h5>
                        </center>
                    </div>

                    <div class="row justify-content-center">
                            <div t-attf-class="form-group col-12 col-md-6">
                                <label class="col-form-label" for="firstname">Name<small
                                > *</small></label>
                                <input
                                type="text"
                                name="firstname"
                                id="firstname"
                                t-attf-class="form-control"
                                maxlength="30"
                                t-attf-oninput="removeErrorClass(this)"
                            />
                                <span
                                id="name-error"
                                class="d-none text-danger"
                            >Firstname is a required field</span>
                            </div>
                            <div t-attf-class="form-group col-12 col-md-6">
                                <label
                                class="col-form-label"
                                for="lastname"
                            >Lastname *</label>
                                <input
                                type="text"
                                name="lastname"
                                id="lastname"
                                t-attf-class="form-control"
                                maxlength="30"
                                t-attf-oninput="removeErrorClass(this)"
                            />
                                <span
                                id="lastname-error"
                                class="d-none text-danger"
                            >Lastname is a required field</span>
                            </div>
                            <div t-attf-class="form-group col-12 col-md-6 pb-md-5">
                                <label
                                class="col-form-label"
                                for="lastname2"
                            > Second Lastname (Optional)</label>
                                <input
                                type="text"
                                name="lastname2"
                                id="lastname2"
                                t-attf-class="form-control"
                                maxlength="30"
                                t-attf-oninput="removeErrorClass(this)"
                            />
                            <span
                                id="sndlastnameError"
                                class="d-none text-danger"
                            >If the nationality is Spanish, a second lastname must be provided</span>                            </div>
                            <div t-attf-class="form-group col-12 col-md-6 pb-5">
                                <label
                                class="col-form-label"
                                for="gender"
                            >Gender *</label>
                                <div class="d-none"><p id="genderId"><t
                                        t-esc="gender"
                                    /></p></div>
                                <select
                                class="form-control"
                                name="gender"
                                id="gender"
                                t-attf-class="form-control"
                                t-attf-onchange="removeErrorClass(this)"
                            >
                                    <option value="">Select an option</option>
                                    <option
                                    value="female"
                                    t-att-selected="'female' == gender"
                                >
                                        Female
                                    </option>
                                    <option
                                    value="male"
                                    t-att-selected="'male' == gender"
                                >
                                        Male
                                    </option>
                                    <option
                                    value="other"
                                    t-att-selected="'other' == gender"
                                >
                                        Other
                                    </option>
                                </select>
                                <span
                                id="gender-error"
                                class="d-none text-danger"
                            >Gender is a required field</span>
                            </div>
                            <div
                            name="document_type_div"
                            t-attf-class="form-group col-12 col-md-6"
                        >
                                <label
                                class="col-form-label"
                                for="document_type"
                            >Doc. Type *</label>
                                <select
                                class="form-control"
                                name='document_type'
                                id="doc_type"
                                t-attf-onchange="removeErrorClass(this)"
                            >
                                    <option value="">Select an option</option>
                                    <t t-foreach="doc_type_ids" t-as='doc_type'>
                                        <option t-att-value="doc_type.id">
                                            <t t-esc='doc_type.name' />
                                        </option>
                                    </t>
                                </select>
                                <span
                                id="document_type_error"
                                class="d-none text-danger"
                            >Doc. Type is a required field</span>
                            </div>
                            <div
                            name="document_number_div"
                            t-attf-class="form-group col-12 col-md-6"
                        >
                                <label
                                class="col-form-label"
                                for="document_number"
                            >Doc. Number *</label>
                                <input
                                type="text"
                                name="document_number"
                                id="document_number"
                                t-attf-class="form-control"
                                maxlength="14"
                                t-attf-oninput="removeErrorClass(this)"
                            />
                            <span
                                id="docNumber-error"
                                class="d-none text-danger"
                            >Doc. Number is a required field</span>
                            <span
                                id="docNumberFormat-error"
                                class="d-none text-danger"
                            >Doc. Number Format is wrong</span>
                            </div>

                        <div t-attf-class="form-group col-12 col-md-6">
                                <label
                                class="col-form-label"
                                for="document_expedition_date"
                            >Doc. Expedition Date/Doc. Validity Date *</label>
                            <span
                                class="fa fa-question-circle fa-lg ml-4"
                                data-toggle="tooltip"
                                title="If you enter the validity date of the document, the expedition date will be automatically calculated and entered depending on the document type."
                            />
                                <input
                                type="text"
                                name="document_expedition_date"
                                id="docExpDate"
                                t-attf-class="form-control"
                                data-date-format="dd/mm/yyyy"
                                value="01/01/2020"
                                t-attf-onclick="changeDatepickerArrow(this)"
                            />
                            <span
                                id="docExpDate-error"
                                class="d-none text-danger"
                            >Doc. Expedition or Validate date is a required field</span>

                            </div>
                            <div t-attf-class="form-group col-12 col-md-6">
                                <label
                                class="col-form-label"
                                for="datepicker"
                            > Birth Date *</label>
                                <input
                                type="text"
                                name="birthdate_date"
                                id="birthdateId"
                                t-attf-class="form-control"
                                data-date-format="dd/mm/yyyy"
                                value="01/01/1980"
                                t-attf-onclick="changeDatepickerArrow(this)"
                            />
                            <span
                                id="birthdate-error"
                                class="d-none text-danger"
                            >Birthdate cannot be older than today</span>

                            </div>
                        <div class="d-none" id="countryDiv">
                            <t t-foreach="country_ids" t-as='country_id'>
                            <span
                                    t-att-id="country_id.name"
                                    t-att-country_name="country_id.name"
                                    t-att-country_id="country_id.id"
                                />
                            </t>
                        </div>
                        <input
                            class="d-none"
                            id="nationality_id"
                            name="nationality_id"
                        />
                        <input
                            class="d-none"
                            id="folio_access_token"
                            name="folio_access_token"
                            t-att-value="folio_access_token"
                        />
                            <div t-attf-class="form-group col-12 col-md-6">
                                <label
                                class="col-form-label"
                                for="nationality_id"
                            >Nationality *</label><br />
                            <div class="dropdown">
                              <input
                                    type="text"
                                    class="dropdown-input"
                                    t-attf-class="form-control"
                                    placeholder="Type your nationality here"
                                    id="myInput"
                                    onclick="showNationCountries(true)"
                                    oninput="filterNationalities()"
                                />
                              <div
                                    id="nationalityDropdown"
                                    class="dropdown-content d-none"
                                >
                                    <t t-foreach="country_ids" t-as='country_id'>
                                        <a t-attf-onclick="selectNationality(this)">
                                            <t t-esc='country_id.name' />
                                        </a>
                                    </t>
                              </div>
                                <span
                                    id="nationalitySpainError"
                                    class="d-none text-danger"
                                >If the nationality is Spanish, a second lastname must be provided</span>
                                <span
                                    id="nationalityError"
                                    class="d-none text-danger"
                                >Nationality is a required field</span>

                            </div>
                            </div>
                            <div t-attf-class="form-group col-12 col-md-6">
                                <label
                                id="label_mobile"
                                class="col-form-label"
                                for="mobile"
                            >Mobile (Optional)</label>
                                <input
                                type="phone"
                                name="mobile"
                                id="mobileInput"
                                t-attf-class="form-control"
                            />

                            </div>
                            <div t-attf-class="form-group col-12 col-md-6">
                                <label
                                id="label_phone"
                                class="col-form-label"
                                for="phone"
                            >Phone (Optional)</label>
                                <input
                                type="phone"
                                name="phone"
                                id="phoneInput"
                                t-attf-class="form-control"
                            />

                            </div>
                            <div t-attf-class="form-group col-12 col-md-6">
                                <label
                                id="label_email"
                                class="col-form-label"
                                for="email"
                            >Email (Optional)</label>
                                <input
                                type="email"
                                name="email"
                                id="emailInput"
                                t-attf-class="form-control"
                                t-attf-oninput="removeErrorClass(this)"
                            />
                            <span
                                id="email-error"
                                class="d-none text-danger"
                            >Email format is incorrect</span>

                            </div>
                            <div t-attf-class="form-group col-md-12 pt-md-5">
                                <label
                                class="col-form-label"
                                for="residence_street"
                            >Residence Address *</label>
                                <input
                                type="text"
                                placeholder="Street"
                                name="residence_street"
                                id="residence_street"
                                t-attf-class="form-control"
                                t-attf-oninput="removeErrorClass(this)"
                            />
                                <span
                                id="street-error"
                                class="d-none text-danger"
                            >Residence Address is a required field</span>
                            </div>
                            <div t-attf-class="form-group col-md-12">
                                <input
                                type="text"
                                placeholder="Second Street (Optional)"
                                name="residence_street2"
                                t-attf-class="form-control"
                            />
                            </div>
                            <div t-attf-class="form-group col-12 col-md-6">
                                <div class="dropdown">

                                <input
                                    name="residence_zip"
                                    class="dropdown-input"
                                    id="myZipInput"
                                    t-attf-class="form-control"
                                    type="text"
                                    placeholder="Type your zip code here"
                                    onclick="showZips(true)"
                                    oninput="filterZips()"
                                    autocomplete="off"
                                />
                                    <span
                                    id="zip-error"
                                    class="d-none text-danger"
                                >Zip is a required field</span>
                              <div id="myZipDropdown" class="dropdown-content d-none">

                                    <t t-foreach="zip_ids" t-as='zip_id'>
                                        <a t-attf-onclick="completeAddressData(this)">
                                            <span
                                                t-att-zip_name="zip_id.name"
                                                t-att-country_id="zip_id.country_id.id"
                                                t-att-state_id="zip_id.state_id.id"
                                                t-att-city_name="zip_id.city_id.name"
                                            >
                                                <t t-esc='zip_id.name' /> <t
                                                    t-esc='zip_id.city_id.name'
                                                /> <t t-esc='zip_id.state_id.name' /> <t
                                                    t-esc='zip_id.country_id.name'
                                                />
                                            </span>
                                        </a>
                                    </t>

                              </div>
                            </div>
                            </div>

                            <div t-attf-class="form-group col-12 col-md-6">
                                <input
                                type="text"
                                placeholder="City"
                                name="residence_city"
                                id="residence_city"
                                t-attf-class="form-control"
                                t-attf-oninput="removeErrorClass(this)"
                            />
                                <span
                                id="city-error"
                                class="d-none text-danger"
                            >Residence City is a required field</span>
                            </div>
                        <input
                            class="d-none"
                            id="residence_country_id"
                            name="residence_country_id"
                        />
                         <div t-attf-class="form-group col-12 col-md-6">
                             <div class="dropdown">
                                 <input
                                    class="dropdown-input"
                                    t-attf-class="form-control"
                                    type="text"
                                    placeholder="Type your country here"
                                    id="myCountryInput"
                                    onclick="showCountries(true)"
                                    oninput="filterCountries()"
                                    autocomplete="off"
                                />
                                 <div
                                    id="myCountryDropdown"
                                    class="dropdown-content d-none"
                                >

                                    <t t-foreach="country_ids" t-as='country'>
                                          <a
                                            t-att-id="country.id"
                                            t-attf-onclick="selectCountry(this)"
                                        >
                                            <t t-esc='country.name' />
                                        </a>
                                    </t>

                              </div>
                             </div>
                            </div>
                        <input
                            class="d-none"
                            id="residence_state_id"
                            name="residence_state_id"
                        />
                            <div t-attf-class="form-group col-12 col-md-6 pb-md-3">
                                <div class="dropdown">
                                 <input
                                    class="dropdown-input"
                                    t-attf-class="form-control"
                                    type="text"
                                    placeholder="Type your state here"
                                    id="myStateInput"
                                    onclick="showStates(true)"
                                    oninput="filterStates()"
                                    autocomplete="off"
                                />
                                 <div
                                    id="myStateDropdown"
                                    class="dropdown-content d-none"
                                >

                                    <t t-foreach="state_ids" t-as='state'>
                                          <a
                                            t-att-id="state.id"
                                            t-attf-onclick="selectState(this)"
                                            t-att-country-id="state.country_id.id"
                                        >
                                            <t t-esc='state.name' />
                                        </a>
                                    </t>

                              </div>
                             </div>
                            </div>


                            <div t-attf-class="form-group col-md-12">
                                <button
                                type="button"
                                class="btn btn-primary float-right"
                                onclick="validateAndSend()"
                            >
                                        Save
                                    </button>
                            </div>
                    </div>
                </div>
            </form>
        </t>
        <style>
            #checkinForm {
                padding: 10px;
            }

        .dropdown-input {

          box-sizing: border-box;
          background-position: 14px 12px;
          background-repeat: no-repeat;
          font-size: 0.875rem;
          padding: 0.375rem 0.75rem;
          border: 1px solid #CED4DA;
          border-radius: 0.25rem;
          border-bottom: 1px solid #ddd;
          transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        #dropdown-input:focus {outline: 3px solid #93dbd9;}


.dropdown {
  position: relative;
  display: inline-block;
            width: 100%;
}

.dropdown-content {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 0.5rem;

  z-index: 1;
  max-height: 150px;
}

.dropdown-content a {
  border-bottom: 1px solid  #CED4DA;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
#div-country-options{
            display:none;
            }
.dropdown a:hover {background-color: #ddd;}

            .error {
                border: 1px solid red;
            }
        </style>
        <script
            class="origin"
            type="text/javascript"
            src="/web/static/lib/jquery/jquery.js"
        />
        <script
            type="text/javascript"
            src="/pms/static/src/js/widgets/datepicker/bootstrap-datepicker.js"
            charset="UTF-8"
        />
        <link
            rel="stylesheet"
            href="/pms/static/src/js/widgets/datepicker/datepicker.css"
        />
        <script>
            $('#birthdateId').datepicker({
                startView: 'decade',
            });
            $('#docExpDate').datepicker({
                startView: 'decade',
            });

            var select_doc_type = document.getElementById("doc_type")
            var document_type_value = document.getElementById("docTypeId").textContent
            for (let i=0;i&lt;select_doc_type.length;i++){
            if (select_doc_type[i].value == document_type_value){
            select_doc_type[i].setAttribute("selected","True")
            }
            }

            var folio_id = document.getElementById("folio").value
            var checkin_partner_id = document.getElementById("checkin").value
            var access_token = document.getElementById("input_access_token").value

            function showNationCountries(show){
                if(show){
                    document.getElementById("nationalityDropdown").classList.remove("d-none");
                }else{
                    document.getElementById("nationalityDropdown").classList.add("d-none");
                }

            }

            function showCountries(show){
                if(show){
                    document.getElementById("myCountryDropdown").classList.remove("d-none");
                }else{
                    document.getElementById("myCountryDropdown").classList.add("d-none");
                }

            }
            function showStates(show){
                if(show){
                    document.getElementById("myStateDropdown").classList.remove("d-none");
                }else{
                    document.getElementById("myStateDropdown").classList.add("d-none");
                }

            }


            function showZips(showZips){
                if(showZips){
                    document.getElementById("myZipDropdown").classList.remove("d-none");
                }else{
                    document.getElementById("myZipDropdown").classList.add("d-none");
                }
            }


            function filterNationalities() {
              var input, filter, a, i;
              input = document.getElementById("myInput");
              filter = input.value.toUpperCase();
              div = document.getElementById("nationalityDropdown");
              a = div.getElementsByTagName("a");
              for (i = 0; i&lt;a.length; i++) {
                txtValue = a[i].textContent || a[i].innerText;
                if (txtValue.trim().toUpperCase().startsWith(filter)) {
                  a[i].style.display = "";
                } else {
                  a[i].style.display = "none";
                }
              }
            }

            function filterZips() {
              var input, filter, a, i;
              input = document.getElementById("myZipInput");
              filter = input.value.toUpperCase();
              div = document.getElementById("myZipDropdown");
              a = div.getElementsByTagName("a");
              for (i = 0; i&lt;a.length; i++) {
                txtValue = a[i].textContent || a[i].innerText;
                if (txtValue.trim().toUpperCase().startsWith(filter)) {
                  a[i].style.display = "";
                } else {
                  a[i].style.display = "none";
                }
              }
            }

            function filterCountries() {
              var input, filter, a, i;
              input = document.getElementById("myCountryInput");
              filter = input.value.toUpperCase();
              div = document.getElementById("myCountryDropdown");
              a = div.getElementsByTagName("a");
              for (i = 0; i&lt;a.length; i++) {
                txtValue = a[i].textContent || a[i].innerText;
                if (txtValue.trim().toUpperCase().startsWith(filter)) {
                  a[i].style.display = "";
                } else {
                  a[i].style.display = "none";
                }
              }
            }
            function filterStatesByCountry(country_id){
                Array.from(document.getElementById("myStateDropdown").getElementsByTagName("a")).forEach(element => {
                if (element.getAttribute('country-id') == country_id) {
                element.style.display = "";
                } else {
                element.style.display = "none";
                }
                });
            }
            function filterStates() {
              var input, filter, a, i;
              input = document.getElementById("myStateInput");
              filter = input.value.toUpperCase();
              div = document.getElementById("myStateDropdown");
              a = div.getElementsByTagName("a");
              for (i = 0; i&lt;a.length; i++) {
                txtValue = a[i].textContent || a[i].innerText;
                if (txtValue.trim().toUpperCase().startsWith(filter)) {
                  a[i].style.display = "";
                } else {
                  a[i].style.display = "none";
                }
              }
            }

            function selectNationality(element){
                var nationality = element.innerText;
                document.getElementById("myInput").value = nationality;

                var nationalityId = document.getElementById(nationality).getAttribute("country_id");
                var nationalityInput = document.getElementById("nationality_id");

                nationalityInput.value = nationalityId;
                this.showNationCountries(false);
            }

            function selectCountry(element){
                var country = element.innerText;
                document.getElementById("myCountryInput").value = country.trim();
                var countryInput = document.getElementById("residence_country_id");
                countryInput.value = element.id;
                this.showCountries(false);
                this.filterStatesByCountry(element.id);
            }
            function selectState(element){
                var state = element.innerText;
                document.getElementById("myStateInput").value = state.trim();
                var stateInput = document.getElementById("residence_state_id");
                stateInput.value = element.id;
                this.showStates(false);
            }
            function completeAddressData(element){
                var zip_name = element.firstChild.nextSibling.getAttribute("zip_name");
                var country_id = element.firstChild.nextSibling.getAttribute("country_id");
                var state_id = element.firstChild.nextSibling.getAttribute("state_id");
                var city_name = element.firstChild.nextSibling.getAttribute("city_name");
                document.getElementById("myZipInput").value = zip_name;

                Array.from(document.getElementById("myCountryDropdown").getElementsByTagName("a")).forEach(element => {
                if (element.id == country_id) {
                element.click(element);
                var countryInput = document.getElementById("residence_country_id");
                countryInput.value = country_id;

                }
                });


                Array.from(document.getElementById("myStateDropdown").getElementsByTagName("a")).forEach(element => {
                if (element.id == state_id) {
                    element.click(element);
                    var stateInput = document.getElementById("residence_state_id");
                    stateInput.value = state_id;
                }
                });
                document.getElementById('residence_city').value = city_name;
                this.showZips(false);
            }
            function changeDatepickerArrow(element){

                    var arrowLeftDatepicker = document.getElementsByClassName("icon-arrow-left");

                    for(let item of arrowLeftDatepicker){
                       item.classList.remove("icon-arrow-left");
                       item.classList.add("fa","fa-arrow-left");
                    }
                     var arrowRightDatepicker = document.getElementsByClassName("icon-arrow-right");

                    for(let item of arrowRightDatepicker){
                       item.classList.remove("icon-arrow-right");
                       item.classList.add("fa","fa-arrow-right");
                    }

            }
            function removeErrorClass(element){
                element.classList.remove("error");
                element.nextElementSibling.classList.add("d-none");
            }
            function validateAndSend(event){
                var send = true;

                var firstname = document.getElementById("firstname");
                var lastname = document.getElementById("lastname");

                if(!firstname.value){
                    firstname.classList.add("error");
                    document.getElementById("name-error").classList.remove("d-none");
                    send = false;
                }
                if( !lastname.value){
                    lastname.classList.add("error");
                    document.getElementById("lastname-error").classList.remove("d-none");
                    send = false;
                }


                var gender = document.getElementById("gender");
                if(!gender.value){
                    gender.classList.add("error");
                    document.getElementById("name-error").classList.remove("d-none");
                    send = false;
                }

                var document_type = document.getElementById("doc_type");
                var document_number = document.getElementById("document_number");
                if(!document_type.value){
                    document.getElementById("doc_type").classList.add("error");
                    document.getElementById("document_type_error").classList.remove("d-none");
                    send = false;
                }
                if(!document_number.value){
                    document.getElementById("document_number").classList.add("error");
                    document.getElementById("docNumber-error").classList.remove("d-none");
                    send = false;
                }
                var birthdate = document.getElementById("birthdateId").value;
                var birthdateParts = birthdate.split("/");
                var birthdateDate = new Date(birthdateParts[2], birthdateParts[1]-1, birthdateParts[0]);
                var todayDate = new Date();
                if (todayDate.getTime() &lt;= birthdateDate.getTime()){
                    document.getElementById("birthdateId").classList.add("error");
                    document.getElementById("birthdate-error").classList.remove("d-none");
                    send = false;
                }

                var nationality = document.getElementById("myInput").value;
                var lastname2 = document.getElementById("lastname2").value;
                var nationalityId = document.getElementById(nationality)

                if(nationalityId){
                    nationalityId = nationalityId.getAttribute("country_id");
                }
                if(!nationalityId){
                    document.getElementById("myInput").classList.add("error");
                    document.getElementById("nationalityError").classList.remove("d-none");
                    send = false;
                }else{
                    if(nationalityId == 68){
                        if(!lastname2){
                            document.getElementById("myInput").classList.add("error");
                            document.getElementById("lastname2").classList.add("error");
                            document.getElementById("nationalitySpainError").classList.remove("d-none");
                            document.getElementById("sndlastnameError").classList.remove("d-none");
                            send = false;
                        }
                    }
                }
                var mobile = document.getElementById("mobileInput").value;
                var phone = document.getElementById("phoneInput").value;
                var email = document.getElementById("emailInput").value;
                let regex = /^[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
                if(email){
                    if(!regex.test(email)){
                        document.getElementById("emailInput").classList.add("error");
                        document.getElementById("email-error").classList.remove("d-none");
                        send = false;
                    }
                }
                var residence_street = document.getElementById("residence_street");
                if(!residence_street.value){
                    document.getElementById("residence_street").classList.add("error");
                    document.getElementById("street-error").classList.remove("d-none");
                    send = false;
                }

                var residence_city = document.getElementById("residence_city");
                if(!residence_city.value){
                    document.getElementById("residence_city").classList.add("error");
                    document.getElementById("city-error").classList.remove("d-none");
                    send = false;
                }
                if(send){
                    document.getElementById("checkinForm").submit();
                }
            }
        </script>
    </template>
    <!-- precheckin buttons and send invitations -->
    <template id="portal_my_reservation_precheckin" name="Precheckin Reservation">
        <t t-call="portal.portal_layout">
            <wrap>
                <div
                    class="oe_structure"
                    id="oe_structure_website_form_reservation_precheckin_1"
                />
                <thead style="background-color: white;">
                    <tr class="active">
                        <center>
                            <h4>PreCheckin in <span
                                    t-field="folio.pms_property_id.name"
                                /></h4>
                        </center>
                    </tr>
                </thead>
                <center>
                    <h5 style="margin-top:20px;">
                        Hi,
                        <span t-field="folio.sudo().partner_name" />.<br />
                        Do your check-in now and save time.
                    </h5>

                    <br />
                    This is our<strong
                    > quick registration system</strong>. In a few steps you will be able to register your data in an agile, simple and secure way,<strong
                    > avoiding queues at reception</strong>.
                    If you register your data in our system, <strong
                    > your passage through reception will be much faster</strong>, being able to enjoy the comfort of your room right away.
                </center>
                <div class="col-12" style="margin-top:40px;">
                    <form
                        class="col-6 float-right"
                        style="margin-bottom:50px"
                        t-att-action="folio.get_portal_url()"
                        method="get"
                    >
                        <button
                            type="submit"
                            class="btn btn-primary"
                            style="width:-webkit-fill-available"
                        >
                            <span class="fa fa-info" />
                            Reservation Info
                        </button>
                        <input
                            type="text"
                            name="access_token"
                            t-attf-class="d-none"
                            t-att-value="folio.access_token"
                        />
                        <input
                            name="folio_id"
                            t-attf-class="d-none"
                            t-att-value="folio.id"
                        />
                    </form>
                    <form
                        class="col-6"
                        style="margin-bottom:50px"
                        t-att-action="folio.get_portal_url(suffix='/reservations')"
                        method="post"
                    >
                        <input
                            type="text"
                            name="access_token"
                            t-attf-class="d-none"
                            t-att-value="folio.access_token"
                        />
                        <button
                            type="submit"
                            class="btn btn-primary"
                            style="width:-webkit-fill-available"
                        >
                            <span class="fa fa-wpforms" />
                            CHECK IN NOW!
                        </button>
                    </form>
                </div>
                <center>
                    <t
                        t-if="len(folio.checkin_partner_ids.filtered(lambda c: c.state in ['dummy','draft'])) &gt;= 1"
                    >
                        <div>
                            If you wish, you can share with the rest of the guests the access to their check-in so that they can fill it out.<br
                            />
                            <a
                                role="button"
                                t-att-href="folio.get_portal_url(suffix='/invitations')"
                            >
                                <button
                                    type="submit"
                                    class="btn btn-primary"
                                    style="margin-top:40px;"
                                >
                                    <span class="fa fa-share-square" />
                                    Send Invitations
                                </button>
                            </a>
                        </div>
                    </t>

                </center>
                <div
                    class="oe_structure"
                    id="oe_structure_website_form_reservation_precheckin_2"
                />
            </wrap>
        </t>
        <style>

        </style>
    </template>
    <!-- invitations -->
    <template id="portal_my_folio_invitations" name="Precheckin Folio">
        <t t-call="portal.portal_layout">
            <t t-if="not folio.reservation_ids">
                <p
                >There are currently no reservations in this folio for your account.</p>
            </t>
            <t t-if="folio.reservation_ids" t-call="portal.portal_table">
                <tbody>
                    <form
                        class="o_pms_send_email_data"
                        action="/my/precheckin/folio_reservation"
                        method="post"
                    >
                        <t t-foreach="folio.reservation_ids" t-as="reservation">
                            <t t-set="count_reservation" t-value="0" />
                            <tr class="bg-light">
                                <td colspan="4">
                                    <em class="font-weight-normal text-muted">
                                        Room Type:
                                    </em>
                                    <a
                                        t-att-title="reservation.sudo().room_type_id.name"
                                    >
                                        <t
                                            t-esc="reservation.sudo().room_type_id.name"
                                        />
                                    </a>
                                </td>
                            </tr>

                            <t
                                t-foreach="reservation.checkin_partner_ids.filtered(lambda c: c.state in ['dummy','draft'])"
                                t-as="checkin_partner"
                            >
                                <t
                                    t-set="url"
                                    t-value="'/my/folios/'+str(folio.id)+'/reservations/'+str(reservation.id)+'/checkin/'+str(checkin_partner.id)"
                                />
                                <t
                                    t-set="count_reservation"
                                    t-value="count_reservation + 1"
                                />
                                <tr>
                                    <td colspan="4">
                                        <t t-if="checkin_partner.firstname">
                                            <h6
                                                t-att-id="'host_name'+str(checkin_partner.id)"
                                                name="guest_name"
                                            >
                                                <t t-esc="checkin_partner.firstname" />
                                            </h6>
                                        </t>
                                        <t t-else="">
                                            <h6
                                                t-att-id="'host_name'+str(checkin_partner.id)"
                                                name="guest_name"
                                            >
                                                Guest <t t-esc="count_reservation" />
                                            </h6>
                                        </t>
                                            <a
                                            data-toggle="collapse"
                                            t-att-data-target="id3"
                                            class="text-primary"
                                        >
                                            </a>
                                            <div class="row col-12">
                                                <div t-attf-class="d-none">
                                                    <input
                                                    type="text"
                                                    t-att-name="'checkin_partner_id'"
                                                    t-attf-class="form-control"
                                                    t-att-value="id or (checkin_partner.id)"
                                                />
                                                </div>
                                                <div t-attf-class="form-group col-6">
                                                    <a
                                                    t-att-id="'btn_show_invitation_email'+str(checkin_partner.id)"
                                                    class="btn btn-secondary"
                                                    style="color:#fff;margin-top:20px;"
                                                    t-attf-onclick="show_invitation(this)"
                                                >
                                                        <span
                                                        t-esc="checkin_partner.id"
                                                        class="d-none"
                                                    />
                                                        <span class="fa fa-envelope" />
                                                        Send Email Invitation
                                                    </a>
                                                    <a
                                                    t-att-id="'btnResendInvitation' +str(checkin_partner.id)"
                                                    onclick="show_invitation(this)"
                                                    t-att-class="' btn btn-secondary d-none'"
                                                    style="color:#fff;margin-top:20px;"
                                                >
                                                        <span class="fa fa-envelope" />
                                                        Resend Email Invitation
                                                        <span
                                                        t-esc="checkin_partner.id"
                                                        class="d-none"
                                                    /></a>
                                                    <a
                                                    t-att-id="'btn_show_invitation_whatsapp'+str(checkin_partner.id)"
                                                    class="' btn btn-secondary"
                                                    t-att-href="'whatsapp://send?text='+web_url+checkin_partner.get_portal_url()"
                                                    style="color:#fff;margin-top:20px;"
                                                >
                                                        <span class="fa fa-whatsapp" />
                                                        Send Whatsapp Invitation
                                                        <span
                                                        t-esc="checkin_partner.id"
                                                        class="d-none"
                                                    />
                                                    </a>
                                                </div>
                                                <div
                                                class="row col-12 d-none"
                                                t-att-id="'invitation_group'+str(checkin_partner.id)"
                                            >
                                                    <div
                                                    t-attf-class="form-group col-4 p-2"
                                                >
                                                        <label
                                                        id="label_firstname"
                                                        class="col-form-label"
                                                        for="invitation_firstname"
                                                    >
                                                            Name
                                                        </label>
                                                        <input
                                                        t-att-id="'invitation_firstname'+str(checkin_partner.id)"
                                                        type="text"
                                                        t-att-name="'invitation_firstname'"
                                                        t-attf-class="form-control"
                                                        t-att-value="firstname or (checkin_partner.firstname)"
                                                    />
                                                        <span
                                                        style="color:red"
                                                        class="d-none"
                                                        t-att-id="error_inv_firstname"
                                                    >Mandatory Firstname</span>
                                                    </div>
                                                    <div
                                                    t-attf-class="form-group col-4 p-2"
                                                >
                                                        <label
                                                        id="label_email"
                                                        class="col-form-label"
                                                        for="email"
                                                    >
                                                            Email
                                                        </label>
                                                        <input
                                                        t-att-id="'invitation_email'+str(checkin_partner.id)"
                                                        type="email"
                                                        t-att-name="'invitation_email'"
                                                        t-attf-class="form-control "
                                                        t-att-value="invitation_email or checkin_partner.email"
                                                    />
                                                        <span
                                                        style="color:red"
                                                        class="d-none error_inv_email"
                                                    >Mandatory Email</span>
                                                    </div>
                                                    <div
                                                    t-attf-class="form-group col-4 p-3"
                                                >
                                                        <a
                                                        id="btnInvitation"
                                                        onclick="launchSnackBar(this)"
                                                        t-att-class="' btn btn-secondary o_send_invitation_js mt-4 p-2'"
                                                        style="color:#fff; height:36px;"
                                                    >
                                                            Send Invitation<span
                                                            t-esc="checkin_partner.id"
                                                            class="d-none"
                                                        /></a>
                                                    </div>
                                                </div>
                                            </div>
                                    </td>
                                </tr>
                            </t>
                        </t>
                        <div t-attf-class="form-group col-xl-6 d-none">
                            <input
                                id="folio_id"
                                type="text"
                                t-att-name="'folio_id'"
                                t-attf-class="form-control"
                                t-att-value="folio_id or folio.id"
                            />
                        </div>
                        <div id="snackbar">Invitation email sent</div>
                    </form>
                </tbody>
            </t>
        </t>
        <style>
            #snackbar {
            visibility: hidden;
            min-width: 250px;
            margin-left: -125px;
            background-color: #6c757d;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            padding: 16px;
            position: fixed;
            z-index: 1;
            left: 50%;
            top: 100px;
            font-size: 17px;
            }

            #snackbar.show {
            visibility: visible;
            -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
            animation: fadein 0.5s, fadeout 0.5s 2.5s;
            }

            @-webkit-keyframes fadein {
            from {top: 0; opacity: 0;}
            to {top: 100px; opacity: 1;}
            }

            @keyframes fadein {
            from {top: 0; opacity: 0;}
            to {top: 100px; opacity: 1;}
            }

            @-webkit-keyframes fadeout {
            from {top: 100px; opacity: 1;}
            to {top: 0; opacity: 0;}
            }

            @keyframes fadeout {
            from {top: 100px; opacity: 1;}
            to {top: 0; opacity: 0;}
            }
        </style>
        <script>
            function launchSnackBar(element) {
            var checkin_partner_id = element.firstChild.nextSibling.innerText

            var inputEmailId = "invitation_email" + checkin_partner_id;

            var email = document.getElementById(inputEmailId).value;
            var nameId = "invitation_firstname" + checkin_partner_id;
            var hostId = "host_name" + checkin_partner_id;
            var host = document.getElementById(hostId);
            var name = document.getElementById(nameId).value;
            if(email){
            if(name){
            host.innerHTML = name;


            }
            }
            var checkin_partner_id = element.firstChild.nextSibling.innerText
            var divId = "invitation_group" + checkin_partner_id;
            document.getElementById(divId).classList.add("d-none");
            }

            function show_invitation(element) {
            var checkin_partner_id = element.firstChild.nextSibling.innerText
            var divId = "invitation_group" + checkin_partner_id;
            var btnId = "btn_show_invitation_email" + checkin_partner_id;
            var btn2 = "btnResendInvitation"+checkin_partner_id;
            var div_invitation = document.getElementById(divId);
            var btn_show_invitation_email = document.getElementById(btnId);
            var btn_resend = document.getElementById(btn2);
            div_invitation.classList.remove("d-none");
            btn_show_invitation_email.classList.add("d-none");
            btn_resend.classList.add("d-none");
            }
        </script>
    </template>
    <!--thanks for complete precheckin-->
    <template id="portal_my_precheckin_end" name="Precheckin End">
        <t t-call="portal.portal_layout">
            <wrap>
                <div
                    class="oe_structure"
                    id="oe_structure_website_form_precheckin_success_1"
                />
                <center>
                    <h5 style="margin-top:20px;">
                        Thank you!
                        Your check-in has been successful.
                    </h5>
                    <br />
                    <span t-if="folio">
                        <form
                            style="margin-bottom:50px"
                            t-att-action="folio.get_portal_url()"
                            method="get"
                        >
                            <button
                                type="submit"
                                class="btn btn-primary"
                                style="width:-webkit-fill-available"
                            >
                                <span
                                    t-if="folio.payment_state in ['paid','nothing_to_pay','overpayment']"
                                    class="fa fa-info"
                                >
                                Reservation Info
                                </span>
                                <span t-else="" class="fa fa-money">
                                Pay Now
                                </span>
                            </button>
                            <input
                                type="text"
                                name="access_token"
                                t-attf-class="d-none"
                                t-att-value="folio.access_token"
                            />
                            <input
                                name="folio_id"
                                t-attf-class="d-none"
                                t-att-value="folio.id"
                            />
                        </form>
                    </span>
                </center>
                <div
                    class="oe_structure"
                    id="oe_structure_website_form_precheckin_success_2"
                />
            </wrap>
        </t>
        <style />
    </template>
    <!-- checkin not available -->
    <template id="portal_not_checkin" name="Not Checkin">
        <wrap>
            <div class="oe_structure" id="oe_structure_website_form_no_precheckin_1" />
            <t t-call="portal.portal_layout">
                <center>
                    The quick registration system is not available for this reservation.<br
                    />
                    If you have any questions, you can contact us: <br /><br
                    />Phone: <span><t t-esc="folio.pms_property_id.phone" /></span> <br
                    /> Email: <span><t t-esc="folio.pms_property_id.email" /></span>
                </center>
            </t>
            <div class="oe_structure" id="oe_structure_website_form_no_precheckin_2" />
        </wrap>
    </template>
</odoo>
