Vue.component('activity-search', {
  name: 'ActivitySearch',
  props: ['isSessionDefined', 'freeUserInfo'],
  components:{
      'date-calendar': DateCalendar
  },
  data: function () {
    return {
      hasApiMessage: false,
      apiMessage: MESSAGE_IF_RESPONSE_FALSE,
      loading:false,
      isAct: true,
      isDropOffDisabled: true,
      destinationValue:{
        selectable: "",
        id: "",
        name: "",
        urlName:"",
        type: "",
        currency: "",
        destinationName: "",
        ccName: "",
        timeZone: "",
        latitude: "",
        longitude: "",
        iataCode: ""
      },
          minimumCheckInDate: getVeryNextDate(
            new Date(new Date().setDate(new Date().getDate() + 1))
          ),
          checkInDate: null,
          checkOutDate: null,
    }
},
mounted(){
  console.log('tab',this.tabA);
},
computed: {
  minimumCheckOutDate() {
    return this.checkInDate;
  },
  minDropOff() {
      return moment(this.date1, 'YYYY-MM-DD')
          .add('days', 1)
          .format('YYYY-MM-DD');
  },
},
    

methods: {
  redirectToRegistartion(){
    if (!this.$refs.activityForm.validate()) {
           let x = this.$el.querySelector('.v-text-field__details');
           this.$vuetify.goTo(x.parentElement.parentElement.parentElement); 
           return false;
         }
         else{
        
            window.location.href = 'Registration.cfm';
      } 
 },
checkInSelected() {
  
      this.checkOutDate = this.checkInDate;
  
  },

clearForm(){
    this.destinationValue = {
        selectable: "",
        id: "",
        name: "",
        urlName:"",
        type: "",
        currency: "",
        destinationName: "",
        ccName: "",
        timeZone: "",
        latitude: "",
        longitude: "",
        iataCode: ""
      };

    this.checkInDate = null;
    this.checkOutDate = null;
    console.log('tab', this.tabA);

},


submitForm: function (){
    if (!this.$refs.activityForm.validate()) {
        let x = this.$el.querySelector('.v-text-field__details');
        this.$vuetify.goTo(x.parentElement.parentElement.parentElement); 
        return false;
      };

  let _myDatecheckin = formattedDate(this.checkInDate, this.countryDF);
  let _myDatecheckout = formattedDate(this.checkOutDate, this.countryDF);

  let reqPayLoad = {
    destinationId: this.destinationValue.id,
    destinationCode: this.destinationValue.iataCode,
    destinationName: this.destinationValue.name,
    desiredResultCurrency: DESIRED_CURRENCY,
    fromDate:  moment(_myDatecheckin).format('YYYY-MM-DD' + 'THH:mm:ss') + 'Z',
    toDate: moment(_myDatecheckout).format('YYYY-MM-DD' + 'THH:mm:ss') + 'Z',
    residency: RESIDENCY
  };
    var searchData = reqPayLoad;
    var searchEngine = {
        "engine": "activities"
    };

    var agentData = {
        "username": this.freeUserInfo.getSiteUserName,
        "password": this.freeUserInfo.getSitePassword,
        "domain": DOMAIN
    };


    let self = this;
    var settings = {
        "async": true,
        "crossDomain": true,
        "url": API_URL+SEARCH_REQUESTS_ENDPOINTS['activities'],
        "type": "POST",
        "headers": {
            "Accept": "application/json",
            "Content-Type": "application/json",
        },
        "data": JSON.stringify({
            "data": [{
                "agentData": agentData,
                "searchData": searchData,
                "searchEngine": searchEngine,
                "searchId": ""
            }]
        }),

        beforeSend: function () {
            self.loading = true;
        },

    };


    $.ajax(settings).done(function (response) {
        if (response.success) {
            self.loading = false;
             const redirecturl =
                REDIRECT_URL+"activities?searchId=" + response.data
                .searchId + "&token=" + response.data.token;
            window.location.href = redirecturl;
            return false;
        }
        else if(!response.success){ 
          self.loading = false;
            self.hasApiMessage = true;
            let element = document.getElementById('activityApiMessageContainer');
            let top = element.getBoundingClientRect().top + window.scrollY;
            window.scrollTo({
              top: Math.round(top - 100),
              behavior: 'smooth'
            })
  }

    });



},



},

template: `
  <v-card >
  <v-card-text>
  <v-form class="flight-form" ref="activityForm">
  <v-row id="activityApiMessageContainer">
  <v-col cols="12" md="12">
  <v-alert
  v-if="hasApiMessage"
  dense
  outlined
  type="error"
>

<span v-html="apiMessage"></span>

</v-alert>
  </v-col>
  </v-row>
  <v-row>
      <v-col cols="12" sm="12" class="car-card-box">
          <v-card elevation="2" class="car-card">
              <div class="inner-cardbox">
                  <v-row class="pickup-location-row">
                      <v-col cols="12" md="12">
                          <p class="dp-label">Airport, Landmark, City, Address or Zip Code</p>
                           <activity-location v-model="destinationValue"></activity-location>
                         
                      </v-col>
                  </v-row>


                  <v-row class="pickup-location-row">
                      <v-col cols="12" md="6">
                          <p class="dp-label">Activity Start Date</p>
                          <date-calendar 
                          v-model="checkInDate"
                          :isActivity="isAct"
                         :minimumDate="minimumCheckInDate"
                         @input="
                           isDropOffDisabled = true;
                           checkInSelected();
                         "></date-calendar>
                      </v-col>
               
                      <v-col cols="12" md="6">
                          <p class="dp-label">Activity End Date</p>
                          <date-calendar 
                              v-model="checkOutDate"
                              :isActivity="isAct"
                             :minimumDate="minimumCheckOutDate"
                             ></date-calendar>
                      </v-col>
                  </v-row>
                  <br><br><br><br>
                  <v-row v-if="isSessionDefined">
                      <v-col cols="12" md="6">
                      <v-btn large type="button" :loading="loading" class="custom-red" @click="submitForm">Search</v-btn>
                      <v-btn large type="button" style="font-weight: 600px; font-size: 14px; box-shadow: none; background: transparent; color: #949494; text-transform: uppercase;"
                      @click="clearForm()">Reset
                  </v-btn>
                  </v-col>
                  </v-row>
                  <v-row v-if="!isSessionDefined">
                  <v-col cols="12" md="6">
                  <v-btn large 
                  type="button"
                  class="custom-red"
                  @click="redirectToRegistartion()"
                 >
                  Search and Register Now
                 </v-btn>
                  </v-col>
                  </v-row>
              </div>
          </v-card>
      </v-col>
  </v-row>
</v-form>
</v-card-text>
</v-card>

  `
});