@extends('layouts.master')
@section('css')
<style>
  .modal-xl {
    width: 100%;
   max-width:1000px;

  }
</style>
@endsection
@section('content')
<div class="row page-titles">
	<div class="col-md-5 align-self-center">
	    <h4 class="text-themecolor">Project Picture / Video</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="col-3">
                  <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>
                </div>
                  
                  <hr>
                  <div class="row">
                    <div class="col-md-5">
                    
                  </div>
                  <div class="col-md-7 align-self-center text-right">
                    <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="AddProject"><i class="fa fa-plus-circle"></i> Create New Project</button>
                    </div>
                  </div> 
                  </div>
                 
                <div class="row col-12">
                  
                  <div class="table-responsive col-12">
                    <table id="dtable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Project Title</th>        
                                <th>Detail Task</th>
                                <th>Participant</th>   
                                <th>Deadline</th>
                                <th>Semester</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
                 
            </div>
        </div>
       </div>
    </div>
@include('project.teacher.modal_edit')
@include('project.teacher.modal_comment')
@endsection

@section('js')
<script>
  var token = $("meta[name='csrf-token']").attr("content");
   var save_method = 'add';
   var idproject;
  jQuery(document).ready(function() {
    $(".select2").select2();
  $('.selectpicker').selectpicker();
 
  })
   var table = $("#dtable").DataTable({
        
          processing : true,
          serverSide : true,
          ordering    : false,
          
          ajax: {
            url :'projectData',
            type : 'get'
            },
          columns    : [
          
          
          {data : null, name : 'no'},
          {data : 'title', name : 'title'},
          {data : 'task', name : 'task'},
          {data : 'participant', name : 'participant'},
          {data : 'dead_line', name : 'deadline'},
          {data : 'semester', name : 'semester'},
          {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;
    });
  });
$('#submit_project').click(function(){
    swal({
      title: "Are you sure?",
      text: "You will save this project?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
      
         if(save_method == 'add'){

            var urls ='project' ;
            var method = 'post';
            console.log("jjkk")
          }
          else if(save_method == 'edit'){

            var urls ='project'+'/'+$('#id').val();
            var method = 'put';
          }
        var form =  $("#form_project");
        var formData = new FormData($("#comment_form")[0]);
        formData.append('_token', token);

       $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url : urls,
      type : method,
      data : $('#form_project').serialize(),
      success: function(response){
      console.log(response);
      
       localStorage.setItem("swal",
                                    swal({
                                        title: 'success',
                                        text:  'Data berhasil disimpan',
                                        type: 'success',
                                        timer: 3500,
                                        showConfirmButton: false
                                    })
                            );
       $('#form_project')[0].reset();
       $("#participant").val([]).change();
       $('#modal-edit').modal('hide');
      table.ajax.reload();
      },
      error: function (xhr){
        console.log(xhr);
      }
    });

      

       }
      });
  })
 $('#AddProject').click(function(){
  console.log('here')
    $('#form_project')[0].reset();
       $("#participant").val([]).change();
  })
function editProject(id){
  $('#modal-edit').modal('show');
  $.ajax({
     url : 'project'+'/'+id+'/edit',
     type: 'get',
      
      success:function(response){
        console.log(response);
        $('#id').val(response.id);
        $('#title').val(response.title);
        $('#task').val(response.task);
        $('#deadline').val(response.dead_line);
        
        const participant = response.participant;
        const participantArray = participant.split(',')
        $('#participant').val(participantArray).change();

        save_method = 'edit';
      },
      error:function(xhr){
        console.log(xhr)
      }
  })
}
function studentProject($idproject){
  idproject = $idproject;
  $.ajax({
    url :'project'+'/'+$idproject+'/student/get',
    type: 'get',
    success:function(response){
      $('#work_student').empty();
      $('#work_student').append(response);
    }
  })
}
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 : '/worksheet/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)
      }
    });
  }
   $('#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 : '/worksheet/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();
         
         studentProject(idproject);
        },
        error: function (xhr){
          console.log(xhr);
        }
      });

      

       }
      });
  })
  fu
</script>

@endsection