<template>
	<div class="container">
    <app-loading
      v-if="loadingProperty && Object.values(property).length === 0"
    />

    <div v-else class="property-view">
      <div>
        <div class="" style="padding-top: 30px">
          <v-row
            class="slider p-0"
            :class="{ 'flex-column-reverse': isMobile }"
          >
            <v-col cols="12" md="7">
              <div
                class="property-name"
                style="
                  margin-top: 0 !important;
                  line-height: 1 !important;
                "
              >
                {{ property.properties?.name ?? "" }}
              </div>
              <div class="price-box">
                Start at
                <span class="price">
                  {{
                    toMoney(
                      property.property_pricings?.base_price,
                      property.properties?.currency_code
                    )
                  }}
                </span>
                / Night
              </div>
              <div class="text-disabled">
                <v-icon icon="mdi-map-marker" size="18"/>
                {{
                  [
                    property.property_locations?.city,
                    property.property_locations?.state,
                    property.property_locations?.country,
                  ]
                    .filter((item) => item)
                    .join(", ")
                }}
              </div>
              <div>
                <v-rating
                  v-if="property.properties?.property_rating > 0"
                  :model-value="
                    property.properties.property_rating
                  "
                  active-color="yellow-accent-4"
                  color="#888"
                  density="compact"
                  readonly
                  size="30"
                />
              </div>
              <!-- property_descriptions -->
              <template v-if="property.property_descriptions">
                <v-card-text
                  class="mt-3"
                  v-html="
                    property.property_descriptions.description
                  "
                ></v-card-text>
                <br/>
              </template>

              <template
                v-if="
                  property.property_basic_informations?.items &&
                  property.property_basic_informations?.items
                    .length
                "
              >
                <div class="box">
                  <h3
                    class="title"
                    style="margin-bottom: 40px !important"
                  >
                    Property Overview
                  </h3>
                  <v-row>
                    <v-col
                      v-for="item in property
                        .property_basic_informations?.items"
                      :key="item.id"
                      cols="6"
                      lg="3"
                      md="3"
                      sm="6"
                      class="text-center"
                    >
                      <v-icon :icon="item.icon" size="30"/>
                      <div v-html="item.name"></div>
                    </v-col>
                    <v-col
                      v-if="
                        property.property_amenities?.filter(
                          (el) =>
                            el?.amenity_category_id ===
                            40
                        ).length
                      "
                      class="basic-icons text-center"
                      cols="6"
                      lg="3"
                      md="3"
                      sm="6"
                    >
                      <div
                        class="icon sasicon-420 text-success"
                      ></div>
                      <div class="icon-info">
                        Options Available
                      </div>
                    </v-col>
                  </v-row>
                  <br/>
                </div>
              </template>

              <!-- property_house_configurations -->
              <template
                v-if="
                  property.property_house_configurations &&
                  property.property_house_configurations.length
                "
              >
                <div class="box box-configuration">
                  <h3 class="title">
                    What This Place Is All About
                  </h3>

                  <div
                    :style="{
                      '--swiper-navigation-size': '10px',
                      'text-align': 'center',
                    }"
                    class="swiper"
                  >
                    <div class="swiper-wrapper">
                      <template
                        v-for="item in property.property_house_configurations"
                        :key="item.id"
                      >
                        <div class="swiper-slide">
                          <v-col>
                            <v-icon
                              :icon="item.icon"
                              size="40"
                            />
                            <div>
                              {{ item?.name }}
                              {{
                                item.property_house_configuration_amenities &&
                                item
                                  .property_house_configuration_amenities
                                  .length
                                  ? ":"
                                  : ""
                              }}
                            </div>
                            <div
                              v-for="(
                                furniture, i
                              ) in item.property_house_configuration_amenities"
                              :key="i"
                              class="house-configurations-icons-additions"
                            >
                              {{
                                furniture?.amenity
                                  ?.name
                              }}
                              {{
                                furniture.quantity >
                                1
                                  ? `(x${furniture.quantity})`
                                  : ""
                              }}
                            </div>
                          </v-col>
                        </div>
                      </template>
                    </div>

                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                  </div>
                  <br/>
                </div>
              </template>
              <!--          </div>-->

              <template
                v-if="
                  property.property_house_rules &&
                  property.property_house_rules.length
                "
              >
                <div class="box" style="padding-bottom: 40px">
                  <h3 class="title">House rules</h3>
                  <v-row class="container-chip">
                    <v-col
                      v-for="item in rules()"
                      :key="item.id"
                      cols="12"
                      lg="4"
                      md="4"
                      sm="6"
                    >
                      <v-icon
                        :class="
                          item.icon?.class ||
                          'text-success'
                        "
                        :icon="
                          item.icon
                            ? `mdi-${item.icon.name}`
                            : 'mdi-check'
                        "
                      />
                      <span>{{ item.text }}</span>
                    </v-col>
                  </v-row>
                </div>
              </template>

              <!-- property_amenities -->
              <template
                v-if="
                  property.property_amenities &&
                  property.property_amenities.length
                "
              >
                <div class="box">
                  <div
                    class="d-flex flex-column align-items-center"
                  >
                    <h3 class="title">Amenities</h3>
                    <v-row class="container-chip">
                      <v-col
                        v-for="item in property.property_amenities.slice(
                          0,
                          9
                        )"
                        :key="item.id"
                        cols="12"
                        lg="4"
                        md="4"
                        sm="6"
                      >
                        <v-chip
                          :prepend-icon="item.icon"
                          variant="text"
                        >{{ item.name }}
                        </v-chip>
                      </v-col>
                    </v-row>

                    <v-btn
                      class="mt-15"
                      style="
                        background-color: black;
                        color: white;
                        max-width: fit-content;
                        margin: 40px auto 0 auto;
                      "
                      variant="text"
                      @click="showAllAmenities = true"
                    >
                      Show All Amenities
                    </v-btn>
                  </div>
                  <br/>

                  <v-dialog
                    v-model="showAllAmenities"
                    height="100%"
                    max-width="600"
                    width="100%"
                  >
                    <v-card
                      class="pa-5"
                      height="100%"
                      max-width="500"
                      width="100%"
                    >
                      <template #title>
                        <span class="font-weight-bold">
                          Amenities
                        </span>
                      </template>
                      <div
                        v-for="(
                          ac, i
                        ) in amenitiesCategories"
                        :key="`ac_${i}`"
                        class="mt-4 mb-5"
                      >
                        <h4 class="border-b mb-2">
                          {{ ac?.name }}
                        </h4>
                        <div
                          v-for="(
                            a, j
                          ) in getAmenitiesByCategory(
                            ac?.id
                          )"
                          :key="`am_${j}`"
                          class="my-2"
                        >
                          {{ a.name }}
                        </div>
                      </div>
                      <template v-slot:actions>
                        <v-btn
                          class="ms-auto"
                          text="close"
                          @click="
                            showAllAmenities = false
                          "
                        />
                      </template>
                    </v-card>
                  </v-dialog>
                </div>
              </template>

              <template
                v-if="
                  property.property_holiday_types &&
                  property.property_holiday_types.length
                "
              >
                <div class="box">
                  <h3 class="title">Holiday types</h3>
                  <v-row class="container-chip">
                    <v-col
                      v-for="item in property.property_holiday_types"
                      :key="item.id"
                      cols="12"
                      lg="4"
                      md="4"
                      sm="6"
                    >
                      <v-chip
                        :prepend-icon="item.icon"
                        variant="text"
                      >{{ item.name }}
                      </v-chip>
                    </v-col>
                  </v-row>
                  <br/>
                </div>
              </template>

              <template
                v-if="
                  property.property_holiday_suitables &&
                  property.property_holiday_suitables.length
                "
              >
                <div class="box">
                  <div
                    class="d-flex flex-column align-items-center"
                  >
                    <h3 class="title">Perfect For</h3>
                    <v-row class="container-chip">
                      <v-col
                        v-for="item in property.property_holiday_suitables"
                        :key="item.id"
                        cols="12"
                        lg="4"
                        md="4"
                        sm="6"
                      >
                        <v-chip
                          :prepend-icon="item.icon"
                          variant="text"
                        >{{ item.name }}
                        </v-chip>
                      </v-col>
                    </v-row>
                  </div>
                  <br/>
                </div>
              </template>

              <template
                v-if="property.properties?.gov_registration_ref"
              >
                <v-row align="center" class="mt-3 p-3">
                  <strong>Short Term Rental Registration:</strong>
                  <span class="ml-2">{{
                      property.properties.gov_registration_ref
                    }}</span>
                </v-row>
              </template>
            </v-col>

            <v-col cols="12" md="5">
              <v-carousel
                v-if="
                  property.property_images &&
                  property.property_images.length > 0
                "
                :show-arrows="property.property_images.length > 1"
                height="500px"
                hide-delimiters
                @update:model-value="(e) => handleCarouselSlide(e)"
              >
                <v-carousel-item
                  v-for="(img, ii) in property.property_images"
                  :key="img.id"
                >
                  <img
                    v-if="img.type === 'image'"
                    :src="img.full_path_medium"
                    alt=""
                    style="
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                    "
                    @error="
                      property.property_images.splice(ii, 1)
                    "
                  />
                  <video
                    v-if="img.type === 'video'"
                    :ref="(el) => (videoRefs[ii] = el)"
                    controls
                    class="w-100 h-100"
                    width="auto"
                  >
                    <source :src="`${envVideo}/${img.path}`"/>
                  </video>
                </v-carousel-item>

                <v-carousel-item
                  v-if="
                    property.property_images &&
                    property.property_images.length == 0
                  "
                  :src="imageFallback"
                />
              </v-carousel>

              <div
                elevation="10"
                tile
                class="mt-3 sticky-top"
                style="top: 20px"
              >
                <SearchSingle
                  :property="property"
                  @update-guests="(v) => updateGuests(v, false)"
                  @update-dates="(v) => updateDatesCalendar(v)"
                  @close-menu-guests="
                    (v) => updateGuests(v, true)
                  "
                  hideButtonBookNow
                  blockedLoadProperty
                />

                <!--														<v-alert-->
                <!--															v-if="!booking.success && booking.message"-->
                <!--															class="my-3"-->
                <!--															type="error"-->
                <!--															v-for="message in booking.message"-->
                <!--														>-->
                <!--															{{ message }}-->
                <!--														</v-alert>-->
              </div>
            </v-col>
          </v-row>
        </div>

        <div class="sec-01">
          <div class="details">
            <template v-if="propertyRelated.length > 0">
              <h3
                class="title"
                style="padding: 50px 0; font-size: 40px !important"
              >
                Related Properties
              </h3>
              
              <v-row>
                <v-col
                  v-for="(p, i) in propertyRelated"
                  :key="i"
                  cols="12"
                  lg="4"
                  md="6"
                  sm="6"
                >
                  <property-item :property="p"/>
                  <!-- <Related
                    :image-fallback="imageFallback"
                    :property="p"
                  /> -->
                </v-col>
              </v-row>
            </template>

            <div class="related-properties-js">
              <template v-if="loadingPropertiesRelated">
                <v-progress-circular
                  :size="50"
                  color="primary"
                  indeterminate
                />
              </template>
            </div>

            <!--          <div>-->
            <!--            <infinite-loading-->
            <!--                v-if="isLimitRelatedProperties"-->
            <!--                class="mt-7"-->
            <!--                @infinite="seeMoreRelatedProperties"-->
            <!--            />-->
            <!--          </div>-->
            <br/>
          </div>
        </div>
      </div>

      <v-dialog
        v-model="bookingDialog"
        :width="step === 'login' && !isMobile ? '40%' : '90%'"
      >
        <v-card>
          <PropertyBooking
            v-if="bookingDialog"
            :property="property"
            :search="slugDataSingleProperty"
            :booking="booking"
            singleProperty
            @step="(v) => (step = v)"
          />
          <v-card-actions class="border-t">
            <v-spacer/>
            <v-btn @click="bookingDialog = false">Close</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </div>
