<?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 gap-2 overflow-y-auto overflow-x-hidden p-1">
    <div class="pdapp-cart-items w-100 d-flex flex-column gap-1" v-if="productCart.items.length">
        <div class="pdapp-cart-item d-flex align-items-center w-100" v-for="(cart, cid) in productCart.items" :key="cid" :class="0 < cid ? 'border-top pt-1' : ''">
            <div class="d-flex flex-column gap-1">
                <template v-if="cart.thumb[0] != ''">
                    <a class="pdapp-cart-thumbnail d-block pdapp-w70 me-2" target="_blank" v-for="(thum, tid) in cart.thumb" href="thum" :key="tid">
                        <img class="img-thumbnail pdapp-w70 bg-light" :src="thum" alt="Cart Item"/>
                    </a>
                </template>
            </div>

            <div class="pdapp-cart-options d-flex flex-column gap-1 flex-fill">
                <div class="d-block" v-for="(option, oid) in cart.options" :key="oid">{{ option }}</div>
                <div class="d-block" v-if="productCart.team.items.length == 0">
                    <span>
                        <template v-if="cart.sizes.length == 1">{{ langs.topbar.quantity }}</template>
                        <template v-else>{{ langs.topbar.sizes }}</template>: </span>
                    <span v-if="cart.sizes.length == 1">{{ cart.sizes[0].value }}</span>
                    <span v-if="1 < cart.sizes.length" v-for="(size, sid) in cart.sizes" :key="sid">{{ size.title }}-{{ size.value }}<template v-if="sid < cart.sizes.length-1">, </template></span>
                </div>
            </div>

            <div class="pdapp-cart-action d-flex flex-column align-items-end gap-1 pdapp-w30" v-if="productCart.team.items.length == 0">
                <button type="button" class="btn btn-sm btn-info tooltip-left rounded-pill p-0 pdapp-w25 pdapp-h25" :data-tooltip="langs.topbar.edit_var" @click="editCart(cart)">
                    <i class="material-icons material-symbols-outlined">edit</i>
                </button>
                <button type="button" class="btn btn-sm btn-danger tooltip-left rounded-pill p-0 pdapp-w25 pdapp-h25" :data-tooltip="langs.topbar.remove_from_list" @click="removeCart(cid)">
                    <i class="material-icons material-symbols-outlined">delete</i>
                </button>
            </div>
        </div>
    </div>

    <button v-if="productCart.team.items.length == 0" class="btn btn-primary btn-cart" @click="loadCartSize">{{ langs.topbar.add_more_other_variants }}</button>
    <div class="pdapp-cart-teams d-flex flex-column gap-1" v-if="productCart.team.items.length != 0">
        <div class="pdapp-cart-team d-flex gap-2 w-100 align-items-center justify-content-between py-1 bg-light">
            <h5 class="header-title fs-6 m-0 p-0 flex-fill">{{ langs.topbar.name_number }}</h5>
            <h5 class="header-title fs-6 m-0 p-0 pdapp-w80 text-center me-1" v-if="1 < cartSize.length">{{ langs.topbar.size }}</h5>
            <h5 class="header-title fs-6 m-0 p-0">{{ langs.topbar.quantity }}</h5>
        </div>
        <div class="pdapp-cart-team d-flex gap-2 w-100 justify-content-between align-items-center" v-for="(team, tid) in productCart.team.items" :key="tid">
            <div class="flex-fill d-flex flex-column gap-1 pdapp-w100">
                <h5 class="header-title fs-6 m-0 p-0 pdapp-caption pdapp-w120 text-start" v-if="team.name != undefined">{{ team.name }}</h5>
                <h5 class="header-title fs-6 m-0 p-0 pdapp-caption pdapp-w120 text-start" v-if="team.number != undefined">{{ team.number }}</h5>
            </div>
            <select v-if="1 < cartTeamSize[tid].length" class="form-select form-select-sm flex-fill" v-model="team.size.size">
                <optgroup :label="langs.topbar.instock">
                    <template v-for="(size, sid) in cartTeamSize[tid]">
                        <option v-if="0 < size.stock" :key="sid" :value="sid">{{ size.title }}<template v-if="size.price != 0">({{ size.price }})</template></small></option>
                    </template>
                </optgroup>
                <optgroup :label="langs.topbar.outofstock">
                    <template v-for="(size, sid) in cartTeamSize[tid]">
                        <option v-if="size.stock == 0" :key="sid" :value="sid" :disabled="size.stock == 0">{{ size.title }}<template v-if="size.price != 0">({{ size.price }})</template></small></option>
                    </template>
                </optgroup>
            </select>
            <input type="number" step="1" min="0" :max="cartTeamSize[tid][team.size.size].stock" class="form-control form-control-sm flex-fill pe-0" :disabled="cartTeamSize[tid][team.size.size].stock == 0" v-model="team.size.qty">
        </div>
    </div>

    <div class="form-group">
        <label class="form-label fs-5">{{ langs.topbar.your_note }}</label>
        <textarea rows="2" class="form-control form-control-sm" :placeholder="langs.topbar.your_note" v-model="productCart.note"></textarea>
    </div>
</div>