[text] test

<template>

  <div class="">

    <div

      class="

        container

        items-center

        flex flex-col

        justify-center

        h-36

        rounded-md

      "

      v-bind:class="{ showTheConfirmation: isConfirmed }"

    >

      <div class="flex pb-2 animate-bounce">

        <img :src="rightLogo" class="h-6" alt="" />

        <p class="font-bold pl-2 text-xl">

          Your booking request has been taken

        </p>

      </div>

      <p class="text-center text-2xl text-red-600">

        We have received your booking request, once approved you will receive an

        email confirmation.

      </p>

    </div>

    <div class="" v-bind:class="{ hideAccordion: isShowingAccordian }">

      <div class="py-4">

        <select

          style="width: 30vw"

          class="

            text-base text-gray-700

            bg-white

            border border-solid border-gray-300

            rounded

            transition

            ease-in-out

            pl-4

            py-2

          "

          required

          v-model="formData.listOfRooms"

          aria-label=""

          @change="getCalenderData($event)"

        >

          <!-- <option>Select Room</option> -->

          <option

            v-for="room in listOfRooms"

            :value="room.value"

            :key="room.value"

            class="py-1"

          >

            {{ room.label }}

          </option>

 

          <!-- <option value="room1">Room 1</option>

                      <option value="room2">Room 2</option> -->

        </select>

      </div>

      <div class="tabs">

        <div class="tab mb-4" v-bind:class="{ disableDateTab: isDateDisable }">

          <input

            type="radio"

            id="rd1"

            name="rd"

            v-on:click="handleCloseButton1"

          />

          <label class="tab-label font-bold" for="rd1"

            >Select Date and Time</label

          >

          <div class="tab-content">

            <div class="container calender-height">

              <!-- * Selected Time must be atleast <span class="font-extrabold text-gray-700"> 1 hour</span> -->

              <vue-cal

                ref="vuecal"

                class="h-full"

                hide-weekends

                :time-from="0 * 60"

                style="height: 80vh"

                :special-hours="specialHours"

                :disable-views="['years', 'year', 'month', 'day']"

                :cell-click-hold="false"

                :drag-to-create-event="true"

                :snap-to-time="60"

                :editable-events="{

                  title: false,

                  drag: false,

                  resize: true,

                  delete: true,

                  create: true,

                }"

                :clickToNavigate="true"

                :events="events"

                twelveHour

                @cell-click="

                  $refs.vuecal.createEvent($event, 60, { class: 'blue-event' })

                "

                @event-duration-change="

                  onEventChange('event-duration-change', $event)

                "

                :on-event-create="onEventCreate"

              >

              </vue-cal>

              <div class="flex items-center justify-center w-full h-20">

                <button

                  type="button"

                  class="

                    flex

                    items-center

                    justify-between

                    px-6

                    py-4

                    text-md

                    font-medium

                    leading-5

                    text-black

                    transition-colors

                    duration-150

                    bg-white

                    border-2

                    rounded-full

                    active:bg-blue-900

                    hover:text-white

                    focus:outline-none focus:shadow-outline-blue

                  "

                  v-on:click="handleCalenderSubmit"

                >

                  Next

                </button>

              </div>

              <!-- <div class="calender-height border border-gray-800 p-4 rounded-md">

                <div

                  class="

                    fix-calender-hei

                    flex

                    justify-evenly

                    w-full

                    items-center

                    text-center

                  "

                >

                  <div class="">

                    <p class="text-base font-semibold pb-4">Select Date:</p>

                    <v-calendar></v-calendar>

                  </div>

                  <div class="z-auto">

                    <div class="">

                      <p class="text-base font-semibold pb-4">Select Time:</p>

                      <vue-timepicker></vue-timepicker>

                      <p>to</p>

                      <vue-timepicker></vue-timepicker>

                    </div>

                  </div>

                </div>

              </div> -->

            </div>

          </div>

        </div>

        <div class="tab mb-4" v-bind:class="{ disableInfoTab: isInfoDisable }">

          <input

            type="radio"

            id="rd2"

            name="rd"

            v-on:click="handleCloseButton2"

          />

          <label class="tab-label font-bold" for="rd2">Your Information</label>

          <div class="tab-content">

            <div

              class="

                fix-input-width

                container

                border border-gray-800

                p-4

                rounded-md

              "

            >

              <ValidationObserver ref="loginForm">

                <form class="w-full" method="post" v-on:submit.prevent>

                  <div class="flex flex-col">

                    <div

                      class="

                        flex flex-col

                        md:flex-row

                        w-full

                        justify-evenly

                        items-center

                      "

                    >

                      <label

                        for="fname"

                        class="text-base font-medium text-gray-900 block mb-4"

                        >Organization/Company Name

                        <ValidationProvider v-slot="v" rules="">

                          <input

                            type="text"

                            id="formData.companyName"

                            name="Organization/Company Name"

                            class="

                              bg-gray-50

                              border border-gray-300

                              text-gray-900

                              sm:text-sm

                              rounded-lg

                              block

                              p-2.5

                            "

                            v-model="formData.companyName"

                            placeholder="Enter company name"

                          />

                          <span class="text-sm font-semibold text-red-600">{{

                            v.errors[0]

                          }}</span>

                        </ValidationProvider>

                      </label>

                      <label

                        for="lname"

                        class="text-base font-medium text-gray-900 block mb-4"

                        >Contact Person

                        <ValidationProvider

                          v-slot="v"

                          :rules="{

                            regex:

                              /^[A-Z]?[a-z][a-z]+\s?[A-Z]?[a-z][a-z]+\s?[A-Z]?[a-z][a-z]+$/,

                          }"

                        >

                          <input

                            type="text"

                            id="formData.contactPersonName"

                            name="Contact Person"

                            class="

                              bg-gray-50

                              border border-gray-300

                              text-gray-900

                              sm:text-sm

                              rounded-lg

                              block

                              p-2.5

                            "

                            v-model="formData.contactPersonName"

                            required

                            placeholder="Enter person's name"

                          />

                          <span class="text-sm font-semibold text-red-600">{{

                            v.errors[0]

                          }}</span>

                        </ValidationProvider>

                      </label>

                    </div>

                    <div

                      class="

                        flex flex-col

                        md:flex-row

                        w-full

                        justify-evenly

                        items-center

                      "

                    >

                      <label

                        for="email"

                        class="text-base font-medium text-gray-900 block mb-4"

                        >Email

                        <ValidationProvider

                          v-slot="v"

                          :rules="{

                            regex: /^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,6}$/,

                          }"

                        >

                          <input

                            type="email"

                            id="formData.contactEmail"

                            name="Email"

                            class="

                              bg-gray-50

                              border border-gray-300

                              text-gray-900

                              sm:text-sm

                              rounded-lg

                              block

                              p-2.5

                            "

                            v-model="formData.contactEmail"

                            required

                            placeholder="Enter Email"

                          />

                          <span class="text-sm font-semibold text-red-600">{{

                            v.errors[0]

                          }}</span>

                        </ValidationProvider>

                      </label>

                      <label

                        for="mobile"

                        class="text-base font-medium text-gray-900 block mb-4"

                        >Phone Number

                        <ValidationProvider

                          v-slot="v"

                          :rules="{

                            regex: /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/,

                          }"

                        >

                          <div class="relative phone-number-fix">

                            <input

                              type="text"

                              min="0"

                              id="formData.phoneNumber"

                              pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"

                              name="Phone Number"

                              class="

                                bg-gray-50

                                border border-gray-300

                                text-gray-900

                                sm:text-sm

                                rounded-lg

                                block

                                p-2.5

                                pl-12

                              "

                              v-model="formData.phoneNumber"

                              required

                              placeholder="Enter Phone Number"

                            />

                            <!-- <input

                            type="tel"

                            id="formData.phoneNumber"

                            pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"

                            maxlength="10"

                            name="Phone Number"

                            class="

                              bg-gray-50

                              border border-gray-300

                              text-gray-900

                              sm:text-sm

                              rounded-lg

                              block

                              p-2.5

                              pl-12

                            "

                            v-model="formData.phoneNumber"

                            required

                            placeholder="Enter Phone Number"

                          /> -->

                            <div

                              class="

                                absolute

                                inset-y-0

                                flex

                                items-center

                                ml-3

                                pointer-events-none

                              "

                            >

                              +61

                            </div>

                          </div>

                          <!-- <label

                        for="mobile"

                        class="text-base font-medium text-gray-900 block mb-4"

                        >Phone Number

                        <ValidationProvider

                          v-slot="v"

                          :rules="{

                            regex: /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/,

                          }"

                        > -->

                          <!-- <input

                            type="tel"

                            id="formData.phoneNumber"

                            name="Phone Number"

                            class="

                              bg-gray-50

                              border border-gray-300

                              text-gray-900

                              sm:text-sm

                              rounded-lg

                              block

                              p-2.5

                            "

                            v-model="formData.phoneNumber"

                            required

                            placeholder="Enter Phone Number"

                          /> -->

                          <span class="text-sm font-semibold text-red-600">{{

                            v.errors[0]

                          }}</span>

                        </ValidationProvider>

                      </label>

                    </div>

                    <div

                      class="

                        flex flex-col

                        md:flex-row

                        w-full

                        justify-evenly

                        items-center

                      "

                    >

                      <label

                        for="email"

                        class="text-base font-medium text-gray-900 block mb-4"

                        >Expected Attendance

                        <ValidationProvider v-slot="v" rules="">

                          <input

                            min="0"

                            type="number"

                            id="formData.expectedAttendance"

                            name="Attendance"

                            class="

                              bg-gray-50

                              border border-gray-300

                              text-gray-900

                              sm:text-sm

                              rounded-lg

                              block

                              p-2.5

                            "

                            v-model="formData.expectedAttendance"

                            placeholder="Enter expected attendance"

                          />

                          <span class="text-sm font-semibold text-red-600">{{

                            v.errors[0]

                          }}</span>

                        </ValidationProvider>

                      </label>

 

                      <label

                        for="mobile"

                        class="text-base font-medium text-gray-900 block mb-4"

                        >Activity (Booking for)

                        <ValidationProvider v-slot="v" rules="required">

                          <textarea

                            type="tel"

                            id="formData.activityDetail"

                            name="Activity"

                            class="

                              bg-gray-50

                              border border-gray-300

                              text-gray-900

                              sm:text-sm

                              rounded-lg

                              block

                              p-2.5

                            "

                            v-model="formData.activityDetail"

                            required

                            placeholder="Enter activity details briefly"

                          />

                          <span class="text-sm font-semibold text-red-600">{{

                            v.errors[0]

                          }}</span>

                        </ValidationProvider>

                      </label>

                    </div>

                  </div>

                  <div class="flex items-center justify-center w-full h-20">

                    <button

                      type="submit"

                      class="

                        flex

                        items-center

                        justify-between

                        px-6

                        py-4

                        text-md

                        font-medium

                        leading-5

                        text-black

                        transition-colors

                        duration-150

                        bg-white

                        border-2

                        rounded-full

                        active:bg-blue-900

                        hover:text-white

                        focus:outline-none focus:shadow-outline-blue

                      "

                      v-on:click="handleNextButton"

                    >

                      Next

                    </button>

                  </div>

                </form>

              </ValidationObserver>

            </div>

          </div>

        </div>

        <div class="tab mb-4" v-bind:class="{ disableInfoTab: isInfoDisable }">

          <input

            type="radio"

            id="rd3"

            name="rd"

            v-on:click="handleCloseButton3"

          />

          <label class="tab-label font-bold" for="rd3">Epuipments</label>

          <div class="tab-content">

            <div

              class="

                fix-input-width

                container

                border border-gray-800

                p-4

                rounded-md

              "

            >

              <table class="table w-full">

                <thead>

                  <tr>

                    <th class="text-center" style="width:3%;"></th>

                    <th class="text-center" style="width:20%;"></th>

                    <th class="text-center" style="width:50%;"></th>

                    <th class="text-center" style="width:27%;"></th>

                  </tr>

                </thead>

                <tbody id="requipementTable">

                  

                

                </tbody>

              </table>

            <div class="flex items-center justify-center w-full h-16">

              <button

                type="submit"

                class="

                  flex

                  items-center

                  justify-between

                  px-6

                  py-4

                  text-md

                  font-medium

                  leading-5

                  text-black

                  transition-colors

                  duration-150

                  bg-white

                  border-2

                  rounded-full

                  active:bg-blue-900

                  hover:text-white

                  focus:outline-none focus:shadow-outline-blue

                "

                v-on:click="handleExtraNextButton"

              >

                Next

              </button>

            </div>

            </div>

          </div>

        </div>

        <div class="tab mb-4" v-bind:class="{ disableClick: isDisable }">

          <input

            type="radio"

            id="rd4"

            name="rd"

            v-on:click="handleCloseButton4"

          />

          <label class="tab-label font-bold" for="rd4">Confirm Booking</label>

          <div class="tab-content">

            <div

              class="

                fix-input-width

                container

                border border-gray-800

                p-4

                rounded-md

              "

            >

              <div class="flex flex-col tracking-wider">

                <div class="grid grid-cols-2 md:gap-x-32 my-4">

                  <div class="md:pl-64"><p>Booking Date & Time :</p></div>

                  <div class="font-semibold flex flex-col md:flex-row">

                    <p class="pr-4">{{ formData.bookingDate }}</p>

                    <p>{{ formData.bookingTime }}</p>

                  </div>

                </div>

                <div class="grid grid-cols-2 md:gap-x-32 my-4">

                  <div class="md:pl-64"><p>Organization/Company Name :</p></div>

                  <div class="font-semibold">

                    <p>{{ formData.companyName }}</p>

                  </div>

                </div>

                <div class="grid grid-cols-2 md:gap-x-32 my-4">

                  <div class="md:pl-64"><p>Contact Person :</p></div>

                  <div class="font-semibold">

                    <p>{{ formData.contactPersonName }}</p>

                  </div>

                </div>

                <div class="grid grid-cols-2 md:gap-x-32 my-4">

                  <div class="md:pl-64"><p>Email :</p></div>

                  <div class="font-semibold">

                    <p>{{ formData.contactEmail }}</p>

                  </div>

                </div>

                <div class="grid grid-cols-2 md:gap-x-32 my-4">

                  <div class="md:pl-64"><p>Phone Number :</p></div>

                  <div class="font-semibold">

                    <p>+61 {{ formData.phoneNumber }}</p>

                  </div>

                </div>

                <div class="grid grid-cols-2 md:gap-x-32 my-4">

                  <div class="md:pl-64"><p>Expected Attendance :</p></div>

                  <div class="font-semibold">

                    <p>{{ formData.expectedAttendance }}</p>

                  </div>

                </div>

                <div class="grid grid-cols-2 md:gap-x-32 my-4">

                  <div class="md:pl-64"><p>Activity :</p></div>

                  <div class="">

                    <p class="font-semibold" id="activityPara">

                      {{ formData.activityDetail }}

                    </p>

                  </div>

                </div>

                <!-- <div class="grid grid-cols-2 md:gap-x-32 my-4">

                  <div class="md:pl-64"><p>Select Hall :</p></div>

 

                </div> -->

              </div>

 

              <div class="flex items-center justify-center w-full h-20 mt-4">

                <button

                  class="

                    flex

                    items-center

                    justify-between

                    px-6

                    py-4

                    text-md

                    font-medium

                    leading-5

                    text-black

                    transition-colors

                    duration-150

                    bg-white

                    border-2

                    rounded-full

                    active:bg-blue-900

                    hover:text-white

                    focus:outline-none focus:shadow-outline-blue

                  "

                  v-on:click="handleConfirmBtn"

                >

                  <span class="pr-1">Confirm</span>

                </button>

              </div>

              <!-- </form> -->

            </div>

          </div>

        </div>

        <div class="tab">

          <input type="radio" id="rd5" name="rd" />

          <label for="rd5" class="tab-close"></label>

        </div>

      </div>

    </div>

  </div>

