<?php
    if ( ! defined( 'ABSPATH' ) ) exit;
    
    if($OptinBox=='yes'){ ?>
        <div class="optinbox" id="show_optinbox_<?php echo $player_id; ?>" style="display:none;">
            <div class="optinmain">
                <div id="optin_head"><center><?php echo $OptinHeadline;?></center></div>
                <div id="optin_text"><center><?php echo $OptinText;?></center></div>
                <center>
                    <div class="textfield">
                        <div class="inputfield"><input type="text" placeholder="Name" name="username" id="username_<?php echo $player_id; ?>"></div>
                        <div class="inputfield"><input type="text" placeholder="Email" name="useremail" id="useremail_<?php echo $player_id; ?>"></div>
                        <input type="hidden" name="ip_address" id="ip_address_<?php echo $player_id; ?>" value="">
                        <input type="hidden" name="datetime" id="datetime_<?php echo $player_id; ?>" value="<?php echo date("Y-m-d h:i:s"); ?>">
                        <div>
                            <a id="optinsubmit" class="optin_submit_<?php echo $player_id; ?>"><?php echo $OptinSubmitText;?></a>
                            <?php
                                if($OptinAllowSkip=='yes'){ ?>
                                    <a id="optinskip" href="javascript:optinHideIt_<?php echo $player_id;?>()">Skip</a>
                                <?php }
                            ?>
                        </div>
                    </div>
                </center>
            </div>
            <script language="javascript">
                function testAttribute(element, attribute){
                    var test = document.createElement(element);
                    if (attribute in test)
                        return true;
                    else
                        return false;
                }
                if (!testAttribute("input", "placeholder")){
                    window.onload = function(){
                        var demo1 = document.getElementById('username_<?php echo $player_id; ?>');
                        var text_content = "Name";
                        demo1.style.color = "gray";
                        demo1.value = text_content;
                        demo1.onfocus = function(){
                            if (this.style.color == "gray"){
                                this.value = ""; this.style.color = "black";
                            }
                        }
                        demo1.onblur = function(){
                            if (this.value == ""){
                                this.style.color = "gray"; this.value = text_content;
                            }
                        }
                        var demo2 = document.getElementById('useremail_<?php echo $player_id; ?>');
                        var text_content2 = "Email";
                        demo2.style.color = "gray";
                        demo2.value = text_content2;
                        demo2.onfocus = function() {
                            if (this.style.color == "gray"){
                                this.value = ""; this.style.color = "black";
                            }
                        }
                        demo2.onblur = function(){
                            if(this.value == ""){
                                this.style.color = "gray"; this.value = text_content2;
                            }
                        }
                    }
                }
               jQuery(document).ready(function($){

                    fetch('https://api.ipify.org?format=json')
                        .then(response => response.json())
                        .then(data => {
                            $("#ip_address_<?php echo $player_id; ?>").val(data.ip);
                        })
                        .catch(error => {
                            console.log(error)
                        });

                    $(".optin_submit_<?php echo $player_id; ?>").click(function(){
                        function validation(){
                            var mailformat = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                            var username        = $("#username_<?php echo $player_id; ?>").val();
                            var useremail       = $("#useremail_<?php echo $player_id; ?>").val();
                            if(!username && !useremail){alert('Name and Email are Required.');
                                return false;
                            }else if(!username){alert('Name is Required.');
                                return false;
                            }else if(!useremail){alert('Email is Required.');
                                return false;
                            }else if(useremail){
                                if(!useremail.match(mailformat)){
                                    alert('Email is Invalid.');
                                    return false;
                                }else if(useremail.match(mailformat) && username){
                                    return true;
                                }
                            }
                        }
                        if(validation()){
                            $("#username_<?php echo $player_id; ?>").prop('disabled', true);
                            $("#useremail_<?php echo $player_id; ?>").prop('disabled', true);
                            $("#ip_address_<?php echo $player_id; ?>").prop('disabled', true);
                            $("#datetime_<?php echo $player_id; ?>").prop('disabled', true);
                            var username        = $("#username_<?php echo $player_id; ?>").val();
                            var useremail       = $("#useremail_<?php echo $player_id; ?>").val();
                            var ip_address      = $("#ip_address_<?php echo $player_id; ?>").val();
                            var datetime        = $("#datetime_<?php echo $player_id; ?>").val();
                            var videoid         = '<?php echo $vid; ?>';
                            jQuery('#mv_player_loader<?php echo $player_id; ?>').show();
                            data = {
                                'action': 'mvp_optin_action',
                                'username' : username,
                                'useremail' : useremail,
                                'ip_address' : ip_address,
                                'datetime' : datetime,
                                'videoid' : videoid
                            };
                            jQuery.ajax({
                                type: "POST",
                                url : ajaxurl,
                                data: data,
                            })
                            .done(function( msg ) {
                                console.log('if msg'+msg);
                                $("#username_<?php echo $player_id; ?>").prop('disabled', false);
                                $("#useremail_<?php echo $player_id; ?>").prop('disabled', false);
                                $("#ip_address_<?php echo $player_id; ?>").prop('disabled', false);
                                $("#datetime_<?php echo $player_id; ?>").prop('disabled', false);
                                jQuery('#mv_player_loader<?php echo $player_id; ?>').hide();
                                alert('<?php echo $ThankyouMessage;?>');
                                <?php echo 'optinHideIt_'.$player_id.'();'; ?>
                            })
                            .fail(function (error) {
                                console.log("error");
                                alert(error);
                                $("#username_<?php echo $player_id; ?>").prop('disabled', false);
                                $("#useremail_<?php echo $player_id; ?>").prop('disabled', false);
                                $("#ip_address_<?php echo $player_id; ?>").prop('disabled', false);
                                $("#datetime_<?php echo $player_id; ?>").prop('disabled', false);
                            })
                        }
                    });
                });
            </script>
        </div>
    <?php }
?>