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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="pdapp-cart-variants d-flex flex-column align-items-start gap-1 overflow-y-auto overflow-x-hidden p-1">
    <div class="pdapp-cart-group w-100 d-flex flex-column gap-1" v-if="1 < productDataPX.colors.length || (productDataPX.colors.length == 1 && (productDataPX.colors[0].type == 'picker' || 1 < productDataPX.colors[0].values.length))">
        <h4 class="header-title fs-5 m-0 p-0">{{ langs.topbar.colors }}</h4>
        <div class="pdapp-hide-palette w-100 d-flex flex-column gap-1" v-for="(color, cid) in productDataPX.colors" :key="cid">
            <h5 class="header-title fs-6 m-0 p-0 d-flex justify-content-between align-items-center">{{ color.title }} <span class="d-flex align-items-center" v-if="color.type == 'picker'">#<input :id="'pdapp-product-colorinput-'+ color.id" style="width: 100px;" type="text" class="form-control form-control-sm" :value="hexColor(color.active)" @input="updateProductColor($event.target.value, color.id, cid)"></span></h5>
            <input v-if="color.type == 'picker'" type="text" :id="'pdapp-product-colorpicker-'+ color.id" class="form-control" v-model="color.active" @input="changeProductColor(color.id, color.active, cid)">
            
            <div class="pdapp-cart-color d-flex w-100 gap-2 flex-wrap" v-else>
                <button type="button" v-for="(val, k) in color.values" :key="k" class="btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border" :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 class="pdapp-cart-group w-100 d-flex flex-column gap-1 mt-2" v-for="(extra, eid) in product.extras" :key="eid">
        <h4 class="header-title fs-5 m-0 p-0">{{ extra.title }}</h4>
        <div class="pdapp-extras-attrs w-100 d-flex flex-column gap-1">
            <div class="form-check d-flex align-items-center" v-for="(value, vid) in extra.values" :key="vid">
                <input type="radio" :id="'pdapp-extra-field'+ eid +'-'+vid" v-model="extra.active" :value="vid" class="form-check-input">
                <label class="form-check-label fs-6 mb-0" :for="'pdapp-extra-field'+ eid +'-'+vid">{{ value }}</label>
            </div>
        </div>
    </div>
    <div class="pdapp-cart-group w-100 d-flex flex-column gap-1 pt-1 mt-1">
        <h4 class="header-title fs-5 m-0 p-0" v-if="1 < cartSize.length">{{ langs.topbar.quantity }}</h4>
        <template v-if="productCart.team.items.length">
            <div class="pdapp-cart-teams w-100 d-flex align-items-center justify-content-between gap-1">
                <h5 class="header-title fs-6 m-0 p-0">{{ langs.topbar.qty_for_a_member }}</h5>
                <input type="number" step="1" min="0" :max="cartTeamStock" :disabled="cartTeamStock == 0" class="form-control form-control-sm pe-0 pdapp-w70" v-model="productCart.team.qty">
            </div>
            <div class="pdapp-cart-teams w-100 d-flex align-items-center justify-content-between gap-1">
                <h5 class="header-title fs-6 m-0 p-0">{{ langs.topbar.team_members }}</h5>
                <h5 class="header-title fs-6 m-0 p-0">{{ productCart.team.items.length }}</h5>
            </div>
            <div class="pdapp-cart-teams w-100 d-flex align-items-center justify-content-between gap-1 mt-1">
                <h5 class="header-title fs-6 m-0 p-0">{{ langs.topbar.total_qty }}</h5>
                <h5 class="header-title fs-6 m-0 p-0">{{ productCart.team.items.length * productCart.team.qty }}</h5>
            </div>
        </template>
        <div class="pdapp-cart-sizes d-flex align-items-center justify-content-between gap-2 w-100 flex-wrap" v-else>
            <template v-if="cartSize.length == 1">
                <h4 class="header-title fs-5 m-0 p-0">{{ langs.topbar.quantity }}</h4>
                <input type="number" step="1" min="0" :max="cartSize[0].stock" class="form-control tooltip-top pdapp-w80 pe-0" :data-tooltip="cartSize[0].stock ? langs.topbar.outofstock : langs.topbar.available+ ': '+ cartSize[0].stock" :disabled="cartSize[0].stock == 0" v-model="cartSize[0].value">
            </template>
            <template v-else>
                <div v-for="(size, pid) in cartSize" :key="pid" class="pdapp-product-size d-flex flex-column align-items-center gap-1 tooltip-top" :data-tooltip="size.stock == 0 ? langs.topbar.outofstock : langs.topbar.available+ ': '+ size.stock">
                    <h5 class="header-title fs-6 m-0 p-0">{{ size.title }} <small v-if="size.price != 0">(+{{ size.price }})</small></h5>
                    <input type="number" step="1" min="0" :max="size.stock" class="form-control pe-0" :disabled="size.stock == 0" v-model="size.value">
                </div>
            </template>
        </div>
    </div>
    <mark class="d-flex align-items-center gap-1 text-white bg-info w-100 py-0" v-if="productCart.help != ''"><i class="material-icons material-symbols-outlined fs-5">help</i> {{ productCart.help }}</mark>
</div>