@extends('layouts.master')
@section('content')
<div class="row page-titles">
	<div class="col-md-12 align-self-center">
	    <h4 class="text-themecolor">RPP (RENCANA PELAKSANAAN PEMBELAJARAN)</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 class="card-title">Semester <span class="badge badge-pill badge-success">{{($semester->meta_value == 1)? 'First Term' : 'Second Term'}}</span>

                </h6>
                </div>
                  <div class="col-4">
                    <form id="form-header">
                      <div class="form-group">
                        <label>Semester</label>
                        <select class="form-control" name="semester">
                          <option value="">-- Select Semester --</option>
                          <option value="1">First Term</option>
                          <option value="2">Second Term</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <label>Educational Stage</label>
                        <select class="form-control" name="jenjang">
                          <option value="">-- Educational Stage --</option>
                          @foreach ($grade as $row)
                            <option value="{{$row->id_jenjang}}">{{$row->nama}}</option>
                          @endforeach
                        </select>
                      </div>
                      <button type="button" class="btn btn-success" id="search_header"><i class="fa fa-search"></i> Search</button>
                    </form>
                    
                  </div>
                  <hr>
                <div class="col-12 row">

                  <div id="tableRPP" class="col-12">
                    
                  </div>
                </div>
                 
            </div>
        </div>
       </div>
    </div>
@include('master.RPP.modal_detail')
@include('master.RPP.modal_print')
@endsection

@section('js')

<script>
  // Switchery
   // $('select').select2();
   var periodes;
   var save_method = 'add';
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    // For multiselect
    $('#pre-selected-options').multiSelect();

    $('.input-daterange-datepicker').daterangepicker({
        buttonClasses: ['btn', 'btn-sm'],
        applyClass: 'btn-danger',
        cancelClass: 'btn-inverse'
    });
	var table = $("#dtable").DataTable({
        
          processing : true,
          serverSide : true,
          // paging      : false,
          // lengthChange : true,
          // searching   : false,
          ordering    : false,
          // info        : true,
          // autoWidth   : false
          
          ajax: {
            url :'userData',
            type : 'get'
        },
          columns    : [
          
          
          {data : null, name : 'no'},
          {data : 'name', name : 'name'},
          {data : 'username', name : 'username'},
          {data : 'email', name : 'email'},
          {data : 'role', name : 'role'},
          {data : 'active', name : 'active'},
          {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;
    });
	});

  $('.modal').on('hidden.bs.modal', function(){
    $(this).find('form')[0].reset();
     save_method = 'add';

     // $('.switchery').prop('checked', true).trigger("click");
  });

  $('#AddUser').click(function(){
    $('.switchery').prop('checked', true).trigger("click");
  })
  $('#submit_user').click(function(){
    console.log(save_method)
    if(save_method == 'add'){

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

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

  $('.submitRPP').click(function(){
    swal({
      title: "Are you sure?",
      text: "You will save this RPP?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
        if(save_method == 'add'){

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

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

       }
      });
       
  });
 function detail_yearly(id_periode,periode){
  periodes = id_periode;
  $.ajax({
    url : 'yearly/search_periode'+'/'+id_periode,
    type : 'get',
    success: function(response){
      $('#title_period').html(periode)
      console.log(response);
    }
  })
  var tblDetil = $('#dt-add-activity-detail').DataTable({
          processing : true,
          serverSide : true,
          ordering   : false,
          
          fixedColumns: true,
          ajax: {
                    url :'yearly/search_periode'+'/'+periodes,
                    type : 'get'
                },
          columns    : [
          {data : 'range', name : 'no'},
          {data : 'kegiatan', name : 'kegiatan'},
          {data : 'keterangan', name : 'tanggal_akhir'},
          {data : 'action', name : 'kegiatan'},

          ],
    });
 }
 $('#modal-edit').on('show.bs.modal',function(){
    
 })

 $('#search_header').click(function(){
    $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url : 'RPP/search',
      data : $('#form-header').serialize(),
      type : 'post',
      success:function(response){
          console.log(response);
          $('#tableRPP').empty();
          $('#tableRPP').append(response);
          // $('select').selectpicker();
        },
        error:function(xhr){
          console.log(xhr);
        }
    })
 });
 function addrpp(meet, id_mapel, semester, nama_mapel){
  save_method = 'add';
  console.log(semester);
  console.log(meet);
  $('#id_mapel').val(id_mapel);
  $('#semester').val(semester);
  $('#nama_mapel').val(nama_mapel);
  $('#meeting').val(meet);
 }
 function editrpp(id_rpp, nama_mapel){
  save_method = 'edit';
  console.log(id_rpp);

  $.ajax({
    // headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url : 'RPP'+'/'+id_rpp+'/edit',
      // data : $('#form-header').serialize(),
      type : 'get',
      success:function(response){
          console.log(response);
          $('#id_rpp').val(response.id_rpp);
          $('#id_mapel').val(response.id_mapel);
          $('#semester').val(response.semester);
          $('#nama_mapel').val(nama_mapel);
          $('#meeting').val(response.meeting);
          $('#assessment').val(response.assessment);
          $('#closing_activities').val(response.closing_activities);
          $('#core_activities').val(response.core_activities);
          $('#learning_objectives').val(response.learning_objectives);
          $('#preliminary_activities').val(response.preliminary_activities);

         
        },
        error:function(xhr){
          console.log(xhr);
        }
  })
 }
 function printrpp(id_mapel,semester){
  console.log(id_mapel,semester)
  $.ajax({
      url : 'RPP/print'+'/'+id_mapel+'/'+semester,
      type :'get',
      // dataType: "application/pdf", 
       // Content-type: "application/json",
        

      success: function (response) {
        
          window.open(response['status']);
        
      },
      error: function(xhr){
        console.log(xhr);
      }
  });
 }
</script>
@endsection