<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Template
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined">
    <div class="pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden w-100">
        <div class="pdapp-text-group border-bottom w-100 d-flex flex-column align-items-center" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].textLock, [0, 1, 2, 12], 'text')">
            <input type="text" class="form-control mb-2" v-model="menuOptions.details[menuOptions.childID].text" @input="updateText" v-if="showSettingOption(true, [0], 'text')">

            <div class="pdapp-text-fonts btn-group position-relative w-100 gap-2 mb-2 flex-wrap" v-if="showSettingOption(true, [1, 2, 12], 'text')">
                <button v-if="showSettingOption(true, [1], 'text')" type="button" class="btn tooltip-top rounded-2 pdapp-text-type-font" :data-tooltip="langs.options.change_font" :class="menuOptions.details[menuOptions.childID].dropdown == 'font' ? 'btn-primary active' : 'btn-light'" @click="dropdownText('font')">
                    <span>{{ menuOptions.details[menuOptions.childID].fontFamily }}</span>
                    <i class="material-icons material-symbols-outlined">arrow_drop_down</i>
                    <span class="dropdown-arrow-bot"></span>
                </button>

                <button v-if="showSettingOption(true, [12], 'text')" type="button" class="btn tooltip-top rounded-2 pdapp-text-type-size" :data-tooltip="langs.options.font_size" :class="menuOptions.details[menuOptions.childID].dropdown == 'size' ? 'btn-primary active' : 'btn-light'" @click="dropdownText('size')">
                    <span>{{ menuOptions.details[menuOptions.childID].fontSize }}</span>
                    <i class="material-icons material-symbols-outlined">arrow_drop_down</i>
                    <span class="dropdown-arrow-bot"></span>
                </button>
                
                <button v-if="showSettingOption(true, [2], 'text')" type="button" class="btn tooltip-top rounded-2 pdapp-text-type-color" :data-tooltip="langs.options.text_color" :class="menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'btn-primary active' : 'btn-light'" @click="dropdownText('color')">
                    <i class="material-icons material-symbols-outlined">format_color_text</i>
                    <span class="dropdown-arrow-bot"></span>
                </button>
            </div>
        </div>

        <div class="pdapp-text-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 rounded-0 gap-2 flex-wrap" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].textLock, [3, 4, 5, 6], 'text')">
            <button v-if="showSettingOption(true, [4], 'text')" type="button" class="btn tooltip-top rounded-2 pdapp-text-type-spacing" :data-tooltip="langs.options.spacing" @click="dropdownText('spacing')" :class="menuOptions.details[menuOptions.childID].dropdown == 'spacing' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">format_letter_spacing</i>
                <span class="dropdown-arrow-bot"></span>
            </button>
            <button v-if="showSettingOption(true, [5], 'text')" type="button" class="btn tooltip-top rounded-2 pdapp-text-type-outline" :data-tooltip="langs.options.outline" @click="dropdownText('outline')" :class="menuOptions.details[menuOptions.childID].dropdown == 'outline' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">type_specimen</i>
                <span class="dropdown-arrow-bot"></span>
            </button>
            <button v-if="showSettingOption(true, [6], 'text')" type="button" class="btn tooltip-top rounded-2 pdapp-text-type-transparency" :data-tooltip="langs.options.transparency" @click="dropdownText('transparency')" :class="menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">gradient</i>
                <span class="dropdown-arrow-bot"></span>
            </button>
        </div>
        
        <div class="pdapp-text-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 rounded-0 gap-2 flex-wrap" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].textLock, [7], 'text')">
            <button type="button" class="btn tooltip-top rounded-2" :data-tooltip="langs.options.bold" @click="formatText('bold')" :class="menuOptions.details[menuOptions.childID].fontWeight == '700' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">format_bold</i>
            </button>
            <button type="button" class="btn tooltip-top rounded-2" :data-tooltip="langs.options.italic" @click="formatText('italic')" :class="menuOptions.details[menuOptions.childID].fontStyle == 'italic' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">format_italic</i>
            </button>
            <button type="button" class="btn tooltip-top rounded-2" :data-tooltip="langs.options.underline" @click="formatText('underline')" :class="menuOptions.details[menuOptions.childID].textDecoration == 'underline' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">format_underlined</i>
            </button>
            <button type="button" class="btn tooltip-top rounded-2" :data-tooltip="langs.options.line_through" @click="formatText('through')" :class="menuOptions.details[menuOptions.childID].textDecoration == 'line-through' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">format_strikethrough</i>
            </button>
            <button type="button" class="btn tooltip-top rounded-2" :data-tooltip="langs.options.uppercase" @click="formatText('uppercase')" :class="menuOptions.details[menuOptions.childID].textTransform == 'uppercase' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">match_case</i>
            </button>
        </div>

        <div class="pdapp-text-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 rounded-0 gap-2 flex-wrap" v-if="showSettingOption(true, [8, 9, 10], 'text')">
            <button v-if="showSettingOption(!menuOptions.details[menuOptions.childID].textLock, [8], 'text')" type="button" class="btn tooltip-top btn-light rounded-2 pdapp-btn-copy" :data-tooltip="langs.options.copy_text" @click="copyText()">
                <i class="material-icons material-symbols-outlined">content_copy</i>
            </button>
            <button v-if="showSettingOption(true, [9], 'text')" type="button" class="btn rounded-2" :data-tooltip="langs.options.lock" @click="lockText()" :class="menuOptions.details[menuOptions.childID].textLock ? 'btn-primary tooltip-bottom' : 'btn-light tooltip-top'">
                <i class="material-icons material-symbols-outlined">{{ menuOptions.details[menuOptions.childID].textLock ? 'lock' : 'lock_open' }}</i>
            </button>
            <button v-if="showSettingOption(!menuOptions.details[menuOptions.childID].textLock, [10], 'text')" type="button" class="btn tooltip-top rounded-2" :data-tooltip="langs.options.flip_text" @click="flipText()" :class="menuOptions.details[menuOptions.childID].textFlip ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">multiple_stop</i>
            </button>
        </div>
        
        <div class="pdapp-text-group position-relative border-bottom w-100 d-flex flex-column rounded-0" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].textLock, [11], 'text')">
            <div class="w-100 btn-group gap-2 flex-wrap mb-2">
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.align_top" @click="alignText('top')">
                    <i class="material-icons material-symbols-outlined">align_vertical_top</i>
                </button>
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.align_right" @click="alignText('right')">
                    <i class="material-icons material-symbols-outlined">align_horizontal_right</i>
                </button>
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.align_bot" @click="alignText('bot')">
                    <i class="material-icons material-symbols-outlined">align_vertical_bottom</i>
                </button>
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.align_left" @click="alignText('left')">
                    <i class="material-icons material-symbols-outlined">align_horizontal_left</i>
                </button>
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.align_center_all" @click="alignText('centerAll')">
                    <i class="material-icons material-symbols-outlined">align_flex_center</i>
                </button>
                
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.align_middle" @click="alignText('middle')">
                    <i class="material-icons material-symbols-outlined">align_vertical_center</i>
                </button>
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.align_center" @click="alignText('center')">
                    <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
                </button>
            </div>

            <div class="w-100 btn-group gap-2 flex-wrap mb-2">
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.move_top" @click="moveText('top')">
                    <i class="material-icons material-symbols-outlined">expand_less</i>
                </button>
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.move_bot" @click="moveText('bot')">
                    <i class="material-icons material-symbols-outlined">expand_more</i>
                </button>
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.move_left" @click="moveText('left')">
                    <i class="material-icons material-symbols-outlined">chevron_left</i>
                </button>
                <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.move_right" @click="moveText('right')">
                    <i class="material-icons material-symbols-outlined">chevron_right</i>
                </button>
            </div>
        </div>

        <button type="button" class="btn tooltip-top rounded-2 w-100 pdapp-text-type-settings" v-if="!menuOptions.details[menuOptions.childID].textLock" :data-tooltip="langs.options.control_options" @click="dropdownText('settings')" :class="menuOptions.details[menuOptions.childID].dropdown == 'settings' ? 'btn-primary' : 'btn-light'">
            <i class="material-icons material-symbols-outlined">settings</i>
            <span class="dropdown-arrow-bot"></span>
        </button>
        
        <button type="button" class="btn btn-danger tooltip-top rounded-2 w-100 mb-2" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].textLock, [14], 'text')" :data-tooltip="langs.options.delete_text" @click="deleteText()">
            <i class="material-icons material-symbols-outlined">delete</i>
        </button>
    </div>

    <div class="pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 border" :class="'pdapp-text-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown" v-if="menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''">
        <button type="button" class="btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown" @click="closeTextDropdown()">
            <i class="material-icons material-symbols-outlined">close</i>
        </button>

        <div class="pdapp-dropdown-box d-flex flex-column gap-1 p-2" v-if="menuOptions.details[menuOptions.childID].dropdown == 'font'">
            <div class="input-group input-group-merge">
                <span class="input-group-text bg-white ps-2 pe-1">
                    <i class="material-icons material-symbols-outlined">search</i>
                </span>
                <input type="text" class="form-control border-start-0 ps-1 pe-1" :class="fontLibrary.find != '' ? 'border-end-0' : ''" v-model="fontLibrary.find" @input="fontLibrary.page.paged = 1">
                <button type="button" class="input-group-text bg-white  text-danger ps-1 pe-2" v-if="fontLibrary.find != ''" @click="fontLibrary.find = ''">
                    <i class="material-icons material-symbols-outlined">close</i>
                </button>
            </div>
            <div class="pdapp-font-categories d-flex gap-2 mw-100 overflow-x-auto overflow-y-hidden pb-1">
                <button type="button" class="btn btn-sm p-1 pt-0 pb-0 pdapp-h25 text-nowrap text-capitalize" :class="fontLibrary.category == '' ? 'btn-primary' : 'btn-light'" @click="fontLibrary.category = '', fontLibrary.page.paged = 1">{{ langs.options.all }}</button>
                <button type="button" class="btn btn-sm p-1 pt-0 pb-0 pdapp-h25 text-nowrap text-capitalize" v-for="(category, idx) in listFonts.category" :class="fontLibrary.category == category ? 'btn-primary' : 'btn-light'" :key="idx" @click="fontLibrary.category = category, fontLibrary.page.paged = 1">{{ category.replace('-', ' ') }}</button>
            </div>
            <div class="pdapp-font-list btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden">
                <button type="button" class="pdapp-h30 btn d-flex p-1 rounded-2" v-for="(font, idx) in listFonts.fonts" @click="changeFont(font)" :class="font.title == menuOptions.details[menuOptions.childID].fontFamily ? 'btn-primary' : 'btn-light'">
                    <img :src="pluginUrl +'assets/images/fonts/'+ font.title.replaceAll(' ', '') +'.png'" :alt="font.title" class="mh-100 mw-100">
                </button>
                <button type="button" v-if="listFonts.total > listFonts.fonts.length" class="btn btn-light rounded-2 w-100" @click="fontLibrary.page.paged++">{{ langs.load_more }}</button>
            </div>
        </div>

        <div class="pdapp-dropdown-box d-flex flex-column gap-1 p-2" v-if="menuOptions.details[menuOptions.childID].dropdown == 'size'">
            <input type="number" min="6" step="1" class="form-control" v-model="menuOptions.details[menuOptions.childID].fontSize" @change="updateTextSize('')">
            <div class="pdapp-size-list btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden">
                <button type="button" v-for="(size, idx) in fontsize" :key="idx" class="btn rounded-2" :class="menuOptions.details[menuOptions.childID].fontSize == size ? 'btn-primary' : 'btn-light'" @click="updateTextSize(size)">{{size}}</button>
            </div>
        </div>

        <div class="pdapp-dropdown-box d-flex flex-column gap-1 p-2 overflow-y-auto overflow-x-hidden" v-if="menuOptions.details[menuOptions.childID].dropdown == 'color'">
            <h5 class="header-title fs-6 m-0 p-0">{{ langs.options.fill_style }}</h5>
            <div class="pdapp-text-fillstyle d-flex w-100 gap-2">
                <button type="button" @click="gradientText('normal')" class="btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top" :class="menuOptions.details[menuOptions.childID].colorType == 'normal' ? 'border-1 border-primary rounded-pill' : 'border'" :data-tooltip="langs.options.solid_color" :style="'background:'+ menuOptions.details[menuOptions.childID].color"></button>
                <button type="button" @click="gradientText('hor')" class="btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top" :class="menuOptions.details[menuOptions.childID].colorType == 'hor' ? 'border-1 border-primary rounded-pill' : 'border'" :data-tooltip="langs.options.hor_gradient" :style="'background:linear-gradient('+ menuOptions.details[menuOptions.childID].color+ ', transparent)'"></button>
                <button type="button" @click="gradientText('ver')" class="btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top" :class="menuOptions.details[menuOptions.childID].colorType == 'ver' ? 'border-1 border-primary rounded-pill' : 'border'" :data-tooltip="langs.options.ver_gradient" :style="'background:linear-gradient(to right, '+ menuOptions.details[menuOptions.childID].color+ ', transparent)'"></button>
                <button type="button" @click="gradientText('radial')" class="btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top" :class="menuOptions.details[menuOptions.childID].colorType == 'radial' ? 'border-1 border-primary rounded-pill' : 'border'" :data-tooltip="langs.options.rad_gradient" :style="'background:radial-gradient('+ menuOptions.details[menuOptions.childID].color+ ', transparent)'"></button>
            </div>
            <h5 class="header-title fs-6 m-0 pt-1">{{ langs.options.color_picker }}</h5>
            <input type="text" id="pdapp-text-colorpicker" class="form-control" v-model="menuOptions.details[menuOptions.childID].color" @input="updateTextStyle('color')">
        </div>

        <div class="pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100" v-if="menuOptions.details[menuOptions.childID].dropdown == 'arc'">
            <input type="range" step="1" min="0" max="1000" class="form-range" :style="'background-size:'+ (menuOptions.details[menuOptions.childID].radius*100/1000) +'% 100%;'" v-model="menuOptions.details[menuOptions.childID].radius" @input="updateTextStyle('radius')">
            <input type="number" min="0" max="1000" class="form-control form-control-sm pdapp-w70 pe-0" v-model="menuOptions.details[menuOptions.childID].radius" @change="updateTextStyle('radius')">
        </div>

        <div class="pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100" v-if="menuOptions.details[menuOptions.childID].dropdown == 'spacing'">
            <input type="range" step="1" min="-10" max="50" class="form-range" :style="'background-size:'+((parseInt(menuOptions.details[menuOptions.childID].letterSpacing)+10)*100/60)+'% 100%;'" v-model="menuOptions.details[menuOptions.childID].letterSpacing" @input="updateTextStyle('letterSpacing')">
            <input type="number" min="-10" max="50" class="form-control form-control-sm pdapp-w70 pe-0" v-model="menuOptions.details[menuOptions.childID].letterSpacing" @change="updateTextStyle('letterSpacing')">
        </div>

        <div class="pdapp-dropdown-box d-flex gap-2 p-2 flex-column w-100 pdapp-hide-palette" v-if="menuOptions.details[menuOptions.childID].dropdown == 'outline'">
            <input type="text" id="pdapp-outline-colorpicker" class="form-control" v-model="menuOptions.details[menuOptions.childID].stroke" @input="updateTextStyle('outline')">
            <div class="d-flex gap-2 align-items-center w-100">
                <input type="range" step="1" min="0" max="100" class="form-range" :style="'background-size:'+menuOptions.details[menuOptions.childID].strokeWidth+'% 100%;'" v-model="menuOptions.details[menuOptions.childID].strokeWidth" @input="updateTextStyle('outline')">
                <input type="number" min="0" max="100" class="form-control form-control-sm pdapp-w70 pe-0" v-model="menuOptions.details[menuOptions.childID].strokeWidth" @change="updateTextStyle('outline')">
            </div>
        </div>

        <div class="pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100" v-if="menuOptions.details[menuOptions.childID].dropdown == 'transparency'">
            <input type="range" step="1" min="0" max="100" class="form-range" :style="'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'" v-model="menuOptions.details[menuOptions.childID].transparency" @input="updateTextStyle('transparency')">
            <input type="number" min="0" max="100" class="form-control form-control-sm pdapp-w70 pe-0" v-model="menuOptions.details[menuOptions.childID].transparency" @change="updateTextStyle('transparency')">
        </div>

        <div class="pdapp-dropdown-box w-100" v-if="menuOptions.details[menuOptions.childID].dropdown == 'settings'">
            <h4 class="header-title fs-5 m-0 p-2 pb-0"><span class="sub-header">{{ langs.options.disabled_options }}</span></h4>
            <div class="w-100 d-flex gap-2 p-2 align-items-center w-100 flex-wrap">
                <template v-for="(option, oid) in listTextOptions">
                    <div class="form-check form-switch me-1" :key="oid" v-if="option != 'arc' || menuOptions.details[menuOptions.childID].radius != undefined">
                        <input type="checkbox" class="form-check-input" :id="'text-switch-option-'+ option" v-model="menuOptions.details[menuOptions.childID].settings[oid]" @change="changeSettingOption('text')">
                        <label class="form-check-label text-capitalize" :for="'text-switch-option-'+ option" :class="option == 'delete' ? 'text-danger' : ''">{{ option }}</label>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<template v-else>
    <div class="pdapp-menu-options-content d-flex flex-column align-items-start gap-1 px-1 overflow-y-auto overflow-x-hidden pdapp-menu-options-text w-100">
        <h5 class="header-title fs-6 m-0 p-0">{{ langs.options.style }}</h5>
        <div class="pdapp-text-group d-flex flex-column w-100 gap-2 mb-2">
            <button type="button" class="btn btn-light pdapp-h40" @click="addNewText(settings.general.text.heading)" v-if="settings.general.text.heading != undefined">
                <img :src="pluginUrl +'assets/images/texts/heading.png'" class="mh-100 mw-100" :alt="settings.general.text.heading.text">
            </button>
            <button type="button" class="btn btn-light pdapp-h30" @click="addNewText(settings.general.text.body)" v-if="settings.general.text.body != undefined">
                <img :src="pluginUrl +'assets/images/texts/body.png'" class="mh-100 mw-100" :alt="settings.general.text.body.text">
            </button>
        </div>

        <template v-if="listTextTemp.temps.length || loadTextTemp">
            <h5 class="header-title fs-6 m-0 p-0">{{ langs.options.text_templates }}</h5>
            <div class="pdapp-text-group d-flex flex-column w-100 gap-2 pb-1 pdapp-text-templates">
                <template v-if="loadTextTemp">
                    <div class="pdapp-h120 w-100 position-relative">
                        <div class="pdapp-loading-mask">
                            <div class="pdapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="input-group input-group-merge" v-if="listTextTemp.temps.length || listMenus.text.search != ''" :class="responsiveLayout.width < 1200 ? 'input-group-sm' : ''">
                        <span class="input-group-text bg-white" :class="responsiveLayout.width >= 1200 ? 'ps-2 pe-1' : 'ps-1 pe-0'">
                            <i class="material-icons material-symbols-outlined">search</i>
                        </span>
                        <input type="text" class="form-control border-start-0 ps-1 pe-1" :class="listMenus.text.search != '' ? 'border-end-0' : ''" v-model="listMenus.text.search" :placeholder="langs.options.search_templates" @input="listMenus.text.page.paged = 1">
                        <button type="button" class="input-group-text bg-white text-danger ps-1 pe-2" v-if="listMenus.text.search != ''" @click="listMenus.text.search = ''">
                            <i class="material-icons material-symbols-outlined">close</i>
                        </button>
                    </div>
                    
                    <button type="button" class="btn btn-light pdapp-h40" v-for="(text, tid) in listTextTemp.temps" :key="cid" @click="addTextTemplate(text)" :key="tid">
                        <img :src="pluginUrl +'assets/images/texts/'+ text.thumb" class="mh-100 mw-100" alt="">
                    </button>
                    <button v-if="listTextTemp.total > listTextTemp.temps.length" type="button" class="btn btn-light w-100" @click="listMenus.text.page.paged++">{{ langs.load_more }}</button>
                </template>
            </div>
        </template>
    </div>
</template>