<template>
    <v-container grid-list-xl class="module-settings-wrap">
        <transition name="fade">
            <AppLoader v-if="!loading"></AppLoader>
        </transition>
        <transition name="fade-slow">
            <v-layout row wrap v-if="loading"> 
                <v-flex class="module-settings" xs12 v-if="orderUpload">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{orderUpload.module_name}}</h3>                        
                        <div class="setting-details" v-for="(s, key, index) in orderUpload.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <p v-html="s.desc"></p>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="orderUpload.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max" 
                                    v-bind:step="s.step"
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'select'">
                                <v-select
                                    v-bind:items="objectToArray(s.options)"
                                    v-model="s.value"
                                    label="Select"                                    
                                ></v-select>
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('order-upload', orderUpload.settings)"
                            :loading="buttonLoading"
                        >Save Settings</v-btn>
                    </div>
                </v-flex>
                <v-flex class="module-settings" xs12 v-if="ajaxCart">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{ajaxCart.module_name}}</h3>
                        <div class="setting-details" v-for="(s, key, index) in ajaxCart.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <p>{{s.desc}}</p>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="ajaxCart.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max"             
                                    v-bind:step="s.step"                       
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <!-- <div class="setting-uploader-wrap" v-else-if="s.type === 'image'">
                                <Uploader
                                    :id="s.id"
                                    :src="s.value"
                                ></Uploader>
                            </div> -->
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('ajax-cart', ajaxCart.settings)"
                            :loading="buttonLoading"
                        >Save Settings</v-btn>
                    </div>
                </v-flex>
                <v-flex class="module-settings" xs12 v-if="ajaxSearch">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{ajaxSearch.module_name}}</h3>
                        <div class="setting-details" v-for="(s, key, index) in ajaxSearch.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <p>{{s.desc}}</p>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="ajaxSearch.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max" 
                                    v-bind:step="s.step"
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <!-- <div class="setting-uploader-wrap" v-else-if="s.type === 'image'">
                                <Uploader
                                    :id="s.id"
                                    :src="s.value"
                                ></Uploader>
                            </div> -->
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('ajax-search', ajaxSearch.settings)"
                            :loading="buttonLoading"
                        >Save Settings</v-btn>
                    </div>
                </v-flex>                
                <v-flex class="module-settings" xs12 v-if="oneStepCheckout">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{oneStepCheckout.module_name}}</h3>
                        <div class="setting-details" v-for="(s, key, index) in oneStepCheckout.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <p>{{s.desc}}</p>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="oneStepCheckout.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max" 
                                    v-bind:step="s.step"
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <!-- <div class="setting-uploader-wrap" v-else-if="s.type === 'image'">
                                <Uploader
                                    :id="s.id"
                                    :src="s.value"
                                ></Uploader>
                            </div> -->
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('one-step-checkout', oneStepCheckout.settings)"
                            :loading="buttonLoading"
                        >Save Settings</v-btn>
                    </div>
                </v-flex>
                <v-flex class="module-settings" xs12 v-if="pdfCreator">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{pdfCreator.module_name}}</h3>
                        <div class="setting-details" v-for="(s, key, index) in pdfCreator.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <p>{{s.desc}}</p>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="s.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max" 
                                    v-bind:step="s.step"
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <div class="setting-uploader-wrap" v-else-if="s.type === 'image'">
                                <Uploader
                                    :id="s.id"
                                    :src="s.value"
                                    :imgValue="s.value"
                                    v-model="s.value"
                                ></Uploader>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('pdf-creator', pdfCreator.settings)"
                            :loading="buttonLoading"
                        >Save Settings</v-btn>
                    </div>
                </v-flex>
                <v-flex class="module-settings" xs12 v-if="productNotification">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{productNotification.module_name}}</h3>
                        <div class="setting-details" v-for="(s, key, index) in productNotification.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <p>{{s.desc}}</p>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="productNotification.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max" 
                                    v-bind:step="s.step"
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <!-- <div class="setting-uploader-wrap" v-else-if="s.type === 'image'">
                                <Uploader
                                    :id="s.id"
                                    :src="s.value"
                                ></Uploader>
                            </div> -->
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('product-notification', productNotification.settings)"
                            :loading="buttonLoading"
                        >Save Settings</v-btn>
                    </div>
                </v-flex>
                <v-flex class="module-settings" xs12 v-if="priceMatrix">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{priceMatrix.module_name}}</h3>
                        <div class="setting-details" v-for="(s, key, index) in priceMatrix.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <p>{{s.desc}}</p>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="priceMatrix.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max" 
                                    v-bind:step="s.step"
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <!-- <div class="setting-uploader-wrap" v-else-if="s.type === 'image'">
                                <Uploader
                                    :id="s.id"
                                    :src="s.value"
                                ></Uploader>
                            </div> -->
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <!-- <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="textarea"
                                    :value="s.value"
                                    v-model="s.value"
                                /> -->
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'select'">
                                <v-select
                                    v-bind:items="objectToArray(s.options)"
                                    v-model="s.value"
                                    label="Select"                                    
                                ></v-select>
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('price-matrix', priceMatrix.settings)"
                            :loading="buttonLoading"
                        >Save Settings</v-btn>
                    </div>
                </v-flex>
                <v-flex class="module-settings" xs12 v-if="socialLogin">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{socialLogin.module_name}}</h3>
                        <div class="setting-details" v-for="(s, key, index) in socialLogin.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <p>{{s.desc}}</p>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="socialLogin.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max" 
                                    v-bind:step="s.step"
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'select'">
                                <v-select
                                    v-bind:items="objectToArray(s.options)"
                                    v-model="s.value"
                                    label="Select"                                    
                                ></v-select>
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('social-login', socialLogin.settings)"
                            :loading="buttonLoading"
                        >Save Settings</v-btn>
                    </div>
                </v-flex>
                <v-flex class="module-settings" xs12 v-if="liveChat">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{liveChat.module_name}}</h3>
                        <div class="setting-details" v-for="(s, key, index) in liveChat.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <p>{{s.desc}}</p>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="liveChat.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max" 
                                    v-bind:step="s.step"
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'select'">
                                <v-select
                                    v-bind:items="objectToArray(s.options)"
                                    v-model="s.value"
                                    label="Select"                                    
                                ></v-select>
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('live-chat', liveChat.settings)"
                            :loading="buttonLoading"
                        >Save Settings</v-btn>
                    </div>
                    <v-snackbar
                        :timeout=5000
                        bottom
                        right
                        info
                        vertical
                        multi-line
                        v-model="showSnack"
                        class="app-snackbar"
                    >
                        <p>{{snackText}}</p>
                        <v-btn flat @click.native="showSnack = false" class="white--text">
                            <v-icon>cancel</v-icon>
                        </v-btn>
                    </v-snackbar>
                </v-flex>
                 <v-flex class="module-settings" xs12 v-if="orderDeliveryDate">
                    <div class="setting-wrap">
                        <h3 class="module-title">{{orderDeliveryDate.module_name}}</h3>
                        <div class="setting-details" v-for="(s, key, index) in orderDeliveryDate.settings" :key="index">
                            <h4 class="setting-title">{{s.name}}</h4>
                            <div class="setting-color-picker-wrap" v-if="s.type === 'color'">
                                <ColorPicker
                                    :id="s.id"
                                    :color="!s.value ? s.default : s.value"
                                    v-model="s.value"
                                ></ColorPicker>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'icon'">                                
                                <RadioIcon
                                    :id="s.id"
                                    :name="orderDeliveryDate.slug"
                                    :options="s.options"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioIcon>
                            </div>
                            <div class="setting-radio-icon-wrap" v-else-if="s.type === 'radio_image'">                                
                                <RadioImage
                                    :id="s.id"
                                    :name="s.name"
                                    :options="s.option"
                                    :modelValue="s.value"
                                    v-model="s.value"
                                ></RadioImage>
                            </div>
                            <div class="setting-number-wrap" v-else-if="s.type === 'number'">
                                <v-slider
                                    :id="s.id"
                                    v-model="s.value"
                                    thumb-label
                                    v-bind:min="s.min"
                                    v-bind:max="s.max" 
                                    v-bind:step="s.step"
                                ></v-slider>
                            </div>
                            <div class="setting-checkbox-wrap" v-else-if="s.type === 'checkbox'">
                                <v-switch
                                    :id="s.id"
                                    v-model="s.value"
                                    :label="s.label"
                                ></v-switch>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'textarea'">
                                <textarea :id="s.id" class="app-textarea" v-model="s.value" :placeholder="s.value"></textarea>
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'text'">
                                <input
                                    class="app-textinput"
                                    :name="s.name"
                                    :id="s.id"
                                    type="text"
                                    v-model="s.value"
                                />
                            </div>
                            <div class="setting-text-wrap" v-else-if="s.type === 'select'">
                                <v-select
                                    v-bind:items="objectToArray(s.options)"
                                    v-model="s.value"
                                    label="Select"                                    
                                ></v-select>
                            </div>
                        </div>
                        <v-btn
                            class="white--text settings-post app-button"
                            large
                            @click="updateModuleSettings('order-delivery-date', orderDeliveryDate.settings)"
                        >Save Settings</v-btn>
                    </div>
                </v-flex>
            </v-layout>
        </transition>
    </v-container>
