<?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 w-100">
        <div class="pdapp-artwork-group btn-group position-relative border-bottom w-100 d-flex align-items-center gap-2 flex-wrap pb-2 rounded-0" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, [0, 1], 'art')">
            <button type="button" class="btn tooltip-bottom rounded-2 pdapp-artwork-type-transparency" v-if="showSettingOption(true, [0], 'art')" :data-tooltip="langs.options.transparency" @click="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-artwork-type-color" v-if="showSettingOption(menuOptions.details[menuOptions.childID].editColor && menuOptions.details[menuOptions.childID].colors.length, [1], 'art')":data-tooltip="langs.options.edit_color" @click="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-artwork-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, [2, 3, 4], 'art')">
            <button v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, [2], 'art')" type="button" class="btn tooltip-top rounded-2 btn-light pdapp-btn-copy" :data-tooltip="langs.options.copy_artwork" @click="copyArtwork()">
                <i class="material-icons material-symbols-outlined">content_copy</i>
            </button>
                
            <button v-if="showSettingOption(true, [3], 'art')" type="button" class="btn tooltip-top rounded-2" :data-tooltip="langs.options.lock" @click="lockPhoto()" :class="menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'">
                <i class="material-icons material-symbols-outlined">{{ menuOptions.details[menuOptions.childID].photoLock ? 'lock' : 'lock_open' }}</i>
            </button>
                
            <button v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].editColor == false, [4], 'art')" type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.flip_artwork" @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-artwork-group position-relative border-bottom w-100 d-flex flex-column pb-2 gap-2" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, [5], 'art')">
            <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 tooltip-top rounded-2 w-100 pdapp-artwork-type-settings" v-if="!menuOptions.details[menuOptions.childID].photoLock" :data-tooltip="langs.options.control_options" @click="dropdownPhoto('settings')" :class="menuOptions.details[menuOptions.childID].dropdown == 'settings' ? 'btn-primary' : 'btn-light'">
            <i class="material-icons material-symbols-outlined">settings</i>
            <span class="dropdown-arrow-bot"></span>
        </button>
        
        <button type="button" class="btn btn-danger tooltip-top rounded-2 w-100 mb-2" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, [8], 'art')" :data-tooltip="langs.options.delete_artwork" @click="deleteArtwork()">
            <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-artwork-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown" v-if="menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''">
        <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 d-flex gap-1 p-2 align-items-center w-100" 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 gap-1 p-2 d-flex flex-column w-100 gap-2 pdapp-hide-palette overflow-y-auto overflow-x-hidden" 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 class="pdapp-dropdown-box w-100" v-if="menuOptions.details[menuOptions.childID].dropdown == 'settings'">
            <h4 class="header-title fs-5 m-0 p-2 pb-0"><span class="sub-header">{{ langs.options.disabled_options }}</span></h4>
            <div class="w-100 d-flex gap-2 p-2 align-items-center w-100 flex-wrap">
                <template v-for="(option, oid) in listArtworkOptions">
                    <div class="form-check form-switch me-1" :key="oid" v-if="option != 'flip' || menuOptions.details[menuOptions.childID].editColor == false">
                        <input type="checkbox" class="form-check-input" :id="'art-switch-option-'+ option" v-model="menuOptions.details[menuOptions.childID].settings[oid]" @change="changeSettingOption('art')">
                        <label class="form-check-label text-capitalize" :for="'art-switch-option-'+ option" :class="option == 'delete' ? 'text-danger' : ''">{{ option }}</label>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<template v-else>
    <div class="pdapp-menu-options-content pdapp-list-artworks d-flex flex-column align-items-start gap-1 px-1 overflow-y-auto overflow-x-hidden pdapp-menu-options-artwork w-100">
        <ol class="breadcrumb m-0" v-if="breadcrs.length > 1">
            <li class="breadcrumb-item" v-for="(bread, bid) in breadcrs" :class="bread.to !== '' ? 'active' : ''" :key="bid">
                <template v-if="bread.to === ''">{{ bread.title }}</template>
                <a v-else href="javascript: void(0);" @click="openArtFolder(bread.to)" class="text-blue">{{ bread.title }}</a>
            </li>
        </ol>
        <template v-if="listMenus.artwork.options.values.loadFolder">
            <div class="pdapp-folders w-100">
                <div class="row g-2">
                    <div class="col-6 placeholder-glow">
                        <div class="pdapp-folder pdapp-h80 w-100 mb-2 placeholder bg-secondary rounded-2 position-relative"></div>
                    </div>
                    <div class="col-6 placeholder-glow">
                        <div class="pdapp-folder pdapp-h80 w-100 mb-2 placeholder bg-secondary rounded-2 position-relative"></div>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="pdapp-folders w-100" :class="listArtworks.arts.length || listMenus.artwork.options.values.search != '' ? 'border-bottom pb-2 mb-2' : ''" v-if="artFolders[listMenus.artwork.options.values.activeFolder] != undefined && artFolders[listMenus.artwork.options.values.activeFolder].length">
                <div class="row g-2">
                    <div class="col-6" v-for="(folder, fid) in artFolders[listMenus.artwork.options.values.activeFolder]" :key="fid">
                        <div class="card card-inverse text-white position-relative m-0 pdapp-folder rounded-2" @click="openArtFolder(folder.id)">
                            <img :src="showImg(folder.thumb, 'artf')" :alt="getTitle(folder.title)" class="card-img img-fluid rounded-2">
                            <div class="card-img-overlay p-1 d-flex flex-column gap-0 text-center justify-content-center align-items-center">
                                <h5 class="card-title fs-5 fw-bold m-0 text-hidden">{{ getTitle(folder.title) }}</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <div class="input-group input-group-merge mb-1" v-if="listArtworks.arts.length || listMenus.artwork.options.values.search != ''" :class="responsiveLayout.width < 1200 ? 'input-group-sm' : ''">
            <span class="input-group-text bg-white" :class="responsiveLayout.width >= 1200 ? 'ps-2 pe-1' : 'ps-1 pe-0'">
                <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.artwork.options.values.search != '' ? 'border-end-0' : ''" v-model="listMenus.artwork.options.values.search" :placeholder="langs.options.search_artworks" @input="listMenus.artwork.options.values.page.paged = 1">
            <button type="button" class="input-group-text bg-white text-danger ps-1 pe-2" v-if="listMenus.artwork.options.values.search != ''" @click="listMenus.artwork.options.values.search = ''">
                <i class="material-icons material-symbols-outlined">close</i>
            </button>
        </div>
        
        <template v-if="listMenus.artwork.options.values.loadArt == true">
            <div class="pdapp-h120 w-100 position-relative">
                <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>
        </template>
        <template v-else>
            <div class="pdapp-artworks row g-2 pb-1" v-if="listArtworks.arts.length">
                <div class="col-6" v-for="(art, aid) in listArtworks.arts" :key="aid">
                    <button type="button" class="pdapp-artwork flex-column m-0 btn waves-effect waves-light gap-0 p-0 w-100 position-relative btn-light" @click="addArtwork(art)">
                        <span class="d-flex flex-auto h-100">
                            <img :src="showImg(art.thumb, 'art')" :alt="getTitle(art.title)" class="card-img-top img-fluid m-auto pdapp-mh140">
                        </span>
                        <span class="pdapp-caption card-title text-primary p-1 m-0 fs-6">{{ getTitle(art.title) }}</span>
                        <div class="pdapp-loading-mask pdapp-loading-page" v-if="listMenus.artwork.options.values.loadArt == art.id">
                            <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>
                    </button>
                </div>
                <div class="col-12" v-if="listArtworks.total > listArtworks.arts.length">
                    <button type="button" class="btn btn-light w-100" @click="listMenus.artwork.options.values.page.paged++">{{ langs.load_more }}</button>
                </div>
            </div>
            <div class="w-100 text-danger text-center" v-if="artFolders[listMenus.artwork.options.values.activeFolder] == undefined && listArtworks.arts.length == 0">{{ langs.options.artwork_not_found }}</div>
        </template>
    </div>
</template>