</template>

 

<script>

import VueCal from "vue-cal";

import Vue from "vue";

import "vue-cal/dist/vuecal.css";

// import { ValidationProvider } from 'vee-validate';

import { ValidationObserver } from "vee-validate";

import { ValidationProvider } from "vee-validate/dist/vee-validate.full.esm";

import { regex } from "vee-validate/dist/rules";

import { extend } from "vee-validate";

 

extend("regex", regex);

Vue.component("ValidationProvider", ValidationProvider);

Vue.component("ValidationObserver", ValidationObserver);

 

extend("password", {

  message:

    "{_field_} must be at least 8 characters, contain One Uppercase, One lowercase, One Special character i.e (! @ # $ % ^ & *), One number.",

  validate: (value) => {

    const strong_password = new RegExp(

      "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})"

    ); // regex to check our strong password

 

    return strong_password.test(value); //Test the regex. Test function returns a true or false value.

  },

});

 

export default {

  components: { VueCal },

  data() {

    return {

      bookedevent: null,

      events: [],

      newEvents: [],

      specialHours: null,

      recordCalenderClick1: 1,

      recordCalenderClick2: 1,

      recordCalenderClick3: 1,

      recordCalenderClick4: 1,

      selectedEvent: null,

      extras:[],

 

      formData: {

        companyName: "",

        contactPersonName: "",

        contactEmail: "",

        phoneNumber: "",

        expectedAttendance: "",

        activityDetail: "",

        bookingTime: "",

        bookingDate: "",

        listOfRooms: "",

        output: "",

        selectedDay: "",

        selectedFromTime: "",

        selectedToTime: "",

        Time: "",

        checkedCheckbox: [],

      },

 

      listOfRooms: [

        { value: "", label: "Select Hall" },

        { value: "1", label: "Hall 1" },

        { value: "2", label: "Hall 2" },

      ],

 

      rightLogo: "assets/images/right.png",

      isConfirmed: true,

      isShowingAccordian: false,

      isDisable: true,

      isInfoDisable: true,

      isDateDisable: true,

      changedValue: 0,

    };

  },

 

  mounted(){

    // this.extras = this.$store.getters.getCurrentExtra;

  },

 

  methods: {

    increaseCount() {

      let quantityValue = document.querySelector("#qty").value;

      this.changedValue = Number(quantityValue) + 1;

      document.getElementById("qty").value = this.changedValue;

    },

 

    decreaseCount() {

      let quantityValue = document.querySelector("#qty").value;

      this.changedValue = Number(quantityValue) - 1;

      document.getElementById("qty").value = this.changedValue;

    },

 

    deleteEvents() {

      if (this.newEvents.length === 1) {

        this.events.pop();

      }

      this.newEvents.pop();

    },

    getCalenderData(e) {

      let selectedRooms = this.formData.listOfRooms;

      let currentObj = this;

      (currentObj.events.length = 0),

        (currentObj.newEvents.length = 0),

        this.axios

          .get("api/get-calendar?selectedRooms=" + selectedRooms)

          .then(function (response) {

            currentObj.bookedevent = response.data.bookedDate;

 

            (currentObj.specialHours = {

              1: {

                from:

                  parseInt(response.data.selectedRooms[0]["timing_from"]) * 60,

                to: parseInt(response.data.selectedRooms[0]["timing_to"]) * 60,

                class: "business-hours",

              },

              2: {

                from:

                  parseInt(response.data.selectedRooms[1]["timing_from"]) * 60,

                to: parseInt(response.data.selectedRooms[1]["timing_to"]) * 60,

                class: "business-hours",

              },

              3: {

                from:

                  parseInt(response.data.selectedRooms[2]["timing_from"]) * 60,

                to: parseInt(response.data.selectedRooms[2]["timing_to"]) * 60,

                class: "business-hours",

              },

              4: {

                from:

                  parseInt(response.data.selectedRooms[4]["timing_from"]) * 60,

                to: parseInt(response.data.selectedRooms[3]["timing_to"]) * 60,

                class: "business-hours",

              },

              5: {

                from:

                  parseInt(response.data.selectedRooms[4]["timing_from"]) * 60,

                to: parseInt(response.data.selectedRooms[4]["timing_to"]) * 60,

                class: "business-hours",

              },

            }),

              response.data.bookedDate.forEach(function (number) {

                currentObj.events.push({

                  start: number.from_time,

                  end: number.to_time,

                  title: "Booked event",

                  content: null,

                  class: "red-event",

                  deletable: false,

                  resizable: false,

                  draggable: false,

                });

              });

          })

          .catch(function (error) {

            currentObj.output = error;

          });

      this.isDateDisable = false;

    },

 

    handleCloseButton1(e) {

      this.recordCalenderClick1 = this.recordCalenderClick1 + 1;

      if (this.recordCalenderClick1 == 2) {

        document.getElementById("rd1").checked = true;

        this.recordCalenderClick2 = 1;

        this.recordCalenderClick3 = 1;

        this.recordCalenderClick4 = 1;

      } else {

        document.getElementById("rd1").checked = false;

        this.recordCalenderClick1 = 1;

      }

    },

 

    handleCloseButton2(e) {

      this.recordCalenderClick2 = this.recordCalenderClick2 + 1;

      if (this.recordCalenderClick2 == 2) {

        document.getElementById("rd2").checked = true;

        this.recordCalenderClick1 = 1;

        this.recordCalenderClick3 = 1;

        this.recordCalenderClick4 = 1;

      } else {

        document.getElementById("rd2").checked = false;

        this.recordCalenderClick2 = 1;

      }

    },

 

    handleCloseButton3(e) {

      this.recordCalenderClick3 = this.recordCalenderClick3 + 1;

      if (this.recordCalenderClick3 == 2) {

        document.getElementById("rd3").checked = true;

        this.recordCalenderClick2 = 1;

        this.recordCalenderClick1 = 1;

        this.recordCalenderClick4 = 1;

      } else {

        document.getElementById("rd3").checked = false;

        this.recordCalenderClick3 = 1;

      }

    },

    handleCloseButton4(e) {

      this.recordCalenderClick4 = this.recordCalenderClick4 + 1;

      if (this.recordCalenderClick4 == 2) {

        document.getElementById("rd4").checked = true;

        this.recordCalenderClick2 = 1;

        this.recordCalenderClick1 = 1;

        this.recordCalenderClick3 = 1;

      } else {

        document.getElementById("rd4").checked = false;

        this.recordCalenderClick4 = 1;

      }

    },

 

    handleExtraNextButton(){

      let checkboxInputs = document.getElementsByClassName("check-checked-input");

      console.log(checkboxInputs)

      for (let checkboxInput of checkboxInputs) {

        if (checkboxInput.checked){

          // checkedCheckbox.push(checkboxInput)

          console.log(checkboxInput)

        } 

      }

      // console.log(this.checkedCheckbox)

    },

 

    handleCalenderSubmit() {

      var enddate = new Date(this.selectedEvent.end);

      var bookedDate =

        enddate.getFullYear() +

        "-" +

        (enddate.getMonth() + 1) +

        "-" +

        enddate.getDate() +

        " " +

        enddate.getHours() +

        ":00";

 

      //  this.bookedevent.forEach((number) => {

      //     if(bookedDate > number.from_time){

      //       alert("This events already booked..!");

      //       this.deleteEvents();

      //     }

      //   });

 

      if (this.selectedEvent) {

        if (

          this.selectedEvent.startTimeMinutes <

            this.specialHours[this.selectedEvent.start.getDay()].from ||

          this.selectedEvent.endTimeMinutes >

            this.specialHours[this.selectedEvent.start.getDay()].to

        ) {

          alert(

            `Please create events within business hours(09:00am to 07:00pm)`

          );

          this.deleteEvents();

        } else {

          if (

            this.selectedEvent.endTimeMinutes -

              this.selectedEvent.startTimeMinutes <

            60

          ) {

            alert("Time period less than 1 hour is not allowed");

          } else {

            var startdate = new Date(this.selectedEvent.start);

            var enddate = new Date(this.selectedEvent.end);

            var fromDate = this.getDateFunction(startdate);

            var selectedDayInput = this.getSelectedDay(startdate);

            var toDate = this.getDateFunction(enddate);

            var fromTime = this.getTimeFunction(startdate);

            var toTime = this.getTimeFunction(enddate);

            this.formData.bookingTime = fromTime + " to " + toTime;

            this.formData.bookingDate =

              fromDate == toDate ? fromDate : fromDate + " to " + toDate;

            this.formData.selectedDay = selectedDayInput;

            this.formData.selectedFromTime =

              startdate.getFullYear() +

              "-" +

              (startdate.getMonth() + 1) +

              "-" +

              startdate.getDate() +

              " " +

              startdate.getHours() +

              ":00";

            this.formData.selectedToTime =

              enddate.getFullYear() +

              "-" +

              (enddate.getMonth() + 1) +

              "-" +

              enddate.getDate() +

              " " +

              enddate.getHours() +

              ":00";

            this.formData.Time =

              startdate.getFullYear() +

              "-" +

              (startdate.getMonth() + 1) +

              "-" +

              startdate.getDate();

            this.isInfoDisable = false;

            document.getElementById("rd2").checked = true;

          }

          //'2022-01-11 14:00

        }

      } else {

        alert("Please create one event!");

      }

    },

 

    onEventCreate($event, deleteEventFunction) {

      if (

        $event.startTimeMinutes <

          this.specialHours[$event.start.getDay()].from ||

        $event.endTimeMinutes > this.specialHours[$event.start.getDay()].to

      ) {

        alert(`Please create events within business hours(09:00am to 07:00pm)`);

        return false;

      }

      this.deleteEvents();

      this.selectedEvent = $event;

      this.events.push($event);

      this.newEvents.push($event);

      return $event;

    },

 

    onEventChange(events, $event) {

      this.selectedEvent = $event.event;

      var enddate = new Date(this.selectedEvent.end);

      var bookedDate =

        enddate.getFullYear() +

        "-" +

        (enddate.getMonth() + 1) +

        "-" +

        enddate.getDate() +

        " " +

        enddate.getHours() +

        ":00";

      if (

        $event.event.startTimeMinutes <

          this.specialHours[$event.event.start.getDay()].from ||

        $event.event.endTimeMinutes >

          this.specialHours[$event.event.start.getDay()].to

      ) {

        alert("Please create events within business hours(09:00am to 07:00pm)");

        this.events[0] = this.selectedEvent;

        return this.selectedEvent;

      } else {

        // console.log(bookedDate)

        //  this.bookedevent.forEach((number) => {

        //     console.log(number.time)

        //     if(bookedDate >=  number.from_time){

        //       alert("This events already booked..!");

        //       this.deleteEvents();

        //     }

        // });

      }

 

      return $event.event;

    },

 

    // || ($event.event.endTimeMinutes - $event.event.startTimeMinutes) >= 60

 

    getSelectedDay(date) {

      var day = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];

      return day[date.getDay() - 1];

    },

 

    getDateFunction(date) {

      var month = [

        "January",

        "February",

        "March",

        "April",

        "May",

        "June",

        "July",

        "August",

        "September",

        "October",

        "November",

        "December",

      ];

      var day = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];

      var formatedDate =

        date.getDate() +

        "th" +

        " " +

        month[date.getMonth()] +

        " " +

        date.getFullYear();

      return formatedDate;

    },

 

    getTimeFunction(date) {

      var hours = date.getHours();

      var minutes = date.getMinutes();

      var ampm = hours >= 12 ? "pm" : "am";

      hours = hours % 12;

      hours = hours ? hours : 12; // the hour '0' should be '12'

      minutes = minutes < 10 ? "0" + minutes : minutes;

      var formatedTime = hours + ":" + minutes + "" + ampm;

      return formatedTime;

    },

    is(value) {

      return value ? true : "This field is ";

    },

    async handleNextButton(e) {

      e.preventDefault();

      const isValid = await this.$refs.loginForm.validate();

      var formValid = isValid;

      if (isValid) {

        this.formData.phoneNumber = this.formData.phoneNumber;

        // this.formData.phoneNumber = "+61" + this.formData.phoneNumber;

        this.isDisable = false;

        document.getElementById("rd3").checked = true;

        this.getRequipment();

      }

    },

    getRequipment(){

        let currentObj = this;

        this.axios

          .get("api/get-equipment")

          .then(function (response) {

             var requipementDataTable = [];

             response.data.forEach(function (data) {

               currentObj.requipementDataTable.push( 

                '<tr><td class="text-right" style=""><input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 check-checked-input" ><span class="ml-2 text-gray-700"></span></td><td class="text-center">'+data.name+'</td><td class="text-center"><p class="qty"><button @click="decreaseCount()" class="qtyminus" aria-hidden="true">−</button><input type="number" name="qty[]" id="qty" min="1" max="10" step="1" value="1" style="width:3rem;"><button @click="increaseCount()" class="qtyplus" aria-hidden="true">&plus;</button></p></td><td>$ '+data.price+'</td></tr>');

              });

            document.getElementById("requipementTable").append(requipementDataTable);

          })

          .catch(function (error) {

            currentObj.output = error;

          });

    },

 

    handleConfirmBtn() {

      if (this.formData.listOfRooms == "") {

        alert("Please select Hall");

      } else {

        let currentObj = this;

        this.axios

          .post("api/hallbookingemail", {

            data: this.formData,

          })

          .then(function (response) {

            currentObj.output = response.data;

          })

          .catch(function (error) {

            currentObj.output = error;

          });

        document.getElementById("rd4").checked = true;

        currentObj.isConfirmed = false;

        currentObj.isShowingAccordian = true;

      }

    },

  },

};

