@extends('layouts.layout-inner')

@section('content')
<!-- Page Top Search / END -->
<div class="scti-container-in top-bot-spacer-40">
<!-- Course Banner / START -->
  <div class="course-details-banner">
    @if(!empty($course_detail->course_image))
    <!--<img src="{{ asset('uploads/medias/' . $course_detail->course_image_entity_type . '/' . $course_detail->course_image_entity_id . '/' . $course_detail->course_image) }}" width="1170" width="477" alt="">-->
    @endif
    @if(empty($course_detail->course_image))
    <!--<img src="{{ asset('images/coursedetail-img.jpg') }}" alt="">-->
    @endif
    <img src="{{ asset('images/coursedetail-img.jpg') }}" alt="">
    <div class="cb-img-det">
      <h1>{{ $course_detail->title }}</h1>
      <div class="content-det course-loc">{{ $course_detail->county }}</div>
      <div class="content-det course-booked">{{ $course_detail->seats_booked }} People booked this course</div>
	@if($course_detail->slug == '117-first-aid-responsefar') <div class="content-det"><span class="fa fa-calendar"></span> This is 3 day course </div> @endif
    </div>
  </div>
  <div class="course-booking" ng-controller="cartController" data-ng-init="getCourseDates({{ $course_detail->course_id }}, {{ $course_detail->course_schedule_id }}, {{ $course_detail->county_id }})">
    <form name="bookCourse" id="bookCourse">
      <div class="course-booking-lt">
        <div class="course-dt course-dt-ico">
          <ol class="nya-bs-select schedule-select" name="schedule_id" id="schedule_id" ng-init="courseFields.schedule_id = selectedScheduledId" ng-model="courseFields.schedule_id" title="{{ $course_detail->start_date }}" multiple>
            <li nya-bs-option="(id, value) in scheduleDates group by value.start_date" value="value.id">
              <a>
                <% value.start_date | dateToISO | date:'d MMM yyyy' %>
                <span class="glyphicon glyphicon-ok check-mark"></span>
              </a>
            </li>
          </ol>
          <!--<select name="schedule_id" id="schedule_id" ng-model="courseFields.schedule_id" class="selectpicker" title="Select date" multiple>
            <option ng-repeat="s_date in scheduleDates" ng-value="<% s_date.id %>"><% s_date.start_date | dateToISO | date:'d MMM yyyy' %></option>
          </select>-->
          <!--<select name="schedule_id" id="schedule_id" ng-model="courseFields.schedule_id">
            @foreach($scheduleDates as $s_date)
              <option value="{{ $s_date->id }}" ng-selected="courseFields.schedule_id==1">{{ $s_date->start_date }}</option>
            @endforeach
          </select>-->
	</div>

        <div class="course-seat">{{ $course_detail->seats_vacant }}</div>
        <div class="course-amt">{{ $course_detail->course_fees }}</div>
        <div class="course-qty">Qty:
          <!--<input class="course-qty-bx" name="seat_qty" id="seat_qty" ng-model="courseFields.seat_qty" type="text" maxlength="2" ng-init="courseFields.seat_qty=1">-->
          <input class="dec-num" type="button" ng-click="decrementValue({{ $course_detail->seats_vacant }})" value="-" >
          <input class="cart-num" name="seat_qty" id="seat_qty" ng-model="courseFields.seat_qty" type="text" value="1" maxlength="2" ng-init="courseFields.seat_qty=1" max="{{ $course_detail->seats_vacant }}" size="1">
          <input class="inc-num" type="button" ng-click="incrementValue({{ $course_detail->seats_vacant }})" value="+">
        </div>
      </div>
      <!--<input type="hidden" name="schedule_id" id="schedule_id" ng-model="courseFields.schedule_id" ng-init="courseFields.schedule_id = '{{ $course_detail->course_schedule_id }}'">-->
      <input type="hidden" name="start_date" id="start_date" ng-model="courseFields.start_date" ng-init="courseFields.start_date = '{{ $course_detail->start_date }}'">
      <input type="hidden" name="course_fees" id="course_fees" ng-model="courseFields.course_fees" ng-init="courseFields.course_fees = {{ $course_detail->course_fees }}">
      <div class="course-booking-rt">
        <!--<a href="" class="add-people"></a>-->
        <button type="submit" class="btn booking-btn w-calender" ng-click="addToCart(courseFields, 'booking')">Book Now</button>
        <button type="submit" class="btn booking-btn w-cart" ng-click="addToCart(courseFields, 'cart')">Add to Cart</button>
      </div>
    </form>
  </div>
  <!-- Course Banner / END -->
  <div class="clearfix"></div>
  <!-- Course Details / START -->
  <div id="course-det" class="course-det-cont">
    <ul id="tabs" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#cd1" role="tab" data-toggle="tab">About Course</a></li>
      <li role="presentation"><a href="#cd2" role="tab" data-toggle="tab">Course Outline</a></li>
      <li role="presentation"><a href="#cd3" role="tab" data-toggle="tab">Learning Outcomes</a></li>
      <li role="presentation"><a href="#cd4" role="tab" data-toggle="tab">Other Details</a></li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active course-det-cont" id="cd1">
        <p>{!! $course_detail->description !!}</p>
        <div class="clearfix"></div>
      </div>
      <div role="tabpanel" class="tab-pane fade course-det-cont" id="cd2">
        <p>{!! $course_detail->course_outline !!}</p>
        <div class="clearfix"></div>
      </div>
      <div role="tabpanel" class="tab-pane fade course-det-cont" id="cd3">
        <p>{!! $course_detail->learning_outcomes !!}</p>
        <div class="clearfix"></div>
      </div>
      <div role="tabpanel" class="tab-pane fade course-det-cont" id="cd4">
        <div class="course-other-det-lt">
          <div class="course-other-contact">
            <h2>Contact & Location</h2>
            <p>{{ $course_detail->course_time }}. {{ $course_detail->course_date }}. {{ $course_detail->address_1 }}, {{ $course_detail->street }},<br>
              {{ $course_detail->county }} ({{ $course_detail->postal_code }}) </p>
          </div>
          <div class="course-other-duration">
            <h2>Duration</h2>
            <p>This is a 
		@if($course_detail->slug == '117-first-aid-responsefar') 3 Day course (2nd to 4th Jan 2019 6 hour/day ) @else one day ({{ $course_detail->course_hours }} hour)  course @endif </p>
            <h2>Certificate</h2>
            <p class="last">SCTI Certificate of Attendance</p>
          </div>
        </div>
        @php
          $mapImage = '';
          if (!empty($course_detail->location_latitude) && !empty($course_detail->location_longitude)) {
            $mapImage = "https://maps.googleapis.com/maps/api/staticmap?center=$course_detail->location_latitude,$course_detail->location_longitude&zoom=8&size=450x360&markers=color:red%7C$course_detail->location_latitude,$course_detail->location_longitude&sensor=false";
          }
        @endphp
        @if (!empty($mapImage))
        <div class="course-other-det-rt">
          <!--<img src="{{ $mapImage }}" alt="Map">-->
          <!--<div data-ng-if="marker.coords">
            <div class="angular-google-map-container">
              <div class="angular-google-map">
              <ui-gmap-google-map center='map.center' zoom='map.zoom' options='options'>
                <ui-gmap-marker coords="marker.coords" options="marker.options" idkey="marker.id"></ui-gmap-marker>
              </ui-gmap-google-map>
              </div>
            </div>
          </div>-->
        </div>
        @endif
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
  <!-- Course Details / END -->
  <div class="clearfix"></div>
  <!-- Course T&C / START -->
  @if ($course_detail->course_id == '11')
  <div id="course-tandc">
    <p>Whatever your requirements, <strong>Social Care Training Ireland</strong> has a <strong>Supervision course</strong> to fit. We tailor our courses to the needs, the profile and the activities of your business, your family unit, your club, your crèche, your school or your organisation. If you are simply a group of friends with a shared interest in <strong>Supervision courses</strong> to keep those closest to you safe,<br>
      we will design and deliver a course especially for you.</p>
  </div>
  @endif
  <!-- Course T&C / END -->
</div>
<div class="clearfix"></div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $("#seat_qty").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and.
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});
</script>
@endpush