<?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, ['shape'], 'photo')" class="list-group-item pdapp-photo-type-shape 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="dropdownPhoto('shape')" :class="menuOptions.details[menuOptions.childID].dropdown == 'shape' ? 'active' : ''">
            <i class="material-icons material-symbols-outlined">interests</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.shape_photo }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

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

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

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

        <button type="button" v-if="!menuOptions.details[menuOptions.childID].photoLock && (menuOptions.details[menuOptions.childID].clickUpload || menuOptions.details[menuOptions.childID].clickPhoto)" class="list-group-item pdapp-photo-type-replace 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="showReplacePhoto">
            <i class="material-icons material-symbols-outlined">reset_image</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.replace_photo }}</span>
            <input id="pdapp-upload-a-photo-replace" type="file" class="d-none" :disabled="uploading" @change="changePhotoReplace" accept=".jpg,.jpeg,.png">
        </button>

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

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

        <button type="button" v-if="showSettingOption(true, ['copy', 'lock', 'flip'], 'photo')" class="list-group-item pdapp-photo-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="dropdownPhoto('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" 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" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'photo')" @click="deletePhoto()">
            <i class="material-icons material-symbols-outlined">delete</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.delete }}</span>
        </button>
    </div>

    <div class="pdapp-menu-options position-absolute card m-0 shadow-lg border" :class="'pdapp-photo-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="dropdownPhoto('')">
            <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 == 'shape'">
                <div class="p-1 d-flex gap-2 w-100 flex-wrap justify-content-center">
                    <div class="pdapp-shape-item d-flex align-items-center justify-content-center position-relative" :class="menuOptions.details[menuOptions.childID].photoShape == '' ? 'active' : ''" @click="addShape('')">
                        <div class="pdapp-shape" :title="langs.options.normal">
                            <img :src="pluginUrl +'assets/images/shapes/normal.png'" :alt="langs.options.normal" class="pdapp-img bg-light w-100">
                        </div>
                        <span class="pdapp-shape-name">{{ langs.options.normal }}</span>
                    </div>
                    <div class="pdapp-shape-item d-flex align-items-center justify-content-center position-relative" v-for="(shape, sid) in shapePhoto" :key="sid" @click="addShape(shape)" :class="menuOptions.details[menuOptions.childID].photoShape == shape.slug ? 'btn-primary' : 'btn-light'">
                        <div class="pdapp-shape" :title="shape.title">
                            <img :src="pluginUrl +'assets/images/shapes/'+ shape.thumb" :alt="shape.title" class="pdapp-img bg-light">
                        </div>
                        <span class="pdapp-shape-name">{{ shape.title }}</span>
                    </div>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'filter'">
                <div class="pdapp-filter-list d-flex flex-column w-100 p-0 m-0 overflow-x-hidden overflow-y-auto">
                    <div class="pdapp-filter-item d-flex flex-column align-items-center justify-content-center position-relative" :class="menuOptions.details[menuOptions.childID].photoFilter == '' ? 'active' : ''" @click="addFilter('')">
                        <div class="pdapp-filter position-relative d-flex w-100" :title="langs.options.normal">
                            <img :src="menuOptions.details[menuOptions.childID].photo" :alt="langs.options.normal" class="pdapp-img">
                        </div>
                        <span class="pdapp-filter-name">{{ langs.options.normal }}</span>
                    </div>
                    <div class="pdapp-filter-item d-flex flex-column align-items-center justify-content-center position-relative" v-for="(filter, fid) in filterPhoto" :key="fid" @click="addFilter(filter)" :class="menuOptions.details[menuOptions.childID].photoFilter == filter.slug ? 'btn-primary' : 'btn-light'">
                        <div class="pdapp-filter position-relative d-flex w-100" :class="'pdapp-filter-'+ filter.slug" :title="filter.title">
                            <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0px; height: 0px;"><filter :id="'filter-svg-'+ fid" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" :values="filter.value"></feColorMatrix></filter></svg>
                            <img :src="menuOptions.details[menuOptions.childID].photo" :alt="filter.title" class="pdapp-img bg-light" :style="'filter: url(#filter-svg-'+ fid +')'">
                        </div>
                        <span class="pdapp-filter-name">{{ filter.title }}</span>
                    </div>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'transparency'">
                <div class="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 == 'color' && menuOptions.details[menuOptions.childID].colors.length">
                <div class="p-1 d-flex gap-2 align-items-center w-100 pdapp-hide-palette flex-wrap">
                    <div class="pdapp-color-item-box w-100" v-for="(color, cid) in menuOptions.details[menuOptions.childID].colors" :key="cid">
                        <input type="text" class="pdapp-edit-color" class="form-control" :data-color="color" v-model="color" style="display: none;">
                    </div>
                </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'], 'photo')" @click="copyPhoto()">
                        <i class="material-icons material-symbols-outlined">content_copy</i>
                    </button>
                        
                    <button type="button" class="btn btn-light rounded-2" v-if="showSettingOption(true, ['lock'], 'photo')" @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 btn-light rounded-2" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['flip'], 'photo')" @click="flipPhoto()" :class="menuOptions.details[menuOptions.childID].photoFlip ? 'btn-primary' : 'btn-light'">
                        <i class="material-icons material-symbols-outlined">multiple_stop</i>
                    </button>
                </div>
            </template>
        </div>
    </div>