</template>

<script setup>
const AppLoading = Vue.defineAsyncComponent(() =>
	loadModule(SAS_URL + "/src/components/AppLoading.vue", options)
);

const SearchSingle = Vue.defineAsyncComponent(() =>
	loadModule(
		SAS_URL + "/src/components/shortcodes/home/SearchSingle.vue",
		options
	)
);

const PropertyBooking = Vue.defineAsyncComponent(() =>
	loadModule(`${SAS_URL}/src/components/property/Booking.vue`, options)
);

// const Related = Vue.defineAsyncComponent(() =>
// 	loadModule(`${SAS_URL}/src/components/property/Related.vue`, options)
// );

const PropertyItem = Vue.defineAsyncComponent(() =>
	loadModule(`${SAS_URL}/src/components/property/Item.vue`, options),
);

const {computed, defineProps, onMounted, ref} = Vue;

const imageFallback = `${SAS_URL}/src/assets/default.jpg`;
const step = ref("");
const storeUser = useUserStore();
const propertiesStore = usePropertiesStore();
const calendarStore = useCalendarStore();
const {getUser} = Pinia.storeToRefs(storeUser);
const isLimitReached = ref(false);
const loading = ref(false);
const isLimitRelatedProperties = ref(false);
const loadingPropertiesRelated = ref(false);
const showAllAmenities = ref(false);
const loadingProperty = ref(false);
const propertyRelated = ref([]);
const pagination = ref({current_page: 0});
const slugSingleProperty = ref([]);
const property = ref({});
const booking = ref({success: false, error: false});
const bookingDialog = ref(false);
const showAll = ref(false);
const holidaySuitableShow = ref(3);
const slugDataSingleProperty = ref({});
const videoRefs = ref([]);
const props = defineProps({
	args: {
		type: [Object],
		default: () => ({}),
	},
});

