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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="card" v-if="general.upload != undefined">
    <div class="card-body">
        <h4 class="header-title">{{ langs.setting.upload }}</h4>
        <div class="row mb-3">
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.min_upload }}</label>
                <div class="input-group input-group-sm input-group-merge">
                    <input type="number" min="0.01" step="0.01" v-model="general.upload.min" class="form-control">
                    <div class="input-group-text">MB</div>
                </div>
            </div>
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.max_upload }}</label>
                <div class="input-group input-group-sm input-group-merge">
                    <input type="number" min="0.01" step="0.01" v-model="general.upload.max" class="form-control">
                    <div class="input-group-text">MB</div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-4" v-for="(type, tid) in uploadType" :key="tid">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="general.upload.type" :value="type" :id="'upload-type-'+ tid">
                    <label class="form-check-label" :for="'upload-type-'+ tid">{{ langs.setting.allow_upload }} .{{type}}</label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" v-if="general.download != undefined">
    <div class="card-body">
        <h4 class="header-title">{{ langs.setting.download }}</h4>
        <div class="row">
            <div class="col-4" v-for="(type, tid) in downloadType" :key="tid">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="general.download.type" :value="type" :id="'download-type-'+ tid" :disabled="type == 'pdf' || type == 'png'">
                    <label class="form-check-label" :for="'download-type-'+ tid">{{ langs.setting.allow_download }} .{{type}}</label>
                    <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic" v-if="type == 'pdf' || type == 'png'"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-12">
                <label class="form-label">{{ langs.setting.allow_300_dpi_desc }}</label>
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="general.download.dpi" id="download-300-dpi" disabled>
                    <label class="form-check-label" for="download-300-dpi">{{ langs.setting.allow_300_dpi }}</label>
                    <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" v-if="general.text != undefined">
    <div class="card-body position-relative">
        <h4 class="header-title">{{ langs.setting.text }}</h4>
        <div class="row">
            <div class="col-6 col-xl-4 d-flex align-items-center">
                <div class="form-check form-switch my-2">
                    <input type="checkbox" class="form-check-input" :value="general.text.emoji" id="general-text-emoji" disabled>
                    <label class="form-check-label" for="general-text-emoji">{{ langs.setting.remove_emoji }}</label>
                </div>
            </div>
            <div class="col-6 col-xl-8">
                <div class="d-flex flex-wrap align-items-center gap-1">
                    <img :src="general.text.heading.thumb.indexOf('base64') != -1 ? general.text.heading.thumb : pluginUrl +'assets/images/texts/'+ general.text.heading.thumb" alt="Heading" class="img-thumbnail pdapp-h40">
                    <img :src="general.text.body.thumb.indexOf('base64') != -1 ? general.text.body.thumb : pluginUrl +'assets/images/texts/'+ general.text.body.thumb" alt="Body" class="img-thumbnail pdapp-h30">
                    <img :src="general.text.arc.thumb.indexOf('base64') != -1 ? general.text.arc.thumb : pluginUrl +'assets/images/texts/'+ general.text.arc.thumb" alt="Arc" class="img-thumbnail pdapp-h60">
                    <img :src="general.text.reversearc.thumb.indexOf('base64') != -1 ? general.text.reversearc.thumb : pluginUrl +'assets/images/texts/'+ general.text.reversearc.thumb" alt="Reverse Arc" class="img-thumbnail pdapp-h60">
                    <button type="button" class="btn btn-sm btn-info waves-light d-flex align-items-center gap-1" disabled>
                        <i class="material-icons material-symbols-outlined fs-4">edit</i>
                        <span class="d-none d-xl-block">{{ langs.setting.edit_text_default }}</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="position-absolute" id="pdapp-mask-upgrade">
            <h5 class="d-flex justify-content-center align-items-center position-absolute fw-bold w-100 h-100 m-0">
                <a href="<?php echo esc_url(PDAPP_HOME_URL. '/shop/woocommerce');?>" target="_blank" class="text-danger bg-white p-1 px-2 rounded">{{ langs.upgrade_basic }}</a>
            </h5>
        </div>
    </div>
</div>

<div class="card" v-if="general.photo != undefined">
    <div class="card-body position-relative">
        <h4 class="header-title">{{ langs.setting.photo_library }}</h4>
        <div class="row">
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.select_library }}</label>
                <select class="form-select form-select-sm" disabled>
                    <option v-for="(library, lid) in photoLibraries" :key="lid" :value="library">{{ library }}</option>
                </select>
            </div>
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.library_key }}</label>
                <input type="text" :value="general.photo.key" class="form-control form-control-sm" disabled>
            </div>
        </div>
        <div class="position-absolute" id="pdapp-mask-upgrade">
            <h5 class="d-flex justify-content-center align-items-center position-absolute fw-bold w-100 h-100 m-0">
                <a href="<?php echo esc_url(PDAPP_HOME_URL. '/shop/woocommerce');?>" target="_blank" class="text-danger bg-white p-1 px-2 rounded">{{ langs.upgrade_basic }}</a>
            </h5>
        </div>
    </div>
