@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">
	    <h4 class="text-themecolor">Quiz Datatable</h4>
	</div>
  <div class="col-md-7 align-self-center text-right">
    <div class="d-flex justify-content-end align-items-center">        
        <a type="button" class="btn btn-success btn-rounded" href="https://bdr.nizhamia.sch.id/wp-admin/admin.php?page=h5p" target="_blank"><i class="fa fa-plus-circle"></i> Manage Content</a>
    </div>
  </div>
	
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="col-3">
                  <h6 class="card-title">Current School Year <span class="badge badge-pill badge-success">{{$current->meta_value}}</span>

                </h6>
                </div>
                  <div class="col-4">
                    <form>
                      <div class="form-group">
                        <label>Grade</label>
                        <select class="form-control" id="semester_select" onchange="getClass(this.value)">
                          <option value="">-- Select Grade --</option>
                          @foreach ($jenjang as $row)
                            <option value="{{$row->id_jenjang}}">{{$row->nama}}</option>
                          @endforeach
                        </select>
                      </div>
                      <div class="form-group">
                        <label>Class</label>
                        <select class="form-control stage_select" id="stage_select" >
                          
                        </select>
                      </div>
                      <button type="button" class="btn btn-success" onclick="search_data()"><i class="fa fa-search"></i> Search</button>
                    </form>
                    
                  </div>
                  <hr>
                  <div class="col-md-12 align-self-center text-right">
                      <div class="d-flex justify-content-end align-items-center">        
                          <button type="button" class="btn btn-info btn-rounded" onclick="createquiz()" data-toggle="modal" data-target="#modal-edit" ><i class="fa fa-plus-circle"></i> Create Quiz</button>
                      </div>
                  </div>
                <div class="col-12 row" id="tableReload">
                  <div class="table-responsive">
                    <table id="dtable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kelas</th>
                                <th>Tanggal Quiz</th>
                                <th>ID H5p Content</th>
                                                               
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
                  
                </div>
                 
            </div>
        </div>
       </div>
    </div>
@include('quiz.modalpreview')
@include('quiz.modaledit')
@endsection

@section('js')

<script>
  // $(document).ready(function(){
    var save_method;
      var table = $("#dtable").DataTable({
        
          processing : true,
          serverSide : true,
          ordering    : false,
          
          ajax: {
            url :'/quiz/quizData'+'/'+$('#stage_select').val(),
            type : 'get'
          },
          columns    : [
          
            {data : null, name : 'no'},
            {data : 'nama_kelas', name : 'kelas'},
            {data : 'tgl', name : 'tgl'},
            {data : 'id_h5p', name : 'tgl'},
            {data : 'action',  orderable: false, searchable: false},

          ],
          
  });
    table.on('draw.dt', function () {
      var info = table.page.info();
      table.column(0, { search: 'applied', order: 'applied', page: 'applied' }).nodes().each(function (cell, i) {
          cell.innerHTML = i + 1 + info.start;
      });
    });
  // });
  function search_data(){
    console.log($('#stage_select').val());
    var urls = '/quiz/quizData'+'/'+$('#stage_select').val()
    table.ajax.url(urls).load();
  }
  
  function getClass(idjenjang)
  {

        //poses call ajax
        console.log($('meta[name="csrf-token"]').attr('content'))
        $('.stage_select option:contains("--Pilih--")').text('Loading..');
        $.ajax({
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          url : '/quiz/getclass',
          type : 'post',
          data : {
            // _token      : $('meta[name="csrf-token"]').attr('content'),
            id     : idjenjang,
        },
          success: function(response){
            console.log(response);
            $('.stage_select option:contains("Loading..")').text('--Pilih--');
            if(response)
            {
                parent_kategori = response;
                removeOptions(document.getElementById("stage_select"));
               

                $.each(response, function(key, value){
                  parseToSelect('.stage_select', value.id_kelas, value.nama_kelas);
                });
                
            }
          }
        })
        
          
          
      
  }
  function removeOptions(selectbox)
    {
        var i;
        for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
        {
            selectbox.remove(i);
        }
    }
  function parseToSelect(class_name, id, name)
    {

       $(class_name).append("<option value='"+id+"'>"+name+"</option>");
    }
  
function preview(id){
  console.log(id)
;  $.ajax({

          url : '/quiz/geth5p'+'/'+id,
          type : 'get',
          success:function(response){
            console.log(response);
            var src_quiz = 'http://seedlink.my.id/wp-admin/admin-ajax.php?action=h5p_embed&id='+response.id_h5p;
            $('#h5p').attr('src',src_quiz);
          },
          error:function(xhr){
            console.log(xhr);
          }
})
}
function editUser(id){
  save_method = 'edit';
  $('#myLargeModalLabel').text('edit');

  $.ajax({

          url : '/quiz/geth5p'+'/'+id,
          type : 'get',
          success:function(response){
            $('#id_quiz').val(response.id);
            $('#name_quiz').val(response.nama_kelas);
            $('#tgl_quiz').val(response.tgl);
            $('#id_h5p_quiz').val(response.id_h5p);
          },
          error:function(xhr){
            console.log(xhr);
          }
})
}

  $('#submit_quiz').click(function(){
    var dataquiz = $('#form_quiz').serialize();
    if(save_method == 'add'){

      var urls ='quiz' ;
      var method = 'post';
      var texts = 'Anda yakin akan menambah data quiz kelas ini?';
      console.log("jjkk")
    }
    else if(save_method == 'edit'){
      var urls ='quiz'+'/'+$('#id_quiz').val();
      var method = 'put';
      var texts = "Anda yakin akan mengubah data quiz ini?";
    }
    swal({
      title: "Warning",
      text: texts,
      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 : urls,
        type : method,
        data : dataquiz,
        dataType : 'json',
        success:function(response){
          // dtableDetail();
          // tableMaster();
          localStorage.setItem("swal",
                      swal({
                          title: 'success',
                          text:  'successfully ',
                          type: 'success',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );
          $('#form_quiz').get(0).reset();
          $('#modal-edit').modal('hide')
          table.ajax.reload();
      
        },
        
        error:function(xhr){
          console.log(xhr)
          // dtableDetail();
          localStorage.setItem("swal",
                      swal({
                          title: 'Error',
                          text:  'Data gagal diperbaharui',
                          type: 'error',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );

        }

       });
       
       }
      }); 
  })
  function createquiz(){
    console.log('he')
    $('#form_quiz').get(0).reset();
    $('#myLargeModalLabel').text('Add');
    save_method = 'add';
    var id_kelas = $('#stage_select').val();
    var nama_kelas = $('#stage_select').text().trim();
    console.log([id_kelas,nama_kelas])
    $('#id_kelas_quiz').val(id_kelas);
    $('#name_quiz').val(nama_kelas);

    

  }
  function destroy(id){
  swal({
      title: "Are you sure?",
      text: "You will delete this quiz?",
      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 : 'quiz'+'/'+id,
        type : 'delete',
        dataType : 'json',
        success:function(response){
          // dtableDetail();
          // tableMaster();
          localStorage.setItem("swal",
                      swal({
                          title: 'success',
                          text:  'data successfully deleted',
                          type: 'success',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );
         table.ajax.reload();
      
        },
        
        error:function(xhr){
          console.log(xhr)
          // dtableDetail();
          localStorage.setItem("swal",
                      swal({
                          title: 'Error',
                          text:  'data was not successfully deleted',
                          type: 'error',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );

        }

       });
       
       }
      }); 
 }
</script>
@endsection