@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) }}" class="img-responsive" alt="">-->
    @endif
    @if(empty($course_detail->course_image))
    <!--<img src="{{ asset('images/noimage.jpeg') }}" alt="">-->
    @endif
    <img src="{{ asset('images/coursedetail-img.jpg') }}" alt="" class="img-responsive" />
    <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>
    </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">
        </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 class="container no-padding top-margin-25">
      <div class="panel-group" id="accordion1">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title iconm-about">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse1">About Course</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">
              <p>{!! $course_detail->description !!}</p>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title iconm-course-outline">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse2">Course Outline</a>
            </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
               <p>{!! $course_detail->course_outline !!}</p>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title iconm-course-outcome">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse3">Learning Outcomes</a>
            </h4>
          </div>
          <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">
              <p>{!! $course_detail->learning_outcomes !!}</p>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title iconm-other-details">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse4">Other Details</a>
            </h4>
          </div>
          <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body">
              
              <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->course_hours <= 8 )one @endif
                @if($course_detail->course_hours > 8 && $course_detail->course_hours <= 30) Two @endif
                day (
                @if($course_detail->course_hours <= 8 ){{ $course_detail->course_hours }} hour)@endif
		@if($course_detail->course_hours > 8 && $course_detail->course_hours <= 30) 6 hour each)@endif course</p>

            <h2>Certificate</h2>
            <p class="last">SCTI Certificate of Attendance</p>
          </div>
        </div>
        <div class="course-other-det-rt">
          <div class="course-other-map" ng-if="marker.coords">
            <!--<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31131.753901897442!2d-6.317016000106216!3d53.348922726075905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670e80ea27ac2f%3A0xa00c7a9973171a0!2sDublin%2C+Ireland!5e0!3m2!1sen!2sin!4v1496464866488" width="100%" height="311" frameborder="0" style="border:0" allowfullscreen></iframe>-->
            <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>

      </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