@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
<style>
  .hidden {
    display: none;
  }
</style>
@section('content')
  @include('story.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 Story</span>
          <hr>
          <div class="row">
            <div class="col s12">
              {!! Form::open(['route' => 'story.store', 'class' => 'col s12', 'files' => true]) !!} {!! Form::token() !!}
              <ul class="collapsible">
                  <li>
                      <div class="collapsible-header"><i class="material-icons">book</i>Name</div>
                      <div class="collapsible-body">
                         <div class="row">
                          <div class="input-field col s12 m4">
                              {!! Form::text('story_name', null, ['id' => 'story_name']) !!}
                              {!! Form::label('story_name', 'Story Name') !!}
                          </div>

                        </div>
                      </div>
                    </li>
                  <li>
                    <div class="collapsible-header"><i class="material-icons">book</i>Course/LevelGroup/Level</div>
                    <div class="collapsible-body">  <div class="row">
                        <div class="input-field col s12 m4">
                          {!! Form::select('courses', $courses, null, ['id' => 'courses']); !!}
                           {!! Form::label('courses', 'Select Course') !!}
                        </div>
                        <div class="input-field col s12 m4">
                          <select name="levelGroup" id="levelGroup" placeholder="Select Level Group">

                          </select> {!! Form::label('levelGroup', 'Level Groups') !!}
                        </div>
                        <div class="input-field col s12 m4" >
                            <select name="levels" id="levels" placeholder="Select Level ">

                            </select> {!! Form::label('levels', 'Levels') !!}
                          </div>
                      </div></div>
                  </li>
                  <li>
                    <div class="collapsible-header"><i class="material-icons">face</i>Characters</div>
                    <div class="collapsible-body">  <div class="row">
                        <div class="col s12">
                          <div class="characters" id="characters">

                          </div>

                          <div class="row">
                            <div class="col s12">
                              <a class="add-characters waves-effect waves-teal blue btn-flat white-text right ">
                                <i class="material-icons left">add</i>
                                Add Characters
                              </a>
                            </div>
                          </div>
                        </div>
                      </div></div>
                  </li>
                  <li>
                    <div class="collapsible-header"><i class="material-icons">image</i>Background</div>
                    <div class="collapsible-body">       <div class="row">
                        <div class="file-field input-field col s12 m6">
                          <i class="material-icons prefix">picture</i>
                          <input type='text' class='validate' id='bg_audio' name='bg_audio' placeholder="Background Audio" >

                          <div class="btn" id="bg_audio_btn">
                          <span>Select <i class="material-icons left">photo</i></span>
                          </div>
                        </div>
                        <div class="file-field input-field col s12 m6">
                          <i class="material-icons prefix">picture</i>
                          <input type='text' class='validate' id='bg_image' name='bg_image' placeholder="Background Image">

                          <div class="btn" id="bg_image_btn">
                          <span>Select <i class="material-icons left">photo</i></span>
                          </div>
                        </div>
                      </div>
                     </div>
                  </li>
                  <li>
                      <div class="collapsible-header"><i class="material-icons">insert_comment</i>Scene</div>
                      <div class="collapsible-body">      <div class="row">
                          <div class="col s12">
                              <div class="scenes" id="scenes">

                                  <div class="scene hoverable blue-grey lighten-5" data-scene-id="0">
                                      <p class="chip blue white-text scene-title">Scene 0</p><button type="button" role="button" class="btn-rm-scenes btn-floating btn-small waves-effect waves-light red right tooltipped"
                                          data-position="left" data-tooltip="Remove scene"><i class="material-icons">close</i></button>

                                      <div class="row">
                                          <div class="switch input-field hidden"><label>Loop Off<input type="checkbox" name="scenes[0][loop_audio]"
                                                      id="scenes[0][loop_audio]" data-scene-name="[loop_audio]" value="1"><span class="lever"></span>Loop
                                                  On</label></div>

                                          <ul class="collapsible expandable shots"></ul>
                                          <div class="row">
                                            <div class="col s12"><a class="add-shots waves-effect waves-teal green btn-flat white-text right"><i
                                                        class="material-icons left">add</i>Add Shot</a></div>
                                        </div>
                                      </div>
                                  </div>
                              </div>

                            {{-- <div class="row">
                              <div class="col s12">
                                <a class="add-scenes waves-effect waves-teal blue btn-flat white-text right ">
                                  <i class="material-icons left">add</i>
                                  Add Scene
                                </a>
                              </div>
                            </div> --}}
                          </div>
                        </div>
                 </div>
                    </li>
                </ul>






              {!! 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 type="text/javascript" src="{{ asset('js/story.js') }}"></script>
<script>
  $(function(){
    $('.collapsible').collapsible();
    $('#courses').on('change',()=>{
      let course = $("#courses :selected").val();
      console.log("Course",course);
      if(course!=null||course!=undefined){
          $.ajax({
              url: "{{ url('story/getCourseLevelGroups/') }}",
              type: "POST",
              data: {
                  "_token": "{{ csrf_token() }}",
                  "courseId": course
              },
              beforeSend: function () {
                  // $('#loading').html(`<img src="{{ asset('images/loading.gif') }}">`);
              },
              success: function (d) {
                console.log("Levels",d);
                var levelGroup = $("#levelGroup");
                levelGroup.empty();

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

              }
              console.log(levelGroup);
              $("#levelGroup").formSelect();

              }
          });
         }
    })
    $('#levelGroup').on('change',()=>{
      let levelGroup = $("#levelGroup :selected").val();
      if(levelGroup!=null||levelGroup!=undefined){
          $.ajax({
              url: "{{ url('story/getLevelGroupLevels/') }}",
              type: "POST",
              data: {
                  "_token": "{{ csrf_token() }}",
                  "levelGroupId": levelGroup
              },
              beforeSend: function () {
                  // $('#loading').html(`<img src="{{ asset('images/loading.gif') }}">`);
              },
              success: function (d) {

                var levels = $("#levels");
                levels.empty();

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

              }
              $("#levels").formSelect();

              }
          });
         }
    })

  });


