@extends('layouts.app')
@include('layouts.datatables_css') 
@section('content')

@include('story.header')

<section class="">
    {!! Form::open(['route' => 'story.search', 'class' => 'col s12','id'=>'search-form']) !!} {!! Form::token() !!}
    <div class="row">
        <div class="input-field col s12 m4">
            {!! Form::select('courseId', $courses, null, ['id' => 'courseId']); !!} {!! Form::label('courseId', 'Course') !!}
          </div>
          <div class="input-field col s12 m4">
                <select name="levelGroup" id="levelGroup">
                  <option disabled="true" selected value="null">Select Level Group</option>  
                </select> {!! Form::label('levelGroup', 'Select Level Group') !!}
          </div>
          <div class="input-field col s12 m4">
              <select name="levels" id="levels" required>
                <option disabled="true" selected value="null">Select Level</option>  
              </select> {!! Form::label('levels', 'Select Level') !!}
          </div>
          {!! Form::button('Search<i class="material-icons right">send</i>', ['type' => 'submit', 'class' => 'btn','id'=>'search-button']);
          !!}
           {!! Form::close() !!}
    </div>
  <div class="row">
    <div class="col s12">
      <div class="card white">
        <div class="card-content white">
          <span class="card-title">All Story</span>
          <hr>
          <div class="row">
            <div class="col s12">
              <table class="highlight js-exportable">
                <thead>
                  <tr>
                    <th>Course</th>
                    <th>Name</th>
                    
                    <th>Level</th>
                    <th>Action</th>
                  </tr>
                </thead>

                <tbody>
                  @foreach ($stories as $story)
                  <tr>
                  <td>{{ $story->courseName }}</td>
                    <td>{{isset($story->name) ? $story->name : "Not set"}}</td>
                    
                    <td>
                      @isset($story->levelId)
                      <a href="{{ route('level.show', $story->levelId) }}">Go To Level</a>
                      @endisset
                    </td>
                    <td>
                      <span class="secondary-content">
                         
                          <button class="waves-effect waves-red btn-flat tooltipped download" id="{!! $story->id !!}" data-storyid="{!! $story->id !!}" data-position="bottom" data-tooltip="Download audio">
                            <i class="material-icons black-text">save_alt</i>
                          </button>
                     
                        <a href="{{ route('story.show', $story->id) }}" class="waves-effect waves-green btn-flat tooltipped"
                          data-position="bottom" data-tooltip="view" >
                          <i class="material-icons green-text">remove_red_eye</i>
                        </a>
                        <a href="{{ route('story.edit', $story->id) }}" class="waves-effect waves-teal btn-flat tooltipped"
                          data-position="bottom" data-tooltip="edit">
                          <i class="material-icons cyan-text">edit</i>
                        </a>
                       
                        <span  class="waves-effect waves-teal btn-flat tooltipped" id="last-{!! $story->id !!}" style="font-size:10px;">
                        Last: {{ isset($story->lastDownloaded) ? $story->lastDownloaded : "NA" }}
                        </span> 
                      </span>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
           
              </table>
            </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>
  $(function(){
    $(".download").on("click",function(){
      const storyId = $(this).attr("data-storyid");
      let buttonHtml = $("#"+storyId).html();
      $.ajax({
              url: "{{ url('story/download') }}",
              type: "POST",
              data: {
                  "_token": "{{ csrf_token() }}",
                  "storyId": storyId
              },
              beforeSend: function () {
                $("#"+storyId).html("Downloading...");

              },
              success: function (d) {
                $("#"+storyId).html(buttonHtml);
                alert(d.message);
                $("#last-"+storyId).text("Last:"+d.lastDownloaded);
              }
          });
    })
    $('#courseId').on('change',()=>{
      let course = $("#courseId :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();
  
              }
          });
         }
    })
    $("#search-button").on("click",function(e){
      e.preventDefault();
      let level = $("#levels :selected").val();
      if(level==null || level==undefined || level=="null" || level.trim()==""){
        alert("Please select level !");
        return false;
      }
      else{
        $("#search-form").submit();
      }
    })
    
  });


</script>
@include('layouts.datatables_js')