@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="card">
        <div class="card-header p-0">
            <div id="accordion4">
                <div class="card mb-2 shadow-none">
                  <div class="card-header bg-secondary">
                      <button class="btn btn-link shadow-none text-white" data-toggle="collapse" data-target="#collapse-10" aria-expanded="true" aria-controls="collapse-10">
                        Filter
                      </button>
                  </div>
  
                  <div id="collapse-10" class="collapse show" data-parent="#accordion4">
                    <div class="card-body">
                        <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">
                                    <button type="button" onclick="location.reload()" class="btn btn-outline-success btn-sm w-100 mb-2"><i class="fa fa-refresh"></i> Refresh</button><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>
                </div>
            </div>
        </div>
        <div class="card-body pt-2">
            <form id="approve-all">
                {{csrf_field()}}
                <button type="button" onclick="approve_all()" class="btn btn-sm btn-primary float-right mb-2 submit-btn"><i class="fa fa-check-circle"></i> Approved All</button>
                <div class="table-responsive border pt-2">
                    <table id="table-data-approval" class="table table-hover">
                        
                    </table>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('js')
<script type="text/javascript">
    $(document).ready(function(){
    $('#table-data-approval').DataTable({
        "processing": true,
        "serverSide": false,
        "destroy": true,
        "responsive": true,
        ajax: {
            url : "{{ URL::route('JsonTableApproval') }}",
            type : "POST",
            headers : {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data : {
                filter : 1
            }
        },
        "columns": [
            {
                orderable: false,
                searchable: false,
                data: null,
                title: 'No'
            },
            {
                name: 'id', 
                title:'Approve',
                    render: function(data, type, full, meta)
                {
                    return '<input type="hidden" name="approval_id[]" value="'+full.id+'"><button onclick="approved('+full.id+')" type="button" class="btn btn-success btn-sm" alt="Approved"><i class="fa fa-check-circle"></i></button>';
                }
            },
            {
                data: 'siswa_name', 
                name: 'siswa_name', 
                title:'Nama'
            },
            {
                data: 'siswa_nisn', 
                name: 'siswa_nisn', 
                title:'NISN'
            },
            {
                data: 'class_name', 
                name: 'class_name', 
                title:'Kelas'
            },
            {
                data: 'biaya_spp_name', 
                name: 'biaya_spp_name', 
                title:'SPP'
            },
            {
                data: 'approval_subsidi_desc', 
                name: 'approval_subsidi_desc', 
                title:'Keterangan'
            },
            {
                name: 'approval_subsidi_status', 
                title:'Status',
                    render: function(data, type, full, meta)
                {
                    return '<h5><span class="badge badge-pill badge-danger">Pending</span></h5>';
                }
            },
            {
                data: 'time', 
                name: 'time', 
                title:'Waktu'
            },
        ],
        "columnDefs": [
            { "width": "5%", "targets": 0},
            { "width": "5%", "targets": 1},
            { "width": "15%", "targets": 2},
            { "width": "15%", "targets": 3},
            { "width": "15%", "targets": 4},
            { "width": "15%", "targets": 5},
            { "width": "15%", "targets": 6},
            { "width": "15%", "targets": 7}
        ],
        "fnCreatedRow": function (row, data, index) {
            $('td', row).eq(0).html(index + 1);
        }
    });
});

$("#filter").click(function(){
    oTable = $('#table-data-approval').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('JsonTableApproval') }}",
            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'
            },
            {
                name: 'id', 
                title:'Approve',
                    render: function(data, type, full, meta)
                {
                    return '<button onclick="approved('+full.id+')" type="button" class="btn btn-success btn-sm" alt="Approved"><i class="fa fa-check-circle"></i></button>';
                }
            },
            {
                data: 'siswa_name', 
                name: 'siswa_name', 
                title:'Nama'
            },
            {
                data: 'siswa_nisn', 
                name: 'siswa_nisn', 
                title:'NISN'
            },
            {
                data: 'class_name', 
                name: 'class_name', 
                title:'Kelas'
            },
            {
                data: 'biaya_spp_name', 
                name: 'biaya_spp_name', 
                title:'SPP'
            },
            {
                data: 'approval_subsidi_desc', 
                name: 'approval_subsidi_desc', 
                title:'Keterangan'
            },
            {
                name: 'approval_subsidi_status', 
                title:'Status',
                    render: function(data, type, full, meta)
                {
                    return '<h5><span class="badge badge-pill badge-danger">Pending</span></h5>';
                }
            },
            {
                data: 'time', 
                name: 'time', 
                title:'Waktu'
            },
        ],
        "columnDefs": [
            { "width": "5%", "targets": 0},
            { "width": "5%", "targets": 1},
            { "width": "15%", "targets": 2},
            { "width": "15%", "targets": 3},
            { "width": "15%", "targets": 4},
            { "width": "15%", "targets": 5},
            { "width": "15%", "targets": 6},
            { "width": "15%", "targets": 7}
        ],
        "fnCreatedRow": function (row, data, index) {
            $('td', row).eq(0).html(index + 1);
        },
    });
});

    function approved(id){
        var approvedID=id;
        swal({
            title: "Apakah anda yakin?",
            text: "Ingin approve data ini!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    type: 'POST',
                    url: "{{URL::route('ApprovedConfirmation')}}",
                    headers : {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data:{
                        id:approvedID
                    },
                    beforeSend:()=>{
                        swal({
                            title: "Waiting",
                            text: "Data Sedang Di proses",
                            icon: "../tpl/assets/images/loader.gif",
                            button:false
                        });
                    },
                    // cache:false,
                    // contentType:false,
                    success: function( values )
                    {
                        parse = $.parseJSON(values);
                        if(parse.stat==1){
                            swal({
                                title: "Success!",
                                text: parse.message,
                                icon: "success",
                                button: "Ok!",
                            }).then(function(){
                                location.reload(true)
                            });
                        }else{
                            swal({text:parse.message,icon:'error'});
                        }
                    },
                    error: function(error){
                        swal("Failed Process!",{
                            icon:"error",
                        });
                    }
                });
            } else {
                swal("Persetujuan dibatalkan!",{
                    icon:"error",
                });
            }
        });
    }

    function approve_all()
    {
        $("#approve-all").validate();
        var data = new FormData($("#approve-all")[0]);
        var message = "update";

        swal({
        title: "Apakah anda yakin ?",
        text: "Ingin setujui semua",
        icon: "warning",
        buttons: true,
        dangerMode: false,
        })
        .then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    type  : 'POST',
                    url   : 'approve-all',
                    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) {
                    swal({
                        title: "Success!",
                        text: "Data berhasil "+message,
                        icon: "success",
                        button: "Ok!",
                    }).then(function(){
                        location.reload(true)
                    });
                }).fail(function(data) {  
                    var dt = data.responseJSON;
                    
                    if(dt.errors)
                    {
                        $.each(dt.errors, function (key, value) {
                            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