</script>

 

<style>

/* @import "vue2-timepicker/dist/VueTimepicker.css"; */

 

/* Quantity selector UI */

 

 

.qty button {

  padding: 0;

  margin: 0;

  border-style: none;

  touch-action: manipulation;

  display: inline-block;

  border: none;

  background: none;

  cursor: pointer;

}

 

/* End Reset for the demo */

/* Sass Config */

/* Contrast : 7.2:1 */

/* End Sass Config */

.qty {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  text-align: center;

}

.qty label {

  flex: 1 0 100%;

}

.qty input {

  height: 3rem;

  font-size: 1.3rem;

  text-align: center;

  border: 1px solid #575757;

}

.qty button {

  text-align: center;

  width: 2rem;

  height: 3rem;

  color: #fff;

  font-size: 2rem;

  background: #575757;

}

.qty button.qtyminus {

  margin-right: 0.3rem;

}

.qty button.qtyplus {

  margin-left: 0.3rem;

}

 

 

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

 

.custom-number-input input:focus {

  outline: none !important;

}

 

.custom-number-input button:focus {

  outline: none !important;

}

 

.blue-event {

  background-color: rgba(145, 175, 76, 0.35);

}

 

.red-event {

  background-color: rgba(175, 79, 76, 0.35);

}

 

