@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">
                <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 class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        {{-- <div class="table-responsive">
                            <table id="default-datatable" class="table table-bordered" width="100%">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>NIS</th>
                                        <th>Nama Siswa</th>
                                        <th>Kelas</th>
                                        <th>Status</th>
                                        <th>Tunggakan</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $no=1;
                                        
                                    @endphp
                                    @foreach($siswa as $sw)
                                    <tr>
                                        <td>{{$no++}}</td>
                                        <td>{{$sw->siswa_nisn}}</td>  
                                        <td>{{$sw->siswa_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>@if ($sw->sisa==null)
                                                {{0}}
                                            @else
                                            Rp. {{number_format($sw->sisa)}}
                                            @endif
                                            </td>
                                        <td>
                                        <a href="/dashboard-pembayaran-spp/{{$sw->siswa_id}}" type="button" class="btn btn-outline-success btn-sm">Cek Tagihan</a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div> --}}
                        <div class="table-responsive">
                            <table id="table-data-lain" class="table table-bordered">
                                
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--End Row-->
    <!-- End Breadcrumb-->
@endsection
@section('js')
<script type="text/javascript">

$(document).ready(function(){
    $('#table-data-lain').DataTable({
        "processing": true,
        "serverSide": false,
        "destroy": true,
        "responsive": true,
        ajax: {
            url : "{{ URL::route('JsonTableLainSiswa') }}",
            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: 'siswa_nisn', 
                name: 'siswa_nisn', 
                title:'NISN'
            },
            {
                data: 'siswa_name', 
                name: 'siswa_name', 
                title:'Nama'
            },
            {
                data: 'class_name', 
                name: 'class_name', 
                title:'Kelas'
            },
            {
                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: 'sisa', 
                title:'Biaya',
                    render: function(data, type, full, meta)
                {
                    if(full.sisa!=null){
                        return 'Rp '+full.sisa+',-';
                    } else {
                        return 'Rp 0,-';
                    }
                }
            },
            {
                name: 'siswa_id', 
                title:'Action',
                    render: function(data, type, full, meta)
                {
                    return '<a href="/dashboard-pembayaran/'+full.siswa_id+'" type="button" class="btn btn-outline-success btn-sm">Cek Tagihan</a>';
                }
            },
        ],
        "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}
        ],
        "fnCreatedRow": function (row, data, index) {
            $('td', row).eq(0).html(index + 1);
        }
    });
});

$("#filter").click(function(){
    oTable = $('#table-data-lain').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('JsonTableSPPSiswa') }}",
            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: 'siswa_nisn', 
                name: 'siswa_nisn', 
                title:'NISN'
            },
            {
                data: 'siswa_name', 
                name: 'siswa_name', 
                title:'Nama'
            },
            {
                data: 'class_name', 
                name: 'class_name', 
                title:'Kelas'
            },
            {
                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: 'sisa', 
                title:'Biaya',
                    render: function(data, type, full, meta)
                {
                    if(full.sisa!=null){
                        return 'Rp '+full.sisa+',-';
                    } else {
                        return 'Rp 0,-';
                    }
                }
            },
            {
                name: 'siswa_id', 
                title:'Action',
                    render: function(data, type, full, meta)
                {
                    return '<a href="/dashboard-pembayaran/'+full.siswa_id+'" type="button" class="btn btn-outline-success btn-sm">Cek Tagihan</a>';
                }
            },
        ],
        "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}
        ],
        "fnCreatedRow": function (row, data, index) {
            $('td', row).eq(0).html(index + 1);
        },
    });
});
</script>
@endsection