@extends('layouts.app')
<link href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" defer rel="stylesheet">
@section("script")

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>


<!-- include summernote css/js -->

<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js" defer></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('levelGroup.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 Group</span>
          <hr>
          <div class="row">
            <div class="col s12">
              {!! Form::open(['route' => 'levelGroup.store', 'class' => 'col s12', 'files' => true]) !!} {!! Form::token() !!} {{ csrf_field()
              }}
              <div class="row">
                <div class="input-field col s12 m12">
                  <i class="material-icons prefix">book</i> {!! Form::text('name', null, ['id' => 'name', 'class' => 'validate',
                  'required']) !!} {!! Form::label('name', 'Name') !!}
                </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', 'Level Group 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">
                  {!! Form::select('courseId', $courses, null, ['id' => 'courseId']); !!} {!! Form::label('courseId', 'Course') !!}
                </div>
                <div class="input-field col s12 m6">
                  <i class="material-icons prefix">blur_on</i> {!! Form::number('order', null, ['id' => 'order', 'step' =>
                  '1']) !!} {!! Form::label('order', 'Order') !!}
                </div>
              </div>
              <div class="row">
                <div class="input-field col s12 m6">
                  <div class="switch">
                    <label>
                          Not a Shortcut
                          {!! Form::checkbox('is_shortcut',true,false); !!}
                          <span class="lever"></span>
                          Is a Shortcut
                        </label>
                  </div>
                </div>
                <div class="input-field col s12 m6">
                  <div class="switch">
                    <label>
                          Normal Chapter
                          {!! Form::checkbox('is_bonus',true,false); !!}
                          <span class="lever"></span>
                          Bonus Chapter
                        </label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="input-field col s12">

                  <h6 class="active">Tips</h6>
                  {!! Form::textarea('tips', null, ['id' => 'tips', 'class' => 'materialize-textarea'])  !!}

                </div>

              </div>

              <div class="row">
                <div class="input-field col s12">
                  {!! Form::textarea('description', null, ['id' => 'description', 'class' => 'materialize-textarea']) !!}
                  <label for="description">Description</label>
                </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>
  $(document).ready(()=>{
    /**
     * Custom button
    */
    var HelloButton = function (context) {
        var ui = $.summernote.ui;

        // create button
        var button = ui.button({
          contents: '<button type="button">Row</button> ',
          tooltip: 'hello',
          click: function () {
            // invoke insertText method with 'hello' on editor module.
            let tableHtml=`<div  style="width:50% ;
border-top: 5px solid #000000;
border-left: 5px solid #000000;
display:flex;
flex-wrap:wrap;
flex-direction:row">
<div  style="width: 50%;font-size:18px;text-align:center;border-right: 5px solid #000000;border-bottom: 5px solid #000000;padding:10px">English Word</div>
<div  style="width: 50%;font-size:18px;text-align:center;border-right: 5px solid #000000;border-bottom: 5px solid #000000;padding:10px">Spanish words are </div>



</div>`;
            context.invoke('editor.pasteHTML', tableHtml);
          }
        });

  return button.render();   // return button as jquery object
}
var toolBarOptions =[['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['fontname', ['fontname']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],

    ['insert', ['link', 'picture', 'hr']],
    ['view', ['fullscreen', 'codeview']],
    ['mybutton', ['hello']] //add button here
  ]
    $("#tips").summernote({
      height:300,
      toolbar:toolBarOptions,
      buttons: {
    hello: HelloButton
  }
    });

    function checkOrder(key) {
        $.post(
            "{{ url('checkOrder') }}",
            {
                '_token': "{{ csrf_token() }}",
                'type': 'levelGroup',
                'courseId': $("#courseId").val()
            },
            function(data) {
                if(data.data == 1 && key == "order") {
                    alert("Order 0 already exists");
                    $("#order").val("");
                }

                $("#order").val(data.max_order);
                if(data.max_order == 0) {
                    $("#order").attr('readonly',true);
                }
                else {
                    $("#order").removeAttr('readonly');
                }
            }
        );
    }

    $("#courseId").change(function(){
        if($("#courseId").val() == "") {
            $("#order").val("");
        }
        else {
            checkOrder('course');
        }
    });

    $("#order").blur(function(){

        if($("#courseId").val() == "") {
            alert("Select course");
            $("#order").val("");
            return;
        }

        if($("#order").val() == 0) {
            checkOrder('order');
        }
    });

  })

</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>