@extends('layouts.main')

@section('title','SPP')
@section('header','SPP')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">SPP</a></li>
<!--<li class="breadcrumb-item active"></li>-->
@endsection

@section('content')

<div class="card">
    <div class="card-header with-border">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">From</label>
                    <input type="date" name="date_from" class="form-control form-control-sm" placeholder="From">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">To</label>
                    <input type="date" name="date_to" class="form-control form-control-sm" placeholder="To">
                </div>
            </div>
            
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Filter</label>
                    <select class="form-control form-control-sm" name="filter">
                        <option selected value="">All</option>
                        <option>Today</option>
                        <option>This Month</option>
                        <option>This Year</option>
                    </select>
                </div>
            </div>
            
            <!--<div class="col-md-2">-->
            <!--    <div class="form-group">-->
            <!--        <label class="form-control-label">Tipe Pendapatan</label>-->
            <!--        <select class="form-control form-control-sm" name="tipe_pendapatan">-->
            <!--            <option selected value="All">All</option>-->
            <!--            <option>Pendaftaran</option>-->
            <!--            <option>Tagihan Siswa</option>-->
            <!--        </select>-->
            <!--    </div>-->
            <!--</div>-->
            
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Tahun Ajaran</label>
                    <select name="id_tahun_ajaran" class="form-control form-control-sm" >
                        <option selected value="">All</option>
                        @foreach($tahun_ajaran as $ta)
                        <option value="{{$ta->id}}">{{$ta->tahun_ajaran}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Item Pembayaran</label>
                    <select name="id_item_pembayaran" class="form-control form-control-sm" >
                        <option selected value="">All</option>
                        @foreach($item_pembayaran as $ip)
                        <option value="{{$ip->id}}">{{$ip->item_pembayaran}}</option>
                        @endforeach
                        <option value="DOA">Dana Ortu Asuh</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">&nbsp;</label>
                    <button class="form-control form-control-sm btn btn-md btn-refresh btn-info">REFRESH</button>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label class="form-control-label">Jenis Sekolah</label>
                    <select name="id_jenis_sekolah" class="form-control form-control-sm" >
                        <option selected value="">All</option>
                        @foreach(\App\Models\JenisSekolah::where('status_aktif', 'AKTIF')->get() as $js)
                        <option value="{{$js->id}}">{{$js->jenis_sekolah}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Status Siswa</label>
                    <select class="form-control form-control-sm" name="status_siswa">
                        <option selected value="">All</option>
                        <option>AKTIF</option>
                        <option value="NONAKTIF">NONAKTIF</option>
                        {{-- <option>PINDAH</option>
                        <option>LULUS</option> --}}
                    </select>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="form-group">
                    <label class="form-control-label">Siswa</label>
                    <select name="id_siswa" class="form-control form-control-sm select2_siswa">
                        <option selected disabled value="">Siswa</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">&nbsp;</label>
                    <button class="form-control form-control-sm btn btn-md btn-export-excel btn-success">Excel</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- <div class="row">
    <div class="col-lg-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3 id="total_belum_bayar">0</h3>
                <p>Total Belum Bayar</p>
            </div>
            <div class="icon">
                <i class="fa fa-shopping-cart"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="small-box bg-info">
            <div class="inner">
                <h3 id="total_penerimaan">0</h3>
                <p>Total Penerimaan</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <!--<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>-->
        </div>
    </div>
    <div class="col-lg-2">
        <div class="small-box bg-teal">
            <div class="inner">
                <h3 id="total_siswa_aktif">0</h3>
                <p>Total Siswa Aktif</p>
            </div>
            <div class="icon">
                <i class="fa fa-user-circle"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="small-box bg-blue">
            <div class="inner">
                <h3 id="total_siswa_non_aktif">0</h3>
                <p>Total Siswa Nonaktif</p>
            </div>
            <div class="icon">
                <i class="fa fa-user-times"></i>
            </div>
        </div>
    </div>
</div> --}}
<div class="row">
    <div class="col-lg-3">
        <div class="small-box bg-info">
            <div class="inner">
                <h3 id="jumlah_siswa_spp">0</h3>
                <p>Jumlah Siswa</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <!--<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>-->
        </div>
    </div>
    <div class="col-lg-3">
        <div class="small-box bg-success">
            <div class="inner">
                <h3 id="pendapatan_spp">0</h3>
                <p>Pendapatan</p>
            </div>
            <div class="icon">
                <i class="fa fa-shopping-cart"></i>
            </div>
        </div>
    </div>
   
    <div class="col-lg-3">
        <div class="small-box bg-teal">
            <div class="inner">
                <h3 id="belum_bayar_spp">0</h3>
                <p>Belum Bayar</p>
            </div>
            <div class="icon">
                <i class="fa fa-user-circle"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="small-box bg-blue">
            <div class="inner">
                <h3 id="jumlah_kas_masuk_spp">0</h3>
                <p>Jumlah Kas Masuk</p>
            </div>
            <div class="icon">
                <i class="fa fa-user-times"></i>
            </div>
        </div>
    </div>
</div>


<div class="card card-primary card-outline">
    <div class="card-body">
        <table class="table table-bordered">
            <thead class="text-white">
                <tr>
                    <th>ITEM</th>
                    <th>SUDAH BAYAR</th>
                    <th>BELUM BAYAR</th>
                    <th>TOTAL PENDAPATAN</th>
                </tr>
            </thead>
            <tbody id="tbody_pendapatan_item">
                <tr>
                    <td id="td_pendapatan_item"><b>ITEM</b></td>
                    <td id="td_pendapatan_sudah">0</td>
                    <td id="td_pendapatan_belum">0</td>
                    <td id="td_pendapatan_total">0</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="card card-primary card-outline">
    <div class="card-header">
        <h3 class="card-title">Tagihan Siswa</h3>
    </div>
    <div class="card-body">
        <div class="dataTableRow" id="dataTableRow">
            <label class="el-waiting-message">Loading your data. It may take some time..</label>
        </div>
    </div>
</div>

@endsection
@push('custom-scripts')
<script src="/js/chart/Chart.min.js"></script>
<script src="/js/chart/utils.js"></script>
<script>
    var param = {
        filter: "",
        tipe_pendapatan: "All",
    }
    function setSelectSiswa(url = '/get_siswa'){
        $('.select2_siswa').select2({
            placeholder: 'Siswa',
            ajax: {
                url: url,
                dataType: "json",
                delay: 250,
                processResults: function (data) {
                    data = data.data;
                    return {
                        results: $.map(data, function (item) {
                            id = item.id_user;
                            item_text = item.nama_lengkap + ' | EMAIL: ' + item.email;
                            return {
                                text: item_text,
                                id: id
                            };
                        })
                    };
                },
                cache: false
            }
        });
    }
    $(document).ready(function(e){
        loadThis(param)
        setSelectSiswa();
    });
    $(document).on('click', '.btn-export-excel', function(e){
        e.preventDefault();
        location.href = '/excel/export/spp?date_from='+ $('input[name=date_from]').val() +
                        '&date_to='+ $('input[name=date_to]').val() +
                        '&filter='+ $('select[name=filter]').val() +
                        '&id_tahun_ajaran='+ $('select[name=id_tahun_ajaran]').val() +
                        '&id_item_pembayaran='+ $('select[name=id_item_pembayaran]').val() +
                        '&id_jenis_sekolah='+ $('select[name=id_jenis_sekolah]').val() +
                        '&status_siswa='+ $('select[name=status_siswa]').val() +
                        '&id_siswa='+ $('select[name=id_siswa]').val();
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "",
            tipe_pendapatan: "All",
        };
        $('select[name=filter]').val('');
        $('select[name=tipe_pendapatan]').val('All');
        $('input[name=date_to]').val('');
        $('input[name=date_from]').val('');
        $('select[name=id_tahun_ajaran]').val('');
        $('select[name=id_jenis_sekolah]').val('');
        $('select[name=id_item_pembayaran]').val('');
        $('select[name=id_siswa]').val('');
        $('select[name=status_siswa]').val('');
        setSelectSiswa();
        loadThis(param);
    });
    $(document).on('change', 'select[name=filter]', function(e){
        e.preventDefault();
        param.filter = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=tipe_pendapatan]', function(e){
        e.preventDefault();
        param.tipe_pendapatan = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=id_tahun_ajaran]', function(e){
        e.preventDefault();
        param.id_tahun_ajaran = $(this).val();
        loadThis(param);
        setSelectSiswa(url = '/get_siswa?id_jenis_sekolah='+$('select[name=id_jenis_sekolah]').val()+'&status_siswa='+$('select[name=status_siswa]').val()+'&id_tahun_ajaran='+$('select[name=id_tahun_ajaran]').val());
    });
    $(document).on('change', 'input[name=date_to]', function(e){
        e.preventDefault();
        param.date_to = $(this).val();
        if(param.date_from) loadThis(param);
    });
    $(document).on('change', 'input[name=date_from]', function(e){
        e.preventDefault();
        param.date_from = $(this).val();
        if(param.date_to) loadThis(param);
    });
    $(document).on('change', 'select[name=id_jenis_sekolah]', function(e){
        e.preventDefault();
        param.id_jenis_sekolah = $(this).val();
        loadThis(param);
        setSelectSiswa(url = '/get_siswa?id_jenis_sekolah='+$('select[name=id_jenis_sekolah]').val()+'&status_siswa='+$('select[name=status_siswa]').val()+'&id_tahun_ajaran='+$('select[name=id_tahun_ajaran]').val());
    });
    $(document).on('change', 'select[name=status_siswa]', function(e){
        e.preventDefault();
        param.status_siswa = $(this).val();
        loadThis(param);
        setSelectSiswa(url = '/get_siswa?id_jenis_sekolah='+$('select[name=id_jenis_sekolah]').val()+'&status_siswa='+$('select[name=status_siswa]').val()+'&id_tahun_ajaran='+$('select[name=id_tahun_ajaran]').val());
    });
    $(document).on('change', 'select[name=id_item_pembayaran]', function(e){
        e.preventDefault();
        param.id_item_pembayaran = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=id_siswa]', function(e){
        e.preventDefault();
        param.id_siswa = $(this).val();
        loadThis(param);
    });
    function loadThis(params){
        setCountBoxes(params);
        loadTunggakan(params);
        loadPendapatan(params);
    }
    function loadPendapatan(params){
        $.ajax({
            url: '/web_api/dashboard/spp/getTotalPendapatan',
            type: "get",
            data: params
        }).done(function (result) {
            var ht = '';
            $.each(result, function(i, v){
                ht += '<tr>' +
                        '<td><b>'+v.item+'</b></td>' +
                        '<td>'+convertToRupiah(v.sudah)+'</td>' +
                        '<td>'+convertToRupiah(v.belum)+'</td>' +
                        '<td>'+convertToRupiah(v.total)+'</td>' +
                      '</tr>';
            })
            $('#tbody_pendapatan_item').html(ht);
        }).fail(ajax_fail);
    }
    function setCountBoxes(params){
        $.ajax({
            url: '/web_api/dashboard/spp/getBoxes',
            type: "get",
            data: params
        }).done(function (result) {
            $('#total_penerimaan').html(result.total_penerimaan);
            $('#total_belum_bayar').html(convertToRupiah(result.total_belum_bayar));
            $('#belum_bayar_spp').html(convertToRupiah(result.total_belum_bayar));
            $('#jumlah_kas_masuk_spp').html(convertToRupiah(result.jumlah_kas_masuk_spp));
            $('#pendapatan_spp').html(convertToRupiah(result.jumlah_pendapatan_spp));
            $('#total_siswa_aktif').html(result.total_siswa_aktif);
            $('#total_siswa_non_aktif').html(result.total_siswa_non_aktif);
            $('#jumlah_siswa_spp').html(result.jumlah_siswa_spp);
        }).fail(ajax_fail);
    }
    function loadTunggakan(params){
        url = "web_api/dashboard/spp/getTunggakanSiswa";
        th = '<th>PENDAFTARAN</th>' +
             '<th>NAMA</th>' +
             '<th>KELAS</th>' +
             '<th>NAMA AYAH</th>' +
             '<th>HP AYAH</th>' +
             '<th>NAMA IBU</th>' +
             '<th>HP IBU</th>' +
             '<th>TUNGGAKAN</th>';
        columns = [
                    { "data": "jenis_sekolah", 'className':'nowrap'},
                    { "data": "nama_lengkap", 'className':'nowrap'},
                    { "data": "kelas", 'className':'nowrap'},
                    { "data": "nama_ayah", 'className':'nowrap'},
                    { "data": "hp_ayah", 'className':'nowrap'},
                    { "data": "nama_ibu", 'className':'nowrap'},
                    { "data": "hp_ibu", 'className':'nowrap'},
                    { "data": "total_sisa_tagihan", 'className':'nowrap'},
                  ];
    
        col_def = [
                {
                    "targets" : 7,
                    "data": "total_sisa_tagihan",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.total_sisa_tagihan);
                    }
                },
            ];   
        
        order = [[0, 'desc']];
        sDom = '';
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableRow', 1, 0, true, true, true, true, false, true, false);
    }
</script>
@endpush