@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">Edit Level Group: {{ $levelGroup->name }}</span>
          <hr>
          <div class="row">
            <div class="col s12">
              {!! Form::model($levelGroup, ['route' => ['levelGroup.update', $levelGroup->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', 'Name') !!}
                </div>

                <div class="input-field col s12 m6">
                  <i class="material-icons prefix">reorder</i>
                   {{-- <input type="number" name="order" @if($levelGroup->order == 0) readonly @endif class="validate" id="order" value="{{ $levelGroup->order }}"> --}}
                   @if($levelGroup->order == 0)
                       {!! Form::number('order', null, ['id' => 'order','readonly'=>true ,'class'=> 'validate']) !!}
                   @else
                       {!! Form::number('order', null, ['id' => 'order', 'class'=> 'validate']) !!}
                   @endif
                  {!! Form::label('order', 'Order') !!}
                </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>
               <div class="row">
                <div class="input-field col s12 m6">
                  <div class="switch">
                    <label>
                          Normal Chapter
                          {!! Form::checkbox('is_bonus',true,isset($levelGroup->is_bonus) ? $levelGroup->is_bonus : 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::label('tips','Tips') !!}  --}}
                    {!! Form::textarea('tips',isset($levelGroup->tips) && isset($levelGroup->tips->content) ? $levelGroup->tips->content : "", ['id' => 'tips', 'class' => 'materialize-textarea'])  !!}
                    {{-- <label for="tips">Tips</label> --}}

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

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