<template>
    <div class="total-invoice-fixed">
        <Button :label="$t('submitAndViewPreFactor')" @click="submitOrder()" />
        <div>
            <label>{{ $t('totalFactor') }}</label>
            <span>{{ numberFormat(items.totalFactor) }} {{ $t('priceUnit') }}</span>
        </div>
        <Button icon="isax isax-trash" severity="danger" text rounded @click="remove()" />
    </div>
</template>

<script setup>
import init from '../../initialize/cart-total-invoice'

const { dialog } = inject('service')

const data = inject('data')

const items = computed(() => init(data.value))

const loading = ref(false)

const submitOrder = async () => {
    loading.value = true
    const { status, data } = await useFetch('/api/orders', {
        headers: { Authorization: useCookie('token') }, method: 'post'
    })
    loading.value = false

    if (status.value == 'success') {
        dialog.open(resolveComponent('DialogPreFactorSubmit'), {
            props: { modal: true },
            data
        })
    }
}

const remove = () => {
    dialog.show()
}

const numberFormat = (number) =>
    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
</script>

<style lang="scss">
.total-invoice-fixed {
    @apply fixed inset-x-0 bottom-16 h-[4.6rem] z-[11] bg-white flex justify-between items-center;
    @apply shadow-[0px_-3px_5px_#0000000a] border-t border-[#F1F2F4] px-6 lg:hidden;

    &>button:first-of-type {
        @apply h-10 w-[10.7rem] #{!important};

        .p-button-label {
            @apply text-xs font-iran-sans font-bold;
        }
    }

    &>div {
        @apply flex flex-col gap-2 justify-between items-end font-vazir;

        label {
            @apply text-[#7F7F7F] text-xs;
        }

        span {
            @apply text-[#333333] text-sm font-bold;
        }
    }

    &>button:last-of-type {
        @apply fixed lg:hidden w-[3.8rem] h-[3.8rem] right-6 bottom-36 z-10 bg-white #{!important};
        @apply shadow-[0px_0px_10px_#00000014];

        .p-button-icon {
            @apply text-[2em] text-[#AD3434];
        }
    }
}
</style>