<template>
    <AdminPageHeader>
        <template #header>
            <a-page-header :title="$t(`menu.company`)" class="p-0">
                <template
                    v-if="
                        permsArray.includes('companies_edit') ||
                        permsArray.includes('admin')
                    "
                    #extra
                >
                    <a-space>
                        <a-button type="primary" @click="onSubmit">
                            <template #icon> <SaveOutlined /> </template>
                            {{ $t("common.update") }}
                        </a-button>

                        <CreateMenuSetting @success="addMenuSettingUpdated" />

                        <PdfFontSettings
                            v-if="
                                permsArray.includes('font_settings') ||
                                permsArray.includes('admin')
                            "
                            btnType="primary"
                        >
                            <template #icon>
                                <SettingOutlined />
                            </template>
                            {{ $t("pdf_font.pdf_settings") }}
                        </PdfFontSettings>
                    </a-space>
                </template>
            </a-page-header>
        </template>
        <template #breadcrumb>
            <a-breadcrumb separator="-" style="font-size: 12px">
                <a-breadcrumb-item>
                    <router-link :to="{ name: 'admin.dashboard.index' }">
                        {{ $t(`menu.dashboard`) }}
                    </router-link>
                </a-breadcrumb-item>
                <a-breadcrumb-item>
                    {{ $t("menu.settings") }}
                </a-breadcrumb-item>
                <a-breadcrumb-item>
                    {{ $t("menu.company") }}
                </a-breadcrumb-item>
            </a-breadcrumb>
        </template>
    </AdminPageHeader>

    <a-row>
        <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="4"
            :xl="4"
            :style="{
                background: themeMode == 'dark' ? '#141414' : '#fff',
                borderRight:
                    themeMode == 'dark' ? '1px solid #303030' : '1px solid #f0f0f0',
            }"
        >
            <SettingSidebar />
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
            <admin-page-table-content>
                <a-card class="page-content-container mt-20 mb-20">
                    <a-form layout="vertical">
                        <a-tabs v-model:activeKey="activeKey">
                            <a-tab-pane key="general_settings">
                                <template #tab>
                                    <span>
                                        <SettingOutlined />
                                        {{ $t("company.general_settings") }}
                                    </span>
                                </template>
                                <a-row :gutter="16">
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.name')"
                                            name="name"
                                            :help="rules.name ? rules.name.message : null"
                                            :validateStatus="rules.name ? 'error' : null"
                                            class="required"
                                        >
                                            <a-input
                                                v-model:value="formData.name"
                                                :placeholder="
                                                    $t(
                                                        'common.placeholder_default_text',
                                                        [$t('company.name')]
                                                    )
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.short_name')"
                                            name="short_name"
                                            :help="
                                                rules.short_name
                                                    ? rules.short_name.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.short_name ? 'error' : null
                                            "
                                            class="required"
                                        >
                                            <a-input
                                                v-model:value="formData.short_name"
                                                :placeholder="
                                                    $t(
                                                        'common.placeholder_default_text',
                                                        [$t('company.short_name')]
                                                    )
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.email')"
                                            name="email"
                                            :help="
                                                rules.email ? rules.email.message : null
                                            "
                                            :validateStatus="rules.email ? 'error' : null"
                                            class="required"
                                        >
                                            <a-input
                                                v-model:value="formData.email"
                                                :placeholder="
                                                    $t(
                                                        'common.placeholder_default_text',
                                                        [$t('company.email')]
                                                    )
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.phone')"
                                            name="phone"
                                            :help="
                                                rules.phone ? rules.phone.message : null
                                            "
                                            :validateStatus="rules.phone ? 'error' : null"
                                            class="required"
                                        >
                                            <a-input
                                                v-model:value="formData.phone"
                                                :placeholder="
                                                    $t(
                                                        'common.placeholder_default_text',
                                                        [$t('company.phone')]
                                                    )
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :xs="24" :sm="24" :md="24" :lg="24">
                                        <a-form-item
                                            :label="$t('company.address')"
                                            name="address"
                                            :help="
                                                rules.address
                                                    ? rules.address.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.address ? 'error' : null
                                            "
                                        >
                                            <a-textarea
                                                v-model:value="formData.address"
                                                :placeholder="
                                                    $t(
                                                        'common.placeholder_default_text',
                                                        [$t('company.address')]
                                                    )
                                                "
                                                :rows="4"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-tab-pane>
                            <a-tab-pane key="appearance">
                                <template #tab>
                                    <span>
                                        <FileTextOutlined />
                                        {{ $t("company.appearance") }}
                                    </span>
                                </template>
                                <a-row :gutter="16">
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.left_sidebar_theme')"
                                            name="left_sidebar_theme"
                                            :help="
                                                rules.left_sidebar_theme
                                                    ? rules.left_sidebar_theme.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.left_sidebar_theme ? 'error' : null
                                            "
                                        >
                                            <a-select
                                                v-model:value="
                                                    formData.left_sidebar_theme
                                                "
                                                :placeholder="
                                                    $t('common.select_default_text', [
                                                        $t('company.left_sidebar_theme'),
                                                    ])
                                                "
                                            >
                                                <a-select-option key="dark" value="dark">
                                                    {{ $t("company.dark") }}
                                                </a-select-option>
                                                <a-select-option
                                                    v-if="appThemeMode != 'dark'"
                                                    key="light"
                                                    value="light"
                                                >
                                                    {{ $t("company.light") }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.primary_color')"
                                            name="primary_color"
                                            :help="
                                                rules.primary_color
                                                    ? rules.primary_color.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.primary_color ? 'error' : null
                                            "
                                        >
                                            <color-picker
                                                v-model:pureColor="formData.primary_color"
                                                format="hex"
                                                useType="pure"
                                                v-model:gradientColor="gradientColor"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :xs="24" :sm="24" :md="6" :lg="6">
                                        <a-form-item
                                            :label="$t('company.dark_logo')"
                                            name="dark_logo"
                                            :help="
                                                rules.dark_logo
                                                    ? rules.dark_logo.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.dark_logo ? 'error' : null
                                            "
                                        >
                                            <Upload
                                                :formData="formData"
                                                folder="company"
                                                imageField="dark_logo"
                                                @onFileUploaded="
                                                    (file) => {
                                                        formData.dark_logo = file.file;
                                                        formData.dark_logo_url =
                                                            file.file_url;
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="6" :lg="6">
                                        <a-form-item
                                            :label="$t('company.light_logo')"
                                            name="light_logo"
                                            :help="
                                                rules.light_logo
                                                    ? rules.light_logo.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.light_logo ? 'error' : null
                                            "
                                        >
                                            <Upload
                                                :formData="formData"
                                                folder="company"
                                                imageField="light_logo"
                                                @onFileUploaded="
                                                    (file) => {
                                                        formData.light_logo = file.file;
                                                        formData.light_logo_url =
                                                            file.file_url;
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="6" :lg="6">
                                        <a-form-item
                                            :label="$t('company.small_dark_logo')"
                                            name="small_dark_logo"
                                            :help="
                                                rules.small_dark_logo
                                                    ? rules.small_dark_logo.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.small_dark_logo ? 'error' : null
                                            "
                                        >
                                            <Upload
                                                :formData="formData"
                                                folder="company"
                                                imageField="small_dark_logo"
                                                @onFileUploaded="
                                                    (file) => {
                                                        formData.small_dark_logo =
                                                            file.file;
                                                        formData.small_dark_logo_url =
                                                            file.file_url;
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="6" :lg="6">
                                        <a-form-item
                                            :label="$t('company.small_light_logo')"
                                            name="small_light_logo"
                                            :help="
                                                rules.small_light_logo
                                                    ? rules.small_light_logo.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.small_light_logo ? 'error' : null
                                            "
                                        >
                                            <Upload
                                                :formData="formData"
                                                folder="company"
                                                imageField="small_light_logo"
                                                @onFileUploaded="
                                                    (file) => {
                                                        formData.small_light_logo =
                                                            file.file;
                                                        formData.small_light_logo_url =
                                                            file.file_url;
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16" v-if="appType == 'non-saas'">
                                    <a-col :xs="24" :sm="24" :md="6" :lg="6">
                                        <a-form-item
                                            :label="$t('company.login_image')"
                                            name="login_image"
                                            :help="
                                                rules.login_image
                                                    ? rules.login_image.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.login_image ? 'error' : null
                                            "
                                        >
                                            <Upload
                                                :formData="formData"
                                                folder="company"
                                                imageField="login_image"
                                                @onFileUploaded="
                                                    (file) => {
                                                        formData.login_image = file.file;
                                                        formData.login_image_url =
                                                            file.file_url;
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-tab-pane>
                            <a-tab-pane key="preferences">
                                <template #tab>
                                    <span>
                                        <ControlOutlined />
                                        {{ $t("company.preferences") }}
                                    </span>
                                </template>
                                <a-row :gutter="16">
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.currency')"
                                            name="currency_id"
                                            :help="
                                                rules.currency_id
                                                    ? rules.currency_id.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.currency_id ? 'error' : null
                                            "
                                            class="required"
                                        >
                                            <span style="display: flex">
                                                <a-select
                                                    v-model:value="formData.currency_id"
                                                    :placeholder="
                                                        $t('common.select_default_text', [
                                                            $t('company.currency'),
                                                        ])
                                                    "
                                                    :allowClear="true"
                                                    optionFilterProp="label"
                                                    show-search
                                                >
                                                    <a-select-option
                                                        v-for="currency in currencies"
                                                        :key="currency.xid"
                                                        :value="currency.xid"
                                                    >
                                                        {{
                                                            `${currency.name} (${currency.symbol})`
                                                        }}
                                                    </a-select-option>
                                                </a-select>
                                                <CurrencyAddButton
                                                    @onAddSuccess="currencyAdded"
                                                />
                                            </span>
                                        </a-form-item>
                                    </a-col>

                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.layout')"
                                            name="rtl"
                                            :help="rules.rtl ? rules.rtl.message : null"
                                            :validateStatus="rules.rtl ? 'error' : null"
                                            class="required"
                                        >
                                            <a-select
                                                v-model:value="formData.rtl"
                                                :placeholder="
                                                    $t('common.select_default_text', [
                                                        $t('company.layout'),
                                                    ])
                                                "
                                                :allowClear="true"
                                                optionFilterProp="label"
                                                show-search
                                            >
                                                <a-select-option key="rtl" :value="1">
                                                    {{ $t("company.rtl") }}
                                                </a-select-option>
                                                <a-select-option key="ltr" :value="0">
                                                    {{ $t("company.ltr") }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.shortcut_menu_Placement')"
                                            name="shortcut_menus"
                                            :help="
                                                rules.shortcut_menus
                                                    ? rules.shortcut_menus.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.shortcut_menus ? 'error' : null
                                            "
                                            class="required"
                                        >
                                            <a-select
                                                v-model:value="formData.shortcut_menus"
                                                :placeholder="
                                                    $t('common.select_default_text', [
                                                        $t(
                                                            'company.shortcut_menu_Placement'
                                                        ),
                                                    ])
                                                "
                                                :allowClear="true"
                                                optionFilterProp="label"
                                                show-search
                                            >
                                                <a-select-option
                                                    key="top_bottom"
                                                    value="top_bottom"
                                                >
                                                    {{ $t("company.top_and_bottom") }}
                                                </a-select-option>
                                                <a-select-option key="top" value="top">
                                                    {{ $t("company.top_header") }}
                                                </a-select-option>
                                                <a-select-option
                                                    key="bottom"
                                                    value="bottom"
                                                >
                                                    {{ $t("company.bottom_corner") }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-tab-pane>
                            <a-tab-pane key="localization">
                                <template #tab>
                                    <span>
                                        <ExperimentOutlined />
                                        {{ $t("company.localization") }}
                                    </span>
                                </template>
                                <a-row :gutter="16">
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.auto_detect_timezone')"
                                            name="auto_detect_timezone"
                                            :help="
                                                rules.auto_detect_timezone
                                                    ? rules.auto_detect_timezone.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.auto_detect_timezone
                                                    ? 'error'
                                                    : null
                                            "
                                        >
                                            <a-switch
                                                v-model:checked="
                                                    formData.auto_detect_timezone
                                                "
                                                :checkedValue="1"
                                                :unCheckedValue="0"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.default_timezone')"
                                            name="timezone"
                                            :help="
                                                rules.timezone
                                                    ? rules.timezone.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.timezone ? 'error' : null
                                            "
                                            class="required"
                                        >
                                            <a-select
                                                v-model:value="formData.timezone"
                                                :placeholder="
                                                    $t('common.select_default_text', [
                                                        $t('company.default_timezone'),
                                                    ])
                                                "
                                                :allowClear="true"
                                                optionFilterProp="value"
                                                show-search
                                            >
                                                <a-select-option
                                                    v-for="(
                                                        timezoneValue, timezoneKey
                                                    ) in timezones"
                                                    :key="timezoneKey"
                                                    :value="timezoneValue"
                                                >
                                                    {{ timezoneValue }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.date_format')"
                                            name="date_format"
                                            :help="
                                                rules.date_format
                                                    ? rules.date_format.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.date_format ? 'error' : null
                                            "
                                            class="required"
                                        >
                                            <a-select
                                                v-model:value="formData.date_format"
                                                :placeholder="
                                                    $t('common.select_default_text', [
                                                        $t('company.date_format'),
                                                    ])
                                                "
                                                :allowClear="true"
                                                optionFilterProp="value"
                                                show-search
                                            >
                                                <a-select-option
                                                    v-for="(
                                                        dateFormatValue, dateFormatKey
                                                    ) in dateFormats"
                                                    :key="dateFormatKey"
                                                    :value="dateFormatValue"
                                                >
                                                    {{
                                                        `(${dateFormatKey}) => ` +
                                                        dayjsObject().format(
                                                            dateFormatValue
                                                        )
                                                    }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="$t('company.time_format')"
                                            name="time_format"
                                            :help="
                                                rules.time_format
                                                    ? rules.time_format.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.time_format ? 'error' : null
                                            "
                                            class="required"
                                        >
                                            <a-select
                                                v-model:value="formData.time_format"
                                                :placeholder="
                                                    $t('common.select_default_text', [
                                                        $t('company.time_format'),
                                                    ])
                                                "
                                                :allowClear="true"
                                                optionFilterProp="value"
                                                show-search
                                            >
                                                <a-select-option
                                                    v-for="(
                                                        timeFormatValue, timeFormatKey
                                                    ) in timeFormats"
                                                    :key="timeFormatKey"
                                                    :value="timeFormatKey"
                                                >
                                                    {{
                                                        `(${timeFormatValue}) => ` +
                                                        dayjsObject().format(
                                                            timeFormatKey
                                                        )
                                                    }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-tab-pane>
                            <a-tab-pane v-if="appType == 'non-saas'" key="advanced">
                                <template #tab>
                                    <span>
                                        <ApartmentOutlined />
                                        {{ $t("company.advanced") }}
                                    </span>
                                </template>
                                <a-row :gutter="16">
                                    <a-col :xs="24" :sm="24" :md="4" :lg="4">
                                        <a-form-item
                                            :label="$t('company.app_debug')"
                                            name="app_debug"
                                            :help="
                                                rules.app_debug
                                                    ? rules.app_debug.message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.app_debug ? 'error' : null
                                            "
                                        >
                                            <a-switch
                                                v-model:checked="formData.app_debug"
                                                :checkedValue="1"
                                                :unCheckedValue="0"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :xs="24" :sm="24" :md="4" :lg="4">
                                        <a-form-item
                                            :label="$t('company.update_app_notification')"
                                            name="update_app_notification"
                                            :help="
                                                rules.update_app_notification
                                                    ? rules.update_app_notification
                                                          .message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.update_app_notification
                                                    ? 'error'
                                                    : null
                                            "
                                        >
                                            <a-switch
                                                v-model:checked="
                                                    formData.update_app_notification
                                                "
                                                :checkedValue="1"
                                                :unCheckedValue="0"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-tab-pane>
                            <a-tab-pane key="geo_coding_api">
                                <template #tab>
                                    <span>
                                        <VerifiedOutlined />
                                        {{ $t("company.geo_coding_api") }}
                                    </span>
                                </template>
                                <a-row :gutter="16">
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12">
                                        <a-form-item
                                            :label="
                                                $t('company.google_geo_coding_api_key')
                                            "
                                            name="google_geo_coding_api_key"
                                            :help="
                                                rules.google_geo_coding_api_key
                                                    ? rules.google_geo_coding_api_key
                                                          .message
                                                    : null
                                            "
                                            :validateStatus="
                                                rules.google_geo_coding_api_key
                                                    ? 'error'
                                                    : null
                                            "
                                        >
                                            <a-input
                                                v-model:value="
                                                    formData.google_geo_coding_api_key
                                                "
                                                :placeholder="
                                                    $t(
                                                        'common.placeholder_default_text',
                                                        [
                                                            $t(
                                                                'company.google_geo_coding_api_key'
                                                            ),
                                                        ]
                                                    )
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-tab-pane>
                        </a-tabs>
                        <a-row :gutter="16">
                            <a-col :xs="24" :sm="24" :md="24" :lg="24">
                                <a-form-item>
                                    <a-button
                                        type="primary"
                                        @click="onSubmit"
                                        :loading="loading"
                                    >
                                        <template #icon>
                                            <SaveOutlined />
                                        </template>
                                        {{ $t("common.update") }}
                                    </a-button>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-card>
            </admin-page-table-content>
        </a-col>
    </a-row>
</template>
<script>
import { onMounted, ref, watch } from "vue";
import {
    EyeOutlined,
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    ExclamationCircleOutlined,
    SaveOutlined,
    SettingOutlined,
    FileTextOutlined,
    ExperimentOutlined,
    ApartmentOutlined,
    ControlOutlined,
    VerifiedOutlined,
} from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
import Upload from "../../../../common/core/ui/file/Upload.vue";
import apiAdmin from "../../../../common/composable/apiAdmin";
import CurrencyAddButton from "../../common/settings/currency/AddButton.vue";
import common from "../../../../common/composable/common";
import SettingSidebar from "../SettingSidebar.vue";
import AdminPageHeader from "../../../../common/layouts/AdminPageHeader.vue";
import CreateMenuSetting from "./CreateMenuSetting.vue";
import PdfFontSettings from "../../settings/pdf-fonts/PdfFontSettings.vue";
import { useAuthStore } from "../../../store/authStore";

export default {
    components: {
        EyeOutlined,
        PlusOutlined,
        EditOutlined,
        DeleteOutlined,
        ExclamationCircleOutlined,
        SaveOutlined,
        SettingOutlined,
        FileTextOutlined,
        ExperimentOutlined,
        ApartmentOutlined,
        ControlOutlined,
        ColorPicker,
        VerifiedOutlined,
        Upload,
        CurrencyAddButton,
        SettingSidebar,
        AdminPageHeader,
        CreateMenuSetting,
        PdfFontSettings,
    },
    setup() {
        const { addEditRequestAdmin, loading, rules } = apiAdmin();
        const { permsArray, appSetting, dayjsObject, appType, themeMode } = common();
        const { t } = useI18n();
        const formData = ref({});
        const currencies = ref([]);
        const timezones = ref([]);
        const dateFormats = ref([]);
        const timeFormats = ref([]);
        const company = appSetting.value;
        const currencyUrl = "currencies?limit=10000";
        const timezoneUrl = "timezones";
        const gradientColor = ref(
            "linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)"
        );
        const activeKey = ref("general_settings");
        const appThemeMode = window.config.theme_mode;
        const authStore = useAuthStore();

        onMounted(() => {
            const currencyPromise = axiosAdmin.get(currencyUrl);
            const timezonePromise = axiosAdmin.get(timezoneUrl);

            Promise.all([currencyPromise, timezonePromise]).then(
                ([currenciesResponse, timezonesResponse]) => {
                    currencies.value = currenciesResponse.data;
                    timezones.value = timezonesResponse.data.timezones;
                    dateFormats.value = timezonesResponse.data.date_formates;
                    timeFormats.value = timezonesResponse.data.time_formates;

                    setFormData();
                }
            );
        });

        const setFormData = () => {
            formData.value = {
                name: company.name,
                short_name: company.short_name,
                email: company.email,
                phone: company.phone,
                address: company.address,
                left_sidebar_theme: company.left_sidebar_theme,
                dark_logo: company.dark_logo,
                dark_logo_url: company.dark_logo_url,
                light_logo: company.light_logo,
                light_logo_url: company.light_logo_url,
                small_dark_logo: company.small_dark_logo,
                small_light_logo: company.small_light_logo,
                small_dark_logo_url: company.small_dark_logo_url,
                small_light_logo_url: company.small_light_logo_url,
                login_image: company.login_image,
                login_image_url: company.login_image_url,
                shortcut_menus: company.shortcut_menus,
                rtl: company.rtl,
                currency_id: company.x_currency_id,
                primary_color: company.primary_color,
                timezone: company.timezone,
                date_format: company.date_format,
                time_format: company.time_format,
                auto_detect_timezone: company.auto_detect_timezone,
                app_debug: company.app_debug,
                update_app_notification: company.update_app_notification,
                google_geo_coding_api_key: company.masked_google_geo_coding_api_key,
                _method: "PUT",
            };
        };

        const onSubmit = () => {
            addEditRequestAdmin({
                url: `companies/${company.xid}`,
                data: formData.value,
                successMessage: t("company.updated"),
                success: (res) => {
                    authStore.updateAppAction();
                },
            });
        };

        const currencyAdded = () => {
            axiosAdmin.get(currencyUrl).then((response) => {
                currencies.value = response.data;
            });
        };

        const addMenuSettingUpdated = (menuPosition) => {
            formData.value.shortcut_menus = menuPosition;
        };

        return {
            appType,
            permsArray,
            formData,
            loading,
            rules,
            currencies,
            onSubmit,
            currencyAdded,
            gradientColor,
            timezones,
            dateFormats,
            timeFormats,
            dayjsObject,
            appThemeMode,
            addMenuSettingUpdated,
            themeMode,
            activeKey,
        };
    },
};
</script>
