<template>
    <NuxtLayout :name="device" :config="config">
        <main class="panel-factors">
            <div>
                <form>
                    <i class="isax isax-search-normal-1" />
                    <input v-model="filters.q" :placeholder="$t('search')" />
                    <Button icon="isax isax-setting-4" severity="secondary" text rounded @click="showFilters" />
                </form>
                <aside v-if="lastFactors?.length > 0">
                    <h2>{{ $t("recentFactors") }}</h2>
                    <ul>
                        <li v-for="(factor, i) in lastFactors" :key="i">
                            <PanelRecentFactorItem :data="factor" />
                        </li>
                    </ul>
                </aside>
            </div>
            <div>
                <PanelSalesFactor :data="factor" />
            </div>
        </main>
    </NuxtLayout>
</template>

<script setup>
const { device, dialog, popup, t } = inject('service');
const config = reactive({
    desktop: { toolbar: true }, mobile: { header: { back: true, title: t('factors') } },
})

const { meta, query } = useRoute()
const { page = 1 } = query


const lastFactors = ref([])
const factor = ref([])
const filters = ref({});

const route = useRoute()
const id = route.params.id || 1

const { status, data, error } = await useFetch(`/api/orders/id/${id}`, {
    headers: {
        Authorization: useCookie('token')
    }
})

if (status.value == 'success') {
    lastFactors.value = data.value.lastFactors
    factor.value = data.value.factor

} else throw createError(error.value)

const component = resolveComponent('PanelFactorFilters')

const showFilters = (e) => {
    if (device.value == 'desktop') {
        popup.value.is = component
        popup.value.toggle(e)
    } else if (device.value == 'mobile')
        dialog.show(component)

}
</script>

<style lang="scss">
.panel-factors {
    @apply w-full lg:container relative;
    @apply pt-8 pb-20 lg:pt-14 lg:pb-[7.5rem] lg:min-h-screen;

    &>div:nth-of-type(1) {
        @apply flex flex-col md:flex-row justify-between gap-6 max-lg:px-6;

        &>form {
            @apply w-full md:max-w-[38rem] h-[2.9rem] bg-[#FAFAFA] rounded-[0.6rem] flex items-center pr-4;

            i {
                @apply text-lg;
            }

            input {
                @apply h-full px-2 bg-transparent grow outline-none;

                &::placeholder {
                    @apply text-neutral-400 text-lg font-vazir;
                }
            }

            &>button {
                @apply h-full;

                .p-button-icon {
                    @apply text-2xl;
                }
            }
        }

        &>aside {
            @apply max-w-full w-max flex flex-col gap-[1.1rem] lg:gap-12;

            h2 {
                @apply text-[#333333] text-base lg:text-xl font-bold font-vazir max-lg:pr-2.5;
            }

            ul {
                @apply flex justify-around flex-wrap md:flex-col gap-3 p-3 bg-[#FAFAFA] rounded-[0.6rem] overflow-hidden;
            }
        }
    }

    &>div:nth-of-type(2) {
        @apply max-w-full overflow-x-auto left-[20.8rem] right-6 lg:left-[19.3rem] lg:right-0 md:absolute top-full md:top-[5.3rem] lg:pb-4;
        @apply p-1 mt-[2.6rem];

        &::-webkit-scrollbar {
            @apply max-lg:hidden;
        }
    }
}
</style>
