@if (count($recommendedCourses) > 0)
<div id="recom-course" class="container">
    <h3 class="page-heading">Recommended Courses</h3>
    <div class="row">
    <div id="rec-course-slider" class="carousel slide" data-ride="carousel"> 

        <!-- Indicators -->
        <ol class="left carousel-indicators">
        <li data-target="#rec-course-slider" data-slide-to="0" class="active"></li>
        <li data-target="#rec-course-slider" data-slide-to="1"></li>
        </ol>
        
        <!-- Wrapper for slides -->
        <div class="carousel-inner">

        @foreach ($recommendedCourses as $key => $courses)
            <div class="item {!! ($key == 0) ? 'active' : '' !!}">
                <div class="row">
                    @foreach ($courses as $key => $courseObj)
                        @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="col-md-4">
                        <div class="intrested-courses">
                            @if(isset($courseObj->course->media->image))
                            <div class="course-image {{ $backImgClass }}">
                                <div class="heart" ng-click="addToWishlist({{ $courseObj->id }})"></div>
                            </div>
                            @endif
                            @if(!isset($courseObj->course->media->image))
                            <div class="course-image {{ $backImgClass }}">
                                <div class="heart" ng-click="addToWishlist({{ $courseObj->id }})"></div>
                            </div>
                            @endif
                            <div class="course-details heightMin230 pad-b-20">
                            <div class="item-card-h">
                                <h2><a href="{{ route('frontend.course.detail', ['slug' => $courseObj->slug]) }}">{{ $courseObj->course->title }}</a></h2>
                                <p><a href="{{ route('frontend.course.detail', ['slug' => $courseObj->slug]) }}">{!! str_limit(strip_tags($courseObj->course->description), 75) !!}</a></p>
                            </div>
                            @php
                            $total_rating = 0;
                            $course_rating = 0;
                            if (isset($courseObj->rating_score)) {
                                $course_rating = $courseObj->rating_score;
                            }
                            /*if (isset($courseObj->course->ratings)) {
                                $ratingsCount = count($courseObj->course->ratings);
                                if ($ratingsCount > 0) {
                                    foreach ($courseObj->course->ratings as $rating_data) {
                                        $total_rating = $rating_data->rating + $total_rating;
                                    }
                                    $course_rating = $total_rating/$ratingsCount;
                                }
                            }*/
                            @endphp
                            <!--<div id="hearts-existing" class="starrr" data-rating='4'></div>-->
                            <ng-rate-it ng-init="course.rateit{{ $courseObj->id }} = {{ $course_rating }}" ng-model="course.rateit{{ $courseObj->id }}" ng-click="addRating({{ $courseObj->course->id }}, course.rateit{{ $courseObj->id }}, {{ $courseObj->id }})" resetable="false"></ng-rate-it>
                            <div class="next-c-in">

                            @php
                                $created = new Carbon\Carbon($courseObj->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($courseObj->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($courseObj->county) }}</div>
                            </div>
                            <div class="clearfix"></div>
                            </div>
                            <div class="course-controls">
                            <div id="socialHolder">
                                <div id="socialShare" ng-click="shareCourse('{{ $courseObj->slug }}', '{{ $courseObj->course->title }}')" class="btn-group share-group">
                                    <a href="" class="course-seat"><span>{{ $courseObj->seats_vacant }}</span></a>
                                    <a href="" class="seat-rate"><span class="ng-binding">{{ $courseObj->course_fees }}</span></a>
                                    <a href=""><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' => $courseObj->slug]) }}">View Details</a></div>
                            </div>
                            </div>
                        </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
        </div>
        
        <!-- Controls --> 
        <a class="left carousel-control" href="#rec-course-slider" data-slide="prev"> <span class="rec-course-left"></span> </a> <a class="right carousel-control" href="#rec-course-slider" data-slide="next"> <span class="rec-course-right"></span> </a> </div>
    </div>
</div>
@endif