@extends('layouts.master')
@section('css')
  <style>
    
    :title { 
     /*background-color: #000;*/
     color:red;
    }
  </style>
@endsection
@section('content')
<div class="row page-titles">
	<div class="col-md-5 align-self-center">
	    <h5 class="text-themecolor">Worksheet</h5>
	</div>
	<div class="col-md-7 align-self-center text-right">
	    <div class="d-flex justify-content-end align-items-center">	        
	        
	    </div>
	</div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                  <h6 class="card-title">Current School Year <span class="badge badge-pill badge-success">{{$current->meta_value}}</span>
                  </h6>
                  <h6 class="card-title">Semester <span class="badge badge-pill badge-success">{{($semester->meta_value == 1)? 'First Term' : 'Second Term'}}</span>
                  </h6>
                  <h6 class="card-title">Grade <span class="badge badge-pill"><select id="jenjang" onchange="tablist(this.value)"class="form-control"  {{($role == 'student')? 'disabled' : ''}}>
                    @foreach ($jenjang as $row)
                    @if ($role == 'student' )
                      <option value="{{$row->id_jenjang}}" {{($personal->id_jenjang == $row->id_jenjang)? 'selected' : ''}}>{{$row->nama}}</option>
                    @else
                     <option value="{{$row->id_jenjang}}">{{$row->nama}}</option>
                    @endif
                    @endforeach
                  </select></span>
                  </h6>
                  <h6 class="card-subtitle"><code>All Course </code></h6>
              
              <div class="col-12 row">
                <div class="vtabs">
                  
                  <ul class="nav nav-tabs tabs-vertical" role="tablist" id="tablist">
                     
                      {{-- @foreach ($course as $row)
                        <li class="nav-item active"> <a class="nav-link" data-toggle="tab" href="#{{$row->id}}" role="tab"><span class="hidden-xs-down">{{$row->mata_pelajaran}}</span></a> </li>
                      @endforeach --}}
                  </ul>
                  <!-- Tab panes -->
                  <div class="tab-content">
                      <div class="tab-pane active" id="home4" role="tabpanel">
                        <div class="row el-element-overlay">
                          <div class="col-md-12 align-self-center text-right">
                              <div class="d-flex justify-content-end align-items-center">
                                @if ($role == 'admin' || $role == 'teacher')
                                  <button type="button" class="btn btn-info d-none d-lg-block m-l-12" data-toggle="modal" data-target="#modal-add" onclick="addnew()"><i class="fa fa-plus-circle" ></i> Create New</button><br>
                                @endif
                                  
                              </div>
                          </div>
                         <div id="worksheet-content" class="row">
                          <!-- <div class="col-lg-4 col-md-6">
                              <div class="card bg-secondary">
                                  <div class="el-card-item">
                                      <div class="el-card-avatar el-overlay-1"> <iframe src="{{asset('uploads/worksheet/vzJJ9G_count-and-color-activity-2.pdf')}}" alt="user"></iframe>
                                          <div class="el-overlay">
                                              <ul class="el-info">
                                                  <li><a href="{{ url('worksheet/2') }}" class="btn default btn-outline" ><i class="icon-info"></i></a></li>
                                                  <li><a class="btn default btn-outline"><i class="icon-pencil"></i></a></li>
                                              </ul>
                                          </div>
                                      </div>
                                      <div class="el-card-content">
                                          <h5 class="box-title">How Many Colors in a Rainbow?</h5></div>
                                  </div>
                              </div>
                          </div>
                          <div class="col-lg-4 col-md-6">
                              <div class="card bg-secondary">
                                  <div class="el-card-item">
                                      <div class="el-card-avatar el-overlay-1"> 
                                      <iframe src="{{asset('uploads/worksheet/DdaDhA_sort-senses.pdf')}}" ></iframe>
                                          <div class="el-overlay">
                                              <ul class="el-info">
                                                  <li><a class="btn default btn-outline" ><i class="icon-info"></i></a></li>
                                                  <li><a class="btn default btn-outline"><i class="icon-pencil"></i></a></li>
                                              </ul>
                                          </div>
                                      </div>
                                      <div class="el-card-content">
                                          <h5 class="box-title">Sort Out the Five Senses</h5> {{-- <small>subtitle of project</small> --}}
                                          <br/> </div>
                                  </div>
                              </div>
                          </div>
                          <div class="col-lg-4 col-md-6">
                              <div class="card bg-secondary">
                                  <div class="el-card-item">
                                      <div class="el-card-avatar el-overlay-1"> 
                                      <iframe src="{{asset('uploads/worksheet/Eoh6li_sound-it-out.pdf')}}" ></iframe>
                                          <div class="el-overlay">
                                              <ul class="el-info">
                                                  <li><a class="btn default btn-outline" ><i class="icon-info"></i></a></li>
                                                  <li><a class="btn default btn-outline"><i class="icon-pencil"></i></a></li>
                                              </ul>
                                          </div>
                                      </div>
                                      <div class="el-card-content">
                                          <h5 class="box-title">Sound Out Letters</h5> {{-- <small>subtitle of project</small> --}}
                                          <br/> </div>
                                  </div>
                              </div>
                          </div> -->
                         </div>
                          
                        </div>
                          
                      </div>
                      
                  </div>
              </div>
              </div>  
              
                 
            </div>
        </div>
       </div>
    </div>
