<?php defined('ABSPATH') || die('Cheatin\' uh?'); ?>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.google.com/specimen/Open+Sans" rel="stylesheet">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>   

<script>
    (function ($){
      
        $(".quit-edit-user-data").click((event) => {
            location.reload();
            $(".edit-user-data").css("display", "none");
            $("body").css("overflow-y", "scroll");
            
         });
    }(jQuery));
</script>

<div class="edit-user-data" style="position:absolute;top:0px;margin:0;height:100vh;width:100%;background-color:rgba(0,0,0,0.8);">
    
    <div style="scale:0.95;width:80%;margin-left:10vw;margin-top:1vw;background-color:rgba(255,255,255,1);backdrop-filter: blur(13.5px);
    -webkit-backdrop-filter: blur(18px);border-radius:1vw;padding:1vw;">
        <?php   $user_id=$STB_USER_DATA;
                $STB_user_data = new STRB_Models_ThemeUserData();
                $STB_user_data ->loadUserDataByID($user_id);
        ?>
        <form class="edit-user-data-form" method="POST" enctype="multipart/form-data">
            <?php STRB_Classes_Helpers_Tools::setNonce('strb_edit_user_info', 'strb_nonce'); ?>
            <input type="hidden" name="action" value="strb_edit_user_info"/>
            
            <div class="author">
                <div style="display:flex;gap:1vw;">
                    <?php if($STB_user_data->getData("img")!=="empty"){
                        echo '<img style="width:3vw;height:3vw;border-radius:50%;"  src="'.$STB_user_data->getData("img") .'" />
                    ';} ?>
                    <div class="btn-text" style="font-size:1.4vw;capitalize;font-weight:700;margin-top:0.5vw;">
                        <?php echo get_user_meta($user_id,"first_name",true);?><span style="margin-left:5px;text-transform:capitalize;"><?php echo get_user_meta($user_id,"last_name",true); ?>
                    </div>  
                </div>
                <input type="hidden" value="<?php echo $user_id; ?>"  name="userid"/>
            </div>

            <div class="quit-edit-user-data" style="position:absolute;right:1.5vw;top:1.2vw;width:2.2vw;color:white;font-weight:700;border-radius:50%;height:2.2vw;background-color:black;display:flex;align-items:center;justify-content:center;cursor:pointer;">X</div>
            <!--Personal details-->

            <div class="user-data" style="margin-top:1vw;display:flex;width:100%;gap:2vw;gap:2vw;padding:1vw;border-radius:2vw;">
                    <div style="display:flex;width:60%;flex-wrap:wrap;gap:1vw;">      
                        <div class="input-fields">
                            <label style="font-size:1vw;font-weight:500;">First Name:</label>
                            <input style="" class='firstName' value="<?php echo get_user_meta($user_id,"first_name",true);?>" type="text" name ='iname' placeholder="Enter your first name" > 
                        </div>

                        <div class="input-fields">
                            <label style="font-size:1vw;font-weight:500;">Last Name:</label>
                            <input class='lastName' style="" value="<?php echo get_user_meta($user_id,"last_name",true);?>" type="text" name ='ilname' placeholder="Enter your last name">
                        </div>

                        <div class="input-fields" style="">
                            <label style="font-size:1vw;font-weight:500;">Job Title Slug:</label>
                            <input type="text" style="" value="<?php echo $STB_user_data->getData("companyslug");?>" name ='icompanyslug'  placeholder="I am a (Default)">
                        </div>

                        <div class="input-fields">
                            <label style="font-size:1vw;font-weight:500;">Job Title:</label>
                            <input type="text" style="" value="<?php echo $STB_user_data->getData("job");?>" name ='ijob' placeholder="Enter your job title">
                        </div>

                        <div class="input-fields" style="position:relative;">
                            <label style="font-size:1vw;font-weight:500;">(New!) QR Code:</label>
                            <div style="position:relative;">
                                <svg xmlns="http://www.w3.org/2000/svg" style="z-index:2;width:2vw;height:2vw;" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: rotate(180deg);msFilter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);"><path d="M3 11h8V3H3zm2-6h4v4H5zM3 21h8v-8H3zm2-6h4v4H5zm8-12v8h8V3zm6 6h-4V5h4zm-5.99 4h2v2h-2zm2 2h2v2h-2zm-2 2h2v2h-2zm4 0h2v2h-2zm2 2h2v2h-2zm-4 0h2v2h-2zm2-6h2v2h-2zm2 2h2v2h-2z"></path></svg>
                                <input type="text" style="padding-left:1vw;width:24.3vw;" value="<?php echo $STB_user_data->getData("qrcode"); ?>" name ='iqrcode' placeholder="Enter QR code url">
                            </div>
                        </div>
                    </div>

                    <div style="width:30%;">
                        <div class="input-fields" style="">
                            <label style="font-size:1vw;font-weight:500;">Author BIO:</label>
                            <textarea class='userBio' style="" name ="ibio"><?php echo get_user_meta($user_id,"description",true);?></textarea>
                        </div>
                    </div>
            </div>
              
            <!--Social-->
            <div class="user-data" style="margin-top:1vw;display:flex;width:100%;gap:1vw;padding:1vw;border-radius:2vw;">
                <div style="display:flex;flex-wrap:wrap;width:83%;gap:1vw;">
                    <div class="input-fields" style="height:2vw;position:relative;display:flex;justify-content:center;">
                        <div style="position:absolute;height:100%;font-size:1.5vw;display:flex;align-items:center;padding-left:0.5vw;">
                            <i class="bx bxl-facebook-circle"></i>
                        </div>
                        <input type="text" style="margin-top:0px;" value="<?php echo $STB_user_data->getData("facebook");?>" name ='ifacebook' placeholder="<?php echo esc_html__("Facebook", 'squirrly-seo'); ?>" >
                    </div>

                    <div class="input-fields" style="height:2vw;position:relative;display:flex;justify-content:center;">
                        <div style="position:absolute;height:100%;font-size:1.5vw;display:flex;align-items:center;padding-left:0.5vw;">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width:1.5vw;height:1.5vw; border-radius:2px;"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
                        </div>   
                        <input type="text" style="" name ='itwitter' placeholder="<?php echo esc_html__("X-Twitter", 'squirrly-seo'); ?>" value="">
                    </div>
               
                    <div class="input-fields" style="height:2vw;position:relative;display:flex;justify-content:center;">
                        <div style="position:absolute;height:100%;font-size:1.5vw;display:flex;align-items:center;padding-left:0.5vw;">
                            <i class="bx bxl-github" style=""></i>
                        </div>   
                        <input type="text" style="" value="<?php echo $STB_user_data->getData("git");?>" name ='igit' placeholder="<?php echo esc_html__("Github", 'squirrly-seo'); ?>" >
                    </div>

                    <div class="input-fields" style="height:2vw;position:relative;display:flex;justify-content:center;">
                        <div style="position:absolute;height:100%;font-size:1.5vw;display:flex;align-items:center;padding-left:0.5vw;">
                            <i class="bx bxl-linkedin-square" style=""></i>
                        </div>   
                        <input type="text" style="" name ='ilinked' value="<?php echo $STB_user_data->getData("linked");?>" placeholder="<?php echo esc_html__("LinkedIn", 'squirrly-seo'); ?>" value="">
                    </div>

                    <div class="input-fields" style="height:2vw;position:relative;display:flex;justify-content:center;">
                        <div style="position:absolute;height:100%;font-size:1.5vw;display:flex;align-items:center;padding-left:0.5vw;">
                            <i class="bx bxl-instagram-alt" style=""></i>
                        </div>   
                        <input type="text" style="" value="<?php echo $STB_user_data->getData("insta");?>" name ='iinsta' placeholder="<?php echo esc_html__("Instagram", 'squirrly-seo'); ?>" >
                    </div>
                    
                    <div class="input-fields" style="height:2vw;position:relative;display:flex;justify-content:center;">
                        <div style="position:absolute;height:100%;font-size:1.5vw;display:flex;align-items:center;padding-left:0.5vw;">
                            <i class="bx bxl-youtube" style=""></i>
                        </div>   
                        <input type="text" style="" name ='iyoutube' value="<?php echo $STB_user_data->getData("youtube");?>" placeholder="<?php echo esc_html__("YouTube", 'squirrly-seo'); ?>">
                    </div>
             
                    <div class="input-fields" style="height:2vw;position:relative;display:flex;justify-content:center;">
                        <div style="position:absolute;height:100%;font-size:1.5vw;display:flex;align-items:center;padding-left:0.5vw;">
                            <i class="bx bxl-pinterest" style=""></i>
                        </div>   
                        <input type="text" style="" value="<?php echo $STB_user_data->getData("pin");?>" name ='ipin' placeholder="<?php echo esc_html__("Pinterest", 'squirrly-seo'); ?>" >
                    </div>

                    <div class="input-fields" style="height:2vw;position:relative;display:flex;justify-content:center;">
                        <div style="position:absolute;height:100%;font-size:1.5vw;display:flex;align-items:center;padding-left:0.5vw;">
                            <i class="bx bxl-gmail" style=""></i>
                        </div>   
                        <input type="text" style="" value="<?php echo $STB_user_data->getData("email");?>" name ='iemail' placeholder="<?php echo esc_html__("Gmail", 'squirrly-seo'); ?>" >
                    </div>   

                    <div class="input-fields" style="height:2vw;position:relative;display:flex;justify-content:center;">
                        <div style="position:absolute;height:100%;font-size:1.5vw;display:flex;align-items:center;padding-left:0.5vw;">
                            <i class="bx bxl-tiktok" style="color:black;"></i>
                        </div>   
                        <input type="text" style="" value="<?php echo $STB_user_data->getData("tok");?>" name ='itok' placeholder="<?php echo esc_html__("TikTok", 'squirrly-seo'); ?>" >
                    </div>      
                </div>  
                <!--no follow/no oppener/no referrer/-->  
                <div style="display:flex;flex-direction:column;">
                    <div style="display:flex;gap:0.5vw;height:2vw;">
                        <label style="font-size:1vw;font-weight:500;margin-top:0.5vw;" class="toggler-wrapper style-1" >         
                            <input type="hidden" name="strb_option" value="0"/>
                            <input type="checkbox" id="strb_option" name="extra_field_check" class="strb-switch"  />
                            <div class="toggler-slider" style="width:4vw;height:1.5vw;" >
                                <div class="toggler-knob" style="height:1.2vw;width:1.2vw;top:0.3vw;margin-left:0.3vw;"></div>
                            </div>
                        </label>
                        <label style="font-size:1vw;font-weight:500;margin-left:1vw;" >nofollow</label>
                    </div>

                    <div style="display:flex;gap:0.5vw;height:2vw;">
                        <label style="font-size:1vw;font-weight:500;margin-top:0.5vw;" class="toggler-wrapper style-1">
                        <input type="hidden" name="strb_option" value="0"/>
                        <input type="checkbox" id="strb_option" name="extra_field_check" class="strb-switch" />
                            <div class="toggler-slider" style="width:4vw;height:1.5vw;">
                                <div class="toggler-knob" style="height:1.2vw;width:1.2vw;top:0.3vw;margin-left:0.3vw;"></div>
                            </div>
                        </label>
                        <label style="font-size:1vw;font-weight:500;margin-left:1vw;" >noopener</label>
                    </div>     

                    <div style="display:flex;gap:0.5vw;height:2vw;">
                        <label style="font-size:1vw;font-weight:500;margin-top:0.5vw;" class="toggler-wrapper style-1">
                            <input type="hidden" name="strb_option" value="0"/>
                            <input type="checkbox" id="strb_option" name="extra_field_check" class="strb-switch" />
                            <div class="toggler-slider" style="width:4vw;height:1.5vw;">
                                <div class="toggler-knob" style="height:1.2vw;width:1.2vw;top:0.3vw;margin-left:0.3vw;"></div>
                            </div>
                        </label>
                        <label style="font-size:1vw;font-weight:500;margin-left:1vw;">noreferrer</label>
                    </div>
                </div>     
            </div>
          
            <!--img select-->
            <div style="display:flex;gap:0.5vw;margin-top:0.5vw;">
                <div>
                    <input type="hidden" value="<?php echo $STB_user_data->getData("img"); ?>" class="user-image" name="image"/>
                </div>
                <div class="show-image" src="<?php $STB_user_data->getData("img"); ?>" style="height:5vw;width:5vw;object-fit:cover;border-radius:0px;  border: 2px solid rgb(215, 215, 228);border-bottom:none;">
                    <img class='strb-backgournd' style='width:100%;height:100%;object-fit:contain;' src="<?php echo $STB_user_data->getData("img"); ?>" />
                </div>
                <input class="img-select" type="button" style="height:2vw;width:10vw;border-radius:2vw;margin-top:3vw;border:none;font-weight:500;background-color:#F3F6F8;font-size:1vw;cursor:pointer;display:flex;align-items:center;" value="Load Image" id="btn" >
            </div>
            
            <div style="width:100%;display:flex;justify-content:flex-end;">
                <?php wp_enqueue_media();?>
                <input type="button" style="margin-top:-2vw;width:10vw;height:2vw;font-size:1vw;font-weight:500;display:flex;align-items:center;border:none;border-radius:2vw;background-color:#fbcc34;cursor:pointer;"  value="Save" class="edit-user-data-btn"/>
            </div>
        </form>    
        </br>           
    </div>             
