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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="modal.type == 'confirmMember'">
    <div class="modal-body">
        <div class="d-flex gap-2">
            <div class="w-100">
                <label class="form-label">{{ langs.options.member_qty }}</label>
                <select class="form-select" v-model="modal.member">
                    <option value="0" :selected="modal.member == 0">{{ langs.options.select_member_qty }}</option>
                    <option v-for="n in 15" :key="n" :value="n" :selected="modal.member == n">{{ n }}</option>
                    <option :value="30 < modal.member ? modal.member : 31" :selected="30 < modal.member">{{ langs.options.custom_member_qty }}</option>
                </select>
            </div>
            <div class="pdapp-w80" v-if="30 < modal.member">
                <label class="form-label">&nbsp;</label>
                <input type="number" min="30" step="1" class="form-control pe-0" v-model="modal.member" :placeholder="langs.options.member_qty_desc">
            </div>
        </div>
    </div>
    <div class="modal-footer pb-1 pt-1">
        <button type="button" class="btn btn-light" @click="modal.show = false">{{ langs.options.cancel }}</button>
        <button type="button" class="btn btn-primary" :disabled="modal.member == 0" @click="setMembers">{{ langs.topbar.continue }}</button>
    </div>
</template>

<template v-if="modal.type == 'confirmTeam'">
    <div class="modal-body">
        <div class="table-responsive">
            <table class="table table-sm table-borderless mb-0">
                <thead class="table-light">
                    <tr>
                        <th width="50px" class="align-middle text-center">#</th>
                        <th v-if="modal.data[0].name != undefined">{{ langs.options.name }}</th>
                        <th v-if="modal.data[0].number != undefined">{{ langs.options.number }}</th>
                        <th width="80px" class="align-middle text-center">{{ langs.options.action }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(team, tid) in modal.data" :key="tid">
                        <td class="align-middle text-center">{{ tid+1 }}</td>
                        <td v-if="team.name != undefined">
                            <input type="text" class="form-control form-control-sm" v-model="team.name" :tabindex="tid+1" :placeholder="langs.options.name_desc">
                        </td>
                        <td v-if="team.number != undefined">
                            <input type="text" class="form-control form-control-sm" v-model="team.number" :tabindex="modal.data.length+tid+1" :placeholder="langs.options.member_desc">
                        </td>
                        <td class="align-middle text-center">
                            <button type="button" class="btn btn-sm m-auto btn-danger tooltip-left" :data-tooltip="langs.options.remove_member" @click="removeMember(tid)">
                                <i class="material-icons material-symbols-outlined">delete</i>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button type="button" class="btn btn-sm btn-primary waves-effect m-auto mt-1" @click="modal.member++, setMembers()">
            <i class="material-icons material-symbols-outlined">person_add</i>
            {{ langs.options.add_more_member }}
        </button>
    </div>

    <div class="modal-footer pb-1 pt-1 justify-content-between">
        <div class="d-flex">
            <button type="button" class="btn btn-danger" @click="resetMember" v-if="listMenus.team.options.values.teams.length">
                <i class="material-icons material-symbols-outlined">restart_alt</i>
                {{ langs.reset }}
            </button>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-light" @click="modal.show = false">{{ langs.options.cancel }}</button>
            <button type="button" class="btn btn-primary" :disabled="checkApplyTeam" @click="applyTeams">{{ langs.apply }}</button>
        </div>
    </div>
</template>