<?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-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden">
        <div class="pdapp-photo-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['shape', 'transparent', 'filter', 'color'], 'photo')">
            <button type="button" class="btn tooltip-bottom rounded-2 pdapp-photo-type-shape" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['shape'], 'photo')" :data-tooltip="langs.options.shape_photo" @click.stop.prevent="dropdownPhoto('shape')" :class="menuOptions.details[menuOptions.childID].dropdown == 'shape' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">interests</i>
                <span class="dropdown-arrow-bot"></span>
            </button>

            <button type="button" class="btn tooltip-bottom rounded-2 pdapp-photo-type-filter" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['filter'], 'photo')" :data-tooltip="langs.options.filter_photo" @click.stop.prevent="dropdownPhoto('filter')" :class="menuOptions.details[menuOptions.childID].dropdown == 'filter' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">photo_filter</i>
                <span class="dropdown-arrow-bot"></span>
            </button>
            
            <button type="button" class="btn tooltip-bottom rounded-2 pdapp-photo-type-transparency" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'photo')" :data-tooltip="langs.options.transparency" @click.stop.prevent="dropdownPhoto('transparency')" :class="menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">gradient</i>
                <span class="dropdown-arrow-bot"></span>
            </button>
            
            <button type="button" class="btn tooltip-bottom rounded-2 pdapp-photo-type-color" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'photo')" :data-tooltip="langs.options.edit_color" @click.stop.prevent="dropdownPhoto('color')" :class="menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">palette</i>
                <span class="dropdown-arrow-bot"></span>
            </button>
        </div>
        
        <div class="pdapp-photo-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0" v-if="showSettingOption(true, ['crop', 'copy', 'lock', 'flip'], 'photo')">
            <button type="button" class="btn tooltip-top rounded-2" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['crop'], 'photo')" :data-tooltip="langs.options.crop_photo" @click.stop.prevent="dropdownPhoto('crop', '')" :class="menuOptions.details[menuOptions.childID].dropdown == 'crop' ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">crop</i>
            </button>
        
            <button type="button" class="btn btn-light tooltip-top rounded-2 pdapp-btn-copy" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'photo')" :data-tooltip="langs.options.copy_photo" @click="copyPhoto()">
                <i class="material-icons material-symbols-outlined">content_copy</i>
            </button>
                
            <button type="button" class="btn tooltip-top rounded-2" v-if="showSettingOption(true, ['lock'], 'photo')" :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>
            
            <button type="button" class="btn tooltip-top rounded-2" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['flip'], 'photo')" :data-tooltip="langs.options.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>

        <div class="pdapp-photo-group btn-group position-relative w-100 d-flex align-items-center gap-2 flex-wrap rounded-0" v-if="!menuOptions.details[menuOptions.childID].photoLock && (menuOptions.details[menuOptions.childID].clickUpload || menuOptions.details[menuOptions.childID].clickPhoto)">
            <button type="button" class="btn w-100 tooltip-top rounded-2 btn-light align-items-center" :data-tooltip="langs.options.replace_photo" @click.stop.prevent="showReplacePhoto">
                <i class="material-icons material-symbols-outlined">reset_image</i>
                <span class="pdapp-caption d-md-block d-none w-auto ms-1">{{ langs.options.replace_photo }}</span>
            </button>
            <input id="pdapp-upload-a-photo-replace" type="file" class="d-none" :disabled="uploading" @change="changePhotoReplace" accept=".jpg,.jpeg,.png">
        </div>
        
        <div class="pdapp-photo-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'photo')">
            <div class="w-100 btn-group gap-2 flex-wrap">
                <button type="button" class="btn tooltip-top rounded-2 btn-light" :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 rounded-2 btn-light" :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 rounded-2 btn-light" :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 rounded-2 btn-light" :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 rounded-2 btn-light" :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 rounded-2 btn-light" :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 rounded-2 btn-light" :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>

            <div class="w-100 btn-group gap-2 flex-wrap">
                <button type="button" class="btn tooltip-top rounded-2 btn-light" :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 rounded-2 btn-light" :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 rounded-2 btn-light" :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 rounded-2 btn-light" :data-tooltip="langs.options.move_right" @click="movePhoto('right')">
                    <i class="material-icons material-symbols-outlined">chevron_right</i>
                </button>
            </div>
        </div>
        
        <button type="button" class="btn btn-danger tooltip-top rounded-2 w-100 mb-2" :data-tooltip="langs.options.delete_photo" @click="deletePhoto()" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'photo')">
            <i class="material-icons material-symbols-outlined">delete</i>
        </button>
    </div>

    <div class="pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 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="closePhotoDropdown()">
            <i class="material-icons material-symbols-outlined">close</i>
        </button>

        <div class="pdapp-dropdown-box pdapp-shape-list d-flex align-items-center justify-content-center flex-wrap gap-2 p-2 w-100 overflow-y-auto overflow-x-hidden" v-if="menuOptions.details[menuOptions.childID].dropdown == 'shape'">
            <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>

        <div class="pdapp-dropdown-box pdapp-filter-list d-flex flex-wrap overflow-y-auto overflow-x-hidden" v-if="menuOptions.details[menuOptions.childID].dropdown == 'filter'">
            <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" :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>

        <div class="pdapp-dropdown-box d-flex gap-1 p-2 w-100 align-items-center" v-if="menuOptions.details[menuOptions.childID].dropdown == 'transparency'">
            <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>

        <div class="pdapp-dropdown-box d-flex flex-column gap-1 p-2 w-100 pdapp-hide-palette" v-if="menuOptions.details[menuOptions.childID].dropdown == 'color' && menuOptions.details[menuOptions.childID].colors.length">
            <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>
    </div>
</template>

<template v-else>
    <div class="pdapp-menu-options-content d-flex flex-column align-items-start gap-1 px-1 overflow-y-auto overflow-x-hidden">
        <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 w-100">
                <div class="pdapp-photo-list d-flex flex-wrap gap-1 justify-content-between w-100 m-0 p-0 pe-1" v-if="0 < menuOptions.values.length">
                    <div class="pdapp-photo-item d-flex align-items-center justify-content-between rounded-2 position-relative gap-1" v-for="(photo, pid) in menuOptions.values" :key="pid" @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 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>
    </div>
</template>