<template>
    <div
        class="p-2 md:px-4 md:py-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-100 dark:border-slate-700 flex gap-2 lg:gap-4 flex-col lg:flex-row items-center justify-between">

        <div class="w-full lg:w-[15%] flex flex-col overflow-hidden">
            <div class="flex gap-2">
                <div class="text-sm sm:text-base font-normal shrink-0">
                    <span class="text-slate-500">
                        <img :src="props.order.products[0].thumbnail" alt="product" class="w-14 h-14 rounded-full object-cover"/>
                    </span>
                    <span class="text-red-500 text-sm font-semibold">
                        {{ props.order?.products[0].name }}
                    </span>
                </div>
            </div>
        </div>

        <div class="grow flex w-full gap-2 items-center justify-between">
            <div class="flex flex-col">
            <div class="flex gap-1 justify-between">
                <div class="text-sm sm:text-base font-normal shrink-0">
                    <span class="text-slate-500">
                        {{ $t('Order ID') }}
                    </span>
                    <span class="text-blue-500">
                        {{ props.order?.order_code }}
                    </span>
                </div>

                <!-- Order Status -->
                <div class="text-xs sm:text-sm font-normal px-1.5 py-0.5  rounded-[10px] inline-block lg:hidden text-ellipsis overflow-hidden"
                    :class="props.order?.order_status">
                    {{ props.order?.order_status }}
                </div>
            </div>

            <div class="inline-flex gap-2 text-xs sm:text-sm leading-tight text-ellipsis">
                <span class="text-slate-500 shrink-0">{{ $t('Placed on') }}</span>
                <span class="text-slate-950 dark:text-white whitespace-nowrap text-ellipsis overflow-hidden">
                    {{ props.order?.placed_at }}
                </span>
            </div>
            </div>
            <div class="text-sm sm:text-base font-normal xl:w-20">
                <span class="text-slate-500">
                    {{ $t('QTY') }}:
                </span>
                <span class="text-slate-950 dark:text-white">{{ props.order?.quantity }}</span>
            </div>

            <div class="text-sm sm:text-base font-normal xl:w-36">
                <span class="text-slate-500">
                    {{ $t('Amount') }}:
                </span>
                <span class="text-slate-950 dark:text-white">
                    {{ master.showCurrency(props.order?.amount) }}
                </span>
            </div>

            <div class="hidden lg:block xl:w-28">
                <div class="text-xs font-normal px-1.5 py-0.2 rounded-[10px] inline-block"
                    :class="props.order?.order_status">
                    {{ props.order?.order_status }}
                </div>
            </div>

            <div class="hidden lg:block xl:w-28">
                <div class="text-xs font-normal px-1.5 py-0.2 rounded-[10px] inline-block"
                    :class="props.order?.products[0].is_digital ? 'bg-blue-500 text-white' : 'bg-blue-500 text-white'">
                    {{ props.order?.products[0].is_digital ? $t('E-Product') : $t('Physical Product') }}
                </div>
            </div>

            <div class="flex items-center justify-end gap-2">
                <router-link :to="'/digital-product-order-history/' + props.order?.id"
                    class="text-slate-500 text-sm sm:text-base font-normal leading-normal">
                    {{ $t('View Details') }}
                </router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    order: Object
});

import { useMaster } from "../stores/MasterStore";

const master = useMaster();

</script>

<style scoped>
.Pending {
    @apply bg-yellow-500 text-white;
}

.Confirm {
    @apply bg-blue-500 text-white;
}

.Processing,
.On,
.Pickup {
    @apply bg-primary text-white;
}

.Delivered {
    @apply bg-green-500 text-white;
}

.Cancelled {
    @apply bg-red-500 text-white;
}
</style>
