@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
@section('content')
  @include('phrase.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 Phrase</span>
          <hr>
          <div class="row">
            <div class="col s12">
              {!! Form::open(['route' => 'phrase.store', 'class' => 'col s12', 'files' => true]) !!} {{-- HTML Injected through phrase-form.js
              --}}
              <div class="col s12">
              <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">
									{!! Form::select('voice_type', $voice_type, 'female_voice', ['id' => 'voice_type'  ]); !!}
                   {!! Form::label('voice_type','Voice Type') !!}
								</div>
              </div>
              <div id="phrase"></div>

              <hr> {{-- Add more phrase element through phrase-form.js --}}
              <div class="row">
                <div class="input-field col s12">
                  {!! Form::button('<i class="material-icons">add</i>', [ 'type' => 'button', 'id' => 'add_phrase', 'class'
                  => 'btn-floating btn waves-effect waves-light teal right tooltipped', 'data-position' => 'left', 'data-tooltip'
                  => 'Add Phrase' ]) !!}
                </div>
              </div>

              <div class="row">

                  <div class="file-field input-field col s12 m12">
                    <i class="material-icons prefix">picture</i>
                     {!! Form::text('phrase_image', null, ['id' => 'phrase_image', 'class' => 'validate',
                    'required']) !!} {!! Form::label('phrase_image', 'Phrase Image') !!}
                    <div class="btn" id="set_img_btn">
                    <span>Select <i class="material-icons left">photo</i></span>
                    </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 type="text/javascript" src="{{ asset('js/phrase.js') }}"></script>
  <script type="text/javascript">
  $(function () {
    if( document.getElementById('name[0][local_word]')==null || document.getElementById('name[0][local_word]')==undefined ){
      $("#add_phrase").click();
    }
      $("#courseId").change(function(e){

        let courseId = $("#courseId :selected").val();
        console.log(courseId);
         if(courseId!=null||courseId!=undefined){
          $.ajax({
              url: "{{ url('phrase/getCourseLevels/') }}",
              type: "POST",
              data: {
                  "_token": "{{ csrf_token() }}",
                  "courseId": courseId
              },
              beforeSend: function () {
                  // $('#loading').html(`<img src="{{ asset('images/loading.gif') }}">`);
              },
              success: function (d) {
                console.log("Levels",d);
                var levels = $("#levelId");
                levels.empty();

                for (var key in d) {
                if (d.hasOwnProperty(key)) {
                  levels.append("<option value='"+key+"'>"+d[key]+"</option>");
                }

              }
              console.log(levels);
              $("#levelId").formSelect();

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

            $("#phrase_image").val(urlbase+ev.data.file);


          jq.fancybox.close();
      }
  });

</script>
@endsection