
<?php
	$document = JFactory::getDocument();
	$document->addStyleSheet('/modules/mod_moojlacourseslider/assets/swiper-bundle/swiper-bundle.min.css');
	$document->addStyleSheet('/modules/mod_moojlacourseslider/assets/css/courseslider.css');
	$document->addScript('/modules/mod_moojlacourseslider/assets/js/courseslider.js');

	$colcoursesliderverysmall=$params->get('colcoursesliderverysmall');
	$colcourseslidersmall=$params->get('colcourseslidersmall');
	$colcourseslidermedium=$params->get('colcourseslidermedium');
	$colcoursesliderlarge=$params->get('colcoursesliderlarge');
	$colcoursesliderverylarge=$params->get('colcoursesliderverylarge');

    // --------------------> inline style html

    // background box course slider
    $courseslider_background = [
        'background-color :' . $params->get('lmskaran_color')   
    ];
    $courseslider_background = implode(';', $courseslider_background);

    // background and color button prev slide
    $slider_button_prev = [
        'background-color :' . $params->get('arrow_color'),
        'color :' . $params->get('arrow_icon_color')
    ];
    $slider_button_prev = implode(';', $slider_button_prev);

    // background and color button next slide
    $slider_button_next = [
        'background-color :' . $params->get('arrow_color'),
        'color :' . $params->get('arrow_icon_color')
    ];
    $slider_button_next = implode(';', $slider_button_next);

    // title course color course slider
    $title_course_slider_color = [
        'color :' . $params->get('text_color')
    ];
    $title_course_slider_color = implode(';', $title_course_slider_color);

    // price color course slider
    $price_color_course_slider = [
        'color :' . $params->get('price_color')
    ];
    $price_color_course_slider = implode(';', $price_color_course_slider);
?>



<?php ?>
    <!-- Swiper -->
<div class="lmskaran_lay-courseslider">
	<div style="<?php echo $slider_button_next; ?>" class="slider_button_next lmskaran_lay-courseslider-next lmskaran_lay-courseslider-next-<?php echo $module->id; ?> swiper-button-next swiper-button-next-<?php echo $module->id; ?>"></div>
	<div style="<?php echo $slider_button_prev; ?>" class="slider_button_prev lmskaran_lay-courseslider-prev lmskaran_lay-courseslider-prev-<?php echo $module->id; ?> swiper-button-prev swiper-button-prev-<?php echo $module->id; ?>"></div>
    <div class="swiper-container swiper-container-<?php echo $module->id; ?>">
        <div class="swiper-wrapper swiper-wrapper-<?php echo $module->id; ?>">
        <?php foreach($courses as $course): ?>
            <div class="swiper-slide swiper-slide-<?php echo $module->id; ?>">
                <div class="card">
                    <div style="<?php echo $courseslider_background;?>" class="courseslider_background lmskaran_lay-courseslider-background-<?php echo $module->id; ?> card__side card__side--front card__side--front-moduleid-<?php echo $module->id; ?>">
                        <div class="card__title card__title">
							<?php if(!$course->summary_files):?>
								<img class="card_img_front" src="https://www.w3schools.com/w3css/img_lights.jpg">
							<?php else:?>
								<img class="card_img_front" src="<?php echo $course->summary_files; ?>">
							<?php endif;?>
                        </div>
                            <h4 style="<?php echo $title_course_slider_color; ?>" class="title_course_slider_color card__heading lmskaran_lay-course-slider-manage-color-text-<?php echo $module->id; ?>"><?php echo $course->shortname; ?></h4>
                        <div class="card__details lmskaran_lay-course-slider-manage-color-text-<?php echo $module->id; ?>">
                            <ul>
                                <li>
									<?php if (count($course->teachers) == null) : ?>
											<span class="lmskaran_popup_not_teacher_name">این درس استاد ندارد !</span>
											<?php else:?>
											<a href="#" class="lmskaran_popup_teacher_name lmskaran_lay-course-slider-manage-color-text-<?php echo $module->id; ?>">
												<span><?php echo $course->teachers[0]->name; ?></span>
											</a>
									<?php endif; ?>
								</li>
                                <li>طبقه درس : <span><?php echo $course->cat_name; ?></span></li>
                            </ul>
                        </div>
                    </div>
                    <div style="<?php echo $courseslider_background;?>" class="courseslider_background lmskaran_lay-courseslider-background-<?php echo $module->id; ?> card__side card__side--back-moduleid-<?php echo $module->id; ?>">
                        <div class="card__cta">
                            <div class="card__price-box">
                                
                                <p style="<?php echo $price_color_course_slider; ?>" class="price_color_course_slider card__price-value lmskaran_lay-course-slider-manage-color-price-<?php echo $module->id; ?>">
                            </span><?php if($course->cost > 0 ) { echo $course->cost; } else {echo "رایگان"; } ?> </p>
								<div class="description__course--back lmskaran_lay-course-slider-manage-color-text-<?php echo $module->id; ?>"><h3 class="title_about--course lmskaran_lay-course-slider-manage-color-text-<?php echo $module->id; ?>">درباره درس : </h3><?php echo ModMoojlaCourseSliderHelper::escape($params,$course->summary); ?></div>
                            </div>
                            <a href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id='.$course->remoteid); ?>" class="btn--white">رفتن به دوره</a>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
        </div>
    </div>