const args = computed({
	get() {
		return lodash.merge(
			{
				slug: "",
			},
			props.args
		);
	},
});

onMounted(async () => {
	document.title = "Property";

	slugSingleProperty.value =
		window.location.pathname.match(/\/\d+\/[^/]+\/$/)[0];

	await loadProperty();
	observeIntersection(
		".button-book-now",
		(e, o) => callback(e, o, "button"),
		{threshold: 0.2},
		3000
	);

	const swiper = new window.Swiper(".box-configuration .swiper", {
		direction: "horizontal",
		slidesPerView: 2,
		spaceBetween: 10,
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev",
		},
	});

	const criteria = serialize({
		filters: [
			{
				field: "published",
				value: 1,
				condition_type: "eq",
				condition: "where",
			},
		],
	});

	propertiesStore
		.getPropertySeasons({
			id: property.value.properties.id,
			criteria,
			per_page: 999,
		})
		.then((result) => {
			const key = property.value.properties.id;
			const value = result.data.data.entities;

			if (Array.isArray(value)) {
				calendarStore.seasonsPropertyMonth[key] = value;
			} else {
				calendarStore.seasonsPropertyMonth[key] = {
					...(calendarStore.seasonsPropertyMonth[key] ?? {}),
					...value,
				};
			}

			calendarStore.seasonsPropertyMonth = {
				...calendarStore.seasonsPropertyMonth,
			};
		});
});

