@extends('layouts.app')
@section('content')

    <div class="row pt-2 pb-2">
        <div class="col-sm-9">
          <h4 class="page-title">{{$breadcrumb}}</h4>
        </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            <button onclick="add_all('modal-all-lg')" class="btn btn btn-primary btn-rounded float-left waves-effect waves-light"><i class="fa fa-plus"></i> Tambah </button>&nbsp;&nbsp;&nbsp;
            <button type="button" onclick="export_template_siswa()" class="btn btn-outline-warning right" style="margin-right: 5px;"><i class="fa fa-file-excel-o"></i> Export</button>&nbsp;&nbsp;&nbsp;
            <button type="button" onclick="import_siswa('modal-all')" class="btn btn-outline-danger right"><i class="fa fa-folder"></i> Import</button>
          </div>
          <div class="card m-2">
            <div class="row">
              <div class="col">
                  <div class="form-group">
                      <label class="col-form-label">Tahun Ajaran</label>
                      <select class="form-control select-select" name="tahun_ajaran_id" id="tahun_ajaran_id"> 
                        <option value="">--Pilih Tahun Ajaran--</option>
                          @foreach($tahun_ajaran as $dt)
                            <option value="{{$dt->tahun_ajaran_id}}">{{$dt->tahun_ajaran_name}}</option>   
                          @endforeach
                      </select>                                                                       
                  </div>
              </div>
              <div class="col">
                  <div class="form-group">
                      <label class="col-form-label">Kelas</label> 
                      <select class="form-control select-select" name="class_id" id="class_id"> 
                        <option value="">--Pilih Kelas--</option>
                        @foreach($class as $dt)
                          <option value="{{$dt->class_id}}">{{$dt->class_name}}</option>   
                        @endforeach 
                      </select>                                         
                  </div>
              </div>
              <div class="col">
                  <div class="form-group">
                      <label class="col-form-label">*</label><br>
                      <button id="filter" class="btn btn-outline-primary btn-sm w-100"><i class="fa fa-filter"></i> Filter</button>
                  </div>
              </div>
            </div>
          </div>
          <div class="card-body">
            {{-- <div class="table-responsive">
              <table id="default-datatable" class="table table-bordered" width="100%">
                <thead>
                    <tr>
                      <th>No</th>
                      <th>NIK</th>
                      <th>Nama Siswa</th>
                      <th>Unit</th>
                      <th>Sekolah</th>
                      <th>Kelas</th>
                      <th>Status</th>
                      <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                  @php
                      $no=1;
                  @endphp
                  @foreach($siswa as $sw)
                  <tr>
                      <td>{{$no++}}</td>
                      <td><a href="dashboard-siswa/{{$sw->siswa_id}}">{{$sw->siswa_nik}}</a></td>  
                      <td>{{$sw->siswa_name}}</td>
                      <td>{{$sw->unit_name}}</td>
                      <td>{{$sw->university_name}}</td>
                      <td>{{$sw->class_name}}</td>
                      <td class="text-center">
                        @if ($sw->class_name==null)
                        <span class="badge badge-danger">Non Aktif</span>
                        @else
                        <span class="badge badge-success">Aktif</span>
                        @endif
                      </td>
                      <td>
                        <button onclick="edit_all('modal-all-lg',{{$sw->siswa_id}})" type="button" class="btn btn-outline-success btn-sm"> Edit </button>&nbsp;&nbsp;
                        <button onclick="delete_all('siswa/{{$sw->siswa_id}}','{{$sw->siswa_id}}')" class="btn btn-outline-danger btn-sm"><i class="fa fa-trash-o"></i>&nbsp;Delete</button>
                      </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div> --}}
            <div class="table-responsive">
                <table id="table_siswa" class="table table-bordered">
                    
                </table>
            </div>
          </div>
        </div>
      </div>
    </div><!-- End Row-->  
    <!-- Modal change password-->
    <div id="modal-import-siswa" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content border-primary animated flipInX">
          <div class="modal-header bg-primary">
            <h5 class="modal-title">Upload Siswa</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
                <form class="form-horizontal" id="form-import-siswa">
                {{csrf_field()}}
                <div class="row">
                  <div class="col-lg-12">
                      <div class="card">
                          <div class="card-body">
                              <div class="form-group row">
                                  <label class="col-sm-2 col-form-label">File</label>
                                  <div class="col-sm-9">
                                      <input type="file" class="form-control" name="file_excel" style="border-radius:0;">
                                      <span class="text-danger">*Silahkan "EXPORT" data pretest di terlebih dahulu agar format upload sesuai.</span>    
                                      <input type="hidden" name="action_form" value="import_siswa">                  
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div><!--End Row-->
          </div>
          </form>
          <div class="modal-footer">
            <button type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
            <button type="button" class="btn btn-primary" id="save_import_siswa" onclick="save_import_siswa()">Upload Data Siswa</button>
                
          </div>
        </div>
      </div>
    </div>

