<template>
  <div style="min-height: 100vh">
    <div class="all-cars-container">
      <div v-if="isLexusBrand" class="lexus-banner">
        <div class="banner-bg">
          <!-- Main content -->
          <div class="container">
            <!-- Logo inside container for alignment -->
            <span class="lexus-logo-top">
              <img src="/images/lexusbanner/lexuslogo.png" alt="Lexus Logo" />
            </span>
            <div class="banner-content">
              <div class="banner-text">
                <h2>{{ locale === 'ar' ? 'لكزس فخامة يابانية تليق بذوقك' : 'Lexus - Japanese Luxury That Matches Your Taste' }}</h2>
                <p>{{ locale === 'ar' ? 'تعرّف على سيارات Lexus المتوفرة في السعودية، بتصميم فاخر، أداء قوي، وتجربة قيادة تجمع بين الراحة والتقنية المتقدمة.' : 'Discover Lexus cars available in Saudi Arabia, with luxurious design, powerful performance, and a driving experience that combines comfort and advanced technology.' }}</p>
                <button class="lexus-cta" @click="scrollToCars">
                  {{ locale === 'ar' ? 'تصفح سيارات Lexus المتاحة' : 'Browse Available Lexus Cars' }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Bottom section with car -->
        <div class="banner-bottom">
          <div class="container">
            <span class="lexus-car">
              <img src="/images/lexusbanner/lexuscar.png" alt="Lexus Car" />
            </span>
          </div>
        </div>
      </div>
      <div class="text-page">
        <div
          class="d-flex align-items-center flex-column w-100 justify-content-center"
        >
          <nav class="breadline" aria-label="Breadcrumb">
            <nuxt-link to="/">{{ $t("home") }}</nuxt-link>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              aria-hidden="true"
            >
              <path
                d="M9.99998 13.28L5.65331 8.9333C5.13998 8.41997 5.13998 7.57997 5.65331 7.06664L9.99998 2.71997"
                stroke="#A7B9D0"
                stroke-width="1.5"
                stroke-miterlimit="10"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            <span aria-current="page">{{ $t("market") }}</span>
          </nav>
          <div>
            <h1 class="title">{{ $t("market") }}</h1>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="50"
              height="3"
              viewBox="0 0 50 3"
              fill="none"
            >
              <rect
                x="11.9048"
                width="38.0952"
                height="3.00022"
                rx="1.50011"
                fill="#2D9596"
              />
              <rect
                opacity="0.9"
                width="7.14286"
                height="3.00022"
                rx="1.50011"
                fill="#2D9596"
              />
            </svg>
          </div>
        </div>
        <div class="container filter-container flex-column flex-xl-row">
          <!-- <button @click="showFilter = !showFilter" class="filter-btn" :class="{'active': showFilter}">
            <svg
              v-if="!showFilter"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.33355 9.1314C9.33355 8.99978 9.37251 8.87111 9.44552 8.7616L12.8179 3.70305C13.1132 3.26002 12.7956 2.66659 12.2632 2.66659H3.73725C3.20478 2.66659 2.88719 3.26002 3.18255 3.70305L6.55492 8.7616C6.62792 8.87111 6.66688 8.99978 6.66688 9.1314V13.0581C6.66688 13.5817 7.24285 13.9009 7.68688 13.6234L9.02022 12.7901C9.21514 12.6683 9.33355 12.4546 9.33355 12.2248V9.1314ZM10.6669 9.5351C10.6669 9.40349 10.7058 9.27481 10.7788 9.1653L13.9273 4.44265C14.8134 3.11354 13.8606 1.33325 12.2632 1.33325H3.73725C2.13986 1.33325 1.18708 3.11354 2.07315 4.44265L5.22158 9.1653C5.29459 9.27481 5.33355 9.40349 5.33355 9.5351V13.0581C5.33355 14.629 7.06145 15.5866 8.39355 14.7541L9.72688 13.9208C10.3116 13.5553 10.6669 12.9143 10.6669 12.2248V9.5351Z"
                fill="#363F4D"
              />
            </svg>
            <svg
              v-if="showFilter"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M1.29289 1.29289C1.68342 0.902369 2.31658 0.902369 2.70711 1.29289L8 6.58579L13.2929 1.29289C13.6834 0.902369 14.3166 0.902369 14.7071 1.29289C15.0976 1.68342 15.0976 2.31658 14.7071 2.70711L9.41421 8L14.7071 13.2929C15.0976 13.6834 15.0976 14.3166 14.7071 14.7071C14.3166 15.0976 13.6834 15.0976 13.2929 14.7071L8 9.41421L2.70711 14.7071C2.31658 15.0976 1.68342 15.0976 1.29289 14.7071C0.902369 14.3166 0.902369 13.6834 1.29289 13.2929L6.58579 8L1.29289 2.70711C0.902369 2.31658 0.902369 1.68342 1.29289 1.29289Z"
                fill="#363F4D"
              />
            </svg>
            <span>
            {{ $t("filter") }} 
            </span>
          </button> -->
          <div
            class="d-flex align-items-center flex-column flex-xl-row main-filter"
          >
            <div class="inp">
              <label for=""> {{ $t("brand") }} </label>
              <div
                v-if="dropdown1"
                :id="dropdown1.id"
                class="dropdown-container cars"
                @click="dropdown1.toggle()"
              >
                <button class="dropdown-toggle-container">
                  <span class="text-drop">
                    {{ dropdown1.selected }}
                  </span>
                  <img
                    class="icon"
                    :class="{ active: dropdown1.isOpen }"
                    src="~/assets/imgs/Small.svg"
                    alt="arrow"
                    loading="lazy"
                  />
                </button>
                <div v-if="dropdown1.isOpen" class="dropdown-menu" @click.stop>
                  <div class="px-3 searchInput d-flex align-items-center gap-2">
                    <input
                      type="text"
                      v-model="search1"
                      :placeholder="$t('search')"
                    />
                    <!-- <i class="fa-solid fa-magnifying-glass"></i> -->
                    <IconSearch></IconSearch>
                  </div>
                  <label
                    class="dropdown-item"
                    v-for="(item, index) in searchDropDown1"
                    :key="item.id"
                    :for="`checkBox-${item.id}`"
                  >
                    <div
                      class="w-100 d-flex align-items-center justify-content-between"
                    >
                      <div class="d-flex align-items-center gap-2">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M21 16.25H15C14.59 16.25 14.25 15.91 14.25 15.5C14.25 15.09 14.59 14.75 15 14.75H21C21.41 14.75 21.75 15.09 21.75 15.5C21.75 15.91 21.41 16.25 21 16.25Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M21 20.25H15C14.59 20.25 14.25 19.91 14.25 19.5C14.25 19.09 14.59 18.75 15 18.75H21C21.41 18.75 21.75 19.09 21.75 19.5C21.75 19.91 21.41 20.25 21 20.25Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M22 8.52V3.98C22 2.57 21.36 2 19.77 2H15.73C14.14 2 13.5 2.57 13.5 3.98V8.51C13.5 9.93 14.14 10.49 15.73 10.49H19.77C21.36 10.5 22 9.93 22 8.52Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z"
                            fill="#A7B9D0"
                          />
                        </svg>
                        <span>
                          {{ item.name }}
                        </span>
                      </div>
                      <input
                        :id="`checkBox-${item.id}`"
                        type="checkbox"
                        v-model="arr"
                        :value="item.id"
                        @change="store2.getCarsByBrand(arr)"
                      />
                    </div>
                  </label>
                </div>
              </div>
            </div>

            <div class="inp">
              <label for=""> {{ $t("models") }} </label>
              <div
                v-if="dropdown2"
                :id="dropdown2.id"
                class="dropdown-container cars"
                @click="dropdown2.toggle()"
              >
                <button class="dropdown-toggle-container">
                  <span class="text-drop">
                    {{ dropdown2.selected }}
                  </span>
                  <img
                    class="icon"
                    :class="{ active: dropdown2.isOpen }"
                    src="~/assets/imgs/Small.svg"
                    alt="arrow"
                    loading="lazy"
                  />
                </button>
                <div v-if="dropdown2.isOpen" class="dropdown-menu" @click.stop>
                  <div class="px-3 searchInput d-flex align-items-center gap-2">
                    <input
                      type="text"
                      v-model="search2"
                      :placeholder="$t('search')"
                    />
                    <!-- <i class="fa-solid fa-magnifying-glass"></i> -->
                    <IconSearch></IconSearch>
                  </div>
                  <label
                    class="dropdown-item"
                    v-for="(item, index) in filterDropdown2"
                    :key="item.id"
                    :for="`checkBox-${item.id}`"
                  >
                    <div
                      class="w-100 d-flex align-items-center justify-content-between"
                    >
                      <div class="d-flex align-items-center gap-2">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M21 16.25H15C14.59 16.25 14.25 15.91 14.25 15.5C14.25 15.09 14.59 14.75 15 14.75H21C21.41 14.75 21.75 15.09 21.75 15.5C21.75 15.91 21.41 16.25 21 16.25Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M21 20.25H15C14.59 20.25 14.25 19.91 14.25 19.5C14.25 19.09 14.59 18.75 15 18.75H21C21.41 18.75 21.75 19.09 21.75 19.5C21.75 19.91 21.41 20.25 21 20.25Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M22 8.52V3.98C22 2.57 21.36 2 19.77 2H15.73C14.14 2 13.5 2.57 13.5 3.98V8.51C13.5 9.93 14.14 10.49 15.73 10.49H19.77C21.36 10.5 22 9.93 22 8.52Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z"
                            fill="#A7B9D0"
                          />
                        </svg>
                        <span>
                          {{ item.name }}
                        </span>
                      </div>
                      <input
                        :id="`checkBox-${item.id}`"
                        type="checkbox"
                        v-model="arr2"
                        :value="item.id"
                        @change="collectCars(item)"
                      />
                    </div>
                  </label>
                </div>
              </div>
            </div>
            <div class="inp">
              <label for=""> {{ $t("pattern") }} </label>
              <div
                v-if="dropdown3"
                :id="dropdown3.id"
                class="dropdown-container cars"
                @click="dropdown3.toggle()"
              >
                <button class="dropdown-toggle-container">
                  <span class="text-drop">
                    {{ dropdown3.selected }}
                  </span>
                  <img
                    class="icon"
                    :class="{ active: dropdown3.isOpen }"
                    src="~/assets/imgs/Small.svg"
                    alt="arrow"
                    loading="lazy"
                  />
                </button>

                <div v-if="dropdown3.isOpen" class="dropdown-menu" @click.stop>
                  <div class="px-3 searchInput d-flex align-items-center gap-2">
                    <input
                      type="text"
                      v-model="search3"
                      :placeholder="$t('search')"
                    />
                    <!-- <i class="fa-solid fa-magnifying-glass"></i> -->
                    <IconSearch></IconSearch>
                  </div>
                  <label
                    class="dropdown-item"
                    v-for="(item, index) in filterDropdown3"
                    :key="item.id"
                    :for="`checkBox-${item.id}`"
                  >
                    <div
                      class="w-100 d-flex align-items-center justify-content-between"
                    >
                      <div class="d-flex align-items-center gap-2">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M21 16.25H15C14.59 16.25 14.25 15.91 14.25 15.5C14.25 15.09 14.59 14.75 15 14.75H21C21.41 14.75 21.75 15.09 21.75 15.5C21.75 15.91 21.41 16.25 21 16.25Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M21 20.25H15C14.59 20.25 14.25 19.91 14.25 19.5C14.25 19.09 14.59 18.75 15 18.75H21C21.41 18.75 21.75 19.09 21.75 19.5C21.75 19.91 21.41 20.25 21 20.25Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M22 8.52V3.98C22 2.57 21.36 2 19.77 2H15.73C14.14 2 13.5 2.57 13.5 3.98V8.51C13.5 9.93 14.14 10.49 15.73 10.49H19.77C21.36 10.5 22 9.93 22 8.52Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z"
                            fill="#A7B9D0"
                          />
                          <path
                            d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z"
                            fill="#A7B9D0"
                          />
                        </svg>
                        <span>
                          {{ item.name }}
                        </span>
                      </div>
                      <input
                        :id="`checkBox-${item.id}`"
                        type="checkbox"
                        v-model="arr3"
                        :value="item.id"
                      />
                    </div>
                  </label>
                </div>
              </div>
            </div>
            <div class="d-flex flex-column w-100" id="cars-section">
              <ClientOnly>
                <v-range-slider
                  dir="ltr"
                  v-model="valuePrices"
                  :max="store.prices?.maxPrice"
                  :min="store.prices?.minPrice"
                  color="#363F4D"
                  strict
                ></v-range-slider>
              </ClientOnly>
              <div
                dir="ltr"
                class="currency d-flex align-items-center justify-content-between"
              >
                <span :dir="locale == 'ar' ? 'rtl' : 'ltr'">
                  {{ Math.round(valuePrices[0]) }}
                  <Riyal color="#363F4D"></Riyal>
                </span>
                <span :dir="locale == 'ar' ? 'rtl' : 'ltr'">
                  {{ Math.round(valuePrices[1]) }}
                  <Riyal color="#363F4D"></Riyal>
                </span>
              </div>
            </div>
            <button @click="(store.page = 1), filter()" class="searchBtn2">
              {{ $t("search") }}
            </button>
          </div>
        </div>
      </div>
      <div  class="allcars">
        <div v-if="pendingState && !isLoading3" class="empty-state">
          <client-only>
            <!-- <Vue3Lottie :animation-data="search" :height="200" :width="200" /> -->
            <div style="width: 200px; height: 200px">
              <lottie src="/animations/search.json"></lottie>
            </div>
          </client-only>
          <h4>{{ $t("not1") }}</h4>
          <p>{{ $t("not2") }}</p>
        </div>
        <div class="container">
          <div class="row">
            <div
              v-for="item in store.filteredCar"
              class="col-12 col-xl-3 col-lg-3 col-md-6 mb-5"
            >
              <car-card :item="item"></car-card>
            </div>
          </div>
          <div
            v-if="isLoading3"
            class="d-flex align-items-center justify-content-center"
            style="min-height: 50vh"
          >
            <img
              class="animated-image animate"
              src="~/assets/imgs/loader.svg"
              alt="animated"
              loading="lazy"
            />
          </div>
          <div
            v-if="!pendingState"
            class="d-flex progress-container flex-column gap-3"
          >
            <span>
              {{ $t("watch") }} {{ store.filteredCar.length }} {{ $t("car") }}
              {{ $t("from0") }} {{ store.total }}
            </span>
            <ClientOnly>
              <v-progress-linear
                :reverse="reverse"
                rounded
                color="#00A0B4"
                :model-value="progressValue"
                :height="6"
              >
              </v-progress-linear>
            </ClientOnly>
            <button
              v-if="page < pageCount"
              class="addMoreBtn"
              @click="loadMore()"
            >
              {{ $t("showmore") }}
            </button>
          </div>
        </div>
      </div>
    </div>
    <loading v-if="isLoading" />
  </div>
</template>

<script setup>
import { useCarStore } from "@/stores/car";
// import { Vue3Lottie } from "vue3-lottie";
// import search from "~/assets/animations/search.json";
import { useHomeStore } from "@/stores/home";

// SEO Configuration
const { locale } = useI18n();
const { setPageSeo } = useSeoConfig();

setPageSeo({
  title: locale.value === "ar" ? "السوق - خليج أوتو" : "Market - Khalej Auto",
  description:
    locale.value === "ar"
      ? "سوق السيارات في خليج أوتو - ابحث وقارن بين السيارات حسب الماركة والموديل والسعر. فلتر متقدم لإيجاد سيارتك المثالية"
      : "Khalej Auto car market - Search and compare cars by brand, model, and price. Advanced filters to find your perfect car",
  path: "/cars",
});

let store2 = useHomeStore();
store2.getBrands2();
// store2.getCars();
// store2.getModels();
let store = useCarStore();
store.gePrices();
let route = useRoute();
let cars = ref(store2.cars);
let brandsArr = ref(store2.brands);
let modelsArr = ref(store2.models);
let pendingState = ref(false);
let filteredCar = ref(store.filteredCar);
let isLoading = ref(store.isLoading2);
let isLoading3 = ref(store.isLoading3);

// Helper function to convert slug to brand ID
const getBrandIdFromSlug = (slug) => {
  if (!slug || !store2.brands2?.length) return null;
  const brand = store2.brands2.find(b => {
    const brandSlug = b.name?.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9\u0600-\u06FF-]/g, '');
    return brandSlug === slug;
  });
  return brand?.id || null;
};

