@extends('layouts.master')
@section('content')
<div class="row page-titles">
  <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Course</h4>
  </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="#AddUser" onclick="addCourse()"><i class="fa fa-plus-circle"></i> Add Course</button>
      </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 class="card-title">Stage <span  id="jenjang" class="badge badge-pill badge-success">{{$jenjang->nama}}</span>


                </h6>
                </div>
                  
                  <hr>
                <div class="col-12 row">

                  <div class="table-responsive col-12">
                       <table id="dtable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Course</th>      
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                  </div>
                </div>
                 
            </div>
        </div>
       </div>
    </div>
@include('master.course.modal_edit')
@endsection

@section('js')

<script>
  // Switchery
   // $('select').select2();
  
   var save_method = 'add';
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    // For multiselect
    
  var table = $("#dtable").DataTable({
        
          processing : true,
          serverSide : true,
ordering    : false,
          
          ajax: {
            url :{{$jenjang->id_jenjang}} +'/dtable',
            type : 'get'
        },
          columns    : [
          
          
          {data : null, name : 'no'},
          {data : 'mata_pelajaran', 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 addCourse(){
  save_method = 'add';
 var nama_jenjang = $('#jenjang').text();
 // console.log(nama_jenjang);
  $('#jenjang_pendidikan').val(nama_jenjang);
  $('#id_jenjang_pendidikan').val({{$jenjang->id_jenjang}});
}

$('#submit_course').click(function(){
    console.log(save_method)
    if(save_method == 'add'){

      var urls ='/master/course' ;
      var method = 'post';
      console.log("jjkk")
    }
    else if(save_method == 'edit'){
      var urls ='/master/course'+'/'+$('#id_mapel').val();
      var method = 'put';
    }

    $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url : urls,
      type : method,
      data : $('#form_course').serialize(),
      success: function(response){
      console.log(response);
      
       localStorage.setItem("swal",
                                    swal({
                                        title: 'success',
                                        text:  'Data berhasil disimpan',
                                        type: 'success',
                                        timer: 3500,
                                        showConfirmButton: false
                                    })
                            );
       $('#form_course')[0].reset();
       $('#modal-edit').modal('hide');
      table.ajax.reload();
      },
      error: function (xhr){
        console.log(xhr);
      }
    });
  })
  
  
function editCourse(id){
   $('#modal-edit').modal('show');
    $.ajax({
     url : '/master/course'+'/'+id+'/edit',
     type: 'get',
      
      success:function(response){
        console.log(response);
        var nama_jenjang = $('#jenjang').text();
         // console.log(nama_jenjang);
          $('#jenjang_pendidikan').val(nama_jenjang);
          $('#id_jenjang_pendidikan').val(response.jenjang_pendidikan);
          $('#id_mapel').val(response.id);
          $('#mata_pelajaran').val(response.mata_pelajaran);

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

        }

       });
       
       }
      }); 

 }
 
 
</script>
@endsection