<?php defined('ABSPATH') || die('Cheatin\' uh?');?>

<div class="frontend-wrapper">
    <div class="modern-theme-wrapper-m8">
        <div class="wrapper-color-m8  business-edit-clr edit-clr" style="background-color:<?php $STB_user_theme->echoData("pnl_color")?>;">
            <div class="content-pannel-m8">
                <div class="content-top-m8">                  
                        <div style="display:flex;align-items:center;flex-direction:column;">
                            <div class="autor-name-m8 name-options" style="color:<?php $STB_user_theme->echoData("name-color")?>;font-size:<?php $STB_user_theme->echoData("name-size")?>px;">
                                <?php echo get_user_meta($user_id,"first_name",true);?>
                                <?php echo get_user_meta($user_id,"last_name",true); ?>
                            </div>

                            <div class="autor-subtitle-m8 subtitle-options" style="color:<?php $STB_user_theme->echoData("subtitle-color")?>;font-size:<?php $STB_user_theme->echoData("subtitle-size")?>px;">
                                <?php $STB_user_data->echoData("companyslug")?>
                                <?php $STB_user_data->echoData("job"); ?>
                            </div>
                        </div> 
                        <?php if($STB_user_data->getData("qrcode")!=null){
                                echo '<div class="qrcode-m8" style="overflow:hidden;width:100px;height:100px;margin-top:20px;"></div>';} 
                                echo '<input class="qr_urlm8" type="hidden" value="'. $STB_user_data->getData("qrcode").'"/>'
                        ;?>   
                    
                </div>
            </div>
        </div>
    </div>
</div>

<style>
     .modern-theme-wrapper-m8{
        width:300px;
        height:250px;
        box-shadow: 0 4px 30px rgba(0,0,0,0.2);
        border-radius:15px;
        position:relative;
    }
    .wrapper-color-m8{
        height:250px;
        border-radius:15px;
        background-color:white;
    }
    .content-pannel-m8{
        width:100%;
        padding:15px;
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }
    .content-top-m8{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }
    .autor-name-m8{
        font-size:22px;
        font-weight:500;
        color:black; 
        margin-left:7px;
    }
    .autor-subtitle-m8{
        font-weight:500;
        font-size:17px;
        margin-left:7px;
        opacity:0.7;
        margin-top:-5px;
        color:black; 
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" integrity="sha512-NFUcDlm4V+a2sjPX7gREIXgCSFja9cHtKPOL1zj6QhnE0vcY695MODehqkaGYTLyL2wxe/wtr4Z49SvqXq12UQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    (function ($){

        let qr_urlm8=$('.qr_urlm8').val();
        if(qr_urlm8!=''){
            $('.qrcode-m8').qrcode({
                text : qr_urlm8,
                height:100,
                width:100,
            });	
        }   
    }(jQuery));
</script>
