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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="modal-body" v-if="modal.type == 'color'">
    <div class="row">
        <div class="col-4">
            <label class="form-label">{{ langs.product.color_name }}</label>
            <input type="text" class="form-control form-control-sm" v-model="modal.data.color.title" :placeholder="langs.product.color_name_desc">
        </div>
        <div class="col-4">
            <label class="form-label">{{ langs.product.color_code }}</label>
            <input type="color" class="form-control form-control-sm" v-model="modal.data.color.hex" :placeholder="langs.product.hex_desc">
        </div>
        <div class="col-4">
            <label class="form-label w-100">&nbsp;</label>
            <button type="button" class="btn btn-sm btn-info waves-effect waves-light" :disabled="modal.data.color.title == ''" @click="addListColor">{{ langs.product.add_color }}</button>
        </div>
    </div>

    <div class="mt-2 pt-2 mb-2 pb-2 d-flex gap-3 w-100 border-top border-bottom 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>
    </div>

    <div class="mt-2 pt-2 mb-2 pb-2 d-flex gap-3 w-100 border-top border-bottom justify-content-start align-items-center flex-wrap position-relative" v-if="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="(value, key) in colors" :key="key">
            <span>{{ value.title }}</span>
            <span class="pdapp-product-color" :style="'background: '+ value.hex">
                <i class="material-icons material-symbols-outlined" v-if="value.hex == productColor.color.active">check</i>
            </span>
        </button>
        <div class="position-absolute" id="pdapp-mask-upgrade">
            <h5 class="d-flex justify-content-center align-items-center position-absolute fw-bold w-100 h-100 m-0">
                <a href="<?php echo esc_url(PDAPP_HOME_URL. '/shop/woocommerce');?>" target="_blank" class="text-danger bg-white p-1 px-2 rounded">{{ langs.upgrade_basic }}</a>
            </h5>
        </div>
    </div>
</div>