@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">Story Details</span>
          <hr>
          <div class="row">
            <div class="col s12" id="main-body">
           
              <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','readonly'=>'true']) !!} 
                              {!! 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')
                        !!} --}}
                        <input type="text" readonly id="courseSelected" value="{{ $courses[$selectedCourseId] }}">
                        <label for="courseSelected">Course</label>
                      </div>
                      <div class="input-field col s12 m4">

                        {{-- {!! Form::select('levelGroup', $levelGroups, $selectedLevelGroupId, ['id' => 'levelGroup']); !!} {!! Form::label('levelGroup',
                        'Level Groups') !!} --}}
                        <input type="text" readonly id="levelGroupSelected" value="{{ $levelGroups[$selectedLevelGroupId] }}">
                        <label for="levelGroupSelected">Level Group</label>
                      </div>
                      <div class="input-field col s12 m4">
                        {{-- {!! Form::select('levels', $levels, $selectedLevelId, ['id' => 'levels']); !!} {!! Form::label('levels', 'Levels') !!} --}}
                        <input type="text" readonly id="levelSelected" value="{{ $levels[$selectedLevelId] }}">
                        <label for="levelSelected">Level</label>
                      </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">
                            @foreach($characters as $name=>$image)
                                <div class="col m6 s12">
                                    <input type="text" readonly id="characterName" value="{{ $name }}">
                                    {{-- <label for="characterName">Name</label> --}}
                                </div>
                                <div class="col m6 s12">
                                    <input type="text" readonly id="characterImage" value="{{ $image }}">
                                    {{-- <label for="characterImage">Image</label> --}}
                                </div>
                            @endforeach
                        </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="col m6 s12">
                            <input type="text" readonly id="backgroundAudio" value="{{ $bg_audio }}">
                            <label for="backgroundAudio">Background Audio</label>
                        </div>
                        <div class="col m6 s12">
                            <input type="text" readonly id="backgroundImage" value="{{ $bg_image }}">
                            <label for="backgroundImage">Background Image</label>
                        </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">
                          @foreach($story->scene as $index=>$scene)
                            <div class="scene hoverable blue-grey lighten-5">
                              <p class="chip blue white-text scene-title">Scene {{ $index }}</p>

                              <div class="switch hidden" style="margin-top: 10px;">
                                  <label>Loop
                                    @if($scene->loop_audio)
                                        <input disabled type="checkbox" checked>
                                    @else
                                        <input disabled type="checkbox">
                                    @endif
                                    <span class="lever"></span>
                                  </label>
                                </div>
                              
                              <div class="row">

                                <ul class="collapsible expandable shots">
                                    @foreach($shots as $count=>$shot)
                                        <li class="active">
                                          <div class="collapsible-header shot-title">Shot {{ $count }}</div>
                                          <div class="collapsible-body grey lighten-5">
                                            <div class="shot-elem">

                                              <p class="chip green white-text shot-title">Shot {{ $count }}</p>

                                              <div class="row">
                                                <div class="input-field col s12 m6">
                                                  <input type="text" readonly value="{{ $shot->character_type }}" id="characterType{{$loop->index}}">
                                                  <label for="characterType{{$loop->index}}" class="active">Character Type</label>
                                                </div>
                                                <div class="input-field col s12 m6">
                                                    <input type="text" readonly value="{{ $shot->name }}" id="characterName{{$loop->index}}">
                                                  <label for="characterName{{$loop->index}}" class="active">Character Name</label>
                                                </div>
                                              </div>


                                              <div class="row">

                                                <div class="input-field col s12 m12">
                                                  <input type="text" readonly value="{{ $shot->dialogue }}" id="characterDialogue{{$loop->index}}">
                                                  <label for="characterDialogue{{$loop->index}}" class="active">Dialogue</label>
                                                </div>
                                              </div>

                                              <div class="row">

                                                <div class="col s12 m6 input-field">
                                                  <input type="text" readonly value="{{ $shot->character_position }}" id="characterPosition{{$loop->index}}">
                                                  <label for="characterPosition{{$loop->index}}" class="active">Character Position</label>
                                                </div>

                                              </div>

                                            </div>

                                          </div>
                                        </li>
                                    @endforeach
                                </ul>
                              </div>
                            </div>
                          @endforeach
                        </div>
                    </div>
                  </div>
                </div>
              </li>
            </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>
  $(function(){
    $('.collapsible').collapsible();
  });

</script>