<?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'], 'barcode')" class="list-group-item pdapp-barcode-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="dropdownBarcode('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_barcode }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['width'], 'barcode')" class="list-group-item pdapp-barcode-type-width 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="dropdownBarcode('width')" :class="menuOptions.details[menuOptions.childID].dropdown == 'width' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">format_letter_spacing</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.barcode_width }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['height'], 'barcode')" class="list-group-item pdapp-barcode-type-height 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="dropdownBarcode('height')" :class="menuOptions.details[menuOptions.childID].dropdown == 'height' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">height</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.barcode_height }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['background'], 'barcode')" class="list-group-item pdapp-barcode-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="dropdownBarcode('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'], 'barcode')" class="list-group-item pdapp-barcode-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="dropdownBarcode('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'], 'barcode')" class="list-group-item pdapp-barcode-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="dropdownBarcode('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_barcode }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'barcode')" class="list-group-item pdapp-barcode-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="dropdownBarcode('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_barcode }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <button type="button" v-if="showSettingOption(true, ['copy', 'lock'], 'barcode')" class="list-group-item pdapp-barcode-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="dropdownBarcode('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'], 'barcode')" 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_barcode }}</span>
        </button>
    </div>

    <div class="pdapp-menu-options position-absolute card m-0 shadow-lg border" :class="'pdapp-barcode-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="dropdownBarcode('')">
            <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-barcode-edit p-1 d-flex gap-2 w-100 flex-wrap justify-content-center">
                    <input type="text" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['edit'], 'barcode')" class="form-control" v-model="menuOptions.details[menuOptions.childID].text" @input="checkBarcode()" :placeholder="langs.options.barcode_text">
            
                    <select class="form-select" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['type'], 'barcode')" v-model="menuOptions.details[menuOptions.childID].format" @change="checkBarcode()">
                        <optgroup v-for="(barcode, key) in barcodeTypes" :key="key" :label="barcode.type.toUpperCase()">
                            <option v-for="(code, nkey) in barcode.values" :key="nkey" :value="code">{{ code.toUpperCase() }}</option>
                        </optgroup>
                    </select>
                    
                    <input type="text" class="form-control" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].format == 'EAN13-lastchar', ['edit'], 'barcode')" v-model="menuOptions.details[menuOptions.childID].lastChar" @change="checkBarcode()" :placeholder="langs.options.barcode_lastChar">
        
                    <div class="pdapp-qrcode-colorbox pdapp-hide-palette w-100 mb-1" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'barcode')">
                        <input type="text" id="pdapp-barcode-colorpicker" class="form-control" v-model="menuOptions.details[menuOptions.childID].lineColor" @change="updateBarcode()">
                    </div>
                </div>
            </template>

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

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

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'background'">
                <div id="pdapp-barcode-bg-box" class="pdapp-barcode-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-barcode-background" :checked="menuOptions.details[menuOptions.childID].background == 'transparent' ? true : false" @change="changeUpdateBarcode('background', '')">
                        <label class="form-check-label ms-1" for="pdapp-barcode-background">{{ langs.options.transparent_background }}</label>
                    </div>
                    <div class="pdapp-barcode-colorbox pdapp-hide-palette w-100 mb-n1" v-if="menuOptions.details[menuOptions.childID].background != 'transparent'">
                        <input type="text" id="pdapp-barcode-bg-colorpicker" class="form-control" v-model="menuOptions.details[menuOptions.childID].background" @change="changeUpdateBarcode('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].margin+'% 100%;'" v-model="menuOptions.details[menuOptions.childID].margin" @change="updateBarcode()">
                        <input type="number" min="0" max="100" class="form-control form-control-sm pdapp-w70 pe-0 me-2" v-model="menuOptions.details[menuOptions.childID].margin" @input="updateBarcode()">
                    </div>
                </div>
            </template>
            
            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'transparency'">
                <div class="pdapp-barcode-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 me-2" 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 btn-light rounded-2" @click="alignPhoto('top')">
                        <i class="material-icons material-symbols-outlined">align_vertical_top</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('right')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_right</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('bot')">
                        <i class="material-icons material-symbols-outlined">align_vertical_bottom</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('left')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_left</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('centerAll')">
                        <i class="material-icons material-symbols-outlined">align_flex_center</i>
                    </button>
                    
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('middle')">
                        <i class="material-icons material-symbols-outlined">align_vertical_center</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('center')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
                    </button>
                    <button type="button" class="btn rounded-2 btn-light" @click="fitPhotoInside()">
                        <i class="material-icons material-symbols-outlined">fit_page</i>
                    </button>
                    
                    <button type="button" class="btn rounded-2 btn-light" @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 btn-light rounded-2" @click="movePhoto('top')">
                        <i class="material-icons material-symbols-outlined">expand_less</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="movePhoto('bot')">
                        <i class="material-icons material-symbols-outlined">expand_more</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="movePhoto('left')">
                        <i class="material-icons material-symbols-outlined">chevron_left</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @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 btn-light rounded-2 pdapp-btn-copy" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'barcode')" v-if="settings.layout.barcode.copy" @click="copyBarcode()">
                        <i class="material-icons material-symbols-outlined">content_copy</i>
                    </button>
                        
                    <button type="button" class="btn rounded-2" v-if="showSettingOption(true, ['lock'], 'barcode')" v-if="settings.layout.barcode.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>

                    <button type="button" class="btn rounded-2" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['text'], 'barcode')" v-if="settings.layout.barcode.text" @click="changeUpdateBarcode('displayValue', !menuOptions.details[menuOptions.childID].displayValue)" :class="menuOptions.details[menuOptions.childID].displayValue ? 'btn-light' : 'btn-primary'">
                        <i class="material-icons material-symbols-outlined">font_download_off</i>
                    </button>
                </div>
            </template>
        </div>
    </div>
</template>

<template v-else>
    <button type="button" class="btn btn-primary waves-effect m-0 w-100" @click="addBarcode()">
        <i class="material-icons material-symbols-outlined">add</i>
        {{ langs.options.add_barcode }}
    </button>
</template>
<div class="pdapp-barcode-svg d-none">
    <svg id="pdapp-barcode-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
</div>