<?php 
   //dump($courses, "course");
   ?>
<?php
	$document = JFactory::getDocument();
	$document->addStyleSheet('/modules/mod_moojlacourseslider/assets/swiper-bundle/swiper-bundle.min.css');
	$document->addStyleSheet('/modules/mod_moojlacourseslider/assets/css/filterCourses_slider.css');
	$document->addScript('/modules/mod_moojlacourseslider/assets/js/filtercourses_slider.js');
	
    $cat_name=$params->get('category_name');
    $teacher_name=$params->get('teacher_name');
	
	$colcoursesliderverysmall=$params->get('colcoursesliderverysmall');
	$colcourseslidersmall=$params->get('colcourseslidersmall');
	$colcourseslidermedium=$params->get('colcourseslidermedium');
	$colcoursesliderlarge=$params->get('colcoursesliderlarge');
	$colcoursesliderverylarge=$params->get('colcoursesliderverylarge');


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

    // 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);

    // text color or content
    $text_color = [
        'color :' . $params->get('text_color')
    ];
    $text_color = implode(';', $text_color);

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



<div class="lmskaran_lay-filter-course-slider">
	<div style="<?php echo $slider_button_next; ?>" class="lmskaran_lay-filter-course-slider-next lmskaran_lay-filter-course-slider-next-<?php echo $module->id; ?> swiper-button-next swiper-button-next-<?php echo $module->id; ?>"></div>
	<div style="<?php echo $slider_button_prev; ?>" class="lmskaran_lay-filter-course-slider-prev lmskaran_lay-filter-course-slider-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="lmskaran_filterCoursesSlider_card ">
				<div style="<?php echo $background_color; ?>" class="lmskaran_filterCoursesSlider_front lmskaran_filterCoursesSlider_front-<?php echo $module->id; ?>">
				   <a class="lmskaran_filterCoursesSlider_img_course" href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id='.$course->remoteid); ?>" >
					  <div class="lmskaran_filterCoursesSlider_box_img">
						<?php if(!$course->summary_files):?>
							<img src="https://www.w3schools.com/w3css/img_lights.jpg">
						<?php else:?>
							<img src="<?php echo $course->summary_files; ?>">
						<?php endif;?>
					  </div>
				   </a>
				   <div class="lmskaran_filterCoursesSlider_content">
					  <div class="lmskaran_filterCoursesSlider_main">
						 <h3 class="lmskaran_filterCourseSlider_title_course">
							<a style="<?php echo $text_color; ?>" class="lmskaran_lay--filter-course-slider-manage-color-text-<?php echo $module->id; ?>" style="width:100%" href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id='.$course->remoteid); ?>"><?php echo $course->shortname; ?></a>
						 </h3>
						<div style="<?php echo $price_color; ?>" class="lmskaran_filterCoursesSlider_button_cost_pack lmskaran_lay-course-slider-manage-color-price-<?php echo $module->id; ?>">
							<?php if($course->cost == 0):?>
								<div class="lmskaran_filterCoursesSlider_button_cost">
									رایگان
								</div>
							<?php else: ?>
								<div class="lmskaran_filterCoursesSlider_button_cost">
									<?php echo $course->cost; ?>
								</div>
							<?php endif; ?>
						</div>
					  </div>
					  
						<div style="<?php echo $text_color; ?>" class="lmskaran_lay--filter-course-slider-manage-color-text-<?php echo $module->id; ?> lmskaran_lay-filter-coures-slider-summary">
						   <?php if(isset($course->summary)):?>
								<?php echo ModMoojlaCourseSliderHelper::escape($params,$course->summary); ?>
							 <?php endif;?>
						</div>
					  
					  <div class="lmskaran_filterCoursesSlider_information_course">
					  
						<div class="lmskaran_filterCoursesSlider_teacher_cat">
						
							<div class="lmskaran_filterCourseSlider_cat_taech_name_pack">
								<span><?php echo $teacher_name; ?></span>
								<p style="<?php echo $text_color; ?>" class="lmskaran_filterCoursesSlider_teacher_name lmskaran_lay--filter-course-slider-manage-color-text-<?php echo $module->id; ?>">
									
									 <?php if($course->teachers == null):?>
									 <span>این درس استاد ندارد !</span>
									 <?php else:?>
									 <?php echo $course->teachers[0]->name; ?>
									 <?php endif;?>
								</p>
							</div>
							
							<div class="lmskaran_filterCourseSlider_cat_taech_name_pack">
								<span><?php echo $cat_name; ?></span>
								<p style="<?php echo $text_color; ?>" class="lmskaran_filterCoursesSlider_cat_name lmskaran_lay--filter-course-slider-manage-color-text-<?php echo $module->id; ?>">
									 <?php if($course->cat_name == null):?>
									 <span style="color:red;">طبقه درسی ندارد !</span>
									 <?php else:?>
									 <?php echo $course->cat_name; ?>
									 <?php endif;?>
								</p>
							</div>
						</div>
					  </div>
				   </div>
				</div>
				<!-- end back panel -->
			 </div>
		  </div>
		  <?php endforeach; ?>
	   </div>
	   <!-- Add Pagination -->
	   <div class="swiper-pagination swiper-pagination-<?php echo $module->id; ?>"></div>
	</div>
</div>

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

<script>
    var swiper = new Swiper('.swiper-container-<?php echo $module->id; ?>', {
       // slidesPerView: 3,
       spaceBetween: 30,
       slidesPerGroup: 1,
       loop: false,
       loopFillGroupWithBlank: 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;
   transition: 0.5s;
   position: relative;
   top: 0;
}

.swiper-container-<?php echo $module->id; ?> {
   width: 100%;
   height: 70%;
}
.swiper-wrapper-<?php echo $module->id; ?> {
   transition: 0.4s !important;
   padding: 20px 0 !important;
}


</style>