<script setup lang="ts">
// state

const route = useRoute();

// computed

const pageTitle = computed(() => route.meta.pageTitle);
const prevPage = computed(() => route.meta.prevPage);
const nextPage = computed(() => route.meta.nextPage);
</script>

<template>
    <div
        class="w-full flex flex-col-center persian-number font-iran-yekan-x"
        dir="rtl"
    >
        <Header />
        <main
            class="w-full overflow-x-hidden container flex flex-col gap-[5rem]"
        >
            <div class="w-full flex flex-col">
                <div
                    class="flex flex-col items-center justify-center gap-4 py-[5rem] lg:gap-0 lg:flex-row"
                >
                    <div
                        class="flex items-center justify-start w-full lg:w-3/12"
                    >
                        <NuxtLink
                            v-if="prevPage"
                            :to="{ name: prevPage?.name }"
                            class="flex items-center gap-2 text-sm lg:text-[1rem]"
                        >
                            <Icon
                                name="bi:arrow-right"
                                class="**:stroke-cyan-400"
                            />
                            <span class="font-bold text-cyan-400">
                                {{ prevPage?.label }}
                            </span>
                        </NuxtLink>
                    </div>

                    <h1
                        class="w-full text-center typo-h-3 lg:w-6/12 title-large"
                    >
                        {{ pageTitle }}
                    </h1>

                    <div class="hidden w-3/12 shrink-0 lg:block">&nbsp;</div>
                </div>
                <div
                    class="w-full flex flex-col items-center relative justify-between gap-8 lg:gap-6 lg:flex-row lg:items-start"
                >
                    <div
                        class="flex flex-col w-full gap-4 lg:gap-6 lg:w-9/12 shrink-0"
                    >
                        <NuxtPage />
                    </div>

                    <div
                        class="flex flex-col bg-slate-50 sticky top-44 w-full lg:w-3/12 transition-all border border-slate-200 rounded-xl"
                    >
                        <div
                            class="w-full flex items-center justify-between p-5 border-b border-slate-200"
                        >
                            <span class="typo-sub-h-xl text-black"
                                >فاکتور خرید</span
                            >
                            <Icon
                                name="ci:cart"
                                class="**:stroke-black"
                                size="24"
                            />
                        </div>

                        <div class="flex flex-col p-5 gap-[1rem]">
                            <div
                                class="flex items-center justify-between w-full text-slate-800"
                            >
                                <span class="max-w-1/2 text-sm lg:text-[1rem]">
                                    جمع سبد خرید:
                                </span>

                                <span class="max-w-1/2 text-sm lg:text-[1rem]">
                                    ۳,۲۹۱,۰۰۰ تومان
                                </span>
                            </div>

                            <div
                                class="flex items-center justify-between w-full text-status-error-primary"
                            >
                                <span class="max-w-1/2 text-sm lg:text-[1rem]">
                                    تخفیف:
                                </span>

                                <span class="max-w-1/2 text-sm lg:text-[1rem]">
                                    ۹۰۰,۰۰۰ تومان
                                </span>
                            </div>

                            <div
                                class="flex items-center justify-between w-full text-slate-900"
                            >
                                <span class="max-w-1/2 text-sm lg:text-[1rem]">
                                    جمع کل:
                                </span>

                                <span class="max-w-1/2 text-sm lg:text-[1rem]">
                                    ۲,۳۹۱,۰۰۰ تومان
                                </span>
                            </div>

                            <label
                                v-if="route.name == 'cart-checkout'"
                                class="flex items-center w-full group gap-2 p-3 text-sm transition-all border text-slate-600 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-cyan-500 bg-slate-50 border-slate-200 rounded-100"
                            >
                                <input
                                    type="text"
                                    placeholder="کد تخفیف"
                                    class="w-full border-none focus:border-none focus:outline-none placeholder:text-slate-600 h-[22px]"
                                />
                                <button
                                    class="ring ring-offset-[-4px] active:ring-offset-2 transition-all duration-75 font-bold text-cyan-500 rounded-50"
                                >
                                    ثبت
                                </button>
                            </label>

                            <NuxtLink :to="{ name: nextPage?.name }">
                                <Button
                                    start-icon="bi:arrow-right"
                                    class="w-full rounded-full mt-2"
                                >
                                    {{ nextPage?.label }}
                                </Button>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
            <ProductsSlider title="دیگران این محصولات را هم خریده‌اند" />
        </main>
        <div class="w-full flex-col flex">
            <ServiceHighlights />
            <Footer />
        </div>
    </div>
</template>

<style scoped></style>
