@if (count($recommendedCourses) > 0)
<h2 class="main-head">Recommended Courses</h2>
      <div class="spacer-25h"></div>
      <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="rec-course-slider3">
        <!-- Overlay -->
        <!-- <div class="overlay"></div>-->
        
        <!-- Indicators -->
        <ol class="carousel-indicators">
            @foreach ($recommendedCourses as $key => $courses)
                <li data-target="#rec-course-slider3" data-slide-to="{{ $key }}" class="{!! ($key == 0) ? 'active' : '' !!}"></li>
            @endforeach
        </ol>
        
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
        @foreach ($recommendedCourses as $key => $courses)
          @php
          $backImgClass = 'course-img-color-1';
          $keyVal = $key%3;
          switch ($keyVal) {
              case 0:
                  $backImgClass = 'course-img-color-1';
              break;
              case 1:
                  $backImgClass = 'course-img-color-2';
              break;
              case 2:
                  $backImgClass = 'course-img-color-3';
              break;
              default:
                  $backImgClass = 'course-img-color-1';
          }
          @endphp
          <div class="item slides {!! ($key == 0) ? 'active' : '' !!}">

            <div class="slide-{{ $key }}">
              <div class="intrested-courses">
                @if(isset($courses->course->media->image))
                <div class="course-image {{ $backImgClass }}">
                    <div class="heart" ng-click="addToWishlistMobile({{ $courses->id }})"></div>
                </div>
                @endif
                @if(!isset($courses->course->media->image))
                <div class="course-image {{ $backImgClass }}">
                    <div class="heart" ng-click="addToWishlistMobile({{ $courses->id }})"></div>
                </div>
                @endif
                <div class="course-details heightMin230 pad-b-20">
                  <h2><a href="{{ route('frontend.course.detail', ['slug' => $courses->slug]) }}">{{ $courses->course->title }}</a></h2>
                  <p><a href="{{ route('frontend.course.detail', ['slug' => $courses->slug]) }}">{!! str_limit($courses->course->description, 60) !!}</a></p>
                  <div id="hearts-existing" class="starrr" data-rating='4'></div>
                  <div class="next-c-in">
                    @php
                        $created = new Carbon\Carbon($courses->start_date);
                        $now = Carbon\Carbon::now();
                        $difference = ($created->diff($now)->days < 1) ? 'today' : $created->diffInDays($now);
                    @endphp

                    <p>Next Course in</p>
                    @if ($difference != 'today')
                        <div class="next-c-in-time">{{ $difference }}<span>Days</span></div>
                    @endif
                    @if ($difference == 'today')
                        <div class="next-c-in-time">{{ $difference }}</div>
                    @endif
                  </div>
                  <div class="place-rem">
                    <p>Course Start Date</p>
                    <h2>{{ Carbon\Carbon::parse($courses->start_date)->format('d M Y') }}</span></h2>
                  </div>
                    <div class="course-place">
                        <p>Place</p>
                        <div class="next-c-in-time course-place-det">{{ Helpers::fetchCountyName($courses->county) }}</div>
                    </div>
                  <div class="clearfix"></div>
                </div>
                <div class="course-controls">
                  <div id="socialHolder">
                    <div id="socialShare" class="btn-group share-group">
                        <a href="" class="course-seat"><span>{{ $courses->seats_vacant }}</span></a>
                        <a href="" class="seat-rate"><span class="ng-binding">{{ $courses->course_fees }}</span></a>
                        <a href="" ng-click="shareCourse('{{ $courses->slug }}', '{{ $courses->course->title }}')">
                            <i class="fa fa-share-alt light icon-gry" aria-hidden="true"></i>
                        </a>
                    </div>
                    <div class="view-detail-link"><a href="{{ route('frontend.course.detail', ['slug' => $courses->slug]) }}">View Details</a></div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        @endforeach
        </div>
      </div>
@endif