document.write(`
<div id="lbutton">
    <p class="feedback">
      <a href="" data-toggle="modal" data-target="#exampleModalCenterReserve" class="jobguru-btn-3"
        ><img src="assets/img/pre.png" />&nbsp;Pre-Book Now</a
      >&nbsp;&nbsp;<a target="_blank" href="https://api.whatsapp.com/send?phone=+919458458458&text=Hi,%20I%27ve%20some%20queries%20regarding%20bed%20booking%20and%20pricing%20in%20the%20Bangolore%20PGs." class="jobguru-btn-3"
        ><img src="assets/img/wat.png" />&nbsp; Chat With Us</a
      >
    </p>
  </div>
  
  

  <div id="app">
  <div id="callbackform" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button data-dismiss="modal" v-on:click="reset()" type="reset" class="close">&times;</button>
                <h4  class="border-bottom border-dark pb-2" >REQUEST A CALL BACK</h4>
                <br />
                <form @submit.prevent="sendOTP" @keydown="form.errors.clear($event.target.name)" novalidate> 
                    <div class="form-group">
	              	    <input v-model="form.first_name" :disabled="isOTPSent" data-vv-name="first_name" v-validate="'required'" placeholder="First Name" type="text" v-bind:class= "errors.has('first_name') ? 'form-control is-invalid': 'form-control'"  />
                    </div>
                    <div class="form-group">
	              	    <input v-model="form.last_name" :disabled="isOTPSent" data-vv-name="last_name" v-validate="'required'" placeholder="Last Name" type="text" v-bind:class= "errors.has('last_name') ? 'form-control is-invalid': 'form-control'"/>
                    </div>
                    <div class="form-group">
	              	    <input v-model="form.email" :disabled="isOTPSent" data-vv-name="email" v-validate="'required|email'" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" type="email" v-bind:class= "errors.has('email') ? 'form-control is-invalid': 'form-control'" />
                    </div>
                    <div class="form-group">
	              	    <input v-model="form.mobile" :disabled="isOTPSent" data-vv-name="mobile" v-validate="'required|digits:10'" placeholder="Mobile" @keypress="onlyNumber" type="tel" minlength="10" maxlength="10" v-bind:class= "errors.has('mobile') ? 'form-control is-invalid': 'form-control'" />
	                </div>
                    <div v-if="!isOTPSent">
                        <span style="font-size:15px; margin-left: auto; margin-right: auto;"> Do you wish to validate your mobile number?  </span> 
                        <button type="button" class="btn btn-primary waves-effect waves-light m-l-5" v-on:click="sendOTP()" :disabled="errors.any() || isValid">Yes</button>
                        <button type="reset" data-dismiss="modal" class="btn btn-primary waves-effect waves-light m-l-5" v-on:click="reset()"> No</button> 
                        <div class="row">
                            <p style="font-size:15px; margin-left: auto; margin-right: auto; " class="p-t-10"> <input type="checkbox"> By clicking on button, I agree to the
                            <a href="terms-conditions.html" target=" _blank" style="text-decoration:underline;">Terms &amp; Conditions</a></p>
                        </div>
                    </div>
                    <div id="enterOTPDetails" class="m-l-10" v-if="isOTPSent">
                        <div class="row">
                            <div class="col-md-4 col-sm-2 col-xs-3">
                                <input v-model="form.otp" v-validate ="'required|digits:4'" data-vv-name="otp" id="memberOtp" name="memberOtp" @keypress="onlyNumber" type="tel" placeholder="Enter OTP" v-bind:class= "errors.has('otp') ? 'input-sm form-control is-invalid': 'input-sm form-control'" maxlength="4">                   
                            </div>
                            <div class="col-md-8 col-sm-5 col-xs-5">
                                <button class="btn btn-primary" type="button" v-on:click="verifyOTP()" :disabled="errors.any()" >Verify to Call Back</button>
                                <button class="btn btn-primary" type="button" :disabled="clicked" v-on:click="resendOTP()">Resend OTP</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>  
  </div>
  </div>

  <!-- Header Area Start -->
  <header class="jobguru-header-area stick-top forsticky page-header">
    <div class="menu-animation">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-2">
            <div class="site-logo">
              <a href="index.html">
                <img src="assets/img/logo-2.png" alt="jobguru" />
              </a>
            </div>
            <!-- Responsive Menu Start -->
            <div class="jobguru-responsive-menu"></div>
            <!-- Responsive Menu Start -->
          </div>
          <div class="col-lg-6">
            <div class="header-menu">
              <nav id="navigation">
                <ul id="jobguru_navigation">
                  <!--  <li class="active has-children">
                               <a href="index.html">home</a>
                               
                            </li>-->
                  <li>
                    <a href="about-us.html">About Us</a>
                  </li>
                  <li>
                    <a href="explore-residence.html">Explore Residences</a>
                  </li>
                  <li>
                    <a href="prazo-promise.html"> Prazo Promise</a>
                  </li>
                  <li>
                    <a href="partner-with-prazo.html"> Partner with Prazo</a>
                  </li>
                  <li>
                    <a href="blog.html"> Blog</a>
                  </li>
                  
                </ul>
              </nav>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="header-right-menu">
              <ul>
                <!--<li><a href="" data-toggle="modal" data-target="#exampleModalCenterReserve" class="post-jobs">Reserve Bed 1000/-</a></li>-->
                <li>
                  <a
                    href="#"
                    class="post-jobs"
                    data-target="#callbackform"
                    data-toggle="modal"
                    >Request a call</a
                  >
                </li>
                <li>
                  <a href="prazologin.html" class="post-jobs"><i class="fa fa-user"></i>Login</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/vee-validate@<3.0.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
   <script>

   class Errors {
    /**
     * Create a new Errors instance.
     */
    constructor() {
        this.errors = {};
    }


    /**
     * Determine if an errors exists for the given field.
     *
     * @param {string} field
     */
    has(field) {
        return this.errors.hasOwnProperty(field);
    }


    /**
     * Determine if we have any errors.
     */
    any() {
        return Object.keys(this.errors).length > 0;
    }


    /**
     * Retrieve the error message for a field.
     *
     * @param {string} field
     */
    get(field) {
        if (this.errors[field]) {
            return this.errors[field][0];
        }
    }


    /**
     * Record the new errors.
     *
     * @param {object} errors
     */
    record(errors) {
        this.errors = errors;
    }


    /**
     * Clear one or all error fields.
     *
     * @param {string|null} field
     */
    clear(field) {
        if (field) {
            delete this.errors[field];

            return;
        }

        this.errors = {};
    }
}
   class Form {
    /**
     * Create a new Form instance.
     *
     * @param {object} data
     */
    constructor(data) {
        this.originalData = data;

        for (let field in data) {
            this[field] = data[field];
        }

        this.errors = new Errors();
    }


    /**
     * Fetch all relevant data for the form.
     */
    data() {
        let data = {};

        for (let property in this.originalData) {
            data[property] = this[property];
        }

        return data;
    }


    /**
     * Reset the form fields.
     */
    reset() {
        for (let field in this.originalData) {
            this[field] = '';
        }

        this.errors.clear();
    }


    /**
     * Send a POST request to the given URL.
     * .
     * @param {string} url
     */
    post(url) {
        return this.submit('post', url);
    }


    /**
     * Send a PUT request to the given URL.
     * .
     * @param {string} url
     */
    put(url) {
        return this.submit('put', url);
    }


    /**
     * Send a PATCH request to the given URL.
     * .
     * @param {string} url
     */
    patch(url) {
        return this.submit('patch', url);
    }


    /**
     * Send a DELETE request to the given URL.
     * .
     * @param {string} url
     */
    delete(url) {
        return this.submit('delete', url);
    }


    /**
     * Submit the form.
     *
     * @param {string} requestType
     * @param {string} url
     */
    submit(requestType, url) {
        return new Promise((resolve, reject) => {
            axios[requestType](url, this.data())
                .then(response => {
                    this.onSuccess(response.data);

                    resolve(response.data);
                })
                .catch(error => {
                    this.onFail(error.response.data);

                    reject(error.response.data);
                });
        });
    }


    /**
     * Handle a successful form submission.
     *
     * @param {object} data
     */
    onSuccess(data) {
        this.reset();
    }


    /**
     * Handle a failed form submission.
     *
     * @param {object} errors
     */
    onFail(errors) {
        this.errors.record(errors);
    }
}
      Vue.use(VeeValidate);
      const app = new Vue({
		    el: '#app',
         data() {
            return {
               createRequestCallLoader: false,
               loadingText: 'Requesting details',
               form: new Form({
                  first_name: "",
                  last_name: "",
                  email: "",
                  mobile: "",
                  otp: ""
               }),
               isOTPSent: false,
               request_id: null,
               clicked: false,
               isValid: true
            }
         },
         watch: {
            'form.first_name'() {
               this.validateInput()
            },
            'form.last_name'() {
               this.validateInput()
            },
            'form.email'() {
               this.validateInput()
            },
            'form.mobile'() {
               this.validateInput()
            }
         },
         methods: {
            onlyNumber($event) {
               let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
               if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
                  $event.preventDefault();
               }
            },
            loading() {
               let self = this
               self.createRequestCallLoader = true
               //self.$Progress.start()
            },
            loaded() {
               let self = this
               self.createRequestCallLoader = false
               //self.$Progress.finish()
            },
            validateInput() { // disable  
               if ((this.form.first_name != "") && (this.form.last_name != "") && (this.form.mobile != "") && (this.form.email != ""))
                  this.isValid = false
               else
                  this.isValid = true
            },
            reset() {
               this.$data.form.first_name = ""
               this.$data.form.last_name = ""
               this.$data.form.mobile = ""
               this.$data.form.email = ""
               this.$data.form.otp = ""
               this.isOTPSent = false
               this.request_call_id = null
               this.$data.form.errors.clear()
            },
            sendOTP() {
               let self = this
               let url = 'https://api.vsrstayin.com/api/v1/requestcall/online'
               self.loadingText = "sending OTP to your mobile at + 91 - " + self.form.mobile
               console.log('console this 1');
               self.loading()
               console.log(self.$data.form);
               self.requestcalldata = {
                  first_name: self.$data.form.first_name,
                  last_name: self.$data.form.last_name,
                  mobile: self.$data.form.mobile,
                  email: self.$data.form.email
               }
               axios.post(url, self.requestcalldata)
                  .then(response => {
                     if (response.data && (response.status == "success" || response.status == "200")) {
                        self.loaded()
                        self.isOTPSent = true;
                        self.request_call_id = response.data
                     }
                     else {
                        self.loaded()
                        swal("Oh no!", "Please enter valid mobile number to validate", "error");
                     }
                  })
                  .catch(error => {
                     self.loaded()
                     self.form.errors.record(error);
                     if (error.status == "error" || error.attribute == "general") swal("Oh no!", error.message, "error");
                  })
            },
            resendOTP() {
               let self = this
               let url = 'https://api.vsrstayin.com/api/v1/requestcall/resend'
               self.loadingText = "sending OTP to your mobile at + 91 - " + self.form.mobile
               self.loading()
               if (self.clicked) {
                  return;
               }
               self.requestcalldata = {
                  request_call_id: self.request_call_id.data
               }
               self.clicked = true;
               axios.post(url, self.requestcalldata)
                  .then(response => {
                     if (response.data && (response.status == "success" || response.status == "200")) {
                        self.loaded()
                        setTimeout(function () {
                           self.clicked = false;
                        }.bind(self), 40000);
                     }
                     else {
                        self.loaded()
                        self.clicked = false;
                        swal("Oh no!", "Please try with valide mobile number", "error");
                     }
                  })
                  .catch(error => {
                     self.loaded()
                     self.clicked = false;
                     self.form.errors.record(error);
                     if ((error.status == "error" || error.attribute == "general") && (error.message == ""))
                        swal("Oh no!", "Error occured while sending OTP to mobile", "error");
                     else
                        swal("Oh no!", error.message, "error");
                  })
            },
            verifyOTP() {
               let self = this
               let url = 'https://api.vsrstayin.com/api/v1/requestcall/verify'
               self.loadingText = "verifying your mobile to share PG details"
               self.loading()
               self.requestcalldata = {
                  request_call_id: self.request_call_id.data,
                  otp: self.form.otp
               }
               axios.post(url, self.requestcalldata)
                  .then(response => {
                     if (response.data.data && (response.status == "success" || response.status == "200")) {
                        swal("Thank you!", "Your request is received and we will call back you soon",  "success")
                        self.reset()
                        $("#callbackform").modal('hide')
                     }
                     else {
                        swal("Oh no!", "OTP you've entered is incorrect. Please enter valid OTP", "error")
                     }
                     self.loaded()
                  })
            }
         }
      });

   </script>
  <!-- Header Area End -->
  
<!--Reserve-->
      <!--model box-->
      <div class="modal fade" id="exampleModalCenterReserve" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterReserve" aria-hidden="true">
      <div class="modal-dialog modal-dialog-main">
   <div class="modal-content">
      <div class="modal-body main-bottom">
          <button data-dismiss="modal" type="reset" class="close">×</button> 
         <h4 class="border-bottom border-dark pb-2" style="font-size: 22px;">PRE-BOOK
NOW </h4>
<div class="row padding-right col-16">
   <div class="col-md-12 selling row">
      <h3>WE ARE SELLING OUT REAL FAST!</h3>
   </div>

   <div class="row">
    <div class="col-md-6">
       <h3 class="prebook">PRE-BOOK NOW!</h3>
        <div class="content-main">
        <p>Reserve your room now by paying ₹1000 only.</p>
            <p>Request for money back within 3 days of the visit if you change your mind.</p>
        </div>
        <div class="book-online">
        <h4 class="prebook">HOW TO BOOK ONLINE?</h4>
            <p>1. Explore Residences</p>
            <p>2. Find Your Match</p>
            <p>3. Reserve Your Room</p>
        </div>
        <div class="buttonss">
        <div class="top-job-company-btn text-center">
            <a href="explore-residence.html" target="_blank" class="jobguru-btn-2 ">EXPLORE RESIDENCES</a></div>
        </div>
       </div>
       <div class="col-md-6 main-hide-phone row">
       
           <div class="col-md-12">
           <img src="assets/img/img-1_3x.png" width="100%">
           </div>
           <div class="col-md-6">
           <img src="assets/img/img-2_3x.png" width="100%">
           </div>
           <div class="col-md-6">
           <img src="assets/img/img-3_3x.png" width="100%">
           </div>
           <div class="col-md-6">
           <img src="assets/img/img-4_3x.png" width="100%">
           </div>
           <div class="col-md-6">
           <img src="assets/img/img-5_3x.png" width="100%">
           </div>
           
           
       </div>
    </div>
   
   
</div></div>
          </div>
   </div>
</div>
      <!--model box-->
      <!--Reserve-->
      
      
      
`)