@extends('layouts.app')

@section('title', "The Wealth Finder")

@section('header_css')
<style>
.loadingImg {
    background-image: url(../images/loading-smll.gif);
    background-repeat: no-repeat;
    background-position: 98% 50%;
}
</style>
@stop

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-4">
            <div class="card">
                <h3 class="card-header text-center">Verify Email Address</h3>
                <div class="card-body">
                    @if ($errors->has('errormessage'))
                        <span class="text-danger">{{ $errors->first('errormessage') }}</span>
                    @endif

                    <form method="POST" action="{{ route('verify.email.otp') }}">
                        @csrf
                        <div class="form-group mb-3">
                            <input type="text" placeholder="Email" id="email" class="form-control" name="email" value="{{Session::get('user_email')}}" disabled />
                            @if ($errors->has('email'))
                            <span class="text-danger">{{ $errors->first('email') }}</span>
                            @endif
                        </div>

                        <div class="form-group mb-3">
                            <input id="GenerateOTP" class="form-control" name="emailotp" placeholder="OTP *" value="" />
                            <a href="#" onclick="sendLoginOtp();" class="">Generate OTP</a>
                            <!-- <small class="text-muted"> (OTP Will be Shared on Above Mentioned Email-id) </small> -->
                            @if ($errors->has('emailotp'))
                            <span class="text-danger">{{ $errors->first('emailotp') }}</span>
                            @endif
                        </div>

                        <div class="d-grid mx-auto">
                            <button type="submit" class="btn btn-dark btn-block">Verify Your Account</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('footer_scripts')
<script type="text/javascript">
$(document).ready(function () {


});

function sendLoginOtp(){
    Swal.fire({
        title: 'Do you want to send an OTP ?',
        showCancelButton: true,
        confirmButtonText: 'Yes',
    }).then((result) => {
        if (result.isConfirmed) {

            $("#GenerateOTP").addClass('loadingImg');

            $.ajax({
                method: 'post',
                dataType: 'json',
                url: '{{url("/generate-twf-otp")}}',
                data: {
                    fieldname : "twf_otp",
                    '_token' : "{{ csrf_token() }}"
                },
                beforeSend: function() {
                    $("#GenerateOTP").addClass('loadingImg');
                },
                success: function( response ) {

                    if(response){
                        Swal.fire({
                            icon: 'success',
                            //title: 'JGU OTP : '+response.otp_password,
                            title: 'The Wealth Finder OTP',
                            text: 'OTP has been sent in your mentioned email id.'
                        });
                    }else{
                        Swal.fire({
                            icon: 'error',
                            //title: 'JGU OTP : '+response.otp_password,
                            title: 'The Wealth Finder OTP',
                            text: 'Generating OTP unsuccessful, Please contact to Aministrator!! '
                        });
                    }

                },
                error: function(xhr, status, error) {

                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'There is a server error, Please contact to Aministrator!!'
                    });
                },
                complete: function() {
                    $("#GenerateOTP").removeClass('loadingImg');
                }

            });
        }
    });
}
</script>
@stop