<?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/danshjooyar.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 style="padding-left: 60px !important;" class="lmskaran_lay-danesh">
	<div style="<?php echo $slider_button_next; ?>" class="lmskaran_danesh-next lmskaran_danesh-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_danesh-prev lmskaran__danesh-prev-<?php echo $module->id; ?> swiper-button-prev swiper-button-prev-<?php echo $module->id; ?>"></div>
	<div style="padding-bottom: 20px;" 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="lmskaran-danesh swiper-slide swiper-slide-<?php echo $module->id; ?>">
		  <!--  -->
		  <div class="popup">
			<div class="popup-inner">
				<h4><?php echo $course->fullname ?></h4>
				<span class="lmskaran-danesh-description">
					<?php if(isset($course->summary)): ?>
						<?php echo ModMoojlaCourseSliderHelper::escape($params,$course->summary); ?>
					<?php endif; ?>
				</span>
				<p style="<?php echo $price_color_course_slider; ?>" class="popup-cost-lmskaran-danesh">
					<?php if($course->cost > 0):?>
						<?php echo $course->cost; ?>
					<?php else: ?>
						<?php echo "رایگان"; ?>
					<?php endif ?>
				</p>
				<div class="lmskaran_danesh-course-button">
					<a href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id='.$course->remoteid); ?>" class="btn--white">مشاهده دوره</a>
				</div>
			</div>

		  </div>
		  <!--  -->
			 <div class="lmskaran_danesh_card">
				<div style="<?php echo $background_color; ?>" class="lmskaran_filterCoursesSlider_front lmskaran_filterCoursesSlider_front-<?php echo $module->id; ?>">
				   <a class="lmskaran_danesh_img_course" href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id=' . $course->remoteid); ?>" >
					  <div class="lmskaran_danesh_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>
				<div class="lmskaran_danesh-content">
					<h4><?php echo $course->fullname ?></h4>
					<div class="lmskaran_danehsh_teahcer-cost">
					
					<?php if (count($course->teachers) == null): ?>
						<span class="lmskaran_danesh-not-teacher">این درس استاد ندارد !</span>
						<?php
    else: ?>
						<a href="#" class="lmskaran_danesh_teacher_name lmskaran_lay-course-slider-manage-color-text-<?php echo $module->id; ?>">
							<span><?php echo $course->teachers[0]->name; ?></span>
						</a>
					<?php
    endif; ?>
					<div class="lmskaran-danesh-cost">
						<p style="<?php echo $price_color_course_slider; ?>" class="">
							<?php if($course->cost > 0):?>
								<?php echo $course->cost; ?>
							<?php else: ?>
								<?php echo "رایگان"; ?>
							<?php endif ?>
						</p>
					</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:'1',
			 spaceBetween: 10,
		},
       768: {
         slidesPerView:'2',
         spaceBetween: 10,
       },
       1024: {
         slidesPerView:'3',
         spaceBetween: 10,
       },
       1200: {
         slidesPerView:'4',
         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>