const holidaySuitable = () => {
	return showAll.value
		? property.value.property_holiday_suitables
		: property.value.property_holiday_suitables.slice(
			0,
			holidaySuitableShow.value
		);
};

const callback = (entries, observer, element) => {
	element === "button"
		? (isLimitReached.value = entries[0].isIntersecting)
		: (isLimitRelatedProperties.value = entries[0].isIntersecting);
};

const callbackRelatedProperties = async (entries, observer) => {
	isLimitRelatedProperties.value = entries[0].isIntersecting;

	if (isLimitRelatedProperties.value && !loadingPropertiesRelated.value) {
		pagination.value.current_page += 1;
		await loadRelatedProperties();

		if (pagination.value.current_page === pagination.value.total_pages) {
			observer.unobserve(entries[0].target);
		}
	}
};

const loadProperty = async () => {
	try {
		loadingProperty.value = true;
		const {data} = await axios.get(
			`/guest/properties${
				!args.value.slug.includes("undefined") && args.value.slug.length
					? args.value.slug
					: slugSingleProperty.value
			}`
		);
		property.value = useProperty(data.data);

		document.title = `Property - ${
			lodash.capitalize(property.value.properties?.name) ?? ""
		}`;

		if (window.location.search.length > 0) {
			const params = new URLSearchParams(window.location.search);
			if (params.has("initial_date")) {
				slugDataSingleProperty.value.checkin_date =
					params.get("initial_date");
			}
			if (params.has("final_date")) {
				slugDataSingleProperty.value.checkout_date =
					params.get("final_date");
			}
			if (params.has("guests")) {
				slugDataSingleProperty.value.guests = params.get("guests");
			}
			if (params.has("childs")) {
				slugDataSingleProperty.value.childs = params.get("childs");
			}
			if (params.has("pets")) {
				slugDataSingleProperty.value.pets = params.get("pets");
			}

			bookingDialog.value = true;
		}

		observeIntersection(
			".related-properties-js",
			(e, o) => callbackRelatedProperties(e, o),
			{threshold: 0.2},
			3000
		);
		// await loadRelatedProperties()
	} catch (e) {
		console.log(e);
	} finally {
		if (property.value?.properties?.connections?.p) {
			await Promise.all([
				calendarStore.getSeasonsByPropertyByMonth({
					id: property.value.properties.id,
					start_date_from: moment()
						.startOf("month")
						.format("YYYY-MM-DD"),
					start_date_end: moment()
						.endOf("month")
						.format("YYYY-MM-DD"),
				}),
				calendarStore.getSeasonsByPropertyByMonth({
					id: property.value.properties.id,
					start_date_from: moment()
						.add(1, "month")
						.startOf("month")
						.format("YYYY-MM-DD"),
					start_date_end: moment()
						.add(1, "month")
						.endOf("month")
						.format("YYYY-MM-DD"),
				}),
			]);
		}
		loadingProperty.value = false;
	}
};