@endsection
@section('js')
<script type="text/javascript">
    form = $("#form-all-lg");
    var url_add = "/create-siswa" ;
    var url_save = "/save-siswa" ;
    var url_edit = "/edit-siswa" ;
    var url_update = "/update-siswa" ;

$(document).ready(function(){
    $('#table_siswa').DataTable({
        "processing": true,
        "serverSide": false,
        "destroy": true,
        "responsive": true,
        ajax: {
            url : "{{ URL::route('JsonTableSiswa') }}",
            type : "POST",
            headers : {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data : {
                filter : 1
            }
        },
        "columns": [
            {
                orderable: false,
                searchable: false,
                data: null,
                title: 'No'
            },
            {
                data: 'psb_no_urut', 
                name: 'psb_no_urut', 
                title:'No Urut'
            },
            {
                data: 'siswa_nis', 
                name: 'siswa_nis', 
                title:'NIS'
            },
            {
                name: 'siswa_name', 
                title:'Nama',
                    render: function(data, type, full, meta)
                {
                    return '<a href="dashboard-siswa/'+full.siswa_id+'">'+full.siswa_name+'</a>';
                }
            },
            {
                data: 'class_name', 
                name: 'class_name', 
                title:'Kelas'
            },
            {
                data: 'siswa_nik', 
                name: 'siswa_nik', 
                title:'NIK'
            },
            {
                data: 'siswa_nisn', 
                name: 'siswa_nisn', 
                title:'NISN'
            },  
            {
                name: 'class_name', 
                title:'Status',
                    render: function(data, type, full, meta)
                {
                    if(full.class_name!=null){
                        return '<h5><span class="badge badge-pill badge-success">Active</span></h5>';
                    } else {
                        return '<h5><span class="badge badge-pill badge-danger">Non Active</span></h5>';
                    }
                }
            },
            {
                name: 'siswa_id', 
                title:'Action',
                    render: function(data, type, full, meta)
                {
                    return '<button onclick="edit_all(`modal-all-lg`,`'+full.siswa_id+'`)"'+ 'type="button" class="btn btn-outline-success btn-sm"> Edit </button>'+
                    '<button onclick="delete_all(`siswa/'+full.siswa_id+'`,`'+full.siswa_id+'`)"'+ 'class="btn btn-outline-danger btn-sm"><i class="fa fa-trash-o"></i>&nbsp;Delete</button>';
                }
            },
        ],
        "columnDefs": [
            { "width": "1%", "targets": 0},
            { "width": "10%", "targets": 1},
            { "width": "10%", "targets": 2},
            { "width": "20%", "targets": 3},
            { "width": "15%", "targets": 4},
            { "width": "15%", "targets": 5},
            { "width": "10%", "targets": 6}
        ],
        "fnCreatedRow": function (row, data, index) {
            $('td', row).eq(0).html(index + 1);
        }
    });
});

$("#filter").click(function(){
    oTable = $('#table_siswa').dataTable({
        "iDisplayLength": 10,
        "lengthMenu": [[10, 25, 50, 'All'], [10, 25, 50, -1]],
        "language": {
                    "searchPlaceholder": "Enter to search..."
                    },
        "scrollY": '100%',
        "scrollX": true,
        "scrollCollapse": true,
        "processing": true,
        "serverSide": false,
        "destroy": true,
        ajax: {
            url : "{{ URL::route('JsonTableSiswa') }}",
            type : "POST",
            headers : {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data : {
              filter : 2,
                tahun_ajaran_id :  $('#tahun_ajaran_id').val(),
                class_id :  $('#class_id').val()
            }
        },
        "columns": [
            {
                orderable: false,
                searchable: false,
                data: null,
                title: 'No'
            },
            {
                data: 'psb_no_urut', 
                name: 'psb_no_urut', 
                title:'No Urut'
            },
            {
                data: 'siswa_nis', 
                name: 'siswa_nis', 
                title:'NIS'
            },
            {
                name: 'siswa_name', 
                title:'Nama',
                    render: function(data, type, full, meta)
                {
                    return '<a href="dashboard-siswa/'+full.siswa_id+'">'+full.siswa_name+'</a>';
                }
            },
            {
                data: 'class_name', 
                name: 'class_name', 
                title:'Kelas'
            },
            {
                data: 'siswa_nik', 
                name: 'siswa_nik', 
                title:'NIK'
            },
            {
                data: 'siswa_nisn', 
                name: 'siswa_nisn', 
                title:'NISN'
            },  
            {
                name: 'class_name', 
                title:'Status',
                    render: function(data, type, full, meta)
                {
                    if(full.class_name!=null){
                        return '<h5><span class="badge badge-pill badge-success">Active</span></h5>';
                    } else {
                        return '<h5><span class="badge badge-pill badge-danger">Non Active</span></h5>';
                    }
                }
            },
            {
                name: 'siswa_id', 
                title:'Action',
                    render: function(data, type, full, meta)
                {
                    return '<button onclick="edit_all(`modal-all-lg`,`'+full.siswa_id+'`)"'+ 'type="button" class="btn btn-outline-success btn-sm"> Edit </button>'+
                    '<button onclick="delete_all(`siswa/'+full.siswa_id+'`,`'+full.siswa_id+'`)"'+ 'class="btn btn-outline-danger btn-sm"><i class="fa fa-trash-o"></i>&nbsp;Delete</button>';
                }
            },
        ],
        "columnDefs": [
            { "width": "1%", "targets": 0},
            { "width": "10%", "targets": 1},
            { "width": "10%", "targets": 2},
            { "width": "20%", "targets": 3},
            { "width": "15%", "targets": 4},
            { "width": "15%", "targets": 5},
            { "width": "10%", "targets": 6}
        ],
        "fnCreatedRow": function (row, data, index) {
            $('td', row).eq(0).html(index + 1);
        },
    });
});

function export_template_siswa()
{  
//   window.open("{{URL::route('ExportTemplateRekapSiswa')}}");
    var start = $('#class_id').val();
    var end = $('#tahun_ajaran_id').val();
    window.open('export-template-rekap-siswa?class_id='+start+'&tahun_ajaran_id='+end);
  
}

function import_siswa(modal,id="")
{
  $('#modal-import-siswa').modal('show');
  $.fn.modal.Constructor.prototype._enforceFocus = function() {};
}

function save_import_siswa()
{
    
    var data = new FormData($("#form-import-siswa")[0]);
    var message = "input";
    swal({
        title: "Apakah anda yakin ?",
        text: "Input data ini",
        icon: "warning",
        buttons: true,
        dangerMode: false,
        })
        .then((willDelete) => {
            if (willDelete) {
            $.ajax({
                type  : 'POST',
                url   : '{{route("SaveImportRekapSiswa")}}',
                ajaxStart: function() { body.addClass("loading")    },
                ajaxStop: function() { body.removeClass("loading") },
                headers : {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data  : data,
                beforeSend:()=>{
                    swal({
                        title: "Waiting",
                        text: "Data Sedang Di proses",
                        icon: "../tpl/assets/images/loader.gif",
                        button:false
                    });
                },
                cache:false,
                contentType:false,
                processData:false,
                }).done(function(data) {
                if(data.status.code==0)
                {
                    swal({
                        title: "Success!",
                        text: "Data berhasil "+message,
                        icon: "success",
                        button: "Ok!",
                    }).then(function(){
                    if (typeof url_redirect !== 'undefined')
                    {
                        $(location).attr('href',url_redirect);    
                    }
                    else
                    {
                        location.reload(true)
                    }
                    });
                } 
            }).fail(function(data) { 
            console.log('fail'); 
                var dt = data.responseJSON;
                
                if(dt.errors)
                {
                    console.log('fail2'); 
                    $('.alert-danger').html('');
                    $.each(dt.errors, function (key, value) {
                        $('.alert-danger').show();
                        $('.alert-danger').append('<li>'+value+'</li>');
                        var input = '[name=' + key + ']';
                        
                        $(input + '+span').html('<strong>'+ value +'</strong>');
                        $(input).addClass('is-invalid');
                        $(input).focus();
                        $(input).change(function(){
                            $(input+'+span').html('');
                            $(input).removeClass('is-invalid');
                        })
                    });  
                }
                else
                {
                    swal({
                    title: dt.status.message,
                    type: "error"
                    })
                }
                
            });
        }   
    });

}
</script>
@endsection