<?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 == 'info' ? 'active show' : ''" role="tabpanel">
    <div class="pe-1">
        <div class="row">
            <div class="col-12 col-md-8 col-xl-6">
                <label class="form-label">{{ langs.product.unit }} <span class="text-danger">*</span></label>
                <select class="form-select form-select-sm mw-100" @change="updatePrintSize($event)">
                    <option v-for="(unit, uid) in units" :key="uid" :selected="pageAdd.data.unit.type == unit" :value="unit">{{ unit.toUpperCase() }}</option>
                </select>
            </div>
        </div>
    </div>

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

    <div class="pe-1">
        <label class="form-label">{{ langs.product.product_color }} <span class="text-danger">*</span></label>
        <div class="d-flex gap-3 mb-2 w-100 justify-content-start align-items-center flex-wrap" v-if="pageAdd.data.colors.length">
            <button type="button" class="btn d-flex pe-1 align-items-center border btn-sm waves-effect waves-light position-relative" v-for="(color, cid) in pageAdd.data.colors" :key="cid" @click="addMoreColor(color)">
                <span>{{ color.title }}</span>
                <span class="pdapp-product-color" :style="'background: '+ color.active"></span>
                <i v-if="cid != 0" class="material-icons material-symbols-outlined pdapp-remove-btn fs-4" @click.stop.prevent="pageAdd.data.colors.splice(cid, 1)">close</i>
            </button>
        </div>
        <div class="row mt-1" v-if="productColor.addNew == '1'">
            <div class="col-12 mb-2">
                <input type="text" class="form-control form-control-sm" v-model="productColor.color.title" :placeholder="langs.product.product_color_name_desc">
            </div>
            <div class="col-6">
                <select class="form-select form-select-sm mw-100" v-model="productColor.color.type" @change="resetColor">
                    <option value="picker">{{ langs.product.colorpicker }}</option>
                    <option value="custom">{{ langs.product.custom_color }}</option>
                </select>
            </div>
            <div class="col-6" v-if="productColor.color.type == 'picker'">
                <input type="color" class="form-control form-control-sm" v-model="productColor.color.active" placeholder="e.g : #FFFFFF">
            </div>
            <div class="col-6" v-else>
                <button type="button" class="btn btn-sm btn-info waves-effect waves-light" @click="addMoreCustomColor" v-if="productColor.color.values.length == 0">{{ langs.product.add_custom_color }}</button>
            </div>

            <div class="mt-2 pt-2 d-flex gap-3 w-100 justify-content-start align-items-center flex-wrap" v-if="productColor.color.values.length">
                <button type="button" class="btn d-flex align-items-center border btn-sm waves-effect waves-light position-relative" v-for="(color, cid) in productColor.color.values" :key="cid" @click="productColor.color.active = color.hex">
                    <span>{{ color.title }}</span>
                    <span class="pdapp-product-color" :style="'background: '+ color.hex">
                        <i class="material-icons material-symbols-outlined" v-if="color.hex == productColor.color.active">check</i>
                    </span>
                    <i v-if="color.hex != productColor.color.active" class="material-icons material-symbols-outlined pdapp-remove-btn fs-4" @click.stop.prevent="productColor.color.values.splice(cid, 1)">close</i>
                </button>
                <button type="button" class="btn btn-sm btn-info waves-effect waves-light" @click="addMoreCustomColor" v-if="productColor.color.values.length">{{ langs.product.add_custom_color }}</button>
            </div>
            
            <div class="col-12 mt-2 d-flex justify-content-between">
                <button type="button" class="btn btn-sm btn-light waves-effect waves-light me-2" @click="productColor.addNew = ''">{{ langs.cancel }}</button>
                <button type="button" class="btn btn-sm btn-primary waves-effect waves-light" :disabled="productColor.color.title == '' || (productColor.color.type != 'picker' && productColor.color.values.length == 0)" @click="addNewColor">{{ productColor.color.id == '' ? langs.product.add_color : langs.product.update_color }}</button>
            </div>
        </div>
        <a v-else href="javascript:void(0)" class="card-link text-custom mt-1 d-block" @click="addMoreColor()">{{ langs.product.add_more_product_color }}</a>
    </div>

    <div class="pe-1 mt-3" v-if="!pageAdd.data.unit.edit">
        <label class="form-label">{{ langs.product.product_size }} <span class="text-danger">*</span></label>
        <div class="d-flex gap-3 mb-2 w-100 justify-content-start align-items-center flex-wrap" v-if="pageAdd.data.sizes.length">
            <button type="button" class="btn d-flex align-items-center border btn-sm waves-effect waves-light position-relative" v-for="(size, sid) in pageAdd.data.sizes" :key="sid" @click="addSizeAttr(size, sid)">
                <span>{{ size }}</span>
                <i v-if="sid != 0" class="material-icons material-symbols-outlined pdapp-remove-btn fs-4" @click.stop.prevent="removeSizeAttr(sid)">close</i>
            </button>
        </div>
        <div class="row mt-1" v-if="productSize.addNew == '1'">
            <div class="col-12 mb-2">
                <input type="text" class="form-control form-control-sm" v-model="productSize.size" :placeholder="langs.product.product_size_name_desc">
            </div>
            
            <div class="col-12 mt-2 d-flex justify-content-between">
                <button type="button" class="btn btn-sm btn-light waves-effect waves-light me-2" @click="productSize.addNew = ''">{{ langs.cancel }}</button>
                <button type="button" class="btn btn-sm btn-primary waves-effect waves-light" :disabled="productSize.size == ''" @click="addNewSize">{{ productSize.id === '' ? langs.product.add_size : langs.product.update_size }}</button>
            </div>
        </div>
        <a v-else href="javascript:void(0)" class="card-link text-custom mt-1 d-block" @click="addSizeAttr()">{{ langs.product.add_product_size }}</a>
    </div>
</div>