<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Page: Products
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="tab-pane" :class="productActive.info == 'layer' ? 'active show' : ''" role="tabpanel">
    <div class="pdapp-product-layers-box pe-1">
        <div class="mb-3">
            <label class="form-label">{{ langs.product.view_name }}</label>
            <input type="text" class="form-control form-control-sm" v-model="pageAdd.data.views[productActive.view].title" :placeholder="langs.product.view_name_desc">
        </div>
        <div class="mb-3">
            <div class="card mb-1" v-for="(background, bid) in viewActive.backgrounds" :key="bid">
                <div class="card-header p-2 bg-body" @click="activeLayer('bg-'+ bid)">
                    <h5 class="m-0">
                        <a class="align-items-center text-dark d-flex justify-content-between position-relative" href="javascript:void(0);">
                            <span>{{ bid == 0 ? langs.product.primary_background_layer : langs.product.background_layer }}<span class="text-danger" v-if="bid == 0"> *</span><span class="text-warning ms-1" v-else>({{bid}})</span></span>
                            <i class="material-icons material-symbols-outlined" v-if="bid == 0">{{productActive.layer != 'bg-'+ bid ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}</i>
                            <i v-if="bid != 0" class="material-icons material-symbols-outlined pdapp-remove-btn fs-5 p-1" v-else @click.stop.prevent="removeLayer(bid, 'bg')">delete</i>
                        </a>
                    </h5>
                </div>

                <div class="collapse bg-body bg-opacity-50 w-100" :class="productActive.layer == 'bg-'+ bid ? 'show' : ''">
                    <div class="card-body p-2">
                        <div class="row">
                            <div class="col-6 col-lg-7 col-xl-8">
                                <div class="mb-2">
                                    <label class="form-label">{{ langs.product.select_color }}</label>
                                    <select class="form-select form-select-sm mw-100" v-model="background.id" @change="updateBackground(bid)">
                                        <option value=""> -- {{ langs.product.select_color }} -- </option>
                                        <option v-for="(color, cid) in pageAdd.data.colors" :key="cid" :value="color.id">{{ color.title }}</option>
                                    </select>
                                </div>
                                <div class="mb-2" v-if="showBackground(bid)">
                                    <label class="form-label">{{ langs.product.color_type }}</label>
                                    <select class="form-select form-select-sm mw-100" v-model="background.colorType" @change="updateBackgroundImg(bid)">
                                        <option value="color">{{ langs.product.background_with_color }}</option>
                                        <option value="image">{{ langs.product.background_with_image }}</option>
                                    </select>
                                </div>
                                <div class="mb-2" v-if="background.colorType == 'color'">
                                    <input class="form-control form-control-sm pdapp-input-file" type="file" accept="image/png" @change="changeBackgroundFile($event, bid)">
                                </div>
                            </div>
                            <div class="col-6 col-lg-5 col-xl-4" v-if="background.image != '' && background.colorType == 'color'">
                                <div class="position-relative w-100">
                                    <img :id="'bg-thumb-'+ bid" :src="showImg(background.image, pageAdd.data.id)" class="img-fluid img-thumbnail bg-light pdapp-product-img"/>
                                    <i class="material-icons material-symbols-outlined pdapp-remove-btn fs-5 p-1 bg-warning text-black" @click.stop.prevent="restartBgColor(bid)">restart_alt</i>
                                </div>
                            </div>
                            <template v-if="background.colorType == 'image'">
                                <hr>
                                <div class="row mb-3" v-for="(color, cid) in showListColors(background.id)" :key="cid">
                                    <div class="col-6 col-lg-7 col-xl-8">
                                        <div class="mb-2">
                                            <label class="form-label">{{ color.title }} <span class="text-danger"> *</span></label>
                                            <input class="form-control form-control-sm pdapp-input-file" type="file" accept="image/png, image/jpg, image/jpeg" @change="changeBackgroundColorFile($event, bid, cid)">
                                        </div>
                                    </div>
                                    <div class="col-6 col-lg-5 col-xl-4" v-if="background.colorType == 'image'">
                                        <div class="position-relative w-100">
                                            <img :id="'bg-thumb-'+ bid" :src="showBackgroundImg(background.images, cid, pageAdd.data.id)" class="img-fluid img-thumbnail bg-light pdapp-product-img"/>
                                            <i class="material-icons material-symbols-outlined pdapp-remove-btn fs-5 p-1 bg-warning text-black" @click.stop.prevent="restartBackgroundColor(bid, cid)">restart_alt</i>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="row mt-2">
                            <div class="col-12">
                                <div class="btn-group flex-wrap gap-2 w-100 mb-2">
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('up')">
                                        <i class="material-icons material-symbols-outlined">expand_less</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('down')">
                                        <i class="material-icons material-symbols-outlined">expand_more</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('left')">
                                        <i class="material-icons material-symbols-outlined">chevron_left</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('right')">
                                        <i class="material-icons material-symbols-outlined">chevron_right</i>
                                    </button>
                                </div>
                                <div class="btn-group flex-wrap gap-2 w-100">
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('top')">
                                        <i class="material-icons material-symbols-outlined">align_vertical_top</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('right')">
                                        <i class="material-icons material-symbols-outlined">align_horizontal_right</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('bot')">
                                        <i class="material-icons material-symbols-outlined">align_vertical_bottom</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('left')">
                                        <i class="material-icons material-symbols-outlined">align_horizontal_left</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('middle')">
                                        <i class="material-icons material-symbols-outlined">align_vertical_center</i>
                                    </button>
                                    
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('center')">
                                        <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
                                    </button>
                                    
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('centerAll')">
                                        <i class="material-icons material-symbols-outlined">align_flex_center</i>
                                    </button>
                                    
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="fitInside()">
                                        <i class="material-icons material-symbols-outlined">fit_page</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <a href="javascript:void(0)" class="card-link text-custom mt-1 d-block" @click="addMoreBG">{{ langs.product.add_more_background_layer }}</a>
        </div>

        <div class="mb-3">
            <div class="card mb-1" v-for="(layer, lid) in viewActive.layers" :key="lid">
                <div class="card-header p-2 bg-body" @click="activeLayer('lay-'+ lid)">
                    <h5 class="m-0">
                        <a class="align-items-center text-dark d-flex justify-content-between position-relative" href="javascript:void(0);">
                            <span>{{ lid == 0 ? langs.product.primary_area_layer : langs.product.area_layer }}<span class="text-danger" v-if="lid == 0"> *</span><span class="text-warning ms-1" v-else>({{lid}})</span></span>
                            <i class="material-icons material-symbols-outlined" v-if="lid == 0">{{productActive.layer != 'lay-'+ lid ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}</i>
                            <i v-if="lid != 0" class="material-icons material-symbols-outlined pdapp-remove-btn fs-5 p-1" v-else @click.stop.prevent="removeLayer(lid, 'layer')">delete</i>
                        </a>
                    </h5>
                </div>

                <div class="collapse bg-opacity-50 bg-body w-100" :class="productActive.layer == 'lay-'+ lid ? 'show' : ''">
                    <div class="card-body p-2">
                        <div class="mb-2">
                            <label class="form-label">{{ langs.product.layer_name }}</label>
                            <input type="text" v-model="layer.title" class="form-control form-control-sm" :placeholder="langs.product.layer_name_desc">
                        </div>

                        <div class="row mb-2">
                            <div class="col-6">
                                <label class="form-label">{{ langs.product.width }}</label>
                                <input type="number" min="0" step="0.1" :max="lid == 0 ? '999999' : viewActive.canvas.width" :value="layer.width" @change="updateLayerValue(lid, 'width', $event)" class="form-control form-control-sm" :placeholder="langs.product.size_desc">
                            </div>
                            <div class="col-6">
                                <label class="form-label">{{ langs.product.height }}</label>
                                <input type="number" min="0" step="0.1" :max="lid == 0 ? '999999' : viewActive.canvas.height" :value="layer.height" @change="updateLayerValue(lid, 'height', $event)" class="form-control form-control-sm" :placeholder="langs.product.size_desc">
                            </div>
                        </div>

                        <div class="mb-2">
                            <label class="form-label">{{ langs.product.arc }}</label>
                            <div class="row align-items-center">
                                <div class="col-8 col-md-7 col-lg-8 col-xl-9">
                                    <input class="form-range" type="range" min="0" step="0.1" max="50" :style="'background-size: '+ layer.radius*2 +'% 100%'" v-model="layer.radius">
                                </div>
                                <div class="col-4 col-md-5 col-lg-4 col-xl-3">
                                    <input class="form-control form-control-sm pe-0" type="number" min="0" step="0.1" max="50" v-model="layer.radius">
                                </div>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-12">
                                <div class="btn-group flex-wrap gap-2 w-100 mb-2">
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('up')">
                                        <i class="material-icons material-symbols-outlined">expand_less</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('down')">
                                        <i class="material-icons material-symbols-outlined">expand_more</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('left')">
                                        <i class="material-icons material-symbols-outlined">chevron_left</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('right')">
                                        <i class="material-icons material-symbols-outlined">chevron_right</i>
                                    </button>
                                </div>
                                <div class="btn-group flex-wrap gap-2 w-100">
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('top')">
                                        <i class="material-icons material-symbols-outlined">align_vertical_top</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('right')">
                                        <i class="material-icons material-symbols-outlined">align_horizontal_right</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('bot')">
                                        <i class="material-icons material-symbols-outlined">align_vertical_bottom</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('left')">
                                        <i class="material-icons material-symbols-outlined">align_horizontal_left</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('middle')">
                                        <i class="material-icons material-symbols-outlined">align_vertical_center</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('center')">
                                        <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('centerAll')">
                                        <i class="material-icons material-symbols-outlined">align_flex_center</i>
                                    </button>
                                    <button v-if="lid == 0" type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="fitInside()">
                                        <i class="material-icons material-symbols-outlined">fit_page</i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12"><label class="form-label">{{ langs.product.mask_area_layer }}</label></div>
                            <div class="col-6 col-xl-7">
                                <input class="form-control form-control-sm pdapp-input-file" accept="image/png" type="file" @change="changeMaskFile($event, lid)">
                            </div>
                            <div class="col-6 col-xl-5" v-if="layer.mask != ''">
                                <div class="position-relative">
                                    <img :id="'mask-thumb-'+ lid" :src="showImg(layer.mask, pageAdd.data.id)" class="img-fluid img-thumbnail bg-light pdapp-mask"/>
                                    <i class="material-icons material-symbols-outlined pdapp-remove-btn fs-4" @click="removeLayer(lid, 'mask')">close</i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <a href="javascript:void(0)" class="card-link text-custom mt-1 d-block" @click="addMoreArea">{{ langs.product.add_more_area_design }}</a>
        </div>

        <div class="card mb-0">
            <div class="card-header p-2 bg-body" @click="activeLayer('mask-layer')">
                <h5 class="m-0">
                    <a class="align-items-center text-dark d-flex justify-content-between position-relative" href="javascript:void(0);">
                        <span>{{ langs.product.mask_layer }} <span class="sub-header">({{ langs.product.option }})</span></span>
                        <i class="material-icons material-symbols-outlined">{{productActive.layer != 'mask-layer' ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}</i>
                    </a>
                </h5>
            </div>

            <div class="collapse bg-body bg-opacity-50 w-100" :class="productActive.layer == 'mask-layer' ? 'show' : ''">
                <div class="card-body p-2">
                    <div class="row">
                        <div class="col-6 col-lg-7 col-xl-8">
                            <input class="form-control form-control-sm pdapp-input-file" type="file" accept="image/png" @change="changeMaskLayer($event)">
                            <div class="mt-2" v-if="viewActive.mask.image != undefined">
                                <div class="btn-group flex-wrap gap-2 w-100">
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('up')">
                                        <i class="material-icons material-symbols-outlined">expand_less</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('down')">
                                        <i class="material-icons material-symbols-outlined">expand_more</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('left')">
                                        <i class="material-icons material-symbols-outlined">chevron_left</i>
                                    </button>
                                    <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="moveItem('right')">
                                        <i class="material-icons material-symbols-outlined">chevron_right</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-lg-5 col-xl-4" v-if="viewActive.mask.image != undefined">
                            <div class="position-relative w-100">
                                <img id="pdapp-mask-thumb" :src="showImg(viewActive.mask.image, pageAdd.data.id)" class="img-fluid img-thumbnail bg-light pdapp-product-img"/>
                                <i class="material-icons material-symbols-outlined pdapp-remove-btn fs-4" @click.stop.prevent="removeMask">close</i>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2" v-if="viewActive.mask.image != undefined">
                        <div class="col-12">
                            <div class="btn-group flex-wrap gap-2 w-100">
                                <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('top')">
                                    <i class="material-icons material-symbols-outlined">align_vertical_top</i>
                                </button>
                                <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('right')">
                                    <i class="material-icons material-symbols-outlined">align_horizontal_right</i>
                                </button>
                                <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('bot')">
                                    <i class="material-icons material-symbols-outlined">align_vertical_bottom</i>
                                </button>
                                <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('left')">
                                    <i class="material-icons material-symbols-outlined">align_horizontal_left</i>
                                </button>
                                <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('middle')">
                                    <i class="material-icons material-symbols-outlined">align_vertical_center</i>
                                </button>
                                <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('center')">
                                    <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
                                </button>
                                <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="alignItem('centerAll')">
                                    <i class="material-icons material-symbols-outlined">align_flex_center</i>
                                </button>
                                <button type="button" class="btn btn-light border waves-effect waves-light btn-sm rounded-2 d-flex justify-content-center align-items-center px-1" @click="fitInside()">
                                    <i class="material-icons material-symbols-outlined">fit_page</i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr class="mt-2 mb-1">

    <div class="d-flex justify-content-start align-items-center gap-3 overflow-x-auto pb-1 pt-2">
        <button type="button" class="btn w-sm waves-effect waves-light pdapp-btn-view position-relative" v-for="(view, vid) in pageAdd.data.views" :class="vid == productActive.view ? 'btn-info' : 'btn-light'" :key="vid" @click="activeProductView(vid)">
            <span>{{ view.title }}</span>
            <i class="material-icons material-symbols-outlined pdapp-remove-btn fs-4" @click.stop.prevent="removeView(vid)">close</i>
        </button>
        <button type="button" class="btn btn-primary w-sm waves-effect waves-light pdapp-btn-view ps-1 pe-1" @click="addNewMoreView"><i class="material-icons material-symbols-outlined">add</i></button>
    </div>
</div>