<?php 
/**
 * v2.1.0
 * shortcode: Course Grid
 * hint: use of $wpdb and tables - none
 * update: none (next update move assets to another common location)
 * status: completed
 */


function proqyz_shortcode_proqyz_grid_course( $atts = [], $content = null, $tag = '' ) {

    if( 1 == 1 ) {
        global $wp;

        $order_by           = 'alphabetical';
        $course_category    = 'all';
        
        $order_by = (isset($_GET['order_by']) && !empty($_GET['order_by']))? $_GET['order_by'] : 'alphabetical';
        $course_category = (isset($_GET['course_category']) && !empty($_GET['course_category']))? $_GET['course_category'] : 'all';

        
        if($order_by == "alphabetical"){
            $order_by = (object) [
                "title" => 1
            ];
        } else if($order_by == "recent"){
            $order_by = (object) [
                "creation" => -1
            ];
        } else {
            $order_by[] = (object) [
                "title" => 1
            ];
        }

        
        if($course_category == "all") {
            $where = (object) [];
        } else {
            $where = (object) [
                "category" => $course_category
            ];
        }


        
		
        // load header
        $atts = array_change_key_case((array)$atts, CASE_LOWER);
        # override default attributes with user attributes
        $wporg_atts = shortcode_atts(
            array(
                'course_category'       => 'all',
                'handler'               => ''
            ) , $atts, $tag
        );

        $shortcode_url = home_url(add_query_arg(array(),$wp->request));
        $where_params = [
            "where" => (object) $where,
            "order" => (array) $order_by,
            "grant_type" => "request",
            "permission" => "courses-grid"
        ];

        $courses_list = proqyz_get_courses_by_filters($where_params);

        $plugin_dir = plugin_dir_url(ST_PROQYZ_PLUGIN_FILE);
        wp_enqueue_script("sp-proqyz-courses-grid", $plugin_dir . 'includes/templates/shortcodes/course/default/dist/js/proqyz-course-grid.js', array( 'jquery' ), '1.0.0', false ); 
        // Define the variable you want to pass to your script
        // Use wp_localize_script to pass the variable
        wp_localize_script('sp-proqyz-courses-grid', 'proqyz_data', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
        ));

        ob_start(); ?>
        <form action="" class="ilms-courses">
            <div class="flex align-items-center ilms-courses-header" style="display:none;">
                <h4 class="ilms-title">Courses</h4>
                <div id="courses-dir-search" class="ilms-dir-search" role="search">
                    <div id="search-members-form" class="ilms-search-form">
                        <label for="bs_members_search" class="bp-screen-reader-text">Search</label>
                        <input type="text" name="search" id="bs_members_search" value="" placeholder="Search Courses...">
                    </div>
                </div>
            </div>
            <nav class="courses-type-navs main-navs ilms-navs dir-navs ilms-subnavs"style="display:none;">
                <ul class="component-navigation courses-nav">
                    <li id="courses-all" class="selected">
                        <a href="#course">
                            <div class="ilms-component-nav-item-point">All Courses</div>
                            <span class="count">10</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <div class="ilms-secondary-header" style="">
                <div class="ilms-bb-secondary-list-tabs flex align-items-center" id="subnav" aria-label="Members directory secondary navigation" role="navigation">
                    <input type="hidden" id="course-order" name="order" value="desc">
                    <input type="hidden" id="post-per-page" name="posts_per_page" value="12">
                    <input type="hidden" id="current-page" name="current_page" value="0">
                    <div class="ilms-courses-filters flex push-right">
                        <div class="ilms-select-wrap active" style="margin-bottom: 5px;">
                            <select class="ilms-courses-filter" id="ilms-courses-order-by" name="orderby">
                                <option value="alphabetical" <?php echo ($order_by == 'alphabetical')? 'selected' : ''; ?>>Alphabetical</option>
                                <option value="recent" <?php echo ($order_by == 'recent')? 'selected' : ''; ?>>Newly Created</option>
                            </select>
                        </div>
                        <div class="ilms-select-wrap active" style="margin-bottom: 5px;">
                            <select class="ilms-courses-filter" id="ilms-course-category" name="filter-categories">
                                <option value="all" <?php echo ($course_category == 'all')? 'selected' : ''; ?>>All Categories</option>
                                <option value="academic" <?php echo ($course_category == 'academic')? 'selected' : ''; ?>>Academic</option>
                                <option value="general" <?php echo ($course_category == 'general')? 'selected' : ''; ?>>General</option>
                            </select>
                        </div>
                        
                    </div>
                    <!--div class="grid-filters active" data-view="ld-course">
                        <a href="#" class="layout-view layout-view-course layout-grid-view bp-tooltip active" data-view="grid" data-bp-tooltip-pos="up" data-bp-tooltip="Grid View">
                        <i class="dashicons dashicons-screenoptions" aria-hidden="true"></i>
                        </a>
                        <a href="#" class="layout-view layout-view-course layout-list-view bp-tooltip" data-view="list" data-bp-tooltip-pos="up" data-bp-tooltip="List View">
                        <i class="dashicons dashicons-menu" aria-hidden="true"></i>
                        </a>
                    </div-->
                </div>
            </div>

            <!--begin::wrapper-->
            <div class="grid-view ilms-grid grid-box-">
                <div class="course-dir-list bs-dir-list columns-default course-dir-list--media course-dir-list--status">
                    <ul class="ilms-card-list ilms-course-items grid-view ilms-grid ilms-ajax-courses-list">
                        <?php echo $courses_list; ?>
                    </ul>
                </div>
            </div> 
            <!--end::wrapper--> 
        </form>
        <?php $course_wrapper = ob_get_clean();

        return $course_wrapper;

    }
    
    
}


