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

definePageMeta({
    layout: "cart",
    middleware: "check-is-logged-in",
    pageTitle: "ثبت سفارش",
    prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
    nextPage: { name: "checkout", label: "پرداخت" },
});

// types

type PaymentGateway = {
    id: number;
    picture: string;
    title: string;
};

// state

const paymentGateways = ref<PaymentGateway[]>([
    {
        id: 1,
        picture: "/zarinpal.png",
        title: "زرین پال",
    },
    {
        id: 2,
        picture: "/saman-bank.png",
        title: "بانک سامان",
    },
    {
        id: 3,
        picture: "/mellat-bank.png",
        title: "بانک ملت",
    },
    {
        id: 4,
        picture: "/jibimo.png",
        title: "جیبی مو",
    },
    {
        id: 5,
        picture: "/idpay.png",
        title: "آی دی پی",
    },
]);

const selectedGateway = ref<PaymentGateway>(paymentGateways.value[0]);
</script>

<template>
    <div class="flex flex-col w-full gap-5">
        <div
            class="flex flex-col items-center w-full gap-4 p-4 border border-gray-300 rounded-xl bg-gray-50"
        >
            <span
                class="flex items-center justify-start w-full text-[1.125rem] font-semibold text-gray-900"
            >
                روش پرداخت
            </span>

            <div
                class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"
            >
                <div
                    v-for="(gateway, index) in paymentGateways"
                    @click="selectedGateway = { ...gateway }"
                    :key="index"
                    :class="
                        selectedGateway.id == gateway.id
                            ? 'ring-2 ring-offset-2 ring-black border-black'
                            : 'border-slate-200'
                    "
                    class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer"
                >
                    <div class="aspect-square flex-center">
                        <img :src="gateway.picture" class="object-cover" />
                    </div>
                    <span class="typo-label-sm text-black">
                        {{ gateway.title }}
                    </span>
                </div>
            </div>
        </div>
        <div
            class="flex flex-col items-center w-full gap-4 p-4 border lg:gap-6 border-gray-300 rounded-xl bg-gray-50"
        >
            <span
                class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900"
            >
                خلاصه سفارش
            </span>

            <div
                class="grid w-full grid-cols-1 gap-6 lg:grid-cols-3 md:grid-cols-2"
            >
                <MinimalCartItem v-for="i in 9" />

                <div class="h-7 flex-center col-span-full lg:hidden">
                    <button class="gap-2 flex-center">
                        <span class="text-sm font-bold text-black">
                            مشاهده بیشتر
                        </span>
                        <Icon name="bi:chevron-down" class="**:stroke-black" />
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped></style>
