<template>
    <div class="modal-backdrop" id="payment-modal-view">
        <div class="modal">
            <section class="modal-body" >
                <slot name="body">
                    <form @submit.prevent="paymentFormSubmit" autocomplete="off"
                          class="form-element was-validated form-element--login" method="post"
                          novalidate="novalidate">
                       <div class="row body" id="payment-modal">
                        <div class="center">

                            <div class="payment-container">
                                <div class="row">
                                        <div class="col-50 text" style="text-align: center;" v-if="message">
                                            <p style="color:red;text-align:center;margin-top: -20px">{{ message[0] }}</p>
                                        </div>
                                    <button type="button" class="close" style="width: 20px;height: 20px;"
                                            @click.prevent="closePaymentModal"> X
                                    </button>
                                </div>
                                <div class="row header-panel">
                                    <ScPartnerCzLogo/>
                                </div>
                                <div class="row">
                                   <p class="top-text">$24.97/mo Cancel Anytime</p>
                                </div>
                                <div class="row">
                                        <div class="col-50">
                                            <h3 class="text-center-sm" style="padding-bottom: 10px;">Billing Information</h3>
                                            <label for="fname" class="text-center-sm">Customer Information</label>
                                            <label for="fname"><i class="fa fa-user"></i> Full Name</label>
                                            <input
                                                type="text"
                                                placeholder="Full Name"
                                                name="firstname"
                                                :backend="errors.full_name"
                                                v-model="data.full_name"
                                                :rules="['required']"
                                                disabled
                                                :class="{'warning':errors.full_name}"
                                            />
<!--                                            <label  class="text-warning" v-text="errors.full_name"></label>-->
<!--                                            <ValidationError :backend="errors.full_name" :msg="v$.formData.full_name.$errors"/>-->
<!--                                            <input type="text" id="fname" name="firstname" placeholder="John M. Doe">-->
                                            <label for="email"><i class="fa fa-envelope"></i> Email</label>
                                            <input
                                                type="text"
                                                placeholder="john@example.com"
                                                name="email"
                                                :backend="errors.email"
                                                v-model="data.email"
                                                :rules="['required']"
                                                disabled
                                                :class="{'warning':errors.email}"
                                            />
                                            <div v-if="errors.email" class="invalid-feedback">
                                                {{errors.email[0]}}
                                            </div>

                                            <label for="city"><i class="fa fa-institution"></i> City</label>
                                            <input
                                                type="text"
                                                placeholder="New York"
                                                name="city"
                                                :backend="errors.city"
                                                v-model="data.city"
                                                :rules="['required']"
                                                disabled
                                                :class="{'warning':errors.city}"
                                            />
                                            <div class="row">
                                                <div class="col-50">
                                                    <label for="state">State</label>
                                                    <input
                                                        type="text"
                                                        placeholder="NY"
                                                        name="state"
                                                        :backend="errors.state"
                                                        v-model="data.state"
                                                        :rules="['required']"
                                                        disabled
                                                        :class="{'warning':errors.state}"
                                                    />

                                                    <!--                                                    <label  class="text-warning" v-text="errors.state"></label>-->
                                                    <!--                                                    <ValidationError :backend="errors.state" :msg="v$.formData.state.$errors"/>-->
                                                    <!--                                                    <input type="text" id="state" name="state" placeholder="NY">-->
                                                </div>
                                                <div class="col-50">
                                                    <label for="zip">Zip</label>
                                                    <input
                                                        type="text"
                                                        placeholder="10001"
                                                        name="zip_code"
                                                        :backend="errors.zip_code"
                                                        v-model="data.zip_code"
                                                        :rules="['required']"
                                                        disabled
                                                        :class="{'warning':errors.zip_code}"
                                                    />
                                                    <!--                                                    <ValidationError :backend="errors.state" :msg="v$.data.state.$errors"/>-->
                                                    <!--                                                    <input type="text" id="zip" name="zip" placeholder="10001">-->
                                                </div>
                                            </div>