</div>

<style>
    .input-fields{
        display:flex;
        flex-direction:column;
        margin-top:0px;
    }
    
    .input-fields input{
        outline: 0;
        border: 0;
        border-radius:2vw;
        border-radius:1vw;
        padding:0vw;
        margin:0px;
        padding-left:2vw;
        border: 2px solid rgba(0,0,0, 0.4);
        background: 0;
        height:2vw;
        width:13vw;
        font-size:1vw;
    }
    .input-fields label{
        font-size:0.9vw;
        font-weight:500;
    }
    .input-fields textarea{
       width:100%;
       height:14vw;
       outline: 0;
       border: 0;
       border-radius:1vw;
       border: 2px solid rgba(0,0,0, 0.4);
       background: 0;
       font-size:1vw;
   }
   .social-icons{
        display:flex;
        text-align:center;
        align-items:center;
        justify-content:center;
        background-color:red;
        width:2vw;
        height:2vw;
        font-size:1.2vw;
   }

   .user-data:hover{
        box-shadow: 0 4px 30px rgba(0,0,0,0.1);
   }

   .toggler-wrapper{
        width:3.5vw;
        height:1.5vw;
   }

   .toggler-wrapper.style-1 .toggler-knob{
        width:1.5vw;
        height:1.5vw;
        top:0.18vw;
   }

   .toggler-wrapper.style-1 input[type="checkbox"]:checked+.toggler-slider .toggler-knob {
        left: calc(55%);
    }
  
</style>