</script>
<script>
  var filebase = 'http://lingo-api.tootle.review:9595/?accessToken={!! Form::token() !!}';
  var urlbase = 'http://lingo-api.tootle.review:3000';
  var current_button_id="";
  var current_character_name = "";
  var jq = jQuery.noConflict();
  jq(function(){
    jq("#bg_audio_btn").on("click",()=>{
      current_button_id = "bg_audio";
      jq.fancybox.open({
        src  : filebase,
        type : 'iframe',
        opts : {
          afterShow : function( instance, current ) {
            console.info("done");
          }
        }
      });
    })
    jq("#bg_image_btn").on("click",()=>{
      current_button_id = "bg_image";
      jq.fancybox.open({
        src  : filebase,
        type : 'iframe',
        opts : {
          afterShow : function( instance, current ) {
            console.info("done");
          }
        }
      });
    })
    jq(document).on("click",'.character_image',(event)=>{
      alert("Make sure the image name and the character name are the same !");
      console.log(event.currentTarget);
      current_button_id = 'characters['+event.currentTarget.attributes[2].value+'][image]';
      current_character_name = document.getElementById('characters['+event.currentTarget.attributes[2].value+'][name]');
      // console.log("Count",current_count);
      jq.fancybox.open({
        src  : filebase,
        type : 'iframe',
        opts : {
          afterShow : function( instance, current ) {
            console.info("done");
          }
        }
      });
    })
  })

  window.addEventListener("message", function(ev) {
    if(current_button_id.includes("characters") ){
      if((current_character_name.value=="" || current_character_name.value==undefined)){
        alert("Please enter character name first");
        jq.fancybox.close();
        return false;
      }

      }
      if (ev.data.message === "file_selected") {
          if(current_button_id.includes('characters')){
            if(ev.data.file.toLowerCase().includes(current_character_name.value.toLowerCase())){
              document.getElementById(current_button_id).value=urlbase+ev.data.file;
          // $("#"+current_button_id).val(urlbase+ev.data.file);
          jq.fancybox.close();
          }
          else{
            alert("Character name and image name do not match");
          }
        }
        else{
          document.getElementById(current_button_id).value=urlbase+ev.data.file;
          jq.fancybox.close();
        }


      }
  });

</script>