.business-hours {

  background-color: rgba(255, 255, 0, 0.2);

  border: solid rgba(255, 210, 0, 0.6);

  border-width: 2px 0;

}

 

.fix-input-width {

  /* min-height: 100vh; */

}

 

.fix-input-width input,

.fix-input-width textarea,

.fix-input-width select {

  width: 30vw;

}

 

.fix-input-width input:hover,

.fix-input-width textarea:hover,

.fix-input-width select:hover {

  outline-color: #2c3e50;

}

.fix-input-width input:focus,

.fix-input-width textarea:focus,

.fix-input-width select:focus {

  outline-color: #2c3e50;

}

 

@media only screen and (max-width: 750px) {

  .fix-input-width input,

  .fix-input-width textarea,

  .fix-input-width select {

    width: 80vw;

  }

}

 

@media only screen and (min-width: 2000px) {

  .fix-input-width input,

  .fix-input-width textarea,

  .fix-input-width select {

    width: 20vw;

  }

}

@media only screen and (min-width: 3000px) {

  .fix-input-width input,

  .fix-input-width textarea,

  .fix-input-width select {

    width: 10vw;

  }

}

 

input[type="radio"] {

  position: absolute;

  opacity: 0;

  z-index: -1;

}

 

.row {

  display: flex;

}

.row .col {

  flex: 1;

}

.row .col:last-child {

  margin-left: 1em;

}

 

/* Accordion styles */

.tabs {

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);

}

 

.tab {

  width: 100%;

  color: white;

  overflow: hidden;

}

.tab-label {

  display: flex;

  justify-content: space-between;

  padding: 1em;

  background: #2c3e50;

  /* font-weight: bold; */

  cursor: pointer;

  /* Icon */

}

.tab-label:hover {

  background: #1a252f;

}

.tab-label::after {

  content: "❯";

  width: 1em;

  height: 1em;

  text-align: center;

  transition: all 0.35s;

}

.tab-content {

  max-height: 0;

  padding: 0 1em;

  color: #2c3e50;

  background: white;

  transition: all 0.35s;

}

.tab-close {

  display: flex;

  justify-content: flex-end;

  /* padding: 1em; */

  font-size: 0.75em;

  background: white;

  cursor: pointer;

}

.tab-close:hover {

  background: #1a252f;

}

 

input:checked + .tab-label {

  background: #1a252f;

}

input:checked + .tab-label::after {

  transform: rotate(90deg);

}

input:checked ~ .tab-content {

  max-height: 100vh;

  padding: 1em;

}

</style>