@extends('layouts.layout-inner')

@section('content')

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

  <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"></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"></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">
      <div class="row">

          <div ng-if="listCourses.length > 0" ng-repeat="courseObj in listCourses" class="col-xs-12 col-sm-6 col-md-6">
            <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">
                <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>
                <h3><a href="">Course starting date: <% courseObj.start_date | dateToISO | date:'d MMM yyyy' %></a></h3>
                <h4><a href="">Seats remaining: <% courseObj.seats_vacant %></a></h4>
                <h4><a href="">Place: <% courseObj.county %></a></h4>
              </div>

            <div class="course-controls">
              <div id="socialHolder">
                <div id="socialShare" class="btn-group share-group">
                  <a href="" ng-click="shareCourse(courseObj)"><i class="fa fa-share-alt light icon-gry" aria-hidden="true"></i></a>
                  <a href="" class="seat-rate"><span class="ng-binding"><% courseObj.course_fees %></span></a>
                  <a href=""><i class="fa fa-star icon-yellow" aria-hidden="true"></i> <span><% courseObj.course_rating %></span></a>
                  <!--<a href="" class="icon-add-user-grp"></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