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

<style>
    body{
        background-color:#F4F4F4;
    }
    .edit-theme-btn{
       background-color:white;
    }
    .edit-theme-btn:hover{
        color:white;
        box-shadow: 0 4px 30px rgba(0,0,0,0.2);
        background-color:#0F191E;
        opacity:100%;
        border-radius:20px;
    }
    .add-new-btn:hover{
        opacity:0.8;
        color:white;
    }
    .innerTheme{
        width:100%;
        scale:0.85;
    }
    .help_and_support:hover{
        scale:1.2;
        opacity:0.8;
        -webkit-transform:rotate(10deg);
    }

    @media (max-width: 1876px) {
        .innerTheme{
            scale:0.8;
            margin-top:-1vw;
           width:200%;
        }
    }
    @media (max-width: 1802px) {
        .innerTheme{
            scale:0.75;   
        }
    }
    @media (max-width: 1712px) {
        .innerTheme{
            scale:0.7;
        }
    }
    @media (max-width: 1614px) {
        .innerTheme{
            scale:0.65;
        }
    }
    @media (max-width: 1478px) {
        .innerTheme{
            scale:0.60;
        }
    }
    @media (max-width: 1353px) {
        .innerTheme{
            scale:0.55;
        }
    }
    @media (max-width: 1236px) {
        .innerTheme{
            scale:0.50;
        }
    }
    @media (max-width: 1140px) {
        .innerTheme{
            scale:0.45;
        }
    }
    @media (max-width: 1050px) {
        .innerTheme{
            scale:0.4;
        }
    }
    @media (max-width: 1050px) {
        .innerTheme{
            scale:0.4;
        }
    }
    @media (max-width: 942px) {
        .innerTheme{
            scale:0.4;
        }
    }
    @media (max-width: 920px) {
        .innerTheme{
            scale:0.35;
        }
    }

    ::-webkit-scrollbar {
        width: 0.5vw;
    }

    /* Track */
    ::-webkit-scrollbar-track {
    background: #f1f1f1; 
    }
 
    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: #888; 
    border:none;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
    background: #555; 
    }
</style>

<!--Edit author info-->
<div style="width:100%;background-color:#F4F4F4;">
    <div class="all-themes-pannel" style="display:flex;justify-content:center;width:100%;flex-direction:column;align-items:center;padding-top:2vw;">
        <div style="position:relative;display:flex;width:78vw;background-color:white;box-shadow: 0 4px 30px rgba(0,0,0,0.1);padding:1vw;border-radius:3vw;padding-left:2vw;display:flex;align-items:center;">
            <?php  echo '<img  style="width:4vw;height:4vw;" src='.plugins_url(). "/starboxnew/view/assets/img/logo.png".' alt="">';?>
            <div style="margin-left:0.5vw;">
                <div style="font-size:1.2vw;font-weight:500;">Starbox</div>
                <div style="font-size:0.9vw;font-weight:500;color:#fbcc34;margin-top:-.3vw;">Dare to stand out.</div>
            </div>

            <div id="add_auth_btn" class="add-new-btn" style="position:absolute;right:4vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);border:none;background-color:#fbcc34;font-weight:700;border-radius:3vw;font-size:1.1vw;width:7.5vw;height:2.3vw;padding:1.2vw;display:flex;align-items: center;justify-content:center;cursor:pointer;"><?php echo esc_html__("Add New", 'squirrly-seo'); ?></div>
        </div>

        <div style="display:flex;flex-wrap:wrap;gap:3vw;margin-top:2vw;width:80vw;margin-left:2vw;padding-bottom:2vw;">
            <?php  $users = get_users( array( 'role__not_in' => array( 'subscriber' ),'meta_key'=>'strb_user_theme')) ;
            foreach ( $users as $user ) {    
                $STB_user_data = new STRB_Models_ThemeUserData();
                $STB_user_data->loadThemeDataByID($user->ID);   
            
                $theme= $STB_user_data->getData('user_theme');  
                $img = $STB_user_data->getData('background_img');
                if($STB_user_data->getData('background_img')!=null){

                echo'<div class="" style="display:flex;flex-direction:column;width:24vw;border-radius:1vw;height:32vw;position:relative;background-color:white;box-shadow: 0 4px 30px rgba(0,0,0,0.1);b;">
                        <div style="width:100%;height:28vw;overflow-y:scroll;">
                            <div class="innerTheme" style="height:100%;width:100%;display:flex;justify-content:center;">                      
                                '.STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->getThemeViewImg($user->ID,$theme,$img,TRUE).'       
                            </div>
                        </div>   

                        <div style="width:100%;height:2vw;display:flex;gap:2vw;position:absolute;bottom:1vw;justify-content:center;">
                            <button   value="'.$user->ID.'" class="edit-author-info-btn action-btn edit-theme-btn" style="height:2vw;font-size:1vw;font-weight:700;border:none;width:7vw;text-align:center;cursor:pointer;" >Edit Author</button>      
                            <input type="hidden" class="theme_val_db" value="'.$theme.'" name="'.$img.'"/>
                            <button  value="'.$user->ID.'" class="edit_theme_info action-btn edit-theme-btn" style="font-weight:700;border:none;height:2vw;font-size:1vw;width:7vw;text-align:center;cursor:pointer;">Edit Theme</button>
                            
                            <button  style="height:2vw;font-size:1.4vw;border:none;background-color:white;cursor:pointer;" class="delete_theme action-btn" value="'.$user->ID.'">
                                <i style="" class="fa-sharp fa-solid fa-trash"></i>
                            </button>
                        </div> 
                    </div>';}}?>    
        </div>
    </div>
    
    <?php $view->show_view('Blocks/UserData'); ?>
    <div class="add-author"></div>
        <div class="edit-theme-options" style="display:none;position:absolute;top:0px;margin:0;height:100vh;width:100%;background-color:rgba(0,0,0,0.7);">
            <?php  $view->show_view('Blocks/EditTheme');?>
            <?php  $view->show_view('Blocks/SelectTheme');?>
        </div>
    <div class="select-themes"></div>
</div>    
    
<?php wp_enqueue_media();?>

<script>
    (function ($){
        $(".edit_theme_info").click((event) => { 
            $("body").css("height", "100%");
            $("body").css("overflow", "hidden");
            $("html").animate({ scrollTop: 0 }, "slow");
        });

        $(".edit-author-info-btn").click((event) => { 
            $("body").css("height", "100vw");
            $("body").css("overflow", "hidden");
            $("html").animate({ scrollTop: 0 }, "slow");
        });

        $(".add-new-btn").click((event) => { 
            $("body").css("height", "100vw");
            $("body").css("overflow", "hidden");
            $("html").animate({ scrollTop: 0 }, "slow");
        });

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