function objectToQueryString(obj, prefix = "") {
	let queryString = "";

	for (const key in obj) {
		if (obj.hasOwnProperty(key)) {
			const value = obj[key];
			const newKey = prefix ? `${prefix}[${key}]` : key;

			if (value instanceof Object && !(value instanceof File)) {
				queryString += objectToQueryString(value, newKey);
			} else {
				if (queryString !== "") {
					queryString += "&";
				}
				queryString += `${newKey}=${encodeURIComponent(value)}`;
			}
		}
	}

	return queryString;
}

const newPropertyLocationToSearch = async () => {
	const {data} = await axios.get(
		"https://nominatim.openstreetmap.org/search.php",
		{
			params: {
				format: "json",
				addressdetails: 1,
				extratags: 1,
				limit: 15,
				q: property.value.property_locations.address,
			},
		}
	);

	return {
		address: property.value.property_locations.address,
		city: property.value.property_locations.city,
		country: property.value.property_locations.country,
		full_address: property.value.property_locations.full_address,
		country_code: data[0].address.country_code,
		state: property.value.property_locations.state,
		suburb: property.value.property_locations.suburb,
		unit: property.value.property_locations.unit,
		ne_lat: data[0].lat,
		ne_lng: data[0].lon,
		sw_lat: data?.[1]?.lat ?? "",
		sw_lng: data?.[1]?.lon ?? "",
	};
};

const loadRelatedProperties = async () => {
	try {
		loadingPropertiesRelated.value = true;
		if (
			!property.value.property_locations.address ||
			property.value.property_locations.address.trim().length === 0
		)
			return;

		const payload = objectToQueryString({
			search: await newPropertyLocationToSearch(),
		});
		const {data} = await axios.get(
			`/properties/search?per_page=12&page=${pagination.value.current_page}&${payload}`
		);
		propertyRelated.value.push(...data.data.entities);
		pagination.value = data.data.pagination;

		// observeIntersection('.related-properties-js', (e, o) => callback(e, o, 'related'), options.value, 3000);
	} catch (e) {
		console.log(e);
	} finally {
		loadingPropertiesRelated.value = false;
	}
};

