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

    <div class="edit-meta-data edit-main-pannel" style="width:66vw;padding-bottom:7vw;">
    <div class="exit-btn" style="position:absolute;top:2vw;right:3.2vw;font-size:2vw;color:white;font-weight:400;cursor:pointer;width:2.5vw;height:2.5vw;display:flex;align-items:center;justify-content:center;border-radius:0.5vw;padding-bottom:0.5vw;">x</div>
        <div>
            <div style="display:flex;margin-left:20px;margin-top:1vw">
                <?php echo'
                    <img style="height:5vw;width:5vw;border-radius:0.5vw;" src="https://storage.googleapis.com/next_level_marketing/Next%20Level%20Marketing%20Logo.png" />';
                ?>
                <div style="display:flex;flex-direction:column;width:38vw;margin-left:1vw;margin-top:0.5vw;">
                    <div style="font-weight:700;font-size:1.1vw;color:black;">Meta settings</div>
                    <div style="font-size:1vw;font-weight:500;line-height:1.2vw;">Edit and save post metas and auhor.</div>
                </div>
            </div>

            <div class="input-id" id="<?php echo $POST_ID; ?>" ></div>
                <?php $postData = get_post($POST_ID); ?>
                    
                <div style="margin-top:5px;margin-left:1vw;">
                    <div style="width:61.5vw;border-top:1px solid white;position:relative;">
                            <div style="display:flex;align-items:center;justify-content:center;height:3vw;margin-top:1vw;">
                                <div style="font-size:0.9vw;width:8.5vw;font-weight:500;">Title</div>
                                <?php  echo '<div style="display:flex;align-items:center;">
                                                <input class="edit-metas title'.$POST_ID.'" id="title'.$POST_ID.'" type:text ;placeholder="Pattern:{title} {page}" value="'.$postData->post_title.'" />
                                            </div> 
                                            <div style="display:flex;align-items:center;width:4vw;position:relative;border-bottom: 2px solid white;margin-left:6.5vw;display:flex;font-size:1vw;align-items:center;justify-content:center;"><div id="title-length'.$POST_ID.'">0</div>/75</div>
                                ';?>
                            </div>

                            <div style="display:flex;align-items:center;justify-content:center;height:3vw;">
                                <div style="font-size:0.9vw;width:8.5vw;font-weight:500;">Meta Title</div>
                                <?php  echo '<div style="display:flex;align-items:center;">                                    
                                                <input class="edit-metas meta-title'.$POST_ID.'" id="meta-title-chars'.$POST_ID.'" type:text; placeholder="Meta Title" value="'.get_post_meta( $POST_ID, '_sq_title',true).'"/>
                                            </div>
                                            <div style="width:4vw;position:relative;border-bottom: 2px solid white;margin-left:6.5vw;display:flex;font-size:1vw;justify-content:center;"><div id="meta-title-length'.$POST_ID.'">0</div>/75</div>
                                ';?>
                            </div>
                           
                            <div style="display:flex;align-items:center;justify-content:center;">
                                <div style="font-size:0.9vw;width:8.5vw;font-weight:500;">Meta Description</div>
                                <?php  echo '<div style="display:flex;align-items:center;">
                                                <textarea class="edit-metas description'.$POST_ID.'" id="description'.$POST_ID.'" type:text; placeholder="Description" value="'.get_post_meta( $POST_ID, '_sq_description',true).'">'.get_post_meta( $POST_ID, '_sq_description',true).'</textarea>
                                            </div>
                                            <div style="width:4vw;position:relative;border-bottom: 2px solid white;margin-left:6.5vw;display:flex;display:flex;font-size:1vw;justify-content:center;"><div id="meta-description-chars'.$POST_ID.'" class="title-chars">0</div>/150</div>
                                ';?>
                            </div>

                            <div style="display:flex;align-items:center;justify-content:center;height:3vw;">
                                <div style="font-size:0.9vw;width:8.5vw;font-weight:500;">Keywords</div>
                                <?php echo'<div style="display:flex;align-items:center;">
                                                <input class="edit-metas keywords'.$POST_ID .'" id="keyword'.$POST_ID .'" type:text placeholder="+Add keyword" value="'.get_post_meta( $POST_ID, '_sq_keywords',true) .'"/>
                                            </div>
                                            <div style="width:4vw;position:relative;margin-left:6.5vw;display:flex;display:flex;font-size:1vw;"></div>'
                                ;?>
                            </div>

                            <?php  $auth_id = $postData->post_author;
                                   $current_user = get_user_by( 'id', $auth_id);
                                   $category_detail=get_the_category($POST_ID);?>
                            
                             <!--Dropdown for auth and post details-->
                            <div style="display:flex;gap:12vw;">
                                <div class="user-data">
                                    <div style="margin-top:3vw;font-weight:700;font-size:1.1vw;"><?php esc_html("Change author")?></div>
                                    
                                    <div class="select-btn open-user-list user-hover" style="position:relative;box-shadow: 0 10px 30px rgba(0,0,0, 0.2);width:20vw;height:2.7vw;font-size:1.1vw;font-weight:700;background-color:rgba(150,150,150,0.9);margin-top:10px;border-radius:14px;padding-left:15px;display:flex;align-items:center;">
                                        <div class="btn-text" id="btn-text"><?php
                                            echo'
                                            <div class="edit-current-user" style="display:flex;align-items:center;width:17vw;height:100%;cursor:pointer;">
                                                <img style="height:2vw;width:2vww;border-radius:50%;" src="'.get_avatar_url( $current_user->ID ).'" />
                                                <div style="color:black;font-weight:700;font-size:1vw;margin-left:10px;display:column;">
                                                    '. esc_html( $current_user->display_name ) .'
                                                    <div style="font-size:0.7vw;margin-top:-5px;">'. esc_html( $current_user->roles[0] ) .'</div>
                                                </div>
                                            </div>
                                            <input class="post-autor'.$POST_ID.'" type="hidden" value='.$current_user->ID.' />';?>
                                        </div>
                                        <i style="position:absolute;right:10px;font-weight:700;font-size:1.4vw;" class="bx bx-chevron-up"></i>
                                    </div>
                             
                                    <div class="user-pannel"  style="background:transparent;box-shadow: 0 10px 30px rgba(0,0,0, 0.2);cursor:pointer;">
                                        <?php $users=get_users( array('role__in' => array('author','editor','administrator') ) );
                                            foreach ( $users as $user ) {
                                                echo '<div class="edit-select-user user-hover">
                                                        <input type="hidden" value="'.$POST_ID.'"/>
                                                        <li value="'.$user->ID.'" style="list-style:none;padding-left:15px;display:flex;padding:5px;display:flex;align-items:center;height:100%;">
                                                            <img style="height:2vw;width:2vww;border-radius:50%;" src="'.get_avatar_url( $user->ID ).'" />
                                                            <div style="color:black;font-weight:600;margin-left:10px;display:column;">
                                                                '. esc_html( $user->display_name) .'
                                                                <div style="font-size:0.7vw;margin-top:-5px;">'. esc_html( $user->roles[0] ) .'</div>
                                                            </div>
                                                        </li>
                                                </div>';}?>  
                                    </div>
                                </div>

                                <div>
                                    <div class="post-data">
                                        <div style="margin-top:3vw;font-weight:700;font-size:1.1vw;"><?php esc_html("Change post type and category")?></div>
                                        
                                        <div class="select-btn open-user-list user-hover" style="display:flex;align-items:center;position:relative;box-shadow: 0 10px 30px rgba(0,0,0, 0.2);width:20vw;min-height:2.7vw;font-size:1.1vw;font-weight:700;background-color:rgba(150,150,150,0.9);margin-top:10px;border-radius:14px;padding-left:15px;display:flex;">
                                            <div class="btn-text" id="btn-text"><?php
                                                echo'
                                                <div style="display:flex;align-items:center;width:17vw;height:100%;flex-direction:column;cursor:pointer;">
                                                    <div class="edit-current-post-type'.$POST_ID.'" style="font-size:1vw;width:17vw;color:black;font-weight:700; text-transform: capitalize;cursor:pointer;">
                                                    '. esc_html( get_post_type($POST_ID) ) .'
                                                    </div>
                                                    ';
                                                    if($category_detail!=null){
                                                        echo'<div style="width:17vw;display:flex;font-weight:700;gap:0.5vw;font-size:0.7vw;">';
                                                        foreach($category_detail as $cd){
                                                            echo '<div class="category'.$POST_ID.'" style="">'.$cd->cat_name.'.</div>';
                                                        }
                                                        echo'</div>';
                                                    }?>  
                                                </div>
                                            </div>
                                            <i style="position:absolute;right:10px;font-weight:700;font-size:1.4vw;" class="bx bx-chevron-up"></i>
                                        </div>
                                   
                                        <div class="post-pannel" id="<?php echo $POST_ID;?>" style="z-index:2;">
                                            <?php  $types=get_post_types(); 
                                                foreach ( $types as $type=>$key) {  
                                                    echo '<div class="edit-select-type user-hover" id='.$POST_ID.'> 
                                                            '.$type.'   
                                                        </div>';}?>  
                                        </div>
                                        <?php echo'<div class="post-pannel channel'.$POST_ID.'" style="z-index:2;display:none;">';?>
                                                <?php  $args = array(
                                                                'type' => 'page',
                                                                'taxonomy' => 'category');
                                                        $categories = get_categories($args);
                                                       
                                                        foreach($categories as $cat){
                                                            echo '<div class="edit-select-cat user-hover" id='.$POST_ID.'>
                                                                    '.$cat->slug.
                                                                '</div>';}?>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        <div class="button-holder" style="min-width:18vw;height:4vw;position:absolute;bottom:-6vw;px;z-index:1;display:flex;gap:1vw;padding:0.5vw;border-radius:30px;background-color:black;display:flex;align-items:center; box-shadow: 0 10px 30px rgba(0,0,0, 0.2);">
                            <div class="settings-btn save-post-data" id='<?php echo $POST_ID;?>' style="cursor:pointer;">Save</div>
                            <?php $scheduled=get_post_meta( $POST_ID, 'schedule_post', true );
                                  if($scheduled!="true")    
                                    echo "<div class='settings-btn aprove-post' style='background-color:lime;cursor:pointer;'>Aprove</div>";?>
                            <div class="settings-btn" style="position:relative;left:1vw;margin-left:2vw;background-color:red;color:white;cursor:pointer;">Delete</div>
                            <div type="hidden" id="<?php echo $POST_ID; ?>" class="get-id"></div>
                        </div>
                           
                </div>
        </div>
    </div>


    <style>
    .user-hover:hover{
        opacity:0.8;
        background-color:rgba(255,255,255,0.7);
        border-radius:10px;
    }
    .user-pannel{
        border-radius:14px;
        width:20vw;
        padding:10px;
        margin-top:15px;
        display:none;
        overflow-y:scroll;
        height:10vw;
    }
    .user-pannel-open{
        display:block;
    }
    .post-pannel{
        background:transparent;
        box-shadow: 0 10px 30px rgba(0,0,0, 0.2);
        border-radius:14px;
        width:20vw;
        padding:10px;
        margin-top:15px;
        display:none;
        overflow-y:scroll;
        height:7vw;
    }
    .post-pannel-open{
        display:block;
        z-index:6;
    }

    .bx-chevron-down{
        color:#50E0FE;
        transform:rotate(180deg);
    }
    .edit-main-pannel{
        margin-top:10px;
        background-color:rgba(196,196,196,0.6);
        display:flex;
        overflow:hidden;
        border-radius:15px;
        border:2px solid white;
        padding-bottom:20px;
    }
    .edit-metas{
        border: 0;
        border-bottom: 2px solid #9b9b9b;
        outline: 0;
        opacity:1;
        font-size: 0.8vw;
        color: black;
        font-weight:700;
        background: transparent;
        width:42vw;
    }
    .edit-metas::placeholder{
        color:rgba(0,0,0,0.6);
    }
    .settings-btn{
        width:8vw;
        height:2.5vw;
        font-size:0.9vw;
        background-color:#50E0FE;
        color:black;
        border-radius:30px;
        font-weight:700;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .settings-btn:hover{
        opacity:0.9;
    }
    .edit-select-type{
        font-weight:700;list-style:none;padding-left:15px;display:flex;padding:5px;
    }
    .edit-select-cat{
        font-weight:700;list-style:none;padding-left:15px;display:flex;padding:5px;
    }
    .exit-btn{
        background-color:grey;
    }
    .exit-btn:hover{
        background-color:red;
    }
    </style>

<script>
     (function ($){ 
        $(".exit-btn").click((e)=>{
            $(e.currentTarget).parent('.edit-meta-data').css("display","none");
        });

    
        // let id=$(".input-id").attr("id");
        // $(".meta-checkbox").click((e)=>{  id=($(e.currentTarget).attr("id"));});
        //  $("#meta-chars" + id).text(
        //     id
        //  );
    }(jQuery));
</script>