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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="isLoaded">
    <div class="pdapp-studio-topbar d-flex justify-content-between align-items-center gap-2" v-if="1200 <= responsiveLayout.width">
        <div class="pdapp-topbar-toolbar d-flex align-items-center gap-1 pdapp-product-size-box" v-if="areaActive.id != undefined">
            <div class="input-group input-group-sm tooltip-top d-flex flex-nowrap" :data-tooltip="langs.toolbar.product_size">
                <span class="input-group-text ps-1 pe-1">W</span>
                <input type="number" min="0" step="any" class="form-control pdapp-w50 ps-1 pe-0" :value="areaActive.width" :disabled="!product.unit.edit" @change="updatePrintSize($event, 'width')">
            </div>
            <div class="input-group input-group-sm tooltip-top d-flex flex-nowrap" :data-tooltip="langs.toolbar.product_size">
                <span class="input-group-text ps-1 pe-1">H</span>
                <input type="number" min="0" step="any" class="form-control pdapp-w50 ps-1 pe-0" :value="areaActive.height" :disabled="!product.unit.edit" @change="updatePrintSize($event, 'height')">
            </div>
            <i class="material-icons material-symbols-outlined" v-if="product.unit.edit">link</i>
            <i class="material-icons material-symbols-outlined" v-else>lock</i>
            <select class="form-select form-select-sm" :disabled="!product.unit.edit" @change="updatePrintSize($event, 'unit')">
                <option v-for="(unit, idx) in sizeUnit" :key="idx" :value="unit" :selected="product.unit.type == unit">{{ unit.toUpperCase() }}</option>
            </select>
        </div>
        
        <div class="pdapp-topbar-toolbar d-flex align-items-center position-relative gap-1">
            <button type="button" class="btn btn-sm btn-light tooltip-top border" :data-tooltip="langs.toolbar.select_all_design" @click="selectAllGroup">
                <i class="material-icons material-symbols-outlined">select_all</i>
            </button>
            <button type="button" class="btn btn-sm btn-warning tooltip-top" :data-tooltip="langs.toolbar.reset_design" v-if="settings.layout.reset.allow" @click="resetAllDesign">
                <i class="material-icons material-symbols-outlined">restart_alt</i>
            </button>
            <div class="d-block position-relative" v-if="!responsiveLayout.showCart && modalCart.show != true && (1 < productDataPX.colors.length || (productDataPX.colors.length == 1 && (productDataPX.colors[0].type == 'picker' || 1 < productDataPX.colors[0].values.length)))">
                <button type="button" class="btn btn-sm tooltip-top-left border" :class="dropdownMenu == 'product_color' ? 'btn-primary active' : 'btn-light'" :data-tooltip="langs.toolbar.product_color" @click="showProductColor">
                    <i class="material-icons material-symbols-outlined">format_color_fill</i>
                    <span class="dropdown-arrow-bot"></span>
                </button>
                <div class="pdapp-topbar-options position-absolute card shadow-lg p-1 border" v-if="dropdownMenu == 'product_color'">
                    <div class="pdapp-topbar-colorbox d-flex flex-column w-100 pdapp-hide-palette" v-for="(color, cid) in productDataPX.colors" :key="cid">
                        <h5 class="header-title fs-6 m-0 py-1">{{ color.title }}</h5>
                        <i class="material-icons material-symbols-outlined btn-close-dropbox" @click="showProductColor">close</i>
                        <div class="pdapp-colorpicker" v-if="color.type == 'picker'">
                            <input type="text" :id="'pdapp-product-colorpicker-'+ color.id" class="form-control" v-model="color.active" @input="changeProductColor(color.id, color.active, cid)">
                        </div>
                        <div class="pdapp-listcolor d-flex flex-wrap w-100 gap-2" v-else>
                            <button type="button" class="btn p-0 waves-effect waves-light border pdapp-w30 pdapp-h30 tooltip-top" v-for="(val, k) in color.values" :key="k" :class="val.hex == color.active ? 'rounded-pill' : 'rounded-2'" :data-tooltip="val.title" @click="changeProductColor(color.id, val.hex, cid)" :style="'background:'+ val.hex"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<template v-else>
    <div class="pdapp-studio-topbar d-xl-flex d-none justify-content-between align-items-center gap-2">
        <div class="pdapp-topbar-toolbar d-flex align-items-center gap-1">
            <div class="p-0 placeholder-glow w-100 d-flex align-items-center">
                <div class="bg-secondary placeholder pdapp-h30 pdapp-w80 rounded-2"></div>
            </div>
            <div class="p-0 placeholder-glow w-100 d-flex align-items-center">
                <div class="bg-secondary placeholder pdapp-h30 pdapp-w80 rounded-2"></div>
            </div>
            <div class="p-0 placeholder-glow w-100 d-flex align-items-center">
                <div class="bg-secondary placeholder pdapp-w30"></div>
            </div>
            <div class="p-0 placeholder-glow w-100 d-flex align-items-center">
                <div class="bg-secondary placeholder pdapp-h30 pdapp-w80 rounded-2"></div>
            </div>
        </div>
        
        <div class="pdapp-topbar-toolbar d-flex align-items-center gap-1">
            <div class="p-0 placeholder-glow w-100 d-flex align-items-center">
                <div class="bg-secondary placeholder pdapp-h30 pdapp-w50 rounded-2"></div>
            </div>
            <div class="p-0 placeholder-glow w-100 d-flex align-items-center">
                <div class="bg-secondary placeholder pdapp-h30 pdapp-w50 rounded-2"></div>
            </div>
            <div class="p-0 placeholder-glow w-100 d-flex align-items-center">
                <div class="bg-secondary placeholder pdapp-h30 pdapp-w50 rounded-2"></div>
            </div>
        </div>
    </div>
</template>