<template>
  <UiContainer v-if="checkoutStore.modalMadeOrder">
    <NuxtLink to="/" class="mt-6 text-blue-500 underline" @click="checkoutStore.modalMadeOrder = false">Go back home
    </NuxtLink>
  </UiContainer>

  <UiContainer v-else>
    <div class="xl:w-[85%] mx-auto space-25-55">
      <div class="space-25-55">
        <div class="w-full flex items-center sm:justify-center">
          <div
            class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto">
            <div class="sm:px-6 sm:py-3 mx-auto">
              {{ $t("login") }}
            </div>
            <div class="sm:px-6 sm:py-3 mx-auto">
              {{ $t("address") }}
            </div>
            <div
              class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
              {{ $t("summary") }}
            </div>
            <div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
              {{ $t("order_placed") }}
            </div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-[30px]">
        <div class="col-start-1 col-end-2 sm:col-end-3 space-y-5">
          <h4 class="h4-uppercase-bold-inter">
            {{ component.front_section_lang[0].data.product_list }}
          </h4>
          <div class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-25-55">
            <div v-for="(item, index) in checkoutStore.products" :key="index">
              <div class="flex items-center h-[100px] sm:h-[150px]">
                <div class="min-w-[100px] sm:min-w-[150px] flex items-center justify-center h-[100px] sm:h-[150px]">
                  <img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
                       class="max-w-full max-h-full object-contain">
                </div>

                <div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
                  <div class="w-full flex items-center justify-between">
                    <h3
                      class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
                      {{ item.name }}
                    </h3>
                  </div>
                  <div class="flex w-full justify-between gap-[10px]">
                    <p
                      class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
                      {{ item.total_price }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="col-start-1 col-end-2 sm:col-end-3 xl:col-auto flex flex-col sm:flex-row xl:flex-col items-center gap-[30px]">
          <div class="space-y-5 w-full">
            <h4 class="h4-uppercase-bold-inter">
              {{ component.front_section_lang[0].data.account_address }}
            </h4>
            <div
              class="border-2 border-block rounded-[8px] px-[25px] py-[15px] flex flex-col gap-1 text-sm sm:text-lg md:text-xl">
              <span>{{ checkoutStore.defaultAddress?.name }} {{
                checkoutStore.defaultAddress?.surname }}</span>
              <span>{{ checkoutStore.defaultAddress?.street }}</span>
              <span>{{ checkoutStore.defaultAddress?.postcode }} {{
                checkoutStore.defaultAddress?.city }}</span>
            </div>
          </div>
          <div class="flex flex-col space-y-5 w-full h-full">
            <h4 class="h4-uppercase-bold-inter">
              {{ component.front_section_lang[0].data.note }}
            </h4>
            <textarea id="1" v-model="checkoutStore.vNote"
                      class="border-2 border-block rounded-[8px] p-[15px] w-full flex-1 resize-none placeholder:text-button"
                      name="rty" :placeholder="component.front_section_lang[0].data.note"></textarea>
          </div>
        </div>
        <div class="col-start-1 col-end-2 xl:col-end-3 space-y-5">
          <h4 class="h4-uppercase-bold-inter">
            {{ component.front_section_lang[0].data.delivery_type }}
          </h4>
          <div
            class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-y-[25px] text-sm sm:text-lg md:text-xl">
            <div v-for="(delivery, index) in checkoutStore.deliveryOption" :key="index"
                 class="flex flex-col cursor-pointer" @click="checkoutStore.setCurrentDelivery(delivery)">
              <div class="flex items-end justify-between">
                <div class="flex gap-[15px]">
                  <div class="mt-1 w-4 h-4 border-2 border-button rounded-full">
                    <div v-if="checkoutStore.currentDelivery === delivery"
                         class="w-full h-full border-3 border-bg-light dark:border-bg-dark rounded-full bg-button">
                    </div>
                  </div>
                  <div class="flex flex-col">
                    <span>{{ delivery.delivery_supplier_name }}</span>
                    <span>{{ delivery.country_name }}</span>
                  </div>
                </div>
                <p class="font-inter text-lg sm:text-[21px] md:text-2xl leading-[150%] font-bold">
                  {{ menuStore.formatPrice(Number(delivery.shippment_price)) }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="space-y-5 w-full flex flex-col h-full">
          <h4 class="h4-uppercase-bold-inter">
            {{ component.front_section_lang[0].data.payment_method }}
          </h4>
          <div
            class="border-2 border-block rounded-[8px] px-[25px] py-[25px] sm:py-[15px] flex-1 flex flex-col gap-1 text-sm sm:text-xl overflow-auto">
            <UCarousel :prev-icon="'i-lucide-chevron-left'" :next-icon="'i-lucide-chevron-right'" :ui="{
                         viewport: 'h-full w-full',
                         container: 'h-full w-full',
                         item: 'h-full w-full pl-7',
                         prev: '-start-8 sm:-start-12 ring-0 text-button disable:text-block p-0 ring-inset ring-accented bg-inherit disabled:bg-inherit',
                         next: '-end-8 sm:-end-12 ring-0 text-button disable:text-block p-0 text-[30px] bg-inherit disabled:bg-inherit',
                         arrows: '',
                       }" :prev="{ size: 'xl' }" :next="{ size: 'xl' }" arrows :items="checkoutStore.paymentMethods"
                       class="relative sm:max-w-full mx-4 sm:mx-10 h-full">
              <template #default="{ item }">
                <div class="flex flex-col items-start justify-between h-full leading-[250%] sm:leading-[150%]">
                  <span>{{ item.bank_name }}</span>
                  <span>{{ item.country_name }}</span>
                  <span>{{ item.street_and_number }}</span>
                  <span>{{ item.iban }}</span>
                  <span>{{ item.swift }}</span>
                </div>
              </template>
            </UCarousel>
          </div>
        </div>
      </div>
      <div class="w-full border-y-2 border-block p-[25px] flex flex-col gap-[15px]">
        <div class="flex items-center justify-between">
          <p class="text-sm sm:text-xl">
            {{ component.front_section_lang[0].data.subtotal }}
          </p>
          <p class="text-lg sm:text-xl font-medium">
            {{
              menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
          </p>
        </div>
        <div class="flex items-center justify-between">
          <p class="text-sm sm:text-xl">
            {{ component.front_section_lang[0].data.shipping_cost }}
          </p>
          <p class="text-lg sm:text-xl font-medium">
            {{
              menuStore.formatPrice(Number(checkoutStore.shippingPrice)) }}
          </p>
        </div>
        <div class="flex items-center justify-between uppercase text-lg sm:text-xl">
          <p>{{ component.front_section_lang[0].data.total }}</p>
          <p
            class="text-accent-green-light dark:text-accent-green-dark font-inter text-xl sm:text-2xl leading-[150%] font-bold">
            {{ menuStore.formatPrice(Number(checkoutStore.fullPrice)) }}
          </p>
        </div>
      </div>
      <div class="flex flex-col sm:flex-row items-center justify-between mt-1 gap-[55px]">
        <div class="flex flex-col gap-1 text-white w-full">
          <div class="flex gap-3 text-black dark:text-white items-center">
            <input id="first" v-model="checkoutStore.vLegal" type="checkbox" name="first" />
            <!-- <label for="first" class="text-sm leading-snug">
                            {{ $t("I accept ") }}
                            <NuxtLink target="_blank"
                                :to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'legal_statement.html' } }"
                                class="underline cursor-pointer">
                                {{ $t("the legal statement*") }}
                            </NuxtLink>
                        </label> -->
            <p class="text-sm sm:text-lg">
              {{ $t("I accept ") }} {{ $t("the legal statement*") }}
            </p>
          </div>
          <span v-if="checkoutStore.legalValidation" class="text-xs text-red-600 ml-6">
            {{ $t("You need to accept this") }}
          </span>

          <div class="flex gap-3 text-black dark:text-white items-center mt-2">
            <input id="second" v-model="checkoutStore.vTerms" type="checkbox" name="second" />
            <!-- <label for="second" class="text-sm leading-snug">
                            {{ $t("I accept ") }}
                            <NuxtLink target="_blank"
                                :to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'general_terms_and_conditions.html' } }"
                                class="underline cursor-pointer">
                                {{ $t("general terms and conditions*") }}
                            </NuxtLink>
                        </label> -->
            <p class="text-sm sm:text-lg">
              {{ $t("I accept ") }} {{ $t("general terms and conditions*") }}
            </p>
          </div>
          <span v-if="checkoutStore.termsValidation" class="text-xs text-red-600 ml-6">
            {{ $t("You need to accept this") }}
          </span>
        </div>

        <UiButtonArrow type="fill" :arrow="true" @click="checkoutStore.sendSummaryForm">
          {{ $t("Buy") }}
        </UiButtonArrow>
      </div>
    </div>
  </UiContainer>
</template>

<script setup lang="ts">
import { UCarousel } from '#components'

const checkoutStore = useCheckoutStore()
const menuStore = useMenuStore()

await checkoutStore.getOrder()
await checkoutStore.getBankAccount()
await checkoutStore.getUserCart()
await checkoutStore.getDeliveryOptions()
await checkoutStore.getDefAddress()

defineProps<{
  component: {
    id: number
    name: string
    img: string[]
    component_name: string
    is_no_lang: boolean
    page_name: string
    front_section_lang: {
      data: {
        product_list: string
        account_address: string
        note: string
        delivery_type: string
        payment_method: string
        subtotal: string
        shipping_cost: string
        total: string
        accept: string
        legal: string
        terms: string
      }
      id_front_section: number
      id_lang: number
    }[]
  }
}>()
</script>