function proqyz_get_courses_by_filters($params = []){
    
    $courses_list = "";
    if( class_exists('ST_ProQyz_Oauth') ) {
        $main_params = array_merge($params,[
            "request_id" => date("U")
        ]);

        $ilms_courses_res = (object) ST_ProQyz_Oauth::rest_post_request("/courses/list", $main_params);
        if( isset($ilms_courses_res->success) ) {
            $remote_c_res  = (object) $ilms_courses_res->success;
            $remote_c_json = isset($remote_c_res->json)? (object) $remote_c_res->json : null;
            if( $remote_c_json ){
                $courses = isset($remote_c_json->courses)? (array) $remote_c_json->courses : [];
                if( count($courses) > 0 ) {
                    
                    foreach ( $courses as $ckey => $course ) {
                        $course             = (object) $course;
                        # course thumbnail functions 
                        $course_thumnail    = isset($course->_thumbnail)? (object) $course->_thumbnail : (object) [
                            "method" => 'default',
                            "url"    => ST_PROQYZ_PLUGIN_URL. "includes/templates/shortcodes/course/default/dist/img/course/default.jpg"
                        ];
                        $course_method      = isset($course_thumnail->method)? $course_thumnail->method : 'default';
                        if($course_method == "default"){
                            $course_url         = ST_PROQYZ_PLUGIN_URL. "includes/templates/shortcodes/course/default/dist/img/course/default.jpg";
                        } else if($course_method == "url"){
                            $course_url         = isset($course_thumnail->url)? $course_thumnail->url : ST_PROQYZ_PLUGIN_URL. "includes/public/shortcodes/course/dist/img/course/default.jpg";

                        } 


                        $course_payment     = isset($course->_payment)? (object) $course->_payment : null;
                        # payment functions
                        $course_access      = isset($course_payment->access)? $course_payment->access : 'open';
                        $course_price       = isset($course_payment->price)? $course_payment->price : 0;
                        $course_sale        = isset($course_payment->sale)? $course_payment->sale : 0;

                        $currency           = '$';
                        $total_lessons      = (int) $course->lessons;
                        $total_quizzes      = (int) $course->quizzes;
                        $course_id          = $course->_id;
                        if (class_exists('WooCommerce')) {
                            $currency           = get_woocommerce_currency_symbol(); 
                        }

                        $filtered_res = (object) apply_filters('proqyz-course-get-woo-product',"", (object) [
                            "_id"               => $course_id,
                            "title"             => $course->title,
                            "description"       => $course->description,
                            "sale"              => $course_sale,
                            "price"             => $course_price,
                            "_payment"          => (object) $course_payment,
                            "thumbnail"         => $course_url
                        ]);

                        if(isset($filtered_res->success)) {
                            $woo_res            = (object) $filtered_res->success;
                            $course_price       = $woo_res->original_amount;
                            $course_sale        = $woo_res->sale_amount;
                            $currency           = $woo_res->currency_symbol;

                        }




                        $course_access_status = $course_access;
                        $course_access_class  = "ilms-badge-warning";
                        if( $course_access_status == "open" ){
                            $course_access_class  = "ilms-badge-primary";
                        }
                        $expiry_date    = "";

                        # check for course paid status
                        if( is_user_logged_in() ) {
                            $current_user_id = get_current_user_id();
                            $enroll_meta = get_user_meta( $current_user_id, 'enroll-'.$course_id, true);
                            if( $enroll_meta ) {
                                $enroll_meta    = (object) $enroll_meta;
                                $expire         = isset($enroll_meta->expire)? $enroll_meta->expire : "never";
                                $is_enroll      = isset($enroll_meta->enroll)? $enroll_meta->enroll : false;
                                $enroll_access  = isset($enroll_meta->access)? $enroll_meta->access : "open";
                                $order_time     = isset($enroll_meta->created_at)? (int) $enroll_meta->created_at : null;
                                $expires_on     = isset($enroll_meta->expires_on)? (int) $enroll_meta->expires_on : null;  
                                
                                if( $enroll_access == "enroll" ) {

                                    if($is_enroll){
                                        if($expire ==  "never"){
                                            $course_access_status = "enrolled";
                                            $course_access_class  = "ilms-badge-success";
                                        } else if($expire == "expire"){
                                            if(date("U") >= $expires_on){
                                                $course_access_status = "expired";
                                                $course_access_class  = "ilms-badge-danger";
                                            } else {
                                                
                                                $course_access_status = "enrolled";
                                                $course_access_class  = "ilms-badge-success";

                                                ob_start(); ?>
                                                <small><b>expires: </b><?php echo date("Y/m/d h:m a", (int) $expires_on); ?></small>
                                                <?php $expiry_date = ob_get_clean();

                                            }
                                        }
                                    }
                                } else if( $enroll_access == "open" ) {
                                    $course_access_class  = "ilms-badge-primary";
                                    $course_access_status = "open";
                                }

                            }
                        }

                        // Append some-value to the permalink
                        // $permalink = site_url()."/proqyz/proqyz-course/".$course_id;
                        # update - slug
                        $permalink = st_proqyz_get_course_url($course_id);

                        ob_start(); ?>
                            <li class="ilms-course-item-wrap card-root">
                                <div class="ilms-cover-list-item ilms-course-paid">
                                    <div class="ilms-course-cover">
                                        <a title="<?php echo $course->title; ?>"  href="<?php echo $permalink; ?>" class="ilms-cover-wrap">
                                            
                                            <div class="ilms-status ilms-status-incomplete ilms-third-background <?php echo $course_access_class; ?>">
                                                <?php echo $course_access_status; ?>
                                            </div>
                                            
                                            <img 
                                                width="300" 
                                                height="209" 
                                                src="<?Php echo $course_url; ?>" 
                                                class="attachment-medium size-medium wp-post-image" 
                                                alt="" 
                                                decoding="async" 
                                                loading="lazy"  
                                                sizes="(max-width: 300px) 100vw, 300px"
                                            />			
                                        </a>
                                    </div>
                                    <div class="ilms-card-course-details ilms-card-course-details--noAccess">
                                        <div style="display: flex;justify-content: space-between;">
                                            <div class="ilms-course-lesson-count"><?php echo $total_lessons; ?> Lessons</div>
                                            <div class="ilms-course-lesson-count"><?php echo $total_quizzes; ?> Quizzes</div>
                                        </div>
                                        
                                        <h2 class="ilms-course-title ">
                                            <a title="<?php echo $course->title; ?>"  href="<?php echo $permalink; ?>"><?php echo $course->title; ?></a>
                                        </h2>
                                        
                                        <div class="ilms-course-excerpt"><?php echo $course->description; ?></div>
                                        <?php if($course_access_status == "enrolled"){ ?> 
                                        <div class="ilms-course-footer">
                                            <span class="ilms-course-excerpt" style="margin:0;">
                                                <?php echo $expiry_date; ?>
                                            </span>
                                        </div>    
                                        <?php } ?>
                                        <?php if($course_access_status == "enroll"){ ?>
                                        <div class="ilms-course-footer bb-course-pay">
                                            <?php if($course_sale > 0){ ?>
                                                <span class="course-fee">
                                                    <strike style="color: #afaaaa;font-size: 14px;">
                                                        <span class="ld-currency"><?php echo $currency; ?></span><?php echo $course_price; ?>	
                                                    </strike>	 			
                                                </span> &nbsp;
                                                <span class="course-fee">
                                                    <span class="ld-currency"><?php echo $currency; ?></span><?php echo $course_sale; ?>				
                                                </span>    
                                            <?php } else { ?>
                                                <span class="course-fee">
                                                    <span class="ld-currency"><?php echo $currency; ?></span><?php echo $course_price; ?>	
                                                </span>
                                            <?php } ?>
                                            
                                        </div>
                                        <?php } ?>
                                    </div>
                                </div>
                                
                            </li>
                            
                        <?php $courses_list .= ob_get_clean();

                    }

                    ob_start(); ?>
                    <li class="ilms-course-item-wrap ">
                        <div class="card-loader card-loader--tabs"></div>
                    </li>
                    <li class="ilms-course-item-wrap ">
                        <div class="card-loader card-loader--tabs"></div>
                    </li>
                    <li class="ilms-course-item-wrap ">
                        <div class="card-loader card-loader--tabs"></div>
                    </li>
                    <li class="ilms-course-item-wrap ">
                        <div class="card-loader card-loader--tabs"></div>
                    </li>
                    <li class="ilms-course-item-wrap ">
                        <div class="card-loader card-loader--tabs"></div>
                    </li>
                    <li class="ilms-course-item-wrap ">
                        <div class="card-loader card-loader--tabs"></div>
                    </li>
                    <?php $courses_list .= ob_get_clean();


                } else {
                    $courses_list = "0 Courses found";
                }
            }
        } else {
            $errors = (object) $ilms_courses_res->error;
            $courses_list = $errors->message;
        }
    }

    return $courses_list;
}