@include('worksheet.modal_add')
@endsection

@section('js')
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

<script>
  jQuery(document).ready(function() {
  var jenjang = $('#jenjang').val();
  tablist(jenjang);
  
});
$( document ).ready(function() {
  
});
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
$(document).on('change', '#myPdf', function(e){
 var file = e.target.files[0]
  if(file.type == "application/pdf"){
    var fileReader = new FileReader();  
    fileReader.onload = function() {
      var pdfData = new Uint8Array(this.result);
      // Using DocumentInitParameters object to load binary data.
      var loadingTask = pdfjsLib.getDocument({data: pdfData});
      loadingTask.promise.then(function(pdf) {
        console.log('PDF loaded');
        
        // Fetch the first page
        var pageNumber = 1;
        pdf.getPage(pageNumber).then(function(page) {
        console.log('Page loaded');
        
        var scale = 1;
        var viewport = page.getViewport({scale: scale});

        // Prepare canvas using PDF page dimensions
        var canvas = $("#pdfViewer")[0];
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        var renderTask = page.render(renderContext);
        renderTask.promise.then(function () {
          console.log('Page rendered');
        });
        });
      }, function (reason) {
        // PDF loading error
        console.error(reason);
      });
    };
    fileReader.readAsArrayBuffer(file);
  }
});

// function aFunc() {
//   alert("hello");
// }
$("#myPdf").on('change', function(){
  console.log("here");
  
});

function tablist(id_jenjang){
  console.log(id_jenjang);
   $.ajax({
     url : 'worksheet/searchcourse'+'/'+id_jenjang,
     type: 'get',
      
      success:function(response){
        console.log(response);
        $('#tablist').empty();
        console.log(response.length);
        for(var i=0; i < response.length ; i++)
        {
          console.log(response[i]);
            $('#tablist').append('<li class="nav-item active"> <a class="nav-link" data-toggle="tab" href="#'+response[i].id+'" role="tab"  onclick="tabCourse('+response[i].id+')" data-id="'+response[i].id+'"><span class="hidden-xs-down" data-link="'+response[i].id+'">'+response[i].mata_pelajaran+'</span></a> </li>');
        }
        $('#worksheet-content').empty();
        $("li").find("[data-id='"+response[0].id+"']").trigger( "click" );;

      },
      error:function(xhr){
        console.log(xhr)
      }
    });
}
function tabCourse(id){
  console.log(id);
  $('#worksheet-content').empty();
  $.ajax({
     url : 'worksheet/searchworksheet'+'/'+id,
     type: 'get',
      
      success:function(response){
        console.log(response);
        
        console.log(response.length);
        for(var i=0; i < response.length ; i++)
        {
          console.log(response[i]);
            $('#worksheet-content').append('<div class="col-lg-4 col-md-6">\
                <div class="card bg-secondary">\
                    <div class="el-card-item">\
                        <div class="el-card-avatar el-overlay-1"> <iframe src="{{asset('uploads/worksheet/')}}/'+response[i].file+'" alt="user"></iframe>\
                            <div class="el-overlay">\
                                <ul class="el-info">\
                                    <li><a href="worksheet/'+response[i].id+'" class="btn default btn-outline" target="_blank"><i class="icon-info"></i></a></li>\
                                    <li><a href="#" onClick="destroy('+response[i].id+')" class="btn default btn-outline"><i class="icon-trash"></i></a></li>\
                                </ul>\
                            </div>\
                        </div>\
                        <div class="el-card-content">\
                            <h5 class="box-title">'+response[i].title+'</h5></div>\
                    </div>\
                </div>\
            </div>');
        }

      },
      error:function(xhr){
        console.log(xhr)
      }
    });
}
function addnew(){
  console.log('here')
  var idmapel = $("li").find("[aria-selected='true']").attr('data-id');
  var namamapel = $("li").find("[aria-selected='true']").text();
  console.log(idmapel);
  $('#id_mapel').val(idmapel);
  $('#mapel').val(namamapel);
  $('#id_jenjang').val($('#jenjang').val());
}
function  destroy(id){
   swal({
      title: "Are you sure?",
      text: "You will delete this workssheet ?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
        console.log('confirm');
       $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url : 'worksheet'+'/'+id,
        type : 'delete',
        dataType : 'json',
        success:function(response){
         
        localStorage.setItem("swal",
                      swal({
                          title: response['title'],
                          text:  response['message'],
                          type: response['type'],
                          timer: 3500,
                          showConfirmButton: false
                      })
              );
        window.location.reload();
        },
        
        error:function(xhr){
          
          localStorage.setItem("swal",
                      swal({
                          title: 'Error',
                          text:  'data was not successfully deleted',
                          type: 'error',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );

        }

       });
       
       }
      }); 

}
</script>