</template>

<script>
// import ld from 'lodash'
import Axios from 'axios'
import ColorPicker from '../fields/color-picker.vue'
import RadioIcon from '../fields/radio-icon.vue'
import Uploader from '../fields/uploader.vue'
// import CurrencyRepeater from '../fields/currency-repeater.vue'
import RadioImage from '../fields/radio-image.vue'
// import SettingFields from '../components/setting-fields.vue'
import AppLoader from '../components/app-loader.vue'

export default {
    name: 'settings',
    data() {
        return {
            // settings: [],
            loading: false,
            // settingsSubmit: [],
            ajaxCart: [],
            ajaxSearch: [],
            priceMatrix: [],
            currencySwitcher: [],
            oneStepCheckout: [],
            pdfCreator: [],
            productNotification: [],
            socialLogin: [],
            liveChat: [],
            orderUpload: [],
            orderDeliveryDate: [],
            snackText: '',
            showSnack: false,
            buttonLoading: false,
            // settingsToPost: []
        }
    },
    components: {
        // SettingFields
        ColorPicker,
        RadioIcon,
        Uploader,
        //CurrencyRepeater,
        RadioImage,
        AppLoader,
    },
    created() {
        Axios.get(nb.api_route + 'settings/')
            .then(response => {
                console.log(response.data);

                this.ajaxCart = response.data['ajax-cart']
                this.ajaxSearch = response.data['ajax-search']
                this.priceMatrix = response.data['price-matrix']
                // this.currencySwitcher = response.data['currency-switcher']
                this.oneStepCheckout = response.data['one-step-checkout']
                this.pdfCreator = response.data['pdf-creator']
                this.productNotification = response.data['product-notification']
                this.socialLogin = response.data['social-login']
                this.liveChat = response.data['live-chat']
                this.orderUpload = response.data['order-upload']
                this.orderDeliveryDate = response.data['order-delivery-date']
                                
                this.loading = true
            })
            .catch(e => {
                console.log(e)
            })
    },
    methods: {        
        updateModuleSettings(module, settings) {
            var settingsToPost = {}

            this.buttonLoading = true
            Object.values(settings).forEach(value => {
                settingsToPost[value.id] = value.value
            })

            Axios.post(nb.api_route + 'modules/' + module, {
                settings: settingsToPost
            })
            .then(response => {
                this.buttonLoading = false
                this.snackText = 'Save success'
                this.showSnack = true
                // console.log(testtest)
            })
            .catch(e => {
                console.log(e)
            })

            // Axios.post(nb.api_route + 'module-settings/', {
            //     module: module,
            //     settings: settingsToPost
            // })
            // .then(response => {
            //     console.log(module)
            //     console.log(settingsToPost)
            // })
            // .catch(e => {
            //     console.log(e)
            // })
        },
        objectToArray(obj) {
            let arr = [];

            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {
                    arr.push(obj[key]);
                }
            }

            return arr;
        },
        uploaderSrcChange(src) {
            console.log(src);
        }
    }
}
</script>

