<?php
STM_LMS_Templates::show_lms_template(
    'components/curriculum-accordion',
        array(
            'course_id'         => $post_id,
            'current_lesson_id' => $item_id,
            'user'              => $user,
            'curriculum'        => $curriculum,
            'dark_mode'         => false,
    )
);
?>

<?php
/**
 * @var string $title
 * @var int $id
 * @var boolean $dark_mode
 *
 * masterstudy-switch-button_active - for active state
 * masterstudy-next-prev-button_dark-mode - for dark mode
 */
wp_enqueue_style( 'masterstudy-switch-button', STM_LMS_URL . '/assets/css/components/switch-button.css', null, MS_LMS_VERSION );
?>

<button class="masterstudy-switch-button <?php echo esc_attr( $dark_mode ? 'masterstudy-switch-button_dark-mode' : '' ); ?>" data-id="<?php echo esc_attr( $id ); ?>">
	<span class="masterstudy-switch-button__title"><?php echo esc_html( $title ); ?></span>
</button>

<?php
if ( $progress > 0 ) {
    ?>
    <div class="masterstudy-course-player-curriculum__progress">
        <?php
        STM_LMS_Templates::show_lms_template(
        'components/progress',
            array(
                'title'     => __( 'Course progress', 'masterstudy-lms-learning-management-system' ),
                'progress'  => $progress,hp
                'dark_mode' => false,
            )
        );
        ?>
    </div>
<?php } ?>

.masterstudy-course-player-curriculum__progress {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px 30px;
    margin: 20px 10px 0 0;
}

<?php
STM_LMS_Templates::show_lms_template(
    'components/tabs',
    array(
        'items' => array(
            array(
                'id'    => 'lesson',
                'title' => __( 'Lesson', 'masterstudy-lms-learning-management-system' ),
            ),
            array(
                'id'    => 'materials',
                'title' => __( 'Materials', 'masterstudy-lms-learning-management-system' ),
            ),
        ),
        'style'            => 'nav-sm',
        'active_tab_index' => 0,
        'dark_mode'        => false,
    )
);
?>

<?php

/**
 * @var array $items
 * @var string $style
 * @var int $active_tab_index
 * @var boolean $dark_mode
 *
 * masterstudy-tabs_dark-mode - for dark mode
 * masterstudy-tabs__item_active - for item active state
 * masterstudy-tabs_style-default|nav-sm|nav-md - for tabs style change
 */

wp_enqueue_style( 'masterstudy-tabs', STM_LMS_URL . '/assets/css/components/tabs.css', null, MS_LMS_VERSION );
?>

<ul class="masterstudy-tabs <?php echo esc_attr( $dark_mode ? 'masterstudy-tabs_dark-mode' : '' ); ?> <?php echo esc_attr( 'masterstudy-tabs_style-' . $style ); ?>">
    <?php foreach ( $items as $index => $item ) { ?>
        <li class="masterstudy-tabs__item <?php echo $active_tab_index === $index ? 'masterstudy-tabs__item_active' : ''; ?>" data-id="<?php echo esc_attr( $item['id'] ); ?>">
            <?php echo esc_html( $item['title'] ); ?>
        </li>
    <?php } ?>
</ul>

// tabs toggler depending on the visibility in the window
$('.masterstudy-course-player-content__wrapper').on('scroll', function() {
    let materialsTab = $('.masterstudy-course-player-header .masterstudy-tabs__item[data-id="materials"]'),
        lessonTab = $('.masterstudy-course-player-header .masterstudy-tabs__item[data-id="lesson"]'),
        materialsInView = isElementInView('.masterstudy-course-player-lesson-materials');
            
    if (materialsInView) {
        materialsTab.addClass('masterstudy-tabs__item_active');
        lessonTab.removeClass('masterstudy-tabs__item_active');
    } else {
        materialsTab.removeClass('masterstudy-tabs__item_active');
        lessonTab.addClass('masterstudy-tabs__item_active');
    }
});

function isElementInView(selector) {
    let element = document.querySelector(selector),
        rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

STM_LMS_Templates::show_lms_template(
    'components/countdown',
    array(
        'id'         => string, (required)
        'start_time' => int, (required)
        'dark_mode'  => bool, (required)
        'style'      => string, (required) ('gray'|'default')
    )
);

STM_LMS_Templates::show_lms_template(
    'components/wp-editor',
    array(
        'id'        => string, (required)
        'content'   => object, (required) standard wordpress the_content() or another
        'settings'  => array(
            'quicktags'     => false,
            'media_buttons' => false,
            'textarea_rows' => 13,
         ), (required) settings of wp_editor()
         'dark_mode' => bool, (required)
     )
);

STM_LMS_Templates::show_lms_template(
    'components/alert',
    array(
        'id'                  => string, (required)
        'title'               => string, (required)
        'text'                => string, (required)
        'submit_button_text'  => string, (required)
        'cancel_button_text'  => string, (required)
        'submit_button_style' => string, (required) ('primary'|'secondary'|'tertiary'|'outline'|'danger')
        'cancel_button_style' => string, (required) ('primary'|'secondary'|'tertiary'|'outline'|'danger')
        'dark_mode'           => bool, (required)
    )
);

STM_LMS_Templates::show_lms_template(
    'components/hint',
    array(
        'content'   => string|object, (required)
        'side'      => string, (required) ('right'|'left')
        'dark_mode' => bool, (required)
    )
);

STM_LMS_Templates::show_lms_template(
    'components/loader',
    array(
        'delay'     => int, (required)
        'dark_mode' => bool, (required)
    )
);

STM_LMS_Templates::show_lms_template(
    'components/tabs-pagination',
    array(
        'max_visible_tabs' => int, (required)
        'tabs_quantity'    => int, (required)
        'vertical'         => bool, (required)
        'dark_mode'        => bool, (required)
    )
);

STM_LMS_Templates::show_lms_template(
    'components/file-upload',
    array(
        'attachments'            => array(), (required)
        'allowed_extensions'     => array(), (required)
        'files_limit'            => int, (required)
        'allowed_filesize'       => int, (required)
        'allowed_filesize_label' => string, (required)
        'readonly'               => bool, (required)
        'dark_mode'              => bool, (required)
    )
);