<?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-menus list-group border-none gap-1 overflow-y-auto overflow-x-hidden w-100 h-100 pe-1" @click.stop.prevent="">
        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['edit', 'type', 'color'], 'qrcode')" class="list-group-item pdapp-qrcode-type-edit list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownQrcode('edit')" :class="menuOptions.details[menuOptions.childID].dropdown == 'edit' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">edit_note</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.edit_qrcode }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['level'], 'qrcode')" class="list-group-item pdapp-qrcode-type-ecl list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownQrcode('ecl')" :class="menuOptions.details[menuOptions.childID].dropdown == 'ecl' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">construction</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.ecl }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['background'], 'qrcode')" class="list-group-item pdapp-qrcode-type-background list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownQrcode('background')" :class="menuOptions.details[menuOptions.childID].dropdown == 'background' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">format_color_fill</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.background }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'qrcode')" class="list-group-item pdapp-qrcode-type-transparency list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownQrcode('transparency')" :class="menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">gradient</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.transparency }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'qrcode')" class="list-group-item pdapp-qrcode-type-align list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownQrcode('align')" :class="menuOptions.details[menuOptions.childID].dropdown == 'align' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">format_align_justify</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.align_qrcode }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'qrcode')" class="list-group-item pdapp-qrcode-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownQrcode('move')" :class="menuOptions.details[menuOptions.childID].dropdown == 'move' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">open_with</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.move_qrcode }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(true, ['copy', 'lock'], 'qrcode')" class="list-group-item pdapp-qrcode-type-more list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownQrcode('more')" :class="menuOptions.details[menuOptions.childID].dropdown == 'more' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">more_horiz</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.more }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'qrcode')" class="list-group-item list-group-item-action btn d-flex align-items-center rounded-2 p-2 d-flex flex-column bg-danger text-white border-0" @click="deleteQrcode()">
            <i class="material-icons material-symbols-outlined">delete</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.delete_qrcode }}</span>
        </button>
    </div>

    <div class="pdapp-menu-options position-absolute card m-0 shadow-lg border" :class="'pdapp-qrcode-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown" v-if="menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''" @click.stop.prevent="">
        <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="dropdownQrcode('')">
            <i class="material-icons material-symbols-outlined close-menu-hor">keyboard_backspace</i>
            <i class="material-icons material-symbols-outlined close-menu-ver">south</i>
        </button>
        
        <div class="pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden">
            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'edit'">
                <div class="pdapp-qrcode-edit p-1 d-flex gap-2 w-100 flex-wrap justify-content-center">
                    <select v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['type'], 'qrcode')" class="form-select" v-model="menuOptions.details[menuOptions.childID].qrtype" @change="changeQrcodeType">
                        <option v-for="(value, key) in qrcodeTypes" :value="value.key" :key="key">{{ value.text }}</option>
                    </select>
                    
                    <input id="form-control-edit-qrcode" type="text" class="form-control" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'text', ['edit'], 'qrcode')" v-model="menuOptions.details[menuOptions.childID].text" @input="updateQrcode()" :placeholder="settings.general.qrcode.text">
                    
                    <input id="form-control-edit-qrcode" type="text" class="form-control" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'url', ['edit'], 'qrcode')" v-model="menuOptions.details[menuOptions.childID].text" @input="updateQrcode()" placeholder="https://www.yourdomain.com">
                    
                    <input id="form-control-edit-qrcode" type="text" class="form-control" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'phone', ['edit'], 'qrcode')" v-model="menuOptions.details[menuOptions.childID].text" @input="updateQrcode()" placeholder="+1234567890">
                    
                    <div class="d-flex flex-column gap-2 w-100" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'sms', ['edit'], 'qrcode')">
                        <input id="form-control-edit-qrcode" type="text" class="form-control" v-model="menuOptions.details[menuOptions.childID].text" @input="updateQrcode()" placeholder="+1234567890">
                        <textarea id="form-control-message-qrcode" class="form-control" v-model="menuOptions.details[menuOptions.childID].message" @input="updateQrcode()" :placeholder="langs.options.qrcode_message"></textarea>
                    </div>

                    <div class="d-flex flex-column gap-2 w-100" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'mail', ['edit'], 'qrcode')">
                        <input id="form-control-edit-qrcode" type="email" class="form-control" v-model="menuOptions.details[menuOptions.childID].text" @input="updateQrcode()" placeholder="example@example.com">
                        <input id="form-control-object-qrcode" type="text" class="form-control" v-model="menuOptions.details[menuOptions.childID].subject" @input="updateQrcode()" :placeholder="langs.options.qrcode_subject">
                        <textarea id="form-control-message-qrcode" class="form-control" v-model="menuOptions.details[menuOptions.childID].message" @input="updateQrcode()" :placeholder="langs.options.qrcode_message"></textarea>
                    </div>

                    <div class="pdapp-qrcode-colorbox pdapp-hide-palette w-100 mb-1" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'qrcode')">
                        <input type="text" id="pdapp-qrcode-colorpicker" class="form-control" v-model="menuOptions.details[menuOptions.childID].color" @change="updateQrcode()">
                    </div>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'ecl'">
                <div class="pdapp-qrcode-ecl btn-group gap-1 d-flex flex-wrap w-100 p-1 m-0 overflow-x-hidden overflow-y-auto">
                    <button type="button" class="btn rounded-2" :class="menuOptions.details[menuOptions.childID].ecl == 'L' ? 'btn-primary' : 'btn-light'" @click="changeUpdateQrcode('ecl', 'L')">L</button>
                    <button type="button" class="btn rounded-2" :class="menuOptions.details[menuOptions.childID].ecl == 'M' ? 'btn-primary' : 'btn-light'" @click="changeUpdateQrcode('ecl', 'M')">M</button>
                    <button type="button" class="btn rounded-2" :class="menuOptions.details[menuOptions.childID].ecl == 'H' ? 'btn-primary' : 'btn-light'" @click="changeUpdateQrcode('ecl', 'H')">H</button>
                    <button type="button" class="btn rounded-2" :class="menuOptions.details[menuOptions.childID].ecl == 'Q' ? 'btn-primary' : 'btn-light'" @click="changeUpdateQrcode('ecl', 'Q')">Q</button>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'background'">
                <div class="pdapp-qrcode-background p-1 d-flex gap-2 flex-column w-100">
                    <div class="form-check form-switch gap-1 d-flex align-items-center">
                        <input type="checkbox" class="form-check-input" id="pdapp-qrcode-background" :checked="menuOptions.details[menuOptions.childID].background == 'transparent' ? true : false" @change="changeUpdateQrcode('background', '')">
                        <label class="form-check-label ms-1" for="pdapp-qrcode-background">{{ langs.options.transparent_background }}</label>
                    </div>
                    <div class="pdapp-qrcode-colorbox pdapp-hide-palette w-100 mb-n1" v-if="menuOptions.details[menuOptions.childID].background != 'transparent'">
                        <input type="text" id="pdapp-qrcode-bg-colorpicker" class="form-control" v-model="menuOptions.details[menuOptions.childID].background" @change="changeUpdateQrcode('background', '')">
                    </div>
                    <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].padding+'% 100%;'" v-model="menuOptions.details[menuOptions.childID].padding" @input="updateQrcode()">
                        <input type="number" min="0" max="100" class="form-control form-control-sm pdapp-w70 pe-0" v-model="menuOptions.details[menuOptions.childID].padding" @input="updateQrcode()">
                    </div>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'transparency'">
                <div class="pdapp-qrcode-transparency p-1 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].transparency+'% 100%;'" v-model="menuOptions.details[menuOptions.childID].transparency" @input="updatePhotoStyle('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="updatePhotoStyle('transparency')">
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'align'">
                <div class="p-1 btn-group flex-wrap gap-2 w-100">
                    <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.align_top" @click="alignPhoto('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="alignPhoto('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="alignPhoto('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="alignPhoto('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="alignPhoto('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="alignPhoto('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="alignPhoto('center')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
                    </button>
                    <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.fit_inside" @click="fitPhotoInside()">
                        <i class="material-icons material-symbols-outlined">fit_page</i>
                    </button>
                    
                    <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.fit_outside" @click="fitPhotoOutside()">
                        <i class="material-icons material-symbols-outlined">fit_screen</i>
                    </button>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'move'">
                <div class="p-1 btn-group flex-wrap gap-2 w-100">
                    <button type="button" class="btn tooltip-top btn-light rounded-2" :data-tooltip="langs.options.move_top" @click="movePhoto('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="movePhoto('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="movePhoto('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="movePhoto('right')">
                        <i class="material-icons material-symbols-outlined">chevron_right</i>
                    </button>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'more'">
                <div class="p-1 btn-group flex-wrap gap-2 w-100">
                    <button type="button" class="btn tooltip-top btn-light rounded-2 pdapp-btn-copy" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'qrcode')" :data-tooltip="langs.options.copy_qrcode" @click="copyQrcode()">
                        <i class="material-icons material-symbols-outlined">content_copy</i>
                    </button>
                        
                    <button type="button" class="btn tooltip-top btn-light rounded-2" v-if="showSettingOption(true, ['lock'], 'qrcode')" :data-tooltip="langs.options.lock" @click="lockPhoto()" :class="menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'">
                        <i class="material-icons material-symbols-outlined" v-if="menuOptions.details[menuOptions.childID].photoLock">lock</i>
                        <i class="material-icons material-symbols-outlined" v-else>lock_open</i>
                    </button>
                </div>
            </template>
        </div>
    </div>
</template>

<template v-else>
    <button type="button" class="btn btn-primary waves-effect m-0 w-100" @click="addQrcode()">
        <i class="material-icons material-symbols-outlined">add</i>
        {{ langs.options.add_qrcode }}
    </button>
</template>
