@extends('layouts.app')

@section("script")
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>

@section('content')
  @include('course.header')

<section class="">
  <div class="row">
    <div class="col s12">
      <div class="card white">
        <div class="card-content white">
          <span class="card-title">Edit Course: {{ $course->name }}</span>
          <hr>

          <div class="row">
            <div class="col s12">
              {!! Form::model($course, ['route' => ['course.update', $course->id], 'method' => 'PUT', 'class' => 'col s12', 'files' =>
              true]) !!} {!! Form::token() !!}

              <div class="row">
                <div class="input-field col s12 m6">
                  <i class="material-icons prefix">book</i> {!! Form::text('name', null, ['id' => 'name', 'class' => 'validate',
                  'required']) !!} {!! Form::label('name', 'Course Name') !!}
                </div>
                <div class="input-field col s12 m6">
                  <i class="material-icons prefix">fullscreen_exit</i> {!! Form::select('short_code',[null=>'Select Short
                  Code']+$short_codes,$course->short_code, ['id' => 'short_code', 'class' => 'validate', 'required']) !!}
                  {!! Form::label('short_code', 'Short Code') !!}
                </div>
              </div>
              <div class="row">
                <div class="file-field input-field col s12 m12">
                  <!--<div class="btn">
                    <span>Image <i class="material-icons left">photo</i></span> {!! Form::image('image') !!}
                  </div>
                  <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" value="{{ $course->image }}">
                  </div>-->
                  <i class="material-icons prefix">picture</i> {!! Form::text('image', null, ['id' => 'image', 'class' => 'validate',
                  'required']) !!} {!! Form::label('image', 'Course Image') !!}
                  <div class="btn" id="set_img_btn">
                    <span>Select <i class="material-icons left">photo</i></span>
                  </div>
                </div>

              </div>

              <div class="row">
                <div class="input-field col s12 m6">
                  <i class="material-icons prefix">keyboard_arrow_down</i> {!! Form::number('basic_level_index', null, ['id'
                  => 'basic_level_index']) !!} {!! Form::label('basic_level_index', 'Basic Level Index') !!}
                </div>
                <div class="input-field col s12 m6">
                  <i class="material-icons prefix">keyboard_arrow_up</i> {!! Form::number('advanced_level_index', null, ['id'
                  => 'advanced_level_index']) !!} {!! Form::label('advanced_level_index', 'Advanced Level Index') !!}
                </div>
                {{--
                <div class="input-field col s12 m4">
                  <i class="material-icons prefix">short_text</i> {!! Form::text('language_code', null, ['id' => 'language_code'])
                  !!} {!! Form::label('language_code', 'Language Code') !!}
                </div> --}}
              </div>
              <div class="row">
								<div class="input-field col s12 m6">
									{!! Form::select('exam_level_id', $course->levels, $advancedLevelId, ['id' => 'exam_level_id']); !!}
									 {!! Form::label('exam_level_id','Select Advanced Exam Level') !!}
								</div>
							</div>

              <div class="row">
                <div class="input-field col s12">
                  <i class="material-icons prefix">library_books</i> {!! Form::textarea('description', null, ['id' => 'description',
                  'class' => 'materialize-textarea']) !!} {!! Form::label('description ', 'Description') !!}
                </div>
              </div>
              <div class="row">
                <div class="input-field col s12 m6">
                  <div class="switch">
                    <label>
                      Disabled
                      {!! Form::checkbox('enabled', true,$course->enabled,['id'=>'enabled']); !!}
                      <span class="lever"></span>
                      Enabled
                    </label>
                  </div>
                </div>
              </div>


              {!! Form::button('Submit<i class="material-icons right">send</i>', ['type' => 'submit', 'class' => 'btn']);
              !!} {!! Form::close() !!}
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>
@endsection

@section('scripts')

<script>
  var filebase = 'http://lingo-api.tootle.review:9595/?accessToken={!! Form::token() !!}';
  var urlbase = 'http://lingo-api.tootle.review:3000';
  var jq = jQuery.noConflict();
  jq(function(){
    jq("#set_img_btn").on("click",()=>{
      jq.fancybox.open({
        src  : filebase,
        type : 'iframe',
        opts : {
          afterShow : function( instance, current ) {
            console.info( 'done!' );
          }
        }
      });
    })
  })

  window.addEventListener("message", function(ev) {
      //console.log('ev: ',ev.data);
      if (ev.data.message === "file_selected") {
          console.log("result: " + ev.data.file);
          $("#image").val(urlbase+ev.data.file);
          jq.fancybox.close();
      }
  });

</script>
<script>
  /*Pure js implemetation*/
  document.addEventListener('DOMContentLoaded', function(){
    let examCheckBox = document.getElementById("enabled");
    examCheckBox.addEventListener("click", checkIfCourseHasLevels);
    function checkIfCourseHasLevels(){
        if(examCheckBox.checked){
          let data = {
					_token: "{{ csrf_token() }}",
					 courseId: '{!! $course->id !!}'
				}

          let url = "{{ url('checkIfCourseHasLevels') }}";

          fetch(url, {
              method: 'POST', // or 'PUT'
              body: JSON.stringify(data), // data can be `string` or {object}!
              headers:{
                'Content-Type': 'application/json'
              }
            }).then(res => res.json())
            .then(response => {
              console.log(response);
              if(!response){
                alert("Please create levels before you enable this course !");
                examCheckBox.checked=false;
              }
            })
            .catch(error => console.error('Error:', error));
        }
    }


}, false);
</script>