@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="{{ asset('css/select2.css') }}" />
@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">Edit Level: {{ $level->name }}</span>
          <hr> {!! $errors !!}
          <div class="row">
            <div class="col s12">
              {!! Form::model($level, ['route' => ['level.update', $level->id], 'method' => 'PUT', 'class' => 'col s12', 'files' => true])
              !!} {!! Form::token() !!}

              <div class="row">

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

                  {{-- {!! Form::number('order',$level->order, ['id' => 'order', 'class' => 'active','readonly'=>'true']) !!}  --}}
                  <input type="number"  @if($level->order == 0) readonly @endif class="active" id="order" name="order" value="{{ $level->order }}">
                  {!! Form::label('order','Order') !!}
                </div>
                <div class="input-field col s12 m6" id="gamesId">
                  {!! Form::select('games[]', $allGames,$games, ['id' => 'games','multiple'=>'multiple']); !!}

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

									{!! Form::number('repeat_count',isset($repeat_count) ? $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="col s12 m12">
                  {!! Form::select('phrases[]',$phrases,$levelPhrases, ['id' => 'phrases','multiple'=>'multiple','class'=>'browser-default
                  js-example-basic-multiple']); !!} {!! Form::label('phrases[]', 'Select Phrases') !!}
                </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, $level->is_exam,['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>
@endsection


<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/select2/4.0.6-rc.0/js/select2.min.js" defer='defer'></script>


<script defer='defer'>
  $(function(){
    $('.js-example-basic-multiple').select2({width:"100%"}); //For search


      $("#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 disabled='true' selected>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").val("{{ $level->levelGroupId }}").change();
                        $("#levelGroupsId").formSelect();
                    }

                },"json"
            )
        });



      $("#courseId").change();

      let isExam = false;
      let isExamId = '';
      let isExamName = '';

      function checkIsExam() {
        $.post(
          "{{ url('checkIsExam') }}",
          {
            '_token': "{{ csrf_token() }}",
            'levelId': "{{ $level->id }}",
            '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;
            }
              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?");
                  $("#isExam").click();
                  if(ans) {
                    window.open("{{ url('/level/') }}/"+isExamId+"/edit","_blank");
                  }
                  return false;
                }
                else {
                  return true;
                }

            }
          }
        );
      }


        $("#isExam").change(function(){
            if ($("#isExam").prop("checked")) {
              checkIsExam();
            }


        });

    });

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

</script>