<template>
    <div class="seller-add-spec">
        <div>
            <div>
                <h2>{{ $t("addSpec") }}</h2>
                <Button icon="isax isax-close-circle" severity="secondary" rounded link @click="dialog.close()" />
            </div>
            <p>{{ dialog.data.title }}</p>
        </div>
        <ul>
            <li>
                <InputText v-model="form.key" placeholder id="key" />
                <label for="key">{{ $t('title') }}</label>
            </li>
            <li>
                <Textarea v-model="form.value" placeholder id="value" />
                <label for="value">{{ $t("description") }}</label>
            </li>
        </ul>
        <Button :label="$t('submitSpec')" @click="add()" />
    </div>
</template>

<script setup>
const dialog = inject('dialogRef')
const form = reactive({})

const add = () => {
    dialog.value.data.specs[form.key] = form.value
    dialog.value.close();
}
</script>

<style lang="scss">
.seller-add-spec {
    @apply w-full lg:w-[40.1rem] lg:h-[38.6rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col relative;

    &::after {
        @apply content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
    }

    &>div {
        @apply flex flex-col gap-1.5 lg:h-[7.8rem] lg:gap-3 border-b lg:border-b-2 border-[#E5E5E5] p-6 lg:px-10 lg:pt-8 pb-6;

        &>div {
            @apply flex justify-between items-center;

            h2 {
                @apply text-[#333333] text-sm lg:text-xl font-bold font-vazir;
            }

            button {
                @apply -mx-4 -my-3;

                .p-button-icon {
                    @apply text-[1.4em] lg:text-3xl text-[#191919];
                }
            }
        }

        p {
            @apply text-[#7F7F7F] text-[0.7em] lg:text-lg font-normal font-vazir;
        }
    }

    &>ul {
        @apply flex flex-col h-full items-center gap-[1.1rem] px-6 pt-9 lg:gap-5 lg:pt-6 lg:px-10;

        li {
            @apply flex items-center gap-4 cursor-pointer w-max select-none relative;
            @apply w-[21.4rem] lg:w-[27.1rem];

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

            input, textarea {
                @apply h-[3.4rem] pl-10 rtl w-full rounded-[0.6rem] border shadow-none;
                @apply text-[#4C4C4C] font-vazir grow;
            }

            &:has(input:focus),
            &:has(textarea:focus),
            &:has(input:not(:placeholder-shown)),
            &:has(textarea:not(:placeholder-shown)) {
                label {
                    @apply -top-2 h-4;
                    @apply text-[#4C4C4C] text-xs font-normal font-vazir;
                }
            }
        }

        li:last-child {
            @apply w-full lg:w-[27.1rem] h-full flex flex-col items-start gap-4 mt-3 lg:mt-4;

            // label {
            //     @apply text-[#7F7F7F] text-xs lg:text-xl font-medium font-vazir max-lg:mr-2.5;
            // }

            textarea {
                @apply w-full h-[9.6rem] lg:h-full p-4 rounded-[0.6rem] border border-[#E5E5E5];

                // &::placeholder {
                //     @apply text-[#999999] text-[0.7em] lg:text-lg font-normal font-vazir;
                // }
            }
        }
    }

    &>button {
        @apply h-[2.9rem] m-6 mt-8 lg:h-14 lg:m-10 lg:mt-9 shrink-0 #{!important};

        .p-button-label {
            @apply font-bold font-iran-sans text-sm lg:text-base;
        }
    }
}
</style>