@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">Edit Story</span>
          <hr>
          <div class="row">
            <div class="col s12">
              {!! Form::model($story, ['route' => ['story.update', $story->id], 'class' => 'col s12', 'method' => 'PUT', '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',isset($story->name) ? $story->name : "Not Set", ['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, $selectedCourseId, ['id' => 'courses']); !!} {!! Form::label('courses', 'Select Course')
                        !!}
                      </div>
                      <div class="input-field col s12 m4">

                        {!! Form::select('levelGroup', $levelGroups, $selectedLevelGroupId, ['id' => 'levelGroup']); !!} {!! Form::label('levelGroup',
                        'Level Groups') !!}
                      </div>
                      <div class="input-field col s12 m4">
                        {!! Form::select('levels', $levels, $selectedLevelId, ['id' => 'levels']); !!} {!! Form::label('levels', 'Levels') !!}
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="collapsible-header" id="load-characters"><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" value='{!! $bg_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" value='{!! $bg_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" id="load-shots"><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>
                              <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>
                              <ul class="collapsible expandable shots"></ul>
                            </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(){
    let loadedOnce = false;
    $("#load-characters").on("click",function(){
      if(!loadedOnce){
        setCharacters();
        loadedOnce = true;
      }
    })
    // $("#load-shots").on("click",function(){
    //     $(".collapsible.expandable.shots li:last-child").remove();
    //     updateSceneIndex();
    // })

    $('.collapsible').collapsible();
    $('#courses').on('change',()=>{
      let course = $("#courses :selected").val();
      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) {

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

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

              }

              $("#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();

              }
          });
         }
    });
    function setCharacters(){
      let characters =JSON.parse('{!! json_encode($characters) !!}');
      let shots ={!! json_encode($shots) !!};

      let character_count=0;
        for (var key in characters) {


          if (characters.hasOwnProperty(key)) {
            let image = characters[key];
            let name = key;
            $(".add-characters").click();
            document.getElementById('characters['+character_count+'][name]').click();
            document.getElementById('characters['+character_count+'][image]').click();
            document.getElementById('characters['+character_count+'][name]').value = name;
            document.getElementById('characters['+character_count+'][image]').value = image;

          }
          shots.forEach((shot,index)=>{

            if(shot.name==key){
              document.getElementById('characters['+character_count+'][gender]').value =  (shot.gender) ? shot.gender : "male";
            }
          })

          character_count++ ;
        }
      setShots();
    }
    function setShots(){
      console.log("Set shots");
      let shots ={!! json_encode($shots) !!};
      for(let i=0 ; i<shots.length;i++)
      {


        $(".add-shots").click();
        // updateSceneIndex();

          document.getElementById('scenes[0][shots]['+i+'][character_type]').value = shots[i].character_type;
        document.getElementById('scenes[0][shots]['+i+'][dialogue]').value = (shots[i].dialogue_original) ? (shots[i].dialogue_original) : shots[i].dialogue;
        if(shots[i].character_position!=undefined){
        document.getElementById('scenes[0][shots]['+i+'][character_position]').value = shots[i].character_position.toLowerCase();
        }
        document.getElementById('scenes[0][shots]['+i+'][name]').value = shots[i].name;
        $("select").formSelect();

        console.log(document.getElementById('scenes[0][shots]['+i+'][name]'));

      }



    }
    function removeLastShot(){

    }
  });

</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 !");
      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>