<style>
/*.otp_input,.otp-text,.send_otp .fa-spinner,#subscribe_form input[type=submit]{display:none;}*/
</style>
<button class="popupbtn " style="display:none;">popup button</button>
<div class="outerPopup">
<!-- popup data -->
<div class="popup-overlay-bg">
    <div class="detail-popup">
    <div class="heading-popup"> Be the First to Know
        <span class="close-popup">Close</span>
    </div>
    <div class="container-popup">
        <div class="home-contact-tabs">
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                <div role="form" class="wpcf7 form" id="subscribe_form" lang="en-US" dir="ltr">
                    <div class="screen-reader-response"></div>
                    <?php echo do_shortcode( '[contact-form-7 id="1662" title="Subscribe"]' ); ?>
                </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
<script>
    var siteUrl = '<?php  echo get_site_url(); ?>';
    (function($){
        $(document).ready(function () {
            $('.popupbtn').on('click', function () {
                $('body').addClass('scrollNone');
                $('.outerPopup').show()
            });
            $('.close-popup').on('click', function () {
                $('body').removeClass('scrollNone');
                $(this).parents('.outerPopup').hide()
            });
           
            $("form").on('click',".send_otp",function(e){
                e.preventDefault();
                var frm = $(this).closest('form');
                var email = frm.find('.semail input[type=email]').val();
                var name = frm.find('.sname input[type=text]').val();
                $('.otp_input input[name=otp]').val('');
                $.ajax ({
                    url: siteUrl+'/wp-admin/admin-ajax.php',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        action: 'marcellus_send_otp',
                        email: email,
                        name: name,
                        },
                    beforeSend: function(){
                        $('.send_otp').find('.fa-spinner').show();
                        /* $(".cs-selection").html("");
                        $('#popupModal').modal('show'); */
                    },    
                    success: function (resp) {
                        $('.send_otp').find('.fa-spinner').hide();
                        if (resp.success) {
                            $('.otp_btn').hide();
                            /* $('.sotp').show(); */
                            $('.otp_input').show();
                            $('.otp-text').show();
                        } else {
                                alert(resp.data);
                                //alert('Please check your email and name.');    
                                $('.otp_btn').show();
                                /* $('.sotp').hide(); */
                                $('.otp-text').hide();
                                //alert ('Error: ' + resp) ;
                            }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        // this error case means that the ajax call, itself, failed, e.g., a syntax error
                        // in your_function()
                        alert ('Request failed: ' + thrownError.message) ;
                        },
                    }) ;
                }) ;
            
            $("form").on('keyup',"#otp",function(e){
                e.preventDefault();
                var frm = $(this).closest('form');
                var email = frm.find('.semail input[type=email]').val();
                var otp = $(this).val();
                if(otp.length == 4) {
                    $.ajax ({
                        url: siteUrl+'/wp-admin/admin-ajax.php',
                        type: 'POST',
                        dataType: 'JSON',
                        data: {
                            action: 'marcellus_check_otp',
                            email: email,
                            otp: otp,
                            },
                        beforeSend: function(){
                            /* $(".cs-selection").html("");
                            $('#popupModal').modal('show'); */
                        },    
                        success: function (resp) {
                            if (resp.success) {
                                $('#subscribe_form input[type=submit]').show();
                            } else {
                                $('#subscribe_form input[type=submit]').hide();
                                alert(resp.data);
                                //alert('Please check your email and name.');    
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            // this error case means that the ajax call, itself, failed, e.g., a syntax error
                            // in your_function()
                            alert ('Request failed: ' + thrownError.message) ;
                            },
                        }) ;
                }
            });
        });
    })(jQuery);     
    /* document.addEventListener( 'wpcf7submit', function( event ) {
        if ( '1659' == event.detail.contactFormId ) {
            alert( "The contact form ID is 123." );
        }
    }, false ); */
</script>
   