</div>

<div class="card" v-if="general.team != undefined">
    <div class="card-body position-relative">
        <h4 class="header-title">{{ langs.setting.team }}</h4>
        <div class="row">
            <div class="col-12 col-xl-6">
                <label class="form-label m-0">{{ langs.setting.name }}</label>
                <div class="btn-group d-flex flex-wrap position-relative w-100 gap-1 mb-1">
                    <button type="button" class="btn rounded-2 tooltip-top d-flex justify-content-center align-items-center" :class="team.dropdown == 'name-font' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.options.change_font" @click="team.dropdown = team.dropdown == 'name-font' ? '' : 'name-font'">
                        <span>{{ general.team.name.fontFamily }}</span>
                        <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="team.dropdown == 'name-size' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.setting.font_size" @click="team.dropdown = team.dropdown == 'name-size' ? '' : 'name-size'">
                        <span>{{ general.team.name.fontSize }}</span>
                        <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="team.dropdown == 'name-color' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.setting.text_color" @click="team.dropdown = team.dropdown == 'name-color' ? '' : 'name-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="team.dropdown == 'name-font' || team.dropdown == 'name-color' || team.dropdown == 'name-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="team.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="team.dropdown == 'name-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="team.findFont != '' ? 'border-end-0' : ''" v-model="team.findFont">
                                <button type="button" class="input-group-text bg-white  text-danger ps-1 pe-2" v-if="team.findFont != ''" @click="team.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="team.fontCate == '' ? 'btn-primary' : 'btn-light'" @click="team.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 listFontTeams.category" :class="team.fontCate == category ? 'btn-primary' : 'btn-light'" :key="idx" @click="team.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 listFontTeams.fonts" @click="general.team.name.fontFamily = font.title" :class="font.title == general.team.name.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="team.dropdown == 'name-size'">
                            <input type="range" step="1" min="20" max="500" class="form-range" :style="'background-size:'+((parseInt(general.team.name.fontSize)-20)*100/480)+'% 100%;'" v-model="general.team.name.fontSize">
                            <input type="number" min="20" max="500" step="1" class="form-control form-control-sm pdapp-w70 pe-0" v-model="general.team.name.fontSize">
                        </div>

                        <div class="pdapp-dropdown-box d-flex flex-column gap-1 p-2 overflow-y-auto overflow-x-hidden" v-if="team.dropdown == 'name-color'">
                            <h5 class="header-title fs-6 m-0 p-0">{{ langs.options.fill_style }}</h5>
                            <input type="color" class="form-control" v-model="general.team.name.color">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-6">
                <label class="form-label m-0">{{ langs.setting.number }}</label>
                <div class="btn-group d-flex flex-wrap position-relative w-100 gap-1">
                    <button type="button" class="btn rounded-2 tooltip-top d-flex justify-content-center align-items-center" :class="team.dropdown == 'number-font' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.options.change_font" @click="team.dropdown = team.dropdown == 'number-font' ? '' : 'number-font'">
                        <span>{{ general.team.number.fontFamily }}</span>
                        <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="team.dropdown == 'number-size' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.setting.font_size" @click="team.dropdown = team.dropdown == 'number-size' ? '' : 'number-size'">
                        <span>{{ general.team.number.fontSize }}</span>
                        <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="team.dropdown == 'number-color' ? 'btn-primary' : 'btn-light border'" :data-tooltip="langs.setting.text_color" @click="team.dropdown = team.dropdown == 'number-color' ? '' : 'number-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="team.dropdown == 'number-font' || team.dropdown == 'number-color' || team.dropdown == 'number-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="team.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="team.dropdown == 'number-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="team.findFont != '' ? 'border-end-0' : ''" v-model="team.findFont">
                                <button type="button" class="input-group-text bg-white  text-danger ps-1 pe-2" v-if="team.findFont != ''" @click="team.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="team.fontCate == '' ? 'btn-primary' : 'btn-light'" @click="team.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 listFontTeams.category" :class="team.fontCate == category ? 'btn-primary' : 'btn-light'" :key="idx" @click="team.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 listFontTeams.fonts" @click="general.team.number.fontFamily = font.title" :class="font.title == general.team.number.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="team.dropdown == 'number-size'">
                            <input type="range" step="1" min="20" max="500" class="form-range" :style="'background-size:'+((parseInt(general.team.number.fontSize)-20)*100/480)+'% 100%;'" v-model="general.team.number.fontSize">
                            <input type="number" min="20" max="500" step="1" class="form-control form-control-sm pdapp-w70 pe-0" v-model="general.team.number.fontSize">
                        </div>

                        <div class="pdapp-dropdown-box d-flex flex-column gap-1 p-2 overflow-y-auto overflow-x-hidden" v-if="team.dropdown == 'number-color'">
                            <h5 class="header-title fs-6 m-0 p-0">{{ langs.options.fill_style }}</h5>
                            <input type="color" class="form-control" v-model="general.team.number.color">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="position-absolute" id="pdapp-mask-upgrade">
            <h5 class="d-flex justify-content-center align-items-center position-absolute fw-bold w-100 h-100 m-0">
                <a href="<?php echo esc_url(PDAPP_HOME_URL. '/shop/woocommerce');?>" target="_blank" class="text-danger bg-white p-1 px-2 rounded">{{ langs.upgrade_pro }}</a>
            </h5>
        </div>
    </div>
