@extends('layouts.master')
@section('css')
  <style>
    
    :title { 
     /*background-color: #000;*/
     color:red;
    }
  </style>
@endsection
@section('content')
<div class="row page-titles">
	<div class="col-md-5 align-self-center">
	    <h4 class="text-themecolor">Semester Program</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>
                </div>
                  <div class="col-4">
                    <form>
                      <div class="form-group">
                        <label>Semester</label>
                        <select class="form-control" id="semester_select">
                          <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" id="stage_select" name="jenjang">
                                  <option value="">-- Educational Stage --</option>
                                  @foreach ($jenjang as $row)
                                        <option value="{{$row->id_jenjang}}">{{$row->nama}}</option>
                                    @endforeach
                                  
                                </select>
                      </div>
                      <button type="button" class="btn btn-success" id="search"><i class="fa fa-search"></i> Search</button>
                    </form>
                    
                  </div>
                  <hr>
                <div class="col-12 row" id="tableReload">
                  
                  
                </div>
                 
            </div>
        </div>
       </div>
    </div>
@include('master.semester.modal_edit')
@endsection

@section('js')

<script>
  // Switchery
   // $('select').select2();
   var periodes;
   var save_method = 'add';
   var semester;
   var stage;

    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'
    });
	
 $( document ).ready(function() {
    var role = '{{$role}}';
    if(role == 'student'){
      @if (isset($personal))
      role_jenjang = '{{$personal->id_jenjang}}';
      $("#stage_select").val(role_jenjang);
      $("#stage_select").prop('disabled', 'disabled');
      @endif
      

    }

  });
  
  $('#search').click(function(){
    console.log("here");
    semester = $('#semester_select').val();
    stage =$('#stage_select').val();
    $.ajax({ 
      url:'semester/search',
      type: 'post',
      
      data : {
              "_token"      : '{!! csrf_token() !!}',
              "semester"    : $('#semester_select').val(),
              "stage"       : $('#stage_select').val(),
          },
      success:function(response){
        console.log(response);
        $('#tableReload').empty();
        $('#tableReload').append(response);
      },
      error:function(xhr){
        console.log(xhr);
      }

    })
  })
  function show_modal(id_mapel,mapel){
    save_method = 'add';
    console.log(mapel)
    $("#id_semester").val(semester);
    $("#id_mapel").val(id_mapel);
    $("#course_detail").html(mapel);
    if(semester == 1){
      $("#semester").html('Odd');
    }
    else if(semester == 2){
      $("#semester").html('Even');
    }
    if(stage == 1){
      $("#jenjang").html('Kindergarten 2');
    }
    else if(stage == 2){
      $("#jenjang").html('Kindergarten 1');
    }
    else if(stage == 3){
      $("#jenjang").html('Playgroup');
    }
   
    $.ajax({ 
       url :'semester/dtTable',
       type : 'post',
      
      data : {
              "_token"      : '{!! csrf_token() !!}',
              "semester"    : semester,
              "stage"       : stage,
              "mapel"       : id_mapel
          },
      success:function(response){
        console.log(response);
        $('#tableSemesterProgram').empty();
        $('#tableSemesterProgram').append(response);
      },
      error:function(xhr){
        console.log(xhr);
      }

    })
    // var data : {
    //           "_token"      : '',
    //           "semester"    : semester,
    //           "stage"       : stage,
    //           "mapel"       : id_mapel
    //       };
    //     $('#dt-add-activity-detail').DataTable().clear();
    //     $('#dt-add-activity-detail').DataTable().destroy();
    //     $('#dt-add-activity-detail').DataTable({
    //             processing : true,
    //             serverSide : true,
    //             ordering   : false,
                
    //             fixedColumns: true,
    //             ajax: {
    //                       url :'semester/dtTable',
    //                       type : 'post'
    //                   },
    //             columns    : [
    //             {data : 'indikator', name : 'indikator'},
    //             {data : 'kegiatan', name : 'kegiatan'},
    //             {data : 'keterangan', name : 'tanggal_akhir'},
    //             {data : 'action', name : 'kegiatan'},

    //             ],
    //       });
    

  }
  $('#submitSemesterProgram').click(function(){
    var dataForm;
    console.log(save_method);
    if(save_method == 'add'){
      var urls ='semester' ;
      var method = 'post';
      
      
      
    }
    else if(save_method == 'edit'){
      var urls ='semester'+'/'+ $('#id_semester_program').val() ;
      var method = 'put';
      
    }
    if($('#semesterForm').valid()){
         dataForm = $('#semesterForm').serialize();
      }
    $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url : urls,
      type : method,
      data : dataForm,
      success: function(response){
      console.log(response);
      
       localStorage.setItem("swal",
                                    swal({
                                        title: 'success',
                                        text:  'Data berhasil disimpan',
                                        type: 'success',
                                        timer: 3500,
                                        showConfirmButton: false
                                    })
                            );
       
       var id_mapel = $('#id_mapel').val();
       var mapel = $('#course_detail').text();
       $('#semesterForm').get(0).reset();
       $('#pre-selected-options').multiSelect('deselect_all',false);
        // $('#pre-selected-options').find('option').attr("selected",false) ;;
      show_modal(id_mapel,mapel);
      },
      error:function(xhr){
        console.log(xhr);
      }

    });

  })
  
 
 function editSemester(id){
  console.log('here');
  save_method = 'edit';
  $.ajax({
      url :'semester/'+id+'/edit',
      type : 'get',
      dataType : 'json',
      success: function(response){
        $('#pre-selected-options').multiSelect('deselect_all');
        console.log(response);
        $('#id_semester').val(response[0].id_semester);
        $('#id_mapel').val(response[0].id_mata_pelajaran);
        $('#indikator').val(response[0].indikator);
        $('#id_semester_program').val(response[0].id);
        $('#teori').val(response[0].teori);
        $('#detail').val(response[0].detail);
        $('#practice').val(response[0].practice);
        $('#selectsemester').val(response[0].week);
        // var arrWeek = response[0].week.split(",");
        // console.log(arrWeek);
        // $('#pre-selected-options').multiSelect('select',arrWeek);

      },
      error: function(xhr){
        console.log(xhr);
      }
  })
 }
 function destroy(id){
  swal({
      title: "Are you sure?",
      text: "You will delete this Semester Program?",
      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 : 'semester'+'/'+id,
        type : 'delete',
        dataType : 'json',
        success:function(response){
          // dtableDetail();
          // tableMaster();
          localStorage.setItem("swal",
                      swal({
                          title: 'success',
                          text:  'data successfully deleted',
                          type: 'success',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );
          var id_mapel = $('#id_mapel').val();
          var mapel = $('#course_detail').text();
          show_modal(id_mapel,mapel);
      
        },
        
        error:function(xhr){
          console.log(xhr)
          // dtableDetail();
          localStorage.setItem("swal",
                      swal({
                          title: 'Error',
                          text:  'data was not successfully deleted',
                          type: 'error',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );

        }

       });
       
       }
      }); 
 }
</script>
@endsection