<!--                                            <label  class="text-warning" v-text="errors.city"></label>-->
<!--                                            <ValidationError :backend="errors.city" :msg="v$.formData.city.$errors"/>-->
<!--                                            <input type="text" id="city" name="city" placeholder="New York">-->


                                        </div>

                                        <div class="col-50">
                                            <h3 class="text-center-sm" style="margin-bottom: 10px;">Payment</h3>
                                            <label for="fname" class="text-center-sm">Accepted Cards</label>
                                            <div class="text-center-sm" style="margin-bottom: 10px">
                                                <img :src="`${app_base_url}/img/card.png`"
                                                     alt="card" class="provider-logo" style="height: 40px">
                                            </div>
                                            <label for="ccnum">Credit card number</label>
                                            <input
                                                autocomplete="off"
                                                :class="{'warning':errors.card_number}"

                                                placeholder="e.g, 4111111111111111"
                                                type="text"
                                                v-model="data.card_number"
                                            />
<!--                                            <label  class="text-warning" v-text="errors.card_number"></label>-->
                                            <div class="row">
                                                <div class="col-50">
                                                    <label for="expyear">Expiry</label>
                                                    <input
                                                        autocomplete="off"
                                                        :class="{'warning':errors.expiry}"
                                                        placeholder="e.g, DD/YY"
                                                        type="text"
                                                        v-model="data.expiry"
                                                        @keyup.prevent="cardExpiryCompleted($event)"
                                                        :maxlength="5"
                                                    />
                                                </div>
                                                <div class="col-50">
                                                    <label for="cvv">CVV</label>
                                                    <input
                                                        autocomplete="off"
                                                        :class="{'warning':errors.cvv_no}"
                                                        placeholder="e.g, 352"
                                                        type="text"
                                                        v-model="data.cvv_no"
                                                    />

                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-50">
                                                    <label for="expmonth">Amount</label>
                                                    <input
                                                        autocomplete="off"
                                                        :class="{'warning':errors.amount}"
                                                        placeholder="amount"
                                                        type="text"
                                                        disabled
                                                        v-model="data.amount"
                                                    />
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-50">
                                                    <p class="aggrement">
                                                        <label class="terms-service-text">
                                                            <input v-model="data.is_authorized" type="checkbox" @change.prevent="checkTermsAndService($event)" />
                                                            Yes I have read the <a href="/terms-of-service" target="_blank"> <span v-if="reportProvider === '3'">SmartCredit</span> <span v-if="reportProvider === '1'">{{ company_Name }}</span> terms of services</a> for this purchase and I totally Agree and Authorize this Charge of ${{ data.amount }}
                                                        </label>
                                                    <span style="color:red;font-size: 12px" v-if="message">{{ message[1] }}</span>
                                                    </p>

                                                </div>
                                            </div>

                                        </div>

                                    </div>


                                <div class="row">
                                    <div class="col-50 text bottom-panel">
                                        <button  type="submit"  value="Pay" class="btn btn2" style="width:unset;">Pay</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-50">
                                        <div class="col-50 bottom-panel">
                                            <img :src="`${app_base_url}/img/sequrity.png`"
                                                 alt="security" class="provider-logo" style="height: 100px">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                       </div>
                    </form>
                </slot>
            </section>
        </div>
    </div>
</template>


<script>
import useVuelidate from '@vuelidate/core'
import {required, email, integer,minLength} from '@vuelidate/validators'
import router from "../../router";
import register from "../../Api/register";
import pkg from "../../helper/package";
import {
    getFormData,
    setCustomerToken,
    setFormData,
    setReferenceNumber,
    setStep,
    setTrackingToken,
    getLocalStorage,
    setLocalStorage,
    unsetLocalStorage
} from "../../helper";
import SmartCreditPkgView from "./SmartCreditPkgView.vue";
import ScPartnerCzLogo from "./sc_partner_cz_logo.vue";