// Get initial brand ID from slug query param
const initialBrandId = computed(() => {
  if (route.query.id) return route.query.id;
  if (route.query.brand) return getBrandIdFromSlug(route.query.brand);
  return null;
});

let arr = ref(initialBrandId.value ? [initialBrandId.value] : []);
let arr2 = ref(route.query.model ? [route.query.model] : []);
let arr3 = ref(route.query.car_id ? [route.query.car_id] : []);
let valuePrices = ref([0, 0]);
let showFilter = ref(false);
let page = ref(1);
const localePath = useLocalePath();

let reverse = ref(locale.value == "ar" ? true : false);
let dropdownVal1 = ref(
  locale.value == "ar" ? "اختر ماركة السيارة " : "choose car brand"
);
let dropdownVal2 = ref(
  locale.value == "ar" ? "اختر موديل السيارة " : "choose car model"
);
let dropdownVal3 = ref(
  locale.value == "ar" ? "اختر اسم السيارة " : "choose car name"
);
const dropdown1 = ref(process.client ? new Dropdown(dropdownVal1.value) : null);
const dropdown2 = ref(process.client ? new Dropdown(dropdownVal2.value) : null);
const dropdown3 = ref(process.client ? new Dropdown(dropdownVal3.value) : null);
const handleClickOutside = (event) => {
  if (dropdown1.value) {
    dropdown1.value.handleClickOutside(event);
    dropdown2.value.handleClickOutside(event);
    dropdown3.value.handleClickOutside(event);
  }
};

