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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="pdapp-topbar d-flex justify-content-between align-items-center p-1 gap-2 bg-light">
    <button type="button" class="btn btn-sm btn-danger tooltip-right" :data-tooltip="langs.topbar.back_to_product" @click="backToProduct">
        <i class="material-icons material-symbols-outlined">keyboard_backspace</i>
        <span class="d-lg-block d-none">{{ langs.back }}</span>
    </button>

    <div class="pdapp-topbar-group d-flex justify-content-center align-items-center gap-1">
        <div class="pdapp-topbar-toolbar d-flex align-items-center gap-1 pdapp-product-size-box" v-if="product.unit.edit && areaActive.id != undefined && 992 <= responsiveLayout.width && responsiveLayout.width < 1200">
            <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" @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" @change="updatePrintSize($event, 'height')">
            </div>
            <select class="form-select form-select-sm" @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="d-block position-relative pdapp-product-color" v-if="!responsiveLayout.showCart && modalCart.show != true && responsiveLayout.width < 1200 && (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-bottom-left btn-info border" :class="dropdownMenu == 'product_color' ? 'active' : ''" :data-tooltip="langs.toolbar.product_color" @click="showProductColor">
                <i class="material-icons material-symbols-outlined">format_color_fill</i>
                <span class="d-lg-block d-none">{{ langs.toolbar.product_color }}</span>
                <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>
        <button type="button" v-if="!responsiveLayout.showCart && settings.layout.addcart.allow" class="btn btn-sm btn-primary tooltip-bottom-left" :data-tooltip="langs.topbar.add_to_cart" @click="showCartBox()">
            <i class="material-icons material-symbols-outlined">shopping_cart</i>
            <span class="d-lg-block d-none">{{ langs.topbar.add_cart }}</span>
        </button>
    </div>
</div>