</div>



    <?php
    $document = JFactory::getDocument();
    $document->addScript('/modules/mod_moojlacourseslider/assets/swiper-bundle/swiper-bundle.min.js');
    ?>

    <!-- Initialize Swiper -->

    <script>
        var swiper = new Swiper('.swiper-container-<?php echo $module->id; ?>', {
            // slidesPerView: 3,
            spaceBetween: 30,
            slidesPerGroup: 1,
            loop: false,
            loopFillGroupWithBlank: true,
            // pagination: {
                // el: '.swiper-pagination-<?php echo $module->id; ?>',
                // clickable: true,
            // },
            navigation: {
                nextEl: '.swiper-button-next-<?php echo $module->id; ?>',
                prevEl: '.swiper-button-prev-<?php echo $module->id; ?>',
            },
		   breakpoints: {
			320: {
			slidesPerView:'<?php echo $colcoursesliderverysmall; ?>',
				 spaceBetween: 20,
			},
			480: {
			slidesPerView:'<?php echo $colcourseslidersmall; ?>',
				 spaceBetween: 20,
			},
		   768: {
			 slidesPerView:'<?php echo $colcourseslidermedium; ?>',
			 spaceBetween: 10,
		   },
		   1024: {
			 slidesPerView:'<?php echo $colcoursesliderlarge; ?>',
			 spaceBetween: 10,
		   },
		    1200: {
			 slidesPerView:'<?php echo $colcoursesliderverylarge; ?>',
			 spaceBetween: 10,
		   },
          }
        });

</script>



<style>

/* for slideshow  */

.swiper-slide-<?php echo $module->id; ?> {
    display: block !Important;
    background: unset !important;
}

.swiper-container-<?php echo $module->id; ?> {
    padding-bottom: 50px;
    width: 100%;
    height: 70%;

}

.swiper-wrapper-<?php echo $module->id; ?> {
    transition: 0.4s !important;
	padding:50px 0px;
}


.swiper-button-next-<?php echo $module->id; ?>:after,
.swiper-button-prev-<?php echo $module->id; ?>:after {
    font-size: 30px;
}

.card__side--front-moduleid-<?php echo $module->id; ?> {
    background: <?php echo $backgroundcolor;  ?>;
}


.card__side--back-moduleid-<?php echo $module->id; ?> {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	background: <?php echo $backgroundcolorback ?>;
}


.card:hover .card__side--front-moduleid-<?php echo $module->id; ?> {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card:hover .card__side--back-moduleid-<?php echo $module->id; ?> {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}


</style>