const pageCount = computed(() => {
  return Math.ceil(store.total / store.per_page);
});

const progressValue = computed(() => {
  return ((store.itemsPerPage * 1) / store.total) * 100;
});
const loadMore = async () => {
  if (page.value < pageCount.value) {
    page.value++;
    await store.getSearchCars(page.value, {
      brand_id: arr.value,
      model_id: arr2.value,
      car_id: arr3.value,
      min_price: Math.round(valuePrices.value[0]),
      max_price: Math.round(valuePrices.value[1]),
    });
  }
};
const filter = () => {
  store.filteredCar = [];
  valuePrices.value[0] = valuePrices.value[0];
  valuePrices.value[1] = valuePrices.value[1];
  store.getSearchCars(page.value, {
    brand_id: arr.value,
    model_id: arr2.value,
    car_id: arr3.value,
    min_price: Math.round(valuePrices.value[0]),
    max_price: Math.round(valuePrices.value[1]),
  });
};

let search1 = ref("");
let search2 = ref("");
let search3 = ref("");
let searchDropDown1 = computed(() => {
  return dropdown1.value.items.filter((ele) => {
    return ele.name.toLowerCase().includes(search1.value.toLowerCase());
  });
});
let searchDropDown2 = ref([]);
let searchDropDown3 = ref([]);

