<template>
    <section class="seller-second-step">
        <ul>
            <li v-for="(_, key) in form.specs" :key="key">
                <IconField iconPosition="left">
                    <InputText :id="key" placeholder v-model="form.specs[key]" />
                    <InputIcon class="isax isax-close-circle" @click="delete form.specs[key]" />
                </IconField>
                <label :for="key"> {{ key }} </label>
                <small v-if="errors[key]">{{ errors[key] }}</small>
            </li>
            <li @click="handleClick()" v-ripple>
                <span>{{ $t('addSpec') }}</span>
                <i class="isax isax-box-add" />
            </li>
        </ul>
        <div>
            <Button v-bind="btns.prev.props" @click="step--" />
            <Button v-bind="btns.next.props" :disabled="disabled" @click="next()" />
        </div>
    </section>
</template>

<script setup>
const { dialog, t } = inject('service')
const { btns } = inject('init')

const form = inject('form')
const step = inject('step')
const disabled = computed(() => form.specs.length > 0)
const errors = ref({})

const next = () => {
    errors.value = {}
    Object.entries(form.specs).forEach(([key, value]) => {
        if ([undefined, null, ''].includes(value))
            errors.value[key] = t('required')
    })

    if (Object.keys(errors.value).length < 1)
        step.value++;
}

const handleClick = () => {
    dialog.show(resolveComponent('PanelSellerDialogAddSpec'), form)
}
</script>

<style lang="scss">
.seller-second-step {
    @apply w-full flex flex-col gap-8 lg:gap-[3.8rem];

    ul {
        @apply grid lg:grid-cols-3 gap-x-3 gap-y-6 lg:gap-x-6 lg:gap-y-10 w-full max-w-full;

        li {
            @apply w-full h-14 relative;

            label {
                @apply w-max absolute right-3 max-lg:translate-y-0.5 top-4 px-1 bg-white transition-['top'] select-none;
                @apply text-neutral-400 text-sm lg:text-base font-medium font-vazir cursor-text pointer-events-none;
            }

            input {
                @apply w-full rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir rtl;
            }

            .p-input-icon {
                @apply text-lg lg:text-xl h-max -translate-y-[20%] cursor-pointer;
            }

            &:has(input:focus),
            &:has(input:not(:placeholder-shown)) {
                label {
                    @apply -top-2 h-4;
                    @apply text-zinc-800 text-xs font-normal;
                }
            }

            .p-inputnumber {
                @apply w-full;
            }

            &:last-child {
                @apply cursor-pointer border border-[#CCCCCC] rounded-[0.6rem] px-4 pointer-events-auto;
                @apply flex justify-between items-center overflow-hidden relative;

                span {
                    @apply text-neutral-400 text-sm lg:text-base font-medium font-vazir;
                }

                i {
                    @apply text-[#47B556] text-2xl;
                }
            }

            small {
                @apply text-red-500 font-vazir;
            }

            &:has(small) * {
                @apply border-red-500 #{!important};

            }
        }
    }

    &>div {
        @apply inset-x-0 bottom-0 flex gap-3 w-full lg:w-max self-end;
        @apply max-lg:fixed max-lg:border-t max-lg:shadow-[0_-2px_5px_#0000000a];
        @apply h-[4.8rem] px-6 pt-3 lg:p-0 lg:h-max bg-white;

        &>button {
            @apply w-full h-[2.9rem] lg:w-[11.4rem] lg:h-14 #{!important};

            .p-button-label {
                @apply text-sm lg:text-xl font-medium font-vazir;
            }
        }
    }
}
</style>