import store from "../../store";
export default {
    components: {SmartCreditPkgView,ScPartnerCzLogo },
    name: 'PaymentModal.vue',
    setup() {
        return {v$: useVuelidate()}
    },
    props: {
        data: {
            type: Object,
            default:{},
        },
    },
    data() {
        return {
            formData: {
                full_name:"",
                first_name: "",
                last_name: "",
                email: "",
                password: "",
                street_no: "",
                street_name: "",
                city: "",
                ssn: "",
                state: "",
                zip_code: "",
                phone: "",
                full_ssn:"",
                package_id: 0,
                birth_date:"",
                amount:0,
                card_number:"",
                expiry:"",
                cvv_no:"",
                address:"",
                is_authorized:null,
                is_free:5
            },
            errors:{},
            message: [""],
            isButtonDisabled:false,
            disabled: 1,
            package: pkg,
            value: null,
            roleOptions:[],
            min:4,
            app_base_url: APP_URL,
            reportProvider: REPORT_PROVIDER,
            company_Name:COMPANY_NAME
        }
    },
    mounted() {
    },

    methods: {

        closePaymentModal(data){
            this.$emit('close',data);
        },
        async paymentFormSubmit() {
            this.formData = this.$props.data;
            this.v$.$validate();
            this.errors = {};
            this.formValidation();
            if(!this.v$.$invalid && this.formData.is_authorized) {
                setLocalStorage('formData', JSON.stringify(this.$props.data));
                const data = await register.customerCreateAndUpdate(this.$props.data);
                if (data.status_code == "100") {

                    if (this.reportProvider === '3') {

                        setTrackingToken(data.data.tracking_token);
                        setCustomerToken(data.data.customer_token);
                        setReferenceNumber(data.data.customer_token);
                        setReferenceNumber(data.data.questionAnswer.idVerificationCriteria.referenceNumber);
                        this.closePaymentModal(data.data.questionAnswer);

                    }else if(this.reportProvider === '1'){

                      unsetLocalStorage('formData');
                      setStep(6);
                      router.push({name: "success"});

                    }

                } else {
                    this.message[0] = data.message;
                    this.errors = data.data;
                    //this.closePaymentModal(true)
                    //this.$swal(data.message);
                }
            }
        },
        showModal() {
            this.isQuestionModalVisible = true;
        },
        cardExpiryCompleted(e){
            if(this.$props.data.expiry.length===2){
                this.$props.data.expiry+='/';
            }
        },
        formValidation(){
            for (let i in this.v$.$errors){
                let key = this.v$.$errors[i].$property;
                let msg = this.v$.$errors[i].$message

                if(key && msg){
                    this.errors[key] = msg;
                }
            }
            if(!this.formData.is_authorized)
            {
                this.message[1]= 'You have to agree the terms and privacy condition.';

            }
        },
        checkTermsAndService(e){
            if(e.target.checked){
                this.$props.data.is_authorized = e.target.checked;
                this.$props.data.is_free = 2;
                this.message[1]=null;
            }
            else {
                this.$props.data.is_authorized = null;
            }
        },
    },
    validations() {
        return {
            formData: {
                first_name: {required}, // Matches this.firstName
                last_name: {required},
                email: {required, email},
                password: {required},
                card_number: {required},
                street_no: {required},
                street_name: {required},
                city: {required},
                ssn: {required,minLength:minLength(4)},
                state: {required},
                zip_code: {required},
                phone: {required},
                amount: {required},
                full_ssn: {required,minLength:minLength(this.min)},
                birth_date: {required},
                expiry:{required},
                cvv_no:{required},
                address:{required},
                full_name:{required}

            }
        }
    },


}
</script>

<style>


#payment-modal .smart-credit-pkg .p-3 {
     padding: 0px !important;
 }
#payment-modal .smart-credit-pkg .p-2 {
     padding: 0px !important;
}
#payment-modal .terms-service-text{
    font-weight:bold;
    color:purple;
    font-size: 12px;
    margin-bottom: 5px;
    line-height: 1.5;
}
#payment-modal-view .warning{
    border: 1px solid red
}
#payment-modal-view .text-warning{
    color: red;
}

.aggrement p {
    margin: 20px;
    background-color: #eee;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.aggrement input {
    margin:0 0px 0 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.invalid-feedback {
    width: 100%;
    margin-top: -20px;
    font-size: .875em;
    color: #dc3545;
    margin-bottom: 10px;
}
</style>


