@extends('layouts.master')
@section('content')
<div class="row page-titles">
	<div class="col-md-5 align-self-center">
	    <h4 class="text-themecolor">Assessment</h4>
	</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">
            <div class="row">
            <div class="col-sm-12">
              @if (isset($personal))
                <div class="row">
                <div class="col-sm-3">
                  <div class="desc">
                    <div class="title text-muted">Current School Year</div>
                    <strong>{{$current->meta_value}}</strong><br>
                    <div class="title text-muted">Semester</div>
                    <strong>{{($semester->meta_value == 1)? 'First Term' : 'Second Term'}}</strong><br>
                    
                    </div>

                    
                  </div>
                   @if (isset($kelas))
                  <div class="col-sm-4">
                    <div class="desc">
                    <div class="title text-muted">Grade</div>
                    <strong>{{$kelas->nama}}</strong>
                    </div>
                    <div class="title text-muted">Class</div>
                    <strong>{{$kelas->nama_kelas}}</strong>
                    
                  </div>
                  <div class="col-md-7 align-self-center">
                  <div class="d-flex justify-content-end align-items-center">        
                      <button type="button" class="btn btn-info btn-rounded" data-toggle="modal" data-target="#modal-edit" id="#AddUser" onclick="generate()"><i class="fa fa-spin fa-refresh"></i> Generate Assessment</button>
                  </div>
              </div>
                  
                </div>
                @endif
              @endif
              
                </div>              
                
            </div>
          </div>
                  
                  <hr>
                <div class="col-12 row">

                  <div class="table-responsive col-12">
                    @if (isset($kelas))
                    <div class=" card">
                     
                      <div class="card-body">
                        <div class="card-title row">
                        </div>
                        <table id="dtable" class="table table-striped table-bordered"  >
                          <thead>
                              <tr>
                                  <th width="5%">No</th>
                                  <th>NISN</th>              
                                  <th width="30%">Name</th>
                                  <th>Assessment</th>
                              </tr>
                          </thead>
                          <tbody>
                            
                            
                          </tbody>
                      </table>
                      
                      
                    </div>
                      
                    @endif
                      
                  </div>
                </div>
                 
            </div>
        </div>
       </div>
    </div>

@endsection

@section('js')

<script>
  var table = $("#dtable").DataTable({
        
          processing : true,
          serverSide : true,
          ordering    : false,
          
          ajax: {
            url :'assessment/dtable/dt'+'/'+{{$kelas->id_kelas}},
            type : 'get'
        },
          columns    : [
          
          
          {data : null, name : 'no'},
          {data : 'NIS', name : 'name'},
          {data : 'nama_lengkap', name : 'name'},
          {data : 'action',  orderable: false, searchable: false},

          ],
          // columnDefs: [
          //   {
          //       "targets": 5, // your case first column
          //       "className": "text-center",
          //  },
          // ],
          // "order": [[ 1, 'asc' ]]
  });
  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 generate(){
     swal({
      title: "Are you sure?",
      text: "You will generate this assessment Subject of Assessment?",
      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 : 'assessment/generate'+'/'+{{$kelas->id_kelas}},
        type : 'get',
        dataType : 'json',
        success:function(response){
          if(response.status){
            localStorage.setItem("swal",
                      swal({
                          title: 'success',
                          text:  'data successfully generated',
                          type: 'success',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );
          }else{
            localStorage.setItem("swal",
                      swal({
                          title: 'Error',
                          text:  response.message,
                          type: 'error',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );
          }
         table.ajax.reload();
          
      
        },
        
        error:function(xhr){
          console.log(xhr)
          table.ajax.reload();
          localStorage.setItem("swal",
                      swal({
                          title: 'Error',
                          text:  'error',
                          type: 'error',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );

        }

       });
       
       }
      }); 

  }
</script>
@endsection