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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="modal.type == 'text'">
    <div class="modal-body p-0 pb-2">
        <div class="d-flex flex-column">
            <div class="w-100 bg-white">
                <div class="pdapp-text-library-thumb">
                    <div id="pdapp-text-library-arc" class="pdapp-text-arc-box">
                        <div class="pdapp-arc" :style="'position:absolute;top:0px;left:0px;width:100%;height:100%;font-size:'+modal.data.fontSize+'px;font-family:'+modal.data.fontFamily+';letter-spacing: '+modal.data.letterSpacing+'px;font-weight: '+modal.data.fontWeight+';font-style : '+modal.data.fontStyle+';text-transform:'+modal.data.textTransform+';'"></div>
                    </div>
                    <svg v-if="modal.textType == 'normal'" id="text_thumb_preview" class="invisible" x="0" y="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
                        <text class="pdapp-target" xmlns="http://www.w3.org/2000/svg" x="50%" y="50%" :fill="modal.data.color" :font-size="modal.data.fontSize +'px'" :stroke="modal.data.stroke" :stroke-width="modal.data.strokeWidth" :font-weight="modal.data.fontWeight" :font-style="modal.data.fontStyle" :text-decoration="modal.data.textDecoration" :text-transform="modal.data.textTransform" :style="'text-transform:'+ modal.data.textTransform" stroke-linecap="round" stroke-linejoin="round" text-anchor="middle" :font-family="modal.data.fontFamily" :letter-spacing="modal.data.letterSpacing" dominant-baseline="middle">{{ modal.data.text }}</text>
                    </svg>
                    <svg v-else id="text_thumb_preview" class="invisible" x="0" y="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
                        <g class="pdapp-target">
                            <g v-for="(arc, aid) in modal.arcText" :key="aid" :style="'transform:'+arc.transform+';transform-origin:'+arc.transformO+';'">
                                <text :fill="modal.data.color" :font-size="modal.data.fontSize +'px'" :stroke="modal.data.stroke" :stroke-width="modal.data.strokeWidth" :font-weight="modal.data.fontWeight" :font-style="modal.data.fontStyle" :text-decoration="modal.data.textDecoration" :text-transform="modal.data.textTransform" :style="'text-transform:'+ modal.data.textTransform" stroke-linecap="round" stroke-linejoin="round" text-anchor="start" :font-family="modal.data.fontFamily">{{ arc.text }}</text>
                            </g>
                        </g>
                    </svg>
                    <img :src="modal.thumb" class="mw-100 mh-100 p-1">
                    <div class="pdapp-loading-mask pdapp-loading-page" v-if="modal.render">
                        <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>
            </div>

            <div class="pdapp-text-options-box w-100 px-2 d-flex flex-column gap-2 overflow-y-auto overflow-x-hidden z-3">
                <div class="w-100">
                    <label class="form-label m-0">{{ langs.setting.your_text }}</label>
                    <input type="text" class="form-control" v-model="modal.data.text" :placeholder="langs.setting.your_text_desc" @input="updateText('render')">
                </div>

                <div class="w-100">
                    <label class="form-label m-0">{{ langs.setting.text_style }}</label>
                    <div class="btn-group d-flex flex-wrap position-relative w-100 gap-1">
                        <button type="button" class="btn rounded-2 tooltip-bottom d-flex justify-content-center align-items-center" :class="modal.dropdown == 'font' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.options.change_font" @click="textOptionDropdown('font')">
                            <span>{{ modal.data.fontFamily }}</span>
                            <i class="material-icons material-symbols-outlined">arrow_drop_down</i>
                        </button>
                        <button type="button" class="btn rounded-2 tooltip-bottom d-flex justify-content-center align-items-center" :class="modal.dropdown == 'size' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.setting.font_size" @click="textOptionDropdown('size')">
                            <span>{{ modal.data.fontSize }}</span>
                            <i class="material-icons material-symbols-outlined">arrow_drop_down</i>
                        </button>
                        <button type="button" class="btn rounded-2 tooltip-bottom d-flex justify-content-center align-items-center" :class="modal.dropdown == 'color' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.setting.text_color" @click="textOptionDropdown('color')">
                            <i class="material-icons material-symbols-outlined">format_color_text</i>
                            <i class="material-icons material-symbols-outlined">arrow_drop_down</i>
                        </button>

                        <div class="card shadow-lg p-0 m-0 border w-100" v-if="modal.dropdown == 'font' || modal.dropdown == 'color' || modal.dropdown == 'size'">
                            <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="modal.dropdown = ''">
                                <i class="material-icons material-symbols-outlined">close</i>
                            </button>

                            <div class="pdapp-dropdown-box d-flex flex-column gap-1 p-0 py-2 w-100" v-if="modal.dropdown == 'font'">
                                <div class="input-group input-group-sm input-group-merge px-2">
                                    <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="modal.findFont != '' ? 'border-end-0' : ''" v-model="modal.findFont">
                                    <button type="button" class="input-group-text bg-white  text-danger ps-1 pe-2" v-if="modal.findFont != ''" @click="modal.findFont = ''">
                                        <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 px-2">
                                    <button type="button" class="btn btn-sm p-1 pt-0 pb-0 pdapp-h25 text-nowrap border text-capitalize" :class="modal.fontCate == '' ? 'btn-primary' : 'btn-light'" @click="modal.fontCate = ''">{{ langs.options.all }}</button>
                                    <button type="button" class="btn btn-sm p-1 pt-0 pb-0 pdapp-h25 text-nowrap border text-capitalize" v-for="(category, idx) in listFontTexts.category" :class="modal.fontCate == category ? 'btn-primary' : 'btn-light'" :key="idx" @click="modal.fontCate = category">{{ category.replace('-', ' ') }}</button>
                                </div>
                                <div class="pdapp-font-library btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden px-2">
                                    <button type="button" class="pdapp-h30 btn d-flex p-1 rounded-2 border justify-content-center" v-for="(font, idx) in listFontTexts.fonts" @click="changeFont(font.title)" :class="font.title == modal.data.fontFamily ? 'btn-primary' : 'btn-light'">
                                        <img :src="pluginUrl +'assets/images/fonts/'+ font.title.replaceAll(' ', '') +'.png'" :alt="font.title" class="mh-100 mw-100">
                                    </button>
                                </div>
                            </div>

                            <div class="pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100" v-if="modal.dropdown == 'size'">
                                <input type="range" step="1" min="6" max="500" class="form-range" :style="'background-size:'+((parseInt(modal.data.fontSize)-6)*100/494)+'% 100%;'" v-model="modal.data.fontSize" @input="updateText('render')">
                                <input type="number" min="6" max="500" step="1" class="form-control form-control-sm pdapp-w70 pe-0" v-model="modal.data.fontSize" @change="updateText('render')">
                            </div>

                            <div class="pdapp-dropdown-box d-flex flex-column gap-1 p-2 overflow-y-auto overflow-x-hidden" v-if="modal.dropdown == 'color'">
                                <h5 class="header-title fs-6 m-0 p-0">{{ langs.options.fill_style }}</h5>
                                <input type="color" class="form-control" v-model="modal.data.color" @input="updateText(true)">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="w-100">
                    <label class="form-label m-0">{{ langs.setting.text_transform }}</label>
                    <div class="btn-group gap-1 d-flex flex-wrap position-relative w-100">
                        <button v-if="modal.data.arc != undefined" type="button" class="btn rounded-2 tooltip-top d-flex justify-content-center align-items-center" :class="modal.dropdown == 'arc' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.options.arc_radius" @click="textOptionDropdown('arc')">
                            <i class="material-icons material-symbols-outlined">line_curve</i>
                            <i class="material-icons material-symbols-outlined">arrow_drop_down</i>
                        </button>
                        <button type="button" class="btn rounded-2 tooltip-top d-flex justify-content-center align-items-center" :class="modal.dropdown == 'spacing' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.options.spacing" @click="textOptionDropdown('spacing')">
                            <i class="material-icons material-symbols-outlined">format_letter_spacing</i>
                            <i class="material-icons material-symbols-outlined">arrow_drop_down</i>
                        </button>
                        <button type="button" class="btn rounded-2 tooltip-top d-flex justify-content-center align-items-center" :class="modal.dropdown == 'outline' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.options.outline" @click="textOptionDropdown('outline')">
                            <i class="material-icons material-symbols-outlined">type_specimen</i>
                            <i class="material-icons material-symbols-outlined">arrow_drop_down</i>
                        </button>
                        <button type="button" class="btn rounded-2 tooltip-top d-flex justify-content-center align-items-center" :class="modal.dropdown == 'format' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.setting.text_format" @click="textOptionDropdown('format')">
                            <i class="material-icons material-symbols-outlined">format_size</i>
                            <i class="material-icons material-symbols-outlined">arrow_drop_down</i>
                        </button>

                        <div class="card shadow-lg p-0 m-0 border w-100" v-if="modal.dropdown == 'arc' || modal.dropdown == 'spacing' || modal.dropdown == 'outline' || modal.dropdown == 'format'">
                            <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="modal.dropdown = ''">
                                <i class="material-icons material-symbols-outlined">close</i>
                            </button>
                            
                            <div class="pdapp-dropdown-box d-flex flex-column gap-1 p-2 w-100" v-if="modal.dropdown == 'arc'">
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input" id="pdapp-text-arc" v-model="modal.arcDir" @change="updateText()">
                                    <label class="form-check-label" for="pdapp-text-arc">{{ langs.setting.reverse_arc }}</label>
                                </div>
                                <div class="d-flex gap-1 align-items-center w-100">
                                    <input type="range" step="1" min="0" max="1000" class="form-range" :style="'background-size:'+ (modal.data.arc.radius/10) +'% 100%;'" v-model="modal.data.arc.radius" @input="updateText()">
                                    <input type="number" min="0" max="1000" class="form-control form-control-sm pdapp-w70 pe-0" v-model="modal.data.arc.radius" @change="updateText()">
                                </div>
                            </div>

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

                            <div class="pdapp-dropdown-box d-flex gap-1 p-2 flex-column w-100" v-if="modal.dropdown == 'outline'">
                                <input type="color" class="form-control" v-model="modal.data.stroke" @input="updateText(true)">
                                <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:'+modal.data.strokeWidth+'% 100%;'" v-model="modal.data.strokeWidth" @input="updateText()">
                                    <input type="number" min="0" max="100" class="form-control form-control-sm pdapp-w70 pe-0" v-model="modal.data.strokeWidth" @change="updateText()">
                                </div>
                            </div>

                            <div class="pdapp-dropdown-box btn-group position-relative border-bottom w-100 d-flex align-items-center p-2 gap-2 flex-wrap" v-if="modal.dropdown == 'format'">
                                <button type="button" class="btn tooltip-top rounded-2 border d-flex justify-content-center" :data-tooltip="langs.options.bold" @click="textFormat('700')" :class="modal.data.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 border d-flex justify-content-center" :data-tooltip="langs.options.italic" @click="textFormat('italic')" :class="modal.data.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 border d-flex justify-content-center" :data-tooltip="langs.options.underline" @click="textFormat('underline')" :class="modal.data.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 border d-flex justify-content-center" :data-tooltip="langs.options.line_through" @click="textFormat('line-through')" :class="modal.data.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 border d-flex justify-content-center" :data-tooltip="langs.options.uppercase" @click="textFormat('uppercase')" :class="modal.data.textTransform == 'uppercase' ? 'btn-primary' : 'btn-light'">
                                    <i class="material-icons material-symbols-outlined">match_case</i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer py-1 justify-content-between">
        <button type="button" class="btn btn-light border" @click="modal.show = false">{{ langs.close }}</button>
        <div class="d-flex gap-2 align-items-center">
            <button type="button" class="btn btn-info" @click="exportText()">{{ langs.temp.export }}</button>
            <button type="button" class="btn btn-primary" :disabled="loading == 'text' || modal.render" @click="saveNewText">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" v-if="loading == 'text'"></span>
                {{ langs.save }}
            </button>
        </div>
    </div>
</template>