</div>

<div class="card" v-if="general.qrcode != undefined">
    <div class="card-body position-relative">
        <h4 class="header-title">{{ langs.setting.qrcode }}</h4>
        <div class="row">
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.qrcode_content }}</label>
                <input type="text" :value="general.qrcode.text" class="form-control form-control-sm" disabled>
            </div>
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.color }}</label>
                <input type="color" :value="general.qrcode.color" class="form-control form-control-sm" disabled>
            </div>
        </div>
        <div class="position-absolute" id="pdapp-mask-upgrade">
            <h5 class="d-flex justify-content-center align-items-center position-absolute fw-bold w-100 h-100 m-0">
                <a href="<?php echo esc_url(PDAPP_HOME_URL. '/shop/woocommerce');?>" target="_blank" class="text-danger bg-white p-1 px-2 rounded">{{ langs.upgrade_basic }}</a>
            </h5>
        </div>
    </div>
</div>

<div class="card" v-if="general.barcode != undefined">
    <div class="card-body position-relative">
        <h4 class="header-title">{{ langs.setting.barcode }}</h4>
        <div class="row">
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.barcode_content }}</label>
                <input type="text" v-model="general.barcode.text" class="form-control form-control-sm">
            </div>
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.color }}</label>
                <input type="color" v-model="general.barcode.lineColor" class="form-control form-control-sm">
            </div>
        </div>
        <div class="position-absolute" id="pdapp-mask-upgrade">
            <h5 class="d-flex justify-content-center align-items-center position-absolute fw-bold w-100 h-100 m-0">
                <a href="<?php echo esc_url(PDAPP_HOME_URL. '/shop/woocommerce');?>" target="_blank" class="text-danger bg-white p-1 px-2 rounded">{{ langs.upgrade_pro }}</a>
            </h5>
        </div>
    </div>
</div>

<div class="card" v-if="general.waterMask != undefined">
    <div class="card-body position-relative">
        <h4 class="header-title">{{ langs.setting.water_mask }}</h4>
        <div class="row">
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.mask_content }}</label>
                <input type="text" :value="general.waterMask.text" class="form-control form-control-sm" disabled>
            </div>
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.text_color }}</label>
                <input type="color" :value="general.waterMask.color" class="form-control form-control-sm" disabled>
            </div>
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.mask_opacity }}</label>
                <input type="number" min="0" step="0.01" max="1" :value="general.waterMask.opacity" class="form-control form-control-sm" disabled>
            </div>
        </div>

        <div class="position-absolute" id="pdapp-mask-upgrade">
            <h5 class="d-flex justify-content-center align-items-center position-absolute fw-bold w-100 h-100 m-0">
                <a href="<?php echo esc_url(PDAPP_HOME_URL. '/shop/woocommerce');?>" target="_blank" class="text-danger bg-white p-1 px-2 rounded">{{ langs.upgrade_basic }}</a>
            </h5>
        </div>
    </div>
</div>

<div class="card" v-if="general.guide != undefined">
    <div class="card-body">
        <h4 class="header-title">{{ langs.setting.guide_design }}</h4>
        <div class="row">
            <div class="col-6 col-xl-4">
                <label class="form-label">{{ langs.setting.embed_guide_url }}</label>
                <input type="text" v-model="general.guide" class="form-control form-control-sm" placeholder="https://www.youtube.com/embed/videoID">
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary waves-effect waves-light float-end mb-3" :disabled="loading == 'general'" @click="updateSettings(general, 'general')">
    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" v-if="loading == 'general'"></span>
    <i v-else class="material-icons material-symbols-outlined me-1">save</i>
    {{ langs.update }}
</button>