@extends('layouts.layout-inner')

@section('content')

<div ng-controller="courseListingCtrl" ng-init="loadSearchResults()">

<div class="container top-spacer">
  <div id="filter-dd" class="btn-group">
    <form name="formCourseFilter" id="formCourseFilter" method="post">
      <a class="dropdown-toggle filter-drop" data-toggle="dropdown">Filter</a>
      <ul id="filter-drop" class="dropdown-menu" role="menu">
        <li>
          <div class="container">
            <!--<div class="col-md-6">
              <h2>Filter by</h2>
              <div class="checkbox checkbox-success">
                <input id="filterByDate" name="filterByDate" ng-model="filter.byDate" class="styled" type="checkbox">
                <label for="filterByDate">Date</label>
              </div>
              <div class="checkbox checkbox-success">
                <input id="filterByPlace" name="filterByPlace" ng-model="filter.byPlace" class="styled" type="checkbox">
                <label for="filterByPlace">Place</label>
              </div>
              <div class="checkbox checkbox-success">
                <input id="filterByVenue" name="filterByVenue" ng-model="filter.byVenue" class="styled" type="checkbox">
                <label for="filterByVenue">Venue</label>
              </div>
            </div>-->
            <div class="col-md-6">
              <h2>Filter by Course</h2>
              <div class="checkbox checkbox-success">
                <input id="filterByUpcoming" name="filterByUpcoming" ng-model="filter.byUpcoming" class="styled" type="checkbox">
                <label for="filterByUpcoming">Upcoming</label>
              </div>
              <div class="checkbox checkbox-success">
                <input id="filterByPopular" name="filterByPopular" ng-model="filter.byPopular" class="styled" type="checkbox">
                <label for="filterByPopular">Most Popuplar</label>
              </div>
              <!--<div class="checkbox checkbox-success">
                <input id="checkbox6" class="styled" type="checkbox">
                <label for="checkbox6">Video Course</label>
              </div>-->
            </div>
            <div class="col-md-12 filter-search-cont">
              <button type="button" class="btn filter-search-btn" ng-click="filterListing(filter)">Search</button>
            </div>
          </div>
        </li>
      </ul>
    </form>
  </div>

  <div class="course-page-hd">Courses</div>
  <!--<a class="map-view-btn" ng-init="showMap=false" ng-click="showMap = !showMap">Map View</a>
  <div class="map-view-wrap" ng-show="showMap">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d38111.61071730949!2d-6.334766489013668!3d53.34369172377372!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670e80ea27ac2f%3A0xa00c7a9973171a0!2sDublin%2C+Ireland!5e0!3m2!1sen!2sin!4v1496387449347" width="100%" height="420" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>-->
</div>
<div class="container-fluid course-list-area-in">
  <div class="container intrested-courses-list">
    <h2 ng-if="autoSuggest" style="color: #8bc34a;font-size: 24px;" ng-cloak>No results from <% countyName %>, you might be interested in following.</h2>
    <div class="row">

        <div ng-if="listCourses.length > 0" class="col-md-4" ng-repeat="courseObj in listCourses">
          <div class="intrested-courses top-spacer">
            <div ng-if="courseObj.course_image" class="course-image" ng-class="{'course-img-color-1' : $index%3 == 0, 'course-img-color-2' : $index%3 == 1, 'course-img-color-3' : $index%3 == 2}">
              <div class="heart" ng-click="addToWishlist(courseObj.course_id)"></div>
            </div>
            <div ng-if="!courseObj.course_image" class="course-image" ng-class="{'course-img-color-1' : $index%3 == 0, 'course-img-color-2' : $index%3 == 1, 'course-img-color-3' : $index%3 == 2}">
              <div class="heart" ng-click="addToWishlist(courseObj.course_id)"></div>
            </div>
            <div class="course-details heightMin230 pad-b-20">
              <div class="item-card-h">
                <h2><a href="{{ url('/') }}/course/<% courseObj.course_slug %>"><% courseObj.title %></a></h2>
                <p><a href="{{ url('/') }}/course/<% courseObj.course_slug %>" ng-bind-html="courseObj.description | limitTo:70"></a></p>
              </div>
              <!--<div id="hearts-existing" class="starrr" data-rating='4'></div>-->
              <ng-rate-it ng-init="course.rateit . courseObj.course_id = courseObj.rating_score" ng-model="course.rateit . courseObj.course_id" ng-click="addRating(courseObj.main_course_id, course.rateit . courseObj.course_id, courseObj.course_id)" resetable="false"></ng-rate-it>
              <div class="next-c-in">
                <p>Next Course in</p>
                <span ng-if="courseObj.days_remaining == 'today'">
                  <div class="next-c-in-time"><% courseObj.days_remaining %></div>
                </span>
                <span ng-if="courseObj.days_remaining != 'today'">
                  <div class="next-c-in-time"><% courseObj.days_remaining %><span>Days</span></div>
                </span>
              </div>
              <div class="place-rem">
              <p>Course Start Date</p>
              <h2><% courseObj.start_date | dateToISO | date:'d MMM yyyy' %></span></h2>
              </div>
                <div class="course-place">
                  <p>Place</p>
                  <div class="next-c-in-time course-place-det"><% courseObj.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><% 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="{{ url('/') }}/course/<% courseObj.course_slug %>">View Details</a></div>
              </div>
            </div>
          </div>
        </div>
        <div ng-if="listCourses.length == 0">
          <div class="course-page-hd">
              No courses avaliable.
          </div>
        </div>

    </div>
  </div>
</div>

</div>
@endsection