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

if (!defined('ABSPATH'))
{
    exit;
}
?>

<div class="modal fade show" role="dialog" style="display: block;" v-if="modal.show && modal.type == 'verifycode'">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ langs.setting.verify_purchased_code }}</h4>
            </div>
            <div class="modal-body">
                <label class="form-label">{{ langs.setting.purchased_code }}</label>
                <input type="text" class="form-control" :class="{'is-invalid':modal.error != '', 'is-valid':modal.checked == true && pdappPurchasedCode != ''}" v-model="modal.purchased" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
                <div class="invalid-feedback" v-if="modal.error != ''">{{ modal.error }}</div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" @click="modal.show = false" v-if="pdappPurchasedCode != ''">{{ langs.close }}</button>
                <button type="button" class="btn btn-primary" :disabled="modal.purchased == ''" @click="verifyPurchased">
                    <span v-if="modal.verifing">
                        <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                        {{ langs.setting.verifing }}...
                    </span>
                    <span v-else>{{ langs.setting.verify }}</span>
                </button>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show" @click="modal.show = pdappPurchasedCode != '' ? true : false"></div>
</div>

<div class="modal fade show" role="dialog" style="display: block;" v-if="modal.show && modal.type == 'verifyemail'">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ langs.setting.verify_email }}</h4>
            </div>
            <div class="modal-body">
                <label class="form-label">{{ langs.setting.email_address }}</label>
                <input type="text" class="form-control" :class="modal.error != '' ? 'is-invalid' : ''" v-model="modal.email" placeholder="e.g : name@example.com">
                <div class="invalid-feedback" v-if="modal.error != ''">{{ modal.error }}</div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" :disabled="modal.email == ''" @click="verifyEmail">
                    <span v-if="modal.verifing">
                        <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                        {{ langs.setting.verifing }}...
                    </span>
                    <span v-else>{{ langs.setting.verify }}</span>
                </button>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show"></div>
</div>

<div class="modal fade show" role="dialog" style="display: block;" v-if="modal.show && modal.type == 'confirmemail'">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-body text-center">
                <h4 class="mb-1 fs-4 text-primary mt-3">{{ langs.setting.confirm_email_title }}</h4>
                <span class="help-block mt-0 fs-3"><small>{{ langs.setting.confirm_email_desc }} <span class="text-primary">{{ modal.email }}</span></small></span>
                
                <div class="my-3 w-100 text-end">
                    <label class="form-label w-100 text-start">{{ langs.setting.enter_code }} <span class="text-danger">*</span></label>
                    <input class="form-control" :class="confirmEmail.error != '' ? 'is-invalid' : ''" type="number" step="1" min="000000" max="999999" placeholder="e.g : 012345" @input="codeValidate" v-model="confirmEmail.code">
                    <div class="invalid-feedback text-start float-start w-auto" v-if="confirmEmail.error != ''">{{ confirmEmail.error }}</div>
                    <span class="help-block mt-0 mb-3 float-end" v-if="confirmEmail.timeLess > 0"><small>{{ langs.setting.code_expire_in }} <span :class="confirmEmail.timeLess > 900 ? 'text-success' : 'text-warning'">{{ timeDown }}</span>sec</small></span>
                </div>
                
                <div class="w-100 d-flex gap-2 justify-content-end mb-3">
                    <div class="d-flex gap-2 align-items-center">
                        <a class="text-link d-flex align-items-center text-decoration-none" href="javascript:void(0);" @click="refreshCode()" v-if="confirmEmail.refresh"><span class="material-symbols-outlined">refresh</span>{{ langs.setting.resend_code }}</a>
                        <button class="btn btn-primary px-3" type="button" :class="confirmEmail.code.toString().length != 6 ? 'disabled' : ''" :disabled="confirmEmail.code.toString().length != 6 ? true : false" @click="confirmEmailCode()">
                            <template v-if="confirmEmail.verifing"><span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> {{ langs.setting.verifing }}...</template>
                            <template v-else>{{ langs.setting.verify }}</template>
                        </button>
                    </div>
                </div>
                <span class="help-block text-warning py-3"><small>{{ langs.setting.confirm_email_spam_desc }}</small></span>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show"></div>
</div>