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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="col-12">
    <div class="card pdapp-print-design-box">
        <div class="card-body">
            <div class="pdapp-view-template" v-if="pageAdd.data.prints == undefined || pageAdd.data.prints.length == 0">
                <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap">
                    <button type="button" class="btn btn-info waves-effect waves-light" v-for="nView in 12" @click="setCustomView(nView)">{{ nView }} {{  nView == 1 ? langs.print.side : langs.print.sides  }}</button>
                    <button type="button" class="btn btn-info waves-effect waves-light" @click="showCustomView">{{ langs.print.custom_more_sides }}</button>
                </div>
                <p class="sub-header mb-0 text-center pt-2">{{ langs.print.select_number_view_setup }}</p>
            </div>
            <template v-else>
                <div class="row justify-content-between mb-2">
                    <div class="col-auto">
                        <button type="button" class="btn btn-sm w-sm btn-info waves-effect" @click="addAttribute">{{ langs.print.add_print_attr }}</button>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-sm w-sm btn-primary waves-effect" @click="addQuantity">{{ langs.print.add_limit_quantity }}</button>
                    </div>
                </div>
                <ul class="nav nav-tabs nav-bordered nav-justified" role="tablist">
                    <li class="nav-item" role="presentation" v-for="(view, vid) in pageAdd.data.prints" :key="vid">
                        <a href="javascript:void(0);" class="nav-link position-relative pdapp-side-attr bg-light" :class="vid == pageAdd.active ? 'active z-1' : ''" role="tab" @click="pageAdd.active = vid">
                            {{ view.title }}
                            <i class="material-icons material-symbols-outlined pdapp-remove-btn" @click.stop.prevent="pageAdd.data.prints.splice(vid, 1); pageAdd.active==vid?pageAdd.active=0:''">close</i>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <span class="nav-link border-0 align-items-center justify-content-center d-flex" @click="addNewMoreView">
                            <button type="button" class="btn w-sm btn-primary waves-effect" style="padding: 4px;"><i class="material-icons material-symbols-outlined">add</i></button>
                        </span>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane p-0" role="tabpanel" v-for="(view, vid) in pageAdd.data.prints" :key="vid" :class="vid == pageAdd.active ? 'active show' : ''">
                        <div class="table-responsive mt-1">
                            <table class="table table-centered table-nowrap table-bordered table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-center" width="180">{{ langs.print.print_attr_qty }}</th>
                                        <th v-for="(qty, qid) in view.qtys" :key="qid">
                                            <div class="input-group input-group-sm input-group-merge">
                                                <input type="number" step="1" class="form-control" v-model="view.qtys[qid]" :placeholder="langs.print.print_qty_desc">
                                                <div class="input-group-text">{{ langs.print.qty }}</div>
                                            </div>
                                            <small class="pdapp-attr-name-desc text-muted">{{ langs.print.apply_from }} {{ qty }} {{ langs.print.to }} {{ typeof view.qtys[qid+1] != 'undefined' ? view.qtys[qid+1]-1 : langs.print.max_stock }}</small>
                                        </th>
                                        <th style="width: 82px;white-space: normal;text-align: center;">{{ langs.print.remove_row }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(attr, akey) in view.attrs" :key="akey">
                                        <th class="text-center table-light">
                                            {{ attr }}<small class="pdapp-attr-name-desc text-muted ms-1">{{ getTypeDesc(akey) }}</small>
                                            <template v-if="akey == 'per_colors'">
                                                <div class="d-flex gap-2 flex-wrap mt-2 w-100 justify-content-start align-items-center">
                                                    <span class="btn btn-sm waves-effect waves-light bg-info text-white position-relative" v-for="(val, vkid) in view.values[akey][0]" :key="vkid">
                                                        {{ vkid+1 }} {{ vkid == 0 ? langs.print.color : langs.print.colors }}
                                                        <i v-if="vkid != 0 && vkid == view.values[akey][0].length-1" class="material-icons material-symbols-outlined pdapp-remove-btn" @click.stop.prevent="removeAttrColor(vkid)">close</i>
                                                    </span>
                                                </div>
                                                <button @click="addMoreColor" type="button" class="btn mt-2 pt-0 pb-0 btn-sm ps-1 pe-1 w-sm btn-primary waves-effect">{{ langs.print.add_more_color }}</button>
                                            </template>
                                        </th>
                                        <td v-for="(qty, qid) in view.qtys" :key="qid">
                                            <div v-if="akey != 'per_colors'" class="input-group input-group-sm input-group-merge">
                                                <div class="input-group-text">$</div>
                                                <input type="number" step="0.1" class="form-control" v-model="view.values[akey][qid]" :placeholder="langs.print.print_qty_desc">
                                            </div>
                                            <template v-else v-for="(val, vkid) in view.values[akey][qid]">
                                                <div class="input-group input-group-sm input-group-merge" :key="vkid">
                                                    <div class="input-group-text">$</div>
                                                    <input type="number" step="0.1" class="form-control" v-model="view.values[akey][qid][vkid]" :placeholder="langs.print.print_qty_desc">
                                                </div>
                                                <small class="pdapp-attr-name-desc text-muted mb-1">{{ langs.print.apply_for }} {{ vkid+1 }} {{ vkid == 0 ? langs.print.color : langs.print.colors }}</small>
                                            </template>
                                        </td>
                                        <td class="text-center">
                                            <a href="javascript:void(0);" class="action-icon text-danger" @click="deleteAttr('attr', akey)">
                                                <i class="material-icons material-symbols-outlined">delete</i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-center table-light">{{ langs.print.remove_col }}</th>
                                        <td class="text-center" v-for="(qty, qid) in view.qtys" :key="qid">
                                            <a href="javascript:void(0);" class="action-icon text-danger" @click="deleteAttr('qty', qid)">
                                                <i class="material-icons material-symbols-outlined">delete</i>
                                            </a>
                                        </td>
                                        <td> </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>