@extends('layouts.layout-admin')

@section('content')
@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="row box-body" ng-controller="courseCtrl" data-ng-init="loadCourse({{ $course->id }})">
  <form method="post" action="{{ route('courses.update', ['id' => $course->id]) }}" name="courseForm" enctype="multipart/form-data">
    <!-- Custom Tabs -->
    <div class="nav-tabs-custom">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#course" data-toggle="tab">Course</a></li>
        <li><a href="#media" data-toggle="tab">Media</a></li>
        <li><a href="#category" data-toggle="tab">Course type</a></li>
        <li><a href="#seo" data-toggle="tab">SEO</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="course">
          <div class="form-group">
            <label for="course_code">Course code:</label>
            <input type="text" class="form-control" id="course_code" name="course_code" ng-blur="courseCodeValidate(courseFields.course_code, {{ $course->id }})" value="{{ $course->course_code }}" ng-model="courseFields.course_code" readonly required>
            <div class="help-block has-error" ng-messages="courseForm.course_code.$error" ng-if="courseForm.course_code.$touched">
              @include('courses::partials.errormessages')
              <span class="help-block" ng-show="codeExists">Course code should be unique.</span>
            </div>
          </div>

          <div class="form-group">
            <label for="title">Course name:</label>
            <input type="text" class="form-control" id="title" name="title" value="{{ $course->title }}" ng-model="courseFields.title" ng-minlength="5" ng-maxlength="150" required>
            <div class="help-block has-error" ng-messages="courseForm.title.$error" ng-if="courseForm.title.$touched">
              @include('courses::partials.errormessages')
            </div>
          </div>

          <div class="form-group">
            <label for="description">Description:</label>
            <div text-angular name="description" id="description" ng-model="courseFields.description" required></div>
          </div>
          <div class="form-group">
            <label for="course_outline">Course outline:</label>
            <div text-angular name="course_outline" id="course_outline" ng-model="courseFields.course_outline"></div>
            <!--<input type="text" class="form-control" id="course_outline" name="course_outline" value="{{ $course->course_outline }}" ng-model="courseFields.course_outline">-->
          </div>
          <div class="form-group">
            <label for="learning_outcomes">Learning outcomes:</label>
            <div text-angular name="learning_outcomes" id="learning_outcomes" ng-model="courseFields.learning_outcomes"></div>
            <!--<input type="text" class="form-control" id="learning_outcomes" name="learning_outcomes" value="{{ $course->learning_outcomes }}" ng-model="courseFields.learning_outcomes">-->
          </div>
          <div class="form-group">
            <label for="unit_price">Unit price:</label>
            <input type="text" class="form-control" id="unit_price" name="unit_price" placeholder="" value="{{ $course->unit_price }}" ng-model="courseFields.unit_price" required>
            <div class="help-block has-error" ng-messages="courseForm.unit_price.$error" ng-if="courseForm.unit_price.$touched">
              @include('courses::partials.errormessages')
            </div>
          </div>
          <div class="form-group">
            <label for="duration">Duration:</label>
            <input type="text" class="form-control" id="duration" name="duration" value="{{ $course->duration }}" ng-model="courseFields.duration">
          </div>
          <div class="form-group">
            <label for="pre_order_display_message">Pre order display message:</label>
            <input type="text" class="form-control" id="pre_order_display_message" name="pre_order_display_message" value="{{ $course->pre_order_display_message }}" ng-model="courseFields.pre_order_display_message">
          </div>
          <div class="form-group">
            <label for="post_order_display_message">Post order display message:</label>
            <input type="text" class="form-control" id="post_order_display_message" name="post_order_display_message" value="{{ $course->post_order_display_message }}" ng-model="courseFields.post_order_display_message">
          </div>
          <div class="form-group">
            <label for="category_id">Category:</label>
            <select class="form-control" id="category_id" name="category_id">
              <option value="">-Please select-</option>
              @foreach($categories as $category)
                <option value="{{ $category->id }}" {{ ($category->id == $course->category_id) ? 'selected' : '' }}>{{ $category->category_name }}</option>
              @endforeach
            </select>
          </div>
          <div class="form-group">
            <label for="is_enabled">Enable:</label>
            <select id="is_enabled" name="is_enabled" class="form-control" ng-model="courseFields.is_enabled">
              <option value="1" ng-selected="courseFields.is_enabled == 1">Active</option>
              <option value="0" ng-selected="courseFields.is_enabled == 0">Disabled</option>
            </select>
          </div>
        </div> <!-- /.course tab-pane -->
        <!-- /.tab-pane -->
        <div class="tab-pane" id="category">
          @foreach($types as $type)
          <div class="radio">
            <label><input type="radio" name="type_id" id="type_id" value="{{ $type->id }}" {{ ($type->id == $course->type_id) ? 'checked' : '' }}>{{ $type->type_name }}</label>
          </div>
          @endforeach
        </div>
        <!-- /.tab-pane -->
        <div class="tab-pane" id="seo">
          @include('courses::partials.seo')
        </div>
        <!-- /.tab-pane -->

        <!-- /.tab-pane -->
        <div class="tab-pane" id="media">
          <div class="form-group">
              <span ng-if="courseImageFields.image">
                <img ng-if="courseImageFields.entity_type" ng-src="{{ asset('uploads/medias') }}/<% courseImageFields.entity_type %>/<% courseImageFields.entity_id %>/thumbs/<% courseImageFields.image %>" alt="<% courseImageFields.image_alt %>" class="img-thumbnail" width="100" height="100">
                <img ng-if="!courseImageFields.entity_type" ng-src="{{ asset('uploads/medias') }}/<% courseImageFields.image %>" alt="<% courseImageFields.image_alt %>" class="img-thumbnail" width="100" height="100">
              </span>
              <a class="btn btn-default" ng-click="uploadCourseImage({{ $course->id }})">Upload Course Image</a>
          </div>
        </div>
        <!-- /.tab-pane -->
      </div>
      <!-- /.tab-content -->
    </div>
    <!-- nav-tabs-custom -->
    {!! csrf_field() !!}
    <input name="_method" type="hidden" value="PATCH">
    <button ng-click="redirectFlag=true" type="submit" class="btn btn-primary" ng-disabled="courseForm.$invalid">Save</button>
    <button ng-click="redirectFlag=false" type="submit" class="btn btn-primary" ng-disabled="courseForm.$invalid">Save &amp; Close</button>
    <button class="btn btn-default" ng-click="listingPage()">Cancel</button>
  </form>
</div>
@endsection