@extends('layouts.app')
@section("script")

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" /> {{--
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> --}} {{--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css"> --}}

<!-- Latest compiled and minified JavaScript -->


@section('content')
	@include('level.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 Level</span>
					<hr> {!! $errors !!}
					<div class="row">
						<div class="col s12">
							{!! Form::open(['route' => 'level.store', 'class' => 'col s12', 'files' => true]) !!} {!! Form::token() !!}
							<div class="row">

								<div class="input-field col s12 m6">
									{!! Form::select('courseId', $courses, null, ['id' => 'courseId','placeholder'=>'Select Course']); !!} {!! Form::label('courseId',
									'Course') !!}
								</div>
								<div class="input-field col s12 m6" id="levelGroups">
									<select name="levelGroupId" id="levelGroupsId" placeholder="Select Level Group">

									</select> {!! Form::label('levelGroupsId', 'Level Groups') !!}
								</div>
								<div class="input-field col s12 m6">

									{!! Form::number('order', null, ['id' => 'order', 'class' => 'active','readonly'=>'true']) !!}
									{!! Form::label('order', 'Order')
									!!}
								</div>
								<div class="input-field col s12 m6" id="gamesId">
									{!! Form::select('games[]', $games,null, ['id' => 'games','multiple'=>'multiple','placeholder'=>'Select Games']); !!} {!!
									Form::label('games', 'Games') !!}
								</div>
								<div class="input-field col s12 m6">

									{!! Form::number('repeat_count',1, ['id' => 'repeat_count', 'class' => 'active','step'=>'1']) !!}
									{!! Form::label('repeat_count', 'Game Repeat Count')
									!!}
								</div>
								<div class="input-field col s12 m6">
									{!! Form::number('points_awarded_on_completion', null, ['id' => 'points_awarded_on_completion']) !!} {!! Form::label('points_awarded_on_completion',
									'Points awarded on completion') !!}
								</div>


							</div>

							<div class="row">
								<div class="input-field col s12 m6">
									{!! Form::text('name', null, ['id' => 'name', 'class' => 'validate', 'required','maxlength'=>'15']) !!}
									{!! Form::label('name', 'Level Name')
									!!}
								</div>
								<div class="file-field input-field col s12 m6">

									{!! Form::text('image', null, ['id' => 'image', 'class' => 'validate', 'required']) !!} {!! Form::label('image', 'Level 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">
									{!! Form::textarea('description', null, ['id' => 'description', 'class' => 'materialize-textarea']) !!} {!! Form::label('description',
									'Description') !!}
								</div>
							</div>

							<div class="row">
								<div class="input-field col s12 m4">
									<div class="switch">
										<label>
											{!! Form::checkbox('is_exam', true, false,['id'=>'isExam']); !!}
											<span class="lever"></span>
											Is Exam?
										</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>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
{{--
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script> --}}

<script>
	// $('.js-example-basic-multiple').select2();
// $('.selectpicker').selectpicker();

</script>

<script>
	$(function() {
	$("#courseId").change(function() {
		let course = $("#courseId :selected").val();
		$.post(
			"fetchLevelGroups",
			{
				_token: "{{ csrf_token() }}",
				courseId: course
			},
			function(data) {
				if (data.status == 200) {
					let result = data.data;
					$("#levelGroupsId").empty();
					$("#levelGroupsId").append(
						"<option value=''>Select Level Group</option>"
					);
					for (let i = 0; i < result.length; i++) {
						$("#levelGroupsId").append(
							"<option value=" +
								result[i].id +
								">" +
								result[i].name +
								"</option>"
						);
					}
					// $("#levelGroups").slideDown('fast');
					$("#levelGroupsId").formSelect();
				}
			},
			"json"
		);
	});
	$("#levelGroupsId").on("change", () => {
		let levelGroup = $("#levelGroupsId :selected").val();
		if (levelGroup != null || levelGroup != undefined) {
			$.ajax({
				url: "{{ url('level/getLevelOrder') }}",
				type: "POST",
				data: {
					_token: "{{ csrf_token() }}",
					levelGroupId: levelGroup
				},
				beforeSend: function() {
					// $('#loading').html(`<img src="{{ asset('images/loading.gif') }}">`);
				},
				success: function(d) {
					$("#order").val(d);
					if(d == 0) {
						$("#order").attr('readonly','true');
					}
					else {
					    $("#order").removeAttr('readonly');
					}
				}
			});
		}
	});
});

</script>


<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();
      }
  });

	$(function(){
		let isExam = false;
		let isExamId = '';
		let isExamName = '';

		function checkIsExam() {
			$.post(
				"{{ url('checkIsExam') }}",
				{
					'_token': "{{ csrf_token() }}",
					'levelGroupId': $("#levelGroupsId").find('option:selected').val()
				},
				function(data) {
					if(data.data.length == 0) {
						isExam = false;
						isExamId = '';
						isExamName = '';
					}
					else {
						isExam = true;
						isExamId = data.data.id;
						isExamName = data.data.name;
					}
				}
			);
		}
	    $("#levelGroupsId").change(function(){
	    	checkIsExam();
	    });

	    $("#isExam").click(function(){
	    	checkIsExam();
	    	if($("#levelGroupsId").find("option:selected").val() == undefined || $("#levelGroupsId").find("option:selected").val() == '') {
	    		alert("Select level group");
	    		return false;
	    	}
	    	else {
		    	if(isExam) {
		    		let ans = confirm("Exam already present in level : "+isExamName+" \n Do you want to edit that level?");
		    		if(ans) {
		    			window.open("{{ url('/level/') }}/"+isExamId+"/edit","_blank");
		    		}
		    		return false;
		    	}
	    	}
	    });
	});

</script>
@endsection