@extends('layouts.master')
@section('css')
  <style>

    table {
      width: 100%;
    table-layout:  fixed; /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
   } 
    thead, tbody { display: block; width: 100% }
    
tbody {
    height: 200px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;   
}

.modal-xl {
    width: 100%;
   max-width:1000px;

  }
  

  
  
  
  </style>
@endsection
@section('content')
<div class="row page-titles">
  <div class="col-md-5 offset-md-1 align-self-center">
      <h5 class="text-themecolor"><i class="icon-note">&nbsp;</i>Worksheet</h5>
      <h3 class="m-b-0 text-info">{{json_encode($worksheet->title)}}</h3>
  </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-10 offset-md-1">
        <div class="card">
            <div class="card-body">
              <div class="row">
                <div class="col-md-4">
                    <a href="#" target="_blank">
                      <iframe src="{{asset('uploads/worksheet/'.trim(json_encode($worksheet->file),'"'))}}#toolbar=0"  style="width:100%; height:391px;border:none"></iframe>
                    </a>
                  </div>
                  <div class="col-md-8">
                    {{trim(json_encode($worksheet->task),'"')}}
                    <div class="row">
                      <div class=" col-md-6"><br>
                        <a href="{{ URL::to('/uploads/worksheet/'.trim(json_encode($worksheet->file),'"')) }}" class="btn btn-rounded btn-block btn-info" target="_blank"><i class="icon-cloud-download"></i> Download Worksheet</a>
                        @if ($role == 'student')
                          <button class="btn btn-rounded btn-block btn-warning" onclick="uploadWork({{$worksheet->id}})" data-toggle="modal" data-target="#modal-upload"><i class="icon-cloud-download"></i> Upload Your Worksheet</button>
                        @else
                          <button class="btn btn-rounded btn-block btn-warning" onclick="studentWork({{$worksheet->id}})" data-toggle="modal" data-target="#modal-upload"><i class="icon-cloud-upload"></i> Student Worksheet</button>
                        @endif
                        
                    </div>
                    </div>
                    
                  </div>
                 
                  
              </div>
              @if ($role == 'student')
                <span id="student" disabled>{{$student->NIS}}</span>
              @else  
                <span id="student" disabled> </span>
              @endif 
              
             
              
                 
            </div>
        </div>
       </div>
    </div>
@include('worksheet.modal_upload')
@endsection

@section('js')
<script>
   var token = $("meta[name='csrf-token']").attr("content");
  $('#submitUpload').click(function(){
    swal({
      title: "Are you sure?",
      text: "You will upload your worksheet?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
      
        var nis = $('#student').text();
        var urls = 'upload'+'/'+{{$worksheet->id}}+'/'+nis;
        var form =  $("#upload_form");
        var formData = new FormData($("#upload_form")[0]);
        formData.append('_token', token);

        $.ajax({
        // headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url : urls,
        type : 'post',
        dataType: 'json',
                    data: formData,
                    processData: false,
                    contentType: false,
        success: function(response){
        console.log(response);
        
         localStorage.setItem("swal",
                                      swal({
                                          title: 'success',
                                          text:  'Data berhasil disimpan',
                                          type: 'success',
                                          timer: 3500,
                                          showConfirmButton: false
                                      })
                              );
         $('#upload_form')[0].reset();
         
         uploadWork({{$worksheet->id}})
        },
        error: function (xhr){
          console.log(xhr);
        }
      });

      

       }
      });
  })
  $('#submitComment').click(function(){
    swal({
      title: "Are you sure?",
      text: "You will save this comment?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
      
        
        var form =  $("#comment_form");
        var formData = new FormData($("#comment_form")[0]);
        formData.append('_token', token);

        $.ajax({
        // headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url : 'updatecomment',
        type : 'post',
        dataType: 'json',
                    data: formData,
                    processData: false,
                    contentType: false,
        success: function(response){
        console.log(response);
        
         localStorage.setItem("swal",
                                      swal({
                                          title: 'success',
                                          text:  'Data berhasil disimpan',
                                          type: 'success',
                                          timer: 3500,
                                          showConfirmButton: false
                                      })
                              );
         $('#comment_form')[0].reset();
         
         studentWork({{$worksheet->id}})
        },
        error: function (xhr){
          console.log(xhr);
        }
      });

      

       }
      });
  })
  function uploadWork(id){
    var nis = $('#student').text();
    $.ajax({
     url : 'upload'+'/'+id+'/'+nis,
     type: 'get',
      
      success:function(response){
        console.log(response);
        $('#id_worksheet').val(id);
        $('#work_student').empty();
        $('#work_student').append(response);
        

      },
      error:function(xhr){
        console.log(xhr)
      }
    });
  }

  function studentWork(id){
    console.log("ok")
    $.ajax({
      url : 'studentwork'+'/'+id,
      type: 'get',
      success:function(response){
        console.log(response)
        $('#work_student').empty();
        $('#work_student').append(response);
      },
      error:function(xhr){
        console.log(xhr)
      }
    })
  }
  function editComment(id){

    var row = $('#dtedit'+id).closest('tr');
    nis = row.find('td:nth-child(2)').text();
    name = row.find('td:nth-child(3)').text();
    kelas = row.find('td:nth-child(4)').text();


    $('#work_nis').val(nis);
    $('#work_name').val(name);
    $('#work_class').val(kelas);
    $.ajax({
     url : 'searchstudentworksheet'+'/'+id,
     type: 'get',
      
      success:function(response){
        console.log(response);
        $('#id_worksheet').val(id);
        $('#work_comment').val(response.comment);
      },
      error:function(xhr){
        console.log(xhr)
      }
    });
  }
  
</script>
@endsection