</template>

<template v-else>
    <template v-if="settings.layout.photo.allowUpload">
        <div class="pdapp-upload-box w-100">
            <label for="pdapp-upload-a-photo" class="btn btn-primary waves-effect m-0 w-100" :class="uploading ? 'disabled' : ''">
                <span v-if="uploading">
                    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                    {{ langs.options.uploading }}
                </span>
                <span v-else>
                    <i class="material-icons material-symbols-outlined me-1">cloud_upload</i>
                    {{ langs.options.upload_a_photo }}
                </span>
            </label>
            <input id="pdapp-upload-a-photo" type="file" class="d-none" :disabled="uploading" @change="changePhoto" :accept="settings.general.upload != 'undefined' ? '.'+ settings.general.upload.type.join(',.') : '.jpg'">
        </div>
    </template>
    <template v-if="settings.layout.photo.allowLibrary && settings.general.photo.key != ''">
        <div class="pdapp-text-space d-flex w-100 justify-content-center align-items-center position-relative pdapp-h25 p-0 m-0">
            <span class="sub-header m-0 text-uppercase">{{ langs.options.or }}</span>
        </div>

        <div class="input-group input-group-merge mb-1">
            <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="listMenus.photo.search != '' ? 'border-end-0' : ''" v-model="listMenus.photo.search" :placeholder="langs.options.search_free_photos_on +' '+settings.general.photo.library" @change="findPhotos()">
            <button type="button" class="input-group-text bg-white text-danger ps-1 pe-2" v-if="listMenus.photo.search != ''" @click="listMenus.photo.search = '', findPhotos()">
                <i class="material-icons material-symbols-outlined">close</i>
            </button>
        </div>
        
        <div class="pdapp-photo-libraries position-relative overflow-x-hidden ">
            <div class="pdapp-photo-list row" v-if="0 < menuOptions.values.length">
                <div class="col-12 col-sm-6 col-md-4 mt-1" v-for="(photo, pid) in menuOptions.values" :key="pid">
                    <div class="pdapp-photo-item d-flex align-items-center justify-content-between rounded-2 position-relative gap-1" @click="addPhoto(photo)">
                        <div class="pdapp-thumbnail bg-light rounded-2 d-flex position-relative w-100" :title="photo.name">
                            <img :src="photo.thumb" :alt="photo.name" class="pdapp-img-thumbnail mw-100 w-100 rounded-2 pe-0 me-0">
                        </div>
                        <a class="pdapp-author position-absolute overflow-hidden" :href="photo.user.url" target="_blank">{{ photo.user.name }}</a>
                    </div>
                </div>
                <div class="col-12 my-1"><button type="button" class="btn btn-sm btn-light m-auto" @click="getPhotos()">{{ langs.load_more }}</button></div>
            </div>
            <div class="w-100 text-danger text-center" v-else>{{ langs.options.photo_not_found }}</div>
            <div class="pdapp-loading-photos w-100 position-absolute" v-if="listMenus.photo.loading == 1">
                <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>
        </div>
    </template>
</template>