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

<section class="">
    {!! Form::open(['route' => 'phrase.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">
            <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">Phrases</span>
          <hr>
          <div class="row">
            <div class="col s12">
              <table class="js-exportable" id="phrase-table">
                <thead>
                  <tr>
                    <th>Course Name</th>
                    <th>Local Word</th>
                    <th>English Word</th>
                    <th>Level</th>
                    <th>Actions</th>
                  </tr>
                </thead>

                <tbody>
                  @foreach ($phrases as $phrase)
                  <tr>
                  <td>{{ $phrase->courseName  }}</td>
                    <td>
                     {{ $phrase->phrase_local}}
                    </td>
                    <td>
                      {{ $phrase->phrase_english}}
                     </td>

                     <td>
                      @isset($phrase->levels)
                        @foreach($phrase->levels as $level)
                          <a href="{{ route('level.show', $level->id) }}">{{ $level->name }},</a> 
                        @endforeach    
                      @endisset
                    </td>
                    <td>
                      <span class="">
                         
                          <button class="waves-effect waves-red btn-flat tooltipped download" id="{!! $phrase->id !!}"  data-phraseid="{!! $phrase->id !!}" data-position="bottom" data-tooltip="Download audio">
                            <i class="material-icons black-text">save_alt</i>
                          </button>
                      
                        <a href="{{ route('phrase.show', $phrase->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('phrase.edit', $phrase->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-{!! $phrase->id !!}" style="font-size:10px;">
                          Last: {{ isset($phrase->lastDownloaded) ? $phrase->lastDownloaded : "NA" }}
                        </span>
                      </span>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </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 phraseId = $(this).attr("data-phraseid");
      let buttonHtml = $("#"+phraseId).html();
      $.ajax({
              url: "{{ url('phrase/download') }}",
              type: "POST",
              data: {
                  "_token": "{{ csrf_token() }}",
                  "phraseId": phraseId
              },
              beforeSend: function () {
                $("#"+phraseId).html("Downloading...");

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


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