
<?php
	$document = JFactory::getDocument();
	$document->addStyleSheet('/modules/mod_moojlacourseslider/assets/swiper-bundle/swiper-bundle.min.css');
	$document->addStyleSheet('/modules/mod_moojlacourseslider/assets/css/courseSliderUdemy.css');
	$document->addScript('/modules/mod_moojlacourseslider/assets/js/courseSliderUdemy/courseSliderUdemy.js');
	
    $cat_name=$params->get('cat_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 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);

?>

<!-- Swiper -->

<div style="<?php echo $courseslider_background; ?>" id="f<?php echo $module->id; ?>" class="particle lmskaran_alignment_course_slider lmskaran_alignment_course_slider-<?php echo $module->id; ?>" data-moduleid="<?php echo $module->id; ?>">
<div class="lmskaran_course_slider" style="padding:60px 60px;">
	<div style="<?php echo $slider_button_prev;?>" class="lmskaran_lay-courseslider-udemy-prev-<?php echo $module->id; ?> swiper-button-prev swiper-button-prev-<?php echo $module->id; ?>"></div>
	<div style="<?php echo $slider_button_next;?>" class="lmskaran_lay-courseslider-udemy-next-<?php echo $module->id; ?> swiper-button-next swiper-button-next-<?php echo $module->id; ?>"></div>

<div class="lmskaran_padding_course_slider">
<div class="swiper-container swiper-container-<?php echo $module->id; ?>">
   <div class="swiper-wrapper swiper-wrapper-<?php echo $module->id; ?>">
			<?php //dump($courses, "courses");?>
      <?php foreach($courses as $course): ?>
      <div class="lmskaran_course_box swiper-slide swiper-slide-<?php echo $module->id; ?> f<?php echo $course->id; ?>">
         <div class="lmskaran_filterCoursesSlider_card">
            <div class="lmskaran_filterCoursesSlider_front">
               <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:?>
						<a class="lmskaran_filterCoursesSlider_img_course" 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>
               </a>
               <div class="lmskaran_filterCoursesSlider_content">
                  <div class="lmskaran_filterCoursesSlider_main">
                     <h3 class="lmskaran_filterCourseSlider_title_course">
                        <a style="width:100%" href="<?php //echo $url ?>" ><?php echo $course->shortname; ?></a>
                     </h3>
                  </div>
                  <div class="lmskaran_filterCoursesSlider_information_course">
					<div class="lmskaran_filterCoursesSlider_button_cost_pack">
						<?php if($course->cost == 0):?>
							<div class="lmskaran_filterCoursesSlider_button_cost">
							<a class="lmskaran_filterCoursesSlider_button_cost_link" href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id='.$course->remoteid); ?>">رایگان</a>
						</div>
						<?php else: ?>
							<div class="lmskaran_filterCoursesSlider_button_cost">
							<a class="lmskaran_filterCoursesSlider_button_cost_link" href="<?php echo JRoute::_('index.php?option=com_moojla&view=coursedetail&id='.$course->remoteid); ?>">
							<?php echo $course->cost; ?></a></div>
						<?php endif; ?>

					</div>
                  </div>
               </div>
            </div>
         </div>
		 
		 
		<?php /* pop up */ ?>
		
		<div class="lmskaran_popup_course">
			<div class="lmskaran_popup_pointer">
				<span class="lmskaran_popup_pointerinner"></span>
			</div>
			
			<div class="lmskaran_content_popup">
				<div class="lmskaran_course_info">
					<div class="lmskaran_main_info">
						<a href="#"><?php echo $course->fullname; ?></a>							
						<?php if (count($course->teachers) == 0) : ?>
								<span class="lmskaran_popup_not_teacher_name">این درس استاد ندارد !</span>
								<?php else:?>
								<a href="#" class="lmskaran_popup_teacher_name"><span><?php echo $course->teachers[0]->name; ?></span></a>
						<?php endif; ?>
					</div>
					<div class="lmskaran_teacher"><a href="#"><img src="images/avatar-man.jpg"></a></div>
				</div>
				
				<div class="lmskaran_discreption_course">
					<div class="lmskaran_padding_discreption">
						<span>
							<?php if(isset($course->summary)): ?>
								<?php echo ModMoojlaCourseSliderHelper::escape($params,$course->summary); ?>
							<?php endif; ?>
						</span>
					</div>
				</div>
				
				<div class="lmskaran_field_course_mapper">
				<?php if(count($course->customfields) > 0):?>
					<?php foreach($course->customfields as $index => $map):?>
						<div class="lmskaran_courseExtras">
							<div class="lmskaran_desck"><?php echo $map['title']; ?></div>
							<div class="lmskaran_ico-val">
								<img src="<?php echo $map['img']; ?>" />
								<div class="lmskaran_value"><?php echo $map['value']; ?></div>
							</div>
						</div>
					<?php endforeach;?>
				<?php endif;?>
				</div>
				
				<div class="lmskaran_price_users">
					<div class="lmskaran_cost_course"><span><?php echo $course->cost; ?></span>تومان</div>
					<div class="lmskaran_user_reg_in_course">
						<!-- <div class="lmskaran_icon_user"><img src="/images/icons/user_1.png"></div> -->
						<span><?php echo $course->number_of_participants; ?> </span>
						دانشجو
					</div>
				</div>
			</div>
		</div>
      </div>
      <?php endforeach; ?>
   </div>
   <!-- Add Pagination -->
   <div class="swiper-pagination swiper-pagination-<?php echo $module->id; ?>"></div>
   <!-- Add Arrows -->

</div>
</div>
</div>
</div>
<!-- Initialize Swiper -->
<?php
    $document = JFactory::getDocument();
    $document->addScript('/modules/mod_moojlacourseslider/assets/swiper-bundle/swiper-bundle.min.js');
    $document->addScript('/modules/mod_moojlacourseslider/assets/js/courseSliderUdemy/particles.js');
	$document->addScriptOptions('moduleid', $module->id);
	
?>

<script>
// var moduleid= Joomla.getOptions('moduleid');
// alert(moduleid)
</script>
<!-- <script src="/modules/mod_moojlacourseslider/assets/js/courseSliderUdemy/particles.js"></script>
 <script src="/modules/mod_moojlacourseslider/assets/js/courseSliderUdemy/app.js"></script>-->
<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,
       },
     },
        allowTouchMove: false
   });


   // jQuery(document).ready(function($)
    jQuery(window).load(function($)
   {

       var $= jQuery

       $(window).resize(function(){
           placement()
       });
       

	   $('.lmskaran_course_box').hover(

	   function(){
		   var _this= $(this);
		    _this.find('.lmskaran_popup_course').stop(true,false,true).fadeToggle(200)
	   }
	   )

       swiper.on('transitionEnd', function () {
           console.log('t e');
           placement()
       });
       placement()
	  function placement()
      {
          // console.log('----------------------------------------------start placement()---------------------------');
          $('.lmskaran_course_box').find('.lmskaran_popup_course').removeClass('displayfromleft')
          var windowWidth =$(window).width()

          var swiper_offset_left= $('.swiper-container').offset().left
          var swiper_outerwidth=  $('.swiper-container').outerWidth()
          var swiper_offset_right= windowWidth - (swiper_offset_left+ swiper_outerwidth)

          // console.log('swiper_offset_right '+swiper_offset_right+'_ swiper_offset_left '+swiper_offset_left+'_ swiper_outerwidth '+swiper_outerwidth+'_ windowWidth '+windowWidth)
           $('.lmskaran_course_box').each(function(){


              var box_offset_left= $(this).offset().left
              var box_outerwidth=  $(this).outerWidth()
              var box_offset_right= windowWidth - (box_offset_left+ box_outerwidth)

              var popup_offset_left= $(this).find('.lmskaran_popup_course').offset().left
              var popup_outerwidth=  $(this).find('.lmskaran_popup_course').outerWidth()
              // var popup_offset_right= windowWidth - (popup_offset_left+ popup_outerwidth)
              var popup_offset_right= box_offset_right - (((2/100)*box_outerwidth) + popup_outerwidth)

               // console.log(
               //     'box_offset_right '+box_offset_right+'_ box_offset_left '+box_offset_left+'_ box_outerwidth '+box_outerwidth+'_ popup_outerwidth '+popup_outerwidth+'_ popup_offset_left '+ popup_offset_left+'_ cal '+ ((2/100)*box_outerwidth)
               // );
               // console.log('popup_offset_right '+popup_offset_right+'_ popup_offset_left '+popup_offset_left+'_ popup_outerwidth '+popup_outerwidth)
               // console.log(
               //     $(this)
               // );
               // console.log(
               //
               //     '------------------end------------------'
               // );

              if(box_offset_right +5 >= swiper_offset_right && box_offset_left >= swiper_offset_left)
              {


                  if(popup_offset_right >= swiper_offset_right)
                  {

                  }
                  else
                  {

                      $(this).find('.lmskaran_popup_course').addClass('displayfromleft')
                  }
              }

          })
      }
   })
   
</script>




<style>

.displayfromleft {
	
	/* left:calc(-97% + 20px) !important; */
}

.displayfromleft .lmskaran_popup_pointer {
    right: -20px;
}

.displayfromleft .lmskaran_popup_pointer .lmskaran_popup_pointerinner {
    right: 50%;
}

/* 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%;
   padding: 40px 0;
}

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

.swiper-button-next-<?php echo $module->id; ?>,
.swiper-button-prev-<?php echo $module->id; ?> {
   background: #3a3a3c;
   transition:0.5s;

}

.swiper-button-next-<?php echo $module->id; ?>:hover,
.swiper-button-prev-<?php echo $module->id; ?>:hover {
   background: #d00202;

}

.swiper-button-next-<?php echo $module->id; ?>{
	right:0px;
}

.swiper-button-prev-<?php echo $module->id; ?>{
	left:0px;
}

.swiper-button-next-<?php echo $module->id; ?>:after,
.swiper-button-prev-<?php echo $module->id; ?>:after {
    font-size: 20px;
    color: white;
    font-weight: bold;
	text-rendering: auto;
}


</style>