/**
 * ajax event for filtring course grid
 */
function proqyz_ajax_get_courses_by_filters(){
    if(1 == 1){
        $order_by = (object) [
            "title" => 1
        ];
        
        $where    = (object) []; 
        if(isset($_POST['order_by']) && !empty($_POST['order_by'])) {
            if($_POST['order_by'] == "alphabetical"){
                $order_by = (object) [
                    "title" => 1
                ];
            } else if($_POST['order_by'] == "recent"){
                $order_by = (object) [
                    "creation" => -1
                ];
            } else {
                $order_by[] = (object) [
                    "title" => 1
                ];
            }
        } else {

            $order_by[] = (object) [
                "title" => 1
            ];
        }

        if(isset($_POST['course_category']) && !empty($_POST['course_category'])) {
            if($_POST['course_category'] == "all") {
                $where = (object) [];
            } else {
                $where = (object) [
                    "category" => $_POST['course_category']
                ];
            }
        }

        $where_params = [
            "where" => (object) $where,
            "order" => (array) $order_by,
            "grant_type" => "request",
            "permission" => "courses-grid"
        ];

        

        $courses_list = proqyz_get_courses_by_filters($where_params);
        wp_send_json([
            "success" => (object) [
                "has_html" => true,
                "html"     => $courses_list 
            ]
        ]);
    } else {
        wp_send_json([
            "error" => (object) [
                "message"   => "User is not logged in",
                "status"    => 401,
                "res_type"  => "warning",
                "reload"    => true
            ]
        ]);
    }
}


