@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">Create New Course</span>
					<hr>
					<div class="row">
						<div class="col s12">
							{!! Form::open(['route' => 'course.store', '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,
									['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">
								  <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>

							<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, true); !!}
												<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>