watch(
  [
    () => store.filteredCar,
    () => store.isLoading2,
    () => store2.brands2,
    () => store2.models,
    () => store.isLoading3,
    () => store.prices,
  ],
  ([val1, val2, val5, val6, val7, val8]) => {
    filteredCar.value = val1;
    isLoading.value = val2;
    isLoading3.value = val7;
    pendingState.value = filteredCar.value.length < 1 ? true : false;
    dropdown1.value.items = val5;
    searchDropDown2.value = val6;
    if (route.query.model) {
      let carsArr = searchDropDown2.value.filter(
        (ele) => ele.id == route.query.model
      );
      searchDropDown3.value = carsArr[0]?.cars;
    }
    // arr.value = val5.length >= 1 ? arr.value : [];
    // arr2.value = val6.length >=1 ? arr2.value : [];
    // arr3.value = val4.length >= 1 ? arr3.value : [];
    valuePrices.value = valuePrices.value[0]
      ? [valuePrices.value[0], valuePrices.value[1]]
      : [Number(val8?.minPrice) || 0, Number(val8?.maxPrice) || 0];
  }
);

const collectCars = (item) => {
  const isSelected = arr2.value.includes(item.id);
  if (isSelected) {
    // Add cars to selectedCars if selected
    searchDropDown3.value = [
      ...searchDropDown3.value,
      ...item.cars.filter((car) => !searchDropDown3.value.includes(car)),
    ];
  } else {
    // Remove cars if deselected
    searchDropDown3.value = searchDropDown3.value.filter(
      (car) => !item.cars.includes(car)
    );
  }
  console.log(searchDropDown3.value);
};

let filterDropdown2 = computed(() => {
  return searchDropDown2.value.filter((ele) => {
    return ele.name.toLowerCase().includes(search2.value.toLowerCase());
  });
});
let filterDropdown3 = computed(() => {
  return searchDropDown3.value.filter((ele) => {
    return ele.name.toLowerCase().includes(search3.value.toLowerCase());
  });
});
watch(
  [() => route.query.id, () => route.query.brand, () => route.query.model, () => route.query.car_id],
  ([val1, valBrand, val2, val3]) => {
    const brandId = val1 || (valBrand ? getBrandIdFromSlug(valBrand) : null);
    if (brandId || val2 || val3) {
      arr.value = brandId ? [brandId] : [];
      arr2.value = val2 ? [val2] : [];
      arr3.value = val3 ? [val3] : [];
      // store.getSearchCars(page.value , {
      //   brand_id: val1,
      //   model_id: val2,
      //   car_id: val3,
      // });
    }
  }
);
watch(arr, (newVal) => {
  if (newVal.length === 0) {
    // Update other arrays and dropdown only if `arr` is empty
    arr2.value = [];
    arr3.value = [];
    dropdown1.value.select = "";
    console.log("arr is empty");
  }
});
onMounted(() => {
  const brandId = route.query.id || (route.query.brand ? getBrandIdFromSlug(route.query.brand) : null);
  if (brandId) {
    store2.getCarsByBrand(brandId);
  }
  store.getSearchCars(page.value, {
    brand_id: brandId,
    model_id: route.query.model,
    car_id: route.query.car_id,
  });
  document.addEventListener("click", handleClickOutside);
});
onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});

const LEXUS_BRAND_ID = 19;

const isLexusBrand = computed(() => {
  // Check by ID directly
  if (route.query.id == LEXUS_BRAND_ID) return true;

  // Check by brand slug (Arabic or English)
  const brandSlug = route.query.brand?.toLowerCase();
  if (brandSlug === 'lexus' || brandSlug === 'لكزس') return true;

  // Check if brand ID 19 is in the selected brands array
  if (arr.value.includes(LEXUS_BRAND_ID) || arr.value.includes(String(LEXUS_BRAND_ID))) return true;

  return false;
});

// Scroll to cars section
const scrollToCars = () => {
  const carsSection = document.getElementById('cars-section');
  if (carsSection) {
    carsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
};

</script>