function handle_head_css(){
    // Prevent CSS from being added multiple times
    static $css_added = false;
    if ($css_added) {
        return;
    }
    $css_added = true;
    
    $site_url = site_url();
    ?>
    <style>
        :root{
            --ilms-content-background-color: #ffffff;
            --ilms-content-border-color: #E2E2E2;
            --ilms-body-text-color: #272727;
            --ilms-button-radius: 6px;
            --ilms-content-border-color: #E2E2E2;
            --ilms-input-radius: 6px;
            --ilms-headings-color: #303B40;
            --ilms-primary: #40ADE3;
        }

        ul {
            margin: 0 0 1.6875rem 1.6875rem;
            padding: 0;
        }

        .ilms-courses img {
            height: auto;
            max-width: 100%;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }

        .ilms-courses a{
            text-decoration: none !important;
        }

        .ilms-courses .flex {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
        .ilms-courses .align-items-center {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        
        .ilms-courses .push-right {
            margin-left: auto;
        }

        .ilms-courses .push-right {
            margin-left: auto;
        }

        .ilms-courses .ilms-courses-header {
            margin-bottom: 2rem;
        }

        .ilms-courses .ilms-courses-header .ilms-title {
            font-size: 28px;
            margin: 0;
        }

        .ilms-courses .ilms-courses-header .ilms-dir-search {
            margin-left: auto;
            margin-bottom: 0;
            margin-right: 0;
        }
        .ilms-dir-search {
            float: right;
            margin: 0 0 20px;
        }

        .ilms-search-form {
            background-color: var(--ilms-content-background-color);
            border: 1px solid var(--ilms-content-border-color);
            color: var(--ilms-body-text-color);
            border-radius: var(--ilms-button-radius);
            margin-bottom: 0;
            position: relative;
        }

        .ilms-courses .ilms-navs {
            margin-bottom: 15px;
            border-bottom: 1px solid var(--bb-content-border-color);
        }
        .ilms-courses .ilms-navs.ilms-navs {
            overflow: initial;
        }
        .ilms-courses .ilms-navs.ilms-subnavs {
            font-size: 14px;
        }
        .main-navs.dir-navs {
            margin-bottom: 20px;
        }

        .ilms-courses .component-navigation.courses-nav {
            margin: 0;
        }
        .ilms-courses .ilms-navs ul {
            margin: 0;
            padding: 0;
        }

        .ilms-courses .component-navigation.courses-nav li {
            position: relative;
            list-style: none;
        }
        .ilms-courses .ilms-courses-directory .ilms-navs li {
            float: left;
            padding-right: 30px;
        }
        .ilms-courses .ilms-subnavs ul li {
            margin-top: 0;
        }
        .ilms-courses .ilms-navs ul li {
            list-style: none;
            margin: 0;
        }

        .ilms-component-nav-item-point {
            display: inline;
        }

        .ilms-secondary-header .ilms-secondary-list-tabs {
            margin: 25px 0 20px;
        }
        .ilms-bb-secondary-list-tabs {
            border-bottom: 0;
            margin: 0.9375rem 0;
        }

        .ilms-courses-filters {
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        }

        .ilms-select-wrap {
            margin: 0 5px;
        }

        .ilms-courses-filters .ilms-select-wrap select {
            margin-right: 12px;
        }
        .ilms-select-wrap select {
            height: 36px;
            font-size: 14px;
            outline: 0;
        }

        .ilms-courses select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_arrowus_down.png); 
            background-repeat: no-repeat;
            background-position: right 1rem center;
            padding-right: 40px;
            min-width: 150px;
        }
        .ilms-courses input, .ilms-courses select, .ilms-courses textarea {
            display: inline-block;
            font-family: inherit;
            font-style: inherit;
            font-size: 15px;
            height: 41px;
            outline: 0;
            vertical-align: middle;
            background-color: var(--ilms-content-background-color);
            border: 1px solid var(--ilms-content-border-color);
            border-radius: var(--ilms-input-radius);
            box-shadow: none;
            padding: 0 12px;
            color: var(--ilms-body-text-color);
        }

        .ilms-courses .grid-filters {
            background: var(--ilms-content-background-color);
            border: 1px solid var(--ilms-content-border-color);
            border-radius: var(--ilms-input-radius);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-item-align: start;
            align-self: flex-start;
            font-size: 21px;
            height: 36px;
        }


        .ilms-courses .grid-filters .active {
            opacity: 1;
        }
        .ilms-courses .grid-filters a {
            color: var(--ilms-headings-color);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding-left: 5px;
            padding-right: 5px;
            opacity: .4;
            -webkit-transition: .3s all;
            transition: .3s all;
        }
        a.layout-grid-view {
            padding-left: 5px;
            border-right: 1px solid var(--ilms-content-border-color);
        }

        a.layout-view {
            text-decoration: none !important;
        }


        /* grid wrapper */
        .ilms-courses .ilms-grid {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-left: -10px;
            margin-right: -10px;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .ilms-courses .ilms-grid .course-dir-list {
            margin-top: 10px;
        }

        .ilms-courses .ilms-grid-cell:not(.no-gutter), .ilms-grid>:not(.no-gutter) {
            padding-left: 10px;
            padding-right: 10px;
        }

        .ilms-grid > *{
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            min-width: 1px;
            list-style: none;
        }

        .ilms-course-items {
            list-style: none;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        }

        .ilms-course-items.grid-view .ilms-course-item-wrap {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
        }

        .ilms-course-items .ilms-course-item-wrap {
            margin-bottom: 20px;
        }

        .ilms-course-items .ilms-cover-list-item {
            border-radius: 4px 4px 4px 4px;
        }

        .ilms-course-items .ilms-cover-list-item.ilms-course-paid {
            padding-bottom: 35px;
        }
        .ilms-course-items .ilms-cover-list-item {
            background: var(--ilms-content-background-color);
            border: 1px solid var(--ilms-content-border-color);
            border-radius: var(--ilms-block-radius);
            height: 100%;
            padding-bottom: 0;
            -webkit-transition: .2s box-shadow;
            transition: .2s box-shadow;
            position: relative;
            overflow: hidden;
        }
        .ilms-cover-list-item {
            position: relative;
        }

        .ilms-course-items .ilms-course-cover {
            overflow: hidden;
            position: relative;
        }

        .ilms-course-items .ilms-cover-wrap {
            padding-top: 52%;
            border-radius: 4px 4px 0 0;
        }
        .ilms-course-items .ilms-cover-wrap {
            border-radius: var(--ilms-block-radius) var(--ilms-block-radius) 0 0;
            padding-top: 52%;
        }

        .ilms-cover-wrap {
            border-radius: 3px;
            position: relative;
            overflow: hidden;
            padding-top: 96.52%;
            display: block;
            background: var(--ilms-cover-image-background-color);
        }

        .ilms-cover-list-item .ilms-course-cover .ilms-cover-wrap .ilms-status {
            border-radius: 0 15px 15px 0;
            height: auto;
        }

        .ilms-cover-list-item .ilms-status {
            position: absolute;
            z-index: 9;
            top: 15px;
            background-color: var(--bb-primary-color);
            border-radius: 0 15px 15px 0;
            color: #fff;
            text-align: center;
            padding: 5px 12px;
            text-transform: uppercase;
            font-size: 11px;
            line-height: 1;
            letter-spacing: .23px;
        }


        .ilms-cover-list-item .ilms-third-background {
            background-color: #dbbe1a;
        }
        

        .ilms-cover-wrap img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 0;
            min-height: 100%;
            width: auto;
            min-width: 100%;
            object-fit: cover;
            border-radius: 0;
        }
        

        .grid-view .ilms-card-course-details {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }
        .ilms-card-course-details {
            padding: 16px 20px 10px;
        }

        .ilms-course-lesson-count {
            font-size: 13px;
            color: var(--bb-alternate-text-color);
            line-height: 1;
            margin-bottom: 8px;
            font-weight: 300;
        }

        .ilms-course-title {
            margin-bottom: 8px;
        }
        #page .ilms-course-title {
            font-size: 22px;
            line-height: 1.24;
            margin: 0 0 10px;
        }

        #page .ilms-course-title a {
            color: inherit;
            display: block;
            display: -webkit-box;
            max-height: 2.7em;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ilms-course-meta {
            font-size: 13px;
            font-weight: 300;
            color: var(--bb-alternate-text-color);
            letter-spacing: -.24px;
            line-height: 1;
            margin-bottom: 15px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        }

        .ilms-course-items .ilms-course-excerpt {
            font-size: 13px;
            color: var(--bb-alternate-text-color);
            line-height: 1.384;
            display: block;
            display: -webkit-box;
            max-height: 2.72em;
            margin: -3px 0 20px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ilms-course-items .ilms-course-excerpt {
            color: var(--bb-alternate-text-color);
        }
        .ilms-course-excerpt {
            margin-bottom: 20px;
            opacity: .8;
            font-size: 16px;
            letter-spacing: -.24px;
            line-height: 27px;
        }

        .ilms-course-footer {
            position: absolute;
            bottom: 20px;
            width: 100%;
            left: 0;
            padding: 0 20px;
            font-weight: 500;
            font-size: 20px;
            line-height: 1;
            color: var(--bb-headings-color);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
        }

        .ilms-course-items .ilms-cover-list-item:hover {
            box-shadow: 0 4px 32px 0 rgba(18,43,70,.1);
            z-index: 1;
        }


        @media screen and (max-width: 610px){
            .ilms-courses-filters {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                width: 100%;
                margin-right: 15px;
            }

            .ilms-courses-filters .select-wrap {
                width: 100%;
                margin-bottom: 5px;
            }

            .ilms-courses-filters select {
                width: 100%;
            }
        }

        
        @media screen and (max-width: 1200px){
            .ilms-course-items.grid-view .ilms-course-item-wrap {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 33.333%;
                flex: 0 0 33.333%;
            }
        }
        

        @media screen and (max-width: 820px){
            .ilms-course-items.grid-view .ilms-course-item-wrap {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 50%;
                flex: 0 0 50%;
            }
        }

        @media screen and (max-width: 480px){
            .ilms-course-items.grid-view .ilms-course-item-wrap {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
            }
        }


        .entry-content ul, .entry-content ol {
            padding: initial;
            margin: initial;
        }
    

        .ilms-badge-success {
            background-color: #4CAF50 !important;
        }

        .ilms-badge-primary {
            background-color: #2196F3 !important;
        }

        .ilms-badge-danger {
            background-color: #FF5722 !important;
        }

        .card-loader{
            display: none;
        }

        .is-course-loading .card-root{ display: none; }

        .is-course-loading .card-loader{ display: block !important; }

        .card-loader {
            background-color: #fff;
            box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.08), 0 -1px 3px 0 rgba(0, 0, 0, 0.06);
            padding: 8px;
            position: relative;
            border-radius: 2px;
            margin-bottom: 0;
            height: 200px;
            overflow: hidden;
        }
        .card-loader:only-child {
            margin-top: 0;
        }
        .card-loader:before {
            content: "";
            height: 110px;
            display: block;
            background-color: #ededed;
            box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
        }
        .card-loader:after {
            content: "";
            background-color: #333;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            animation-duration: 0.6s;
            animation-iteration-count: infinite;
            animation-name: loader-animate;
            animation-timing-function: linear;
            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 81%);
            background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 81%);
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 81%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff", endColorstr="#00ffffff",GradientType=1 );
        }

        @keyframes loader-animate {
            0% {
                transform: translate3d(-100%, 0, 0);
            }
            100% {
                transform: translate3d(100%, 0, 0);
            }
        }
        

    </style>
    
        
    <?php 
}


add_shortcode('proqyz-course-grid', 'proqyz_shortcode_proqyz_grid_course');
add_shortcode('ilms-course-grid', 'proqyz_shortcode_proqyz_grid_course');
add_action('wp_ajax_proqyz-ajax-get-courses', 'proqyz_ajax_get_courses_by_filters');
add_action('wp_ajax_nopriv_proqyz-ajax-get-courses', 'proqyz_ajax_get_courses_by_filters');

add_action('wp_head', 'handle_head_css');