<template>
  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 flex flex-col items-center h-full justify-center">
    <div class="flex flex-col justify-center items-center px-5">
      <div class="mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-25 text-success">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
        </svg>
      </div>

      <p class="text-2xl font-bold mb-3">Спасибо за заказ!</p>
      <p class="text-center mb-4">{{ settings.texts.text_order_created_success }}</p>

      <ul v-if="checkout.order" class="list w-full bg-base-200 mb-4">
        <li class="list-row flex justify-between">
          <div>Номер заказа:</div>
          <div class="font-bold">#{{ checkout.order.id }}</div>
        </li>

        <li class="list-row flex justify-between">
          <div>Дата:</div>
          <div class="font-bold">{{ checkout.order.created_at }}</div>
        </li>

        <li class="list-row flex justify-between">
          <div>Сумма:</div>
          <div class="font-bold">{{ checkout.order.total }}</div>
        </li>
      </ul>

      <p class="text-xs mb-10">
        Подтверждение отправлено Вам в личных сообщениях.
      </p>

      <RouterLink class="btn btn-primary" to="/">На главную</RouterLink>
    </div>
  </div>
</template>

<script setup>
import {useCheckoutStore} from "@/stores/CheckoutStore.js";
import {onMounted} from "vue";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {useRoute} from "vue-router";
import {useSettingsStore} from "@/stores/SettingsStore.js";

const checkout = useCheckoutStore();
const yaMetrika = useYaMetrikaStore();
const settings = useSettingsStore();
const route = useRoute();

onMounted(() => {
  window.document.title = 'Заказ оформлен';
  yaMetrika.pushHit(route.path, {
    title: 'Заказ оформлен',
  });
});
</script>
