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

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



    // 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
    $text_color = [
        'color :' . $params->get('text_color')
    ];
    $text_color = implode(';', $text_color);

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



?>



<div class="lmskaran_lay-sliding">
	<div style="<?php echo $slider_button_next; ?>" class="lmskaran_lay-sliding-next lmskaran_lay-sliding-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-sliding-prev lmskaran_lay-sliding-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_mod_moojla_card_sliding">
			  <div class="additional lmskaran_lay-card-sliding-color-border-<?php echo $module->id; ?>">
				<div class="user-card lmskaran_lay-card-sliding-manage-background-org-<?php echo $module->id; ?>">
				  <div style="<?php echo $price_color;?>" class="cost_course lmskaran_lay-card-sliding-manage-color-price-<?php echo $module->id; ?>">
					<?php if ($course->cost > 0) {
					  echo $course->cost;
					} else {
					  echo "رایگان";
					} ?>
				  </div>
				  <div class="profile_teacher">
					<?php if (!$course->summary_files) : ?>
					  <img src="https://www.w3schools.com/w3css/img_lights.jpg">
					<?php else : ?>
					  <a href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id='.$course->remoteid); ?>">
						<img src="<?php echo $course->summary_files; ?>">
					  </a>
					<?php endif; ?>
				  </div>
				</div>

			  </div>
			  <div class="general lmskaran_lay-card-sliding-manage-background-fewer-<?php echo $module->id; ?>">
				<?php /* <div class="for-hover-accordion-card">
				  <div class="accordion_toLeft_card" onmouseover="againopenAccordion(this);mouseOverShowInFromation()">
					<div class="more-info">
					  <div class="flexibleOrGridSystem_accordionInformation">
						<?php $course->teachers = trim($course->teachers, '"');
						$course->teachers = json_decode($course->teachers);
						?>

						<h3 class="more-info-h1">نام استاد :
						  <?php if ($course->teachers[0] == null) : ?>
							<span style="color:#c5c5b1;">این درس استاد ندارد !</span>
						  <?php else : ?>
							<span><?php echo $course->teachers[0]->firstname . " " . $course->teachers[0]->lastname; ?></span>
						  <?php endif; ?>
						</h3>
						<div class="coords">
						  <span>تاریخ انتشار : </span>
						  <span><?php echo $course->created; ?></span>
						</div>
						<div class="coords">
						  <!-- <span>Position/Role</span>
							 <span>City, Country</span> -->
						</div>

						<div class="loign-to-page-course">
						  <a href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id=' . $course->remoteid); ?>" style="width:100%;color:black;">
							<button class="go-to-course">
							  رفتن به دوره
							</button>
						  </a>
						</div>
					  </div>
					</div>
				  </div>
				</div> */?>

				<div class="information_courseInCard">
				  <div class="titleOrCourseName">
					<a href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id='.$course->remoteid); ?>">
						<h3 style="<?php echo $text_color;?>" class="general_courseName lmskaran_lay-course-slider-manage-color-text-<?php echo $module->id; ?>"><?php echo $course->shortname; ?></h3>
						</a>
				  </div>
				  <div style="<?php echo $text_color;?>" class="summaryCourseCard lmskaran_lay-course-slider-manage-color-text-<?php echo $module->id; ?>">
					<?php echo ModMoojlaCourseSliderHelper::escape($params, $course->summary); ?>
				  </div>
				</div>
				<div class="lmskaran_lay-card-sliding-cat_name">
					<span style="<?php echo $text_color; ?>" class="more lmskaran_lay-card-sliding-manage-background-org-<?php echo $module->id; ?> lmskaran_lay-card-sliding-color-border-<?php echo $module->id; ?> lmskaran_lay-course-slider-manage-color-text-<?php echo $module->id; ?>"> طبقه درس : <?php echo $course->cat_name; ?></span>
				</div>
			  </div>
			</div>
		  </div>
		<?php endforeach; ?>
	  </div>
	  <div class="swiper-pagination swiper-pagination-<?php echo $module->id; ?>"></div>
	</div>
</div>

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


<script>
  var swiper = new Swiper('.swiper-container-<?php echo $module->id; ?>', {
    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,
       },
     }
  });

  jQuery(document).ready(function ($)
  {
      function shadeColor(color, percent) {

          var R = parseInt(color.substring(1, 3), 16);
          var G = parseInt(color.substring(3, 5), 16);
          var B = parseInt(color.substring(5, 7), 16);

          R = parseInt(R * (100 + percent) / 100);
          G = parseInt(G * (100 + percent) / 100);
          B = parseInt(B * (100 + percent) / 100);

          R = (R < 255) ? R : 255;
          G = (G < 255) ? G : 255;
          B = (B < 255) ? B : 255;

          var RR = ((R.toString(16).length == 1) ? "0" + R.toString(16) : R.toString(16));
          var GG = ((G.toString(16).length == 1) ? "0" + G.toString(16) : G.toString(16));
          var BB = ((B.toString(16).length == 1) ? "0" + B.toString(16) : B.toString(16));

          return "#" + RR + GG + BB;
      }

      var module_id= '<?= $module->id; ?>'

      $(".lmskaran_lay-card-sliding-manage-background-org-"+module_id+"").css({
          'background': '<?= $params->get('color_card_sliding'); ?>'
      });

      $(".lmskaran_lay-card-sliding-manage-background-fewer-"+module_id+"").css({
          'background':'linear-gradient('+shadeColor('<?= $params->get('color_card_sliding'); ?>', 20)+','+shadeColor('<?= $params->get('color_card_sliding'); ?>', 80)+')'
      });

      $(".lmskaran_lay-card-sliding-color-border-"+module_id+"").css({
          'border-color':shadeColor('<?= $params->get('color_card_sliding'); ?>', -20)
      });
  })

</script>