<style lang="scss">
@import '../scss/variable.scss';

.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

.fade-slow-enter-active,
.fade-slow-leave-active {
  transition: opacity .9s
}

.fade-slow-enter,
.fade-slow-leave-to {
  opacity: 0
} 

.dashboard-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.app-textarea {
    min-width: 260px;
    min-height: 100px;
    border: 1px solid #ddd;
    border-radius: 3px;
    @media (min-width: 500px) {
        min-width: 400px;
    }
}

.app-textinput {
    min-width: 260px;
    min-height: 40px;
    border-radius: 3px;
    @media (min-width: 500px) {
        min-width: 400px;
    }
}

.module-settings-wrap {
    // margin-left: -700px;
    // padding-left: 700px;
    ul {
        padding-left: 0
    }
    button {
        margin-bottom: 0;
    }
    .setting-number-wrap {
        max-width: 240px;
        .slider {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
    .setting-wrap {
        padding: 15px;
    }
}

.module-settings {
    background-color: #fff;
    padding: 30px;
    margin-bottom: 45px;
    .setting-details {
        margin-bottom: 45px;
    }
    .module-title {
        font-size: 20px;
        margin-top: 0;
        padding-bottom: 15px;
        margin-bottom: 30px;
        position: relative;
        color: $db;
            border-bottom: 1px solid #eee;
        &:before {
            content: '';
            height: 1px;
            width: 90px;
            background: #11ffbd;
            display: block;
            position: absolute;
            bottom: -1px;
        }
    }
    .setting-title {
        font-size: 16px;
        margin-top: 0;
    }    
}
</style>