const rules = () => {
	const rules = [];

	if (property.value.property_configurations) {
		if (property.value.property_configurations.hour_check_in) {
			const checkinTime = moment(
				property.value.property_configurations.hour_check_in,
				"HH:mm"
			);

			rules.push({
				text: `Check-in is at ${
					checkinTime ? checkinTime.format("hh:mm A") : ""
				}`,
			});
		}

		if (property.value.property_configurations.hour_check_out) {
			const checkoutTime = moment(
				property.value.property_configurations.hour_check_out,
				"HH:mm"
			);

			rules.push({
				text: `Check-out by ${
					checkoutTime ? checkoutTime.format("hh:mm A") : ""
				}`,
			});
		}
	}

	if (property.value?.property_house_rules?.length) {
		const smoking_rules = [157, 158, 407];
		const pets_includes_id = 159;
		const pets_not_includes_id = 160;
		const pets_rules = [pets_includes_id, pets_not_includes_id];

		if (
			!property.value?.property_house_rules.some((el) =>
				pets_rules.includes(el.id)
			)
		) {
			rules.push({
				icon: {
					name: "close",
					class: "text-red",
				},
				text: "Pets not allowed",
			});
		} else if (
			property.value?.property_house_rules.some(
				(el) => pets_includes_id === el.id
			)
		) {
			const pet_rule = property.value?.property_house_rules.find(
				(el) => pets_includes_id === el.id
			);
			rules.push({
				icon: {
					name: "check",
					class: "text-success",
				},
				text: pet_rule.name,
			});
		} else {
			const pet_rule = property.value?.property_house_rules.find(
				(el) => pets_not_includes_id === el.id
			);
			rules.push({
				icon: {
					name: "close",
					class: "text-red",
				},
				text: pet_rule.name,
			});
		}
		if (
			!property.value?.property_house_rules.some((el) =>
				smoking_rules.includes(el.id)
			)
		) {
			rules.push({
				icon: {
					name: "close",
					class: "text-red",
				},
				text: "Smoking or Vaping not allowed",
			});
		}

		for (let i = 0; i < property.value?.property_house_rules.length; i++) {
			const rule = property.value?.property_house_rules[i];
			if (smoking_rules.includes(rule.id) || pets_rules.includes(rule.id))
				continue;
			const is_no_rule = rule.name.toLowerCase().search("no") >= 0;
			rules.push({
				icon: {
					name: is_no_rule ? "close" : "check",
					class: is_no_rule ? "text-red" : "text-success",
				},
				text: rule.name,
			});
		}
	}

	if (property.value?.properties?.age_restriction_active) {
		rules.push({
			icon: {
				name: "account-off",
				class: "text-red",
			},
			text: `Booking Guest Age Restriction: ${property.value?.properties?.age_restriction}+`,
		});
	}

	return rules;
};

const isMobile = computed(() => {
	return window.screen.width <= 959;
});

const amenitiesCategories = computed(() => {
	try {
		let categories = [];
		property.value?.property_amenities?.map((amenities, i) => {
			categories.push(amenities.amenity_category);
		});
		return [
			...new Map(categories.map((item) => [item["id"], item])).values(),
		];
	} catch (e) {
		console.error(e);
		return [];
	}
});

const getAmenitiesByCategory = (category) => {
	return property.value?.property_amenities?.filter(
		(am, i) => am.amenity_category_id === category
	);
};

const updateDatesCalendar = async (v) => {
	slugDataSingleProperty.value.checkin_date = v.from;
	slugDataSingleProperty.value.checkout_date = v.to;

	if (
		slugDataSingleProperty.value.checkin_date &&
		slugDataSingleProperty.value.checkout_date &&
		!loading.value
	) {
		await bookingSubmit();
	}
};

const bookingSubmit = async () => {
	try {
		if (loading.value) return;

		loading.value = true;

		const payload = {
			account_id: getUser.value?.id,
			booking_approval: 0,
			quotes: {
				property_id: property.value.properties.id,
				checkin_date: slugDataSingleProperty.value.checkin_date,
				checkout_date: slugDataSingleProperty.value.checkout_date,
				adults: slugDataSingleProperty.value.adults || 1,
				children: slugDataSingleProperty.value.children || 0,
				infants: slugDataSingleProperty.value.infants || 0,
				pets: slugDataSingleProperty.value.pets || 0,
				infantAges: slugDataSingleProperty.value.infantAges || [],
				promocode: "",
			},
		};

		const {data} = await axios.post("/quotes/store", payload);

		if (!booking.value.success && booking.value.message) {
			booking.value.error = true;
		}
		booking.value = data;
	} catch (e) {
		booking.value = e.response.data;
		booking.value.error = true;
	} finally {
		loading.value = false;
	}
};

const updateGuests = async (v, close = false) => {
	slugDataSingleProperty.value = {
		checkin_date: v.initial_date,
		checkout_date: v.final_date,
		...v,
	};

	// if (close) {
	// 	await bookingSubmit();
	// }
};

const toMoney = (moneyData, currency) => {
	return window.money(moneyData, currency);
};

const envVideo = computed(() => {
	return window.env.sas_api_url.includes("dev")
		? "https://assets-stage.searchandstay.com"
		: "https://assets.searchandstay.com";
});

const handleCarouselSlide = (index) => {
	videoRefs.value.forEach((video, i) => {
		if (video && i !== index) {
			video.pause();
		}
	});
};
</script>

<style scoped>
.container {
  margin: auto;
  padding: 0 !important;
}

@media (min-width: 992px) {
  .container {
    width: 1170px !important;
  }
}

.saswp-property-booking__stepper .v-window-item {
	max-height: calc(100vh - 250px);
	overflow: auto;
}

.slider {
	padding: 1rem;
	background: transparent;
	max-width: 1500px;
	margin: auto;
}

.slider .v-carousel {
	max-width: 100%;
}

.slider .v-carousel .v-window__controls {
	padding: 0;
}

.slider .v-carousel .v-window__controls .v-btn {
	border-radius: 0;
	max-width: 32px;
	background: #6e6e6e;
	color: #fff;
}

.slider .property-name {
	font-size: 2rem;
	font-weight: bold;
	margin-top: 1rem;
	text-transform: capitalize;
}

.slider .price-box {
	font-size: 1rem;
	color: #000;
	margin-top: 1rem;
}

.slider .price-box .price {
	font-size: 1.25rem;
	font-weight: 600;
	color: #000;
}

.sec-01 {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem;
}

@media screen and (max-width: 600px) {
	.sec-01 {
		padding: 2rem 0.5rem;
	}
}

.sec-01 .details {
	width: 100%;
	text-align: center;
}

.sec-01 .details .justify-center {
	justify-content: center;
}

.sec-01 .details .box {
	box-shadow: 0px 3px 20px -7px rgba(0, 0, 0, 0.35);
	padding: 1rem;
	margin: 1rem;
	border-radius: 10px;
}

.sec-01 .booking {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 1200px;
}

.sec-01 .booking button {
	background: #000;
	color: #fff;
}

.title-description {
	font-size: 1.5rem;
	line-height: 1;
	color: #000000;
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 700;
	font-family: "Poppins";
}

.title {
	font-size: 2rem;
	line-height: 1;
	color: #000000;
	margin-top: 20px;
	margin-bottom: 20px;
	font-weight: 700;
	font-family: "Poppins";
}

.container-card .title {
	font-family: "Poppins" !important;
}

.v-card-text {
	padding: 0 !important;
}

.container-chip {
	text-align: left;
}

.container-chip-house-configuration {
	text-align: left;
	padding-left: 25px;
}

@media screen and (max-width: 870px) {
	.container-chip-house-configuration {
		padding-left: 100px;
	}
}

@media screen and (max-width: 600px) {
	.container-chip-house-configuration {
		text-align: center;
		padding-left: 0;
	}
}

.swiper {
	cursor: grab;
	user-select: none;
}

.swiper:active {
	cursor: grabbing;
}

.swiper-button-prev,
.swiper-button-next {
	border: 2px solid #808080;
	border-radius: 50%;
	padding: 5px;
	background: #808080;
	color: #fff;
	width: 15px;
	height: 15px;
}

.basic-icons .icon {
	font-size: 30px;
}
</style>
