<?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/discussions',
    array(
        'course_id' => int, (required)
        'lesson_id' => int, (required)
        'dark_mode' => bool, (required)
    )
);

STM_LMS_Templates::show_lms_template(
    'components/curriculum-accordion',
    array(
        'course_id'         => int, (required)
        'current_lesson_id' => int, (required)
        'user'              => array, (required) must contain: ['id']
        'curriculum'        => array, (required)
        'dark_mode'         => bool, (required)
    )
);

STM_LMS_Templates::show_lms_template(
    'components/button',
     array(
         'id'    => string|int, (required)
         'title' => string, (required)
         'link'  => string, (required)
         'icon'  => string, (required) ('left'|'right'|'')
         'style' => string, (required) ('primary'|'secondary'|'tertiary'|'outline'|'danger')
         'size'  => string, (required) ('sm'|'md')
     )
 );

STM_LMS_Templates::show_lms_template(
    'components/back-link',
    array(
        'id'  => string|number, (required)
        'url' => string, (required)
    )
);

STM_LMS_Templates::show_lms_template(
    'components/file-attachment',
    array(
        'attachments' => array, (required) from standard wordpress query with 'post_type' => 'attachment'
        'dark_mode'   => bool, (required)
    )
);