<?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.setup == 'advance' ? 'active show' : ''" role="tabpanel" v-if="pageAdd.data.unit != undefined">
    <h4 class="header-title">{{ langs.product.layouts }}</h4>
    <h6 class="card-subtitle text-muted">{{ langs.product.layouts_desc }}</h6>
    <div class="row mt-2">
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="advance-edit-size" disabled>
                <label class="form-check-label" for="advance-edit-size">{{ langs.product.allow_edit_size }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="advance-custom-view" disabled>
                <label class="form-check-label" for="advance-custom-view">{{ langs.product.allow_add_view }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="pageAdd.layout.customize" id="advance-allow-layout">
                <label class="form-check-label" for="advance-allow-layout">{{ langs.product.customize_design_layout }}</label>
            </div>
        </div>
    </div>
    <div class="row pt-2 border-top" v-if="pageAdd.layout.customize">
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="advance-allow-download" disabled>
                <label class="form-check-label" for="advance-allow-download">{{ langs.setting.show_download }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="advance-allow-savedesign" disabled>
                <label class="form-check-label" for="advance-allow-savedesign">{{ langs.setting.show_save_design }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_pro"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="pageAdd.layout.addcart" id="advance-allow-addcart">
                <label class="form-check-label" for="advance-allow-addcart">{{ langs.setting.show_add_to_cart }}</label>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="advance-allow-quote" disabled>
                <label class="form-check-label" for="advance-allow-quote">{{ langs.setting.show_quote }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_pro"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="pageAdd.layout.template" id="advance-allow-template">
                <label class="form-check-label" for="advance-allow-template">{{ langs.setting.show_template }}</label>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="pageAdd.layout.text" id="advance-allow-text">
                <label class="form-check-label" for="advance-allow-text">{{ langs.setting.show_text }}</label>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="pageAdd.layout.upload" id="advance-allow-upload">
                <label class="form-check-label" for="advance-allow-upload">{{ langs.setting.show_upload }}</label>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="advance-allow-library" disabled>
                <label class="form-check-label" for="advance-allow-library">{{ langs.setting.show_library }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="advance-allow-qrcode" disabled>
                <label class="form-check-label" for="advance-allow-qrcode">{{ langs.setting.show_qrcode }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="advance-allow-barcode" disabled>
                <label class="form-check-label" for="advance-allow-barcode">{{ langs.setting.show_barcode }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_pro"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="pageAdd.layout.layer" id="advance-allow-layer">
                <label class="form-check-label" for="advance-allow-layer">{{ langs.setting.show_layer }}</label>
            </div>
        </div>
        <div class="col-4 mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="advance-allow-team" disabled>
                <label class="form-check-label" for="advance-allow-team">{{ langs.setting.show_team }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_pro"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>
    </div>

    <h4 class="header-title mt-3">{{ langs.product.resources }}</h4>
    <h6 class="card-subtitle text-muted">{{ langs.product.resources_desc }}</h6>
    <div class="row mt-2" v-if="listArts.length">
        <div class="col-4" v-for="(arts, lid) in listArts" :key="lid">
            <select class="form-select form-select-sm" @change="openFolder('art', $event.target.value)">
                <option :value="arts.id">{{ langs.product.select_artwork_folder }}</option>
                <option v-for="(art, kid) in arts.list" :value="art.id" :selected="pageAdd.artID == art.id" :key="kid">{{ getTitle(art.title) }}</option>
            </select>
        </div>
    </div>
    <div class="row mt-2" v-if="listTemps.length">
        <div class="col-4" v-for="(temps, lid) in listTemps" :key="lid">
            <select class="form-select form-select-sm" @change="openFolder('temp', $event.target.value)">
                <option :value="temps.id">{{ langs.product.select_template_folder }}</option>
                <option v-for="(temp, kid) in temps.list" :value="temp.id" :selected="pageAdd.tempID == temp.id" :key="kid">{{ getTitle(temp.title) }}</option>
            </select>
        </div>
    </div>

    <h4 class="header-title mt-3">{{ langs.product.relatives_product }}</h4>
    <h6 class="card-subtitle text-muted">{{ langs.product.choose_relatives_product_desc }}</h6>
    <div class="row mt-2 position-relative">
        <div class="col-4">
            <div class="search-bar position-relative mb-sm-0">
                <input type="text" class="form-control form-control-sm" v-model="searchProduct" :placeholder="langs.product.search+ '...'">
                <i class="material-icons material-symbols-outlined" style="top: -6px;">search</i>
            </div>
        </div>
        <div class="col-12 mt-1">
            <div class="d-flex column-gap-3 row-gap-2 overflow-auto flex-wrap" style="max-height: 100px;">
                <div class="form-check form-switch" v-for="(product, pid) in listProductDesigns" :key="pid">
                    <input type="checkbox" class="form-check-input" v-model="pageAdd.relatives" :value="product.id" :id="'allow-product-'+ product.id">
                    <label class="form-check-label" :for="'allow-product-'+ product.id">(#{{ product.id }}) {{ product.title }}</label>
                </div>
            </div>
        </div>
        <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_pro }}</a>
            </h5>
        </div>
    </div>

    <h4 class="header-title mt-3">{{ langs.product.cart }}</h4>
    <h6 class="card-subtitle text-muted">{{ langs.product.cart_desc }}</h6>
    <div class="row mt-2">
        <div class="col-4">
            <label class="form-label">{{ langs.product.min_qty }}</label>
            <input class="form-control form-control-sm" type="number" min="1" step="1" v-model="pageAdd.minQty" placeholder="e.g : 1">
        </div>
        <div class="col-8 mb-2">
            <label class="form-label">&nbsp;</label>
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="pageAdd.layout.cartdesign" id="allow-empty-design">
                <label class="form-check-label" for="allow-empty-design">{{ langs.product.allow_add_empty_design_to_cart }}</label>
            </div>
        </div>
    </div>

    <h4 class="header-title mt-3">{{ langs.product.discount }}</h4>
    <h6 class="card-subtitle text-muted">{{ langs.product.discount_desc }}</h6>
    <div class="mt-2 d-flex justify-content-between align-items-center w-100">
        <select class="form-select form-select-sm w-auto" v-model="pageAdd.discount.type">
            <option v-for="(discount, did) in discounts" :key="did" :value="discount">{{ discount.toUpperCase() }}</option>
        </select>
        <button class="btn btn-sm btn-primary" @click="addDiscount">{{ langs.product.add_discount_qty }}</button>
    </div>

    <table class="mt-2 table table-striped">
        <thead>
            <tr>
                <th>{{ langs.product.quantity }}</th>
                <th>{{ langs.product.price }}</th>
                <th>{{ langs.product.action }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(discount, did) in pageAdd.discount.list" :key="did">
                <th>
                    <div class="input-group input-group-sm input-group-merge">
                        <input class="form-control" type="number" min="0" step="1" v-model="discount.qty" placeholder="e.g : 10">
                        <div class="input-group-text">{{ langs.product.qty }}</div>
                    </div>
                    <small class="pdapp-attr-name-desc text-muted">{{ langs.print.apply_from }} {{ discount.qty }} {{ langs.print.to }} {{ typeof pageAdd.discount.list[did+1] != 'undefined' ? pageAdd.discount.list[did+1].qty-1 : langs.print.max_stock }}</small>
                </th>
                <th>
                    <div class="input-group input-group-sm input-group-merge">
                        <div class="input-group-text" v-if="pageAdd.discount.type == 'fixed'">$</div>
                        <input class="form-control" type="number" min="0" step="0.1" v-model="discount.price" placeholder="e.g : 1">
                        <div class="input-group-text" v-if="pageAdd.discount.type == 'percent'">%</div>
                    </div>
                </th>
                <th>
                    <button class="btn btn-sm btn-danger" type="button" @click="pageAdd.discount.list.splice(did, 1)">
                        <i class="material-icons material-symbols-outlined">close</i>
                    </button>
                </th>
            </tr>
        </tbody>
    </table>
</div>