@extends('layouts.main')

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

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</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>Daftar Ulang Kelulusan PPDB</option>
                    </select>
                </div>
            </div>
            
            <div class="col-md-2"></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-2">
                <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">Jalur Pendaftaran</label>
                    <select class="form-control form-control-sm" name="jalur_pendaftaran">
                        <option selected value="">All</option>
                        @foreach($jalur_pendaftaran as $jp)
                        <option value="{{$jp->id}}">{{$jp->jalur_pendaftaran}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Biaya Pendaftaran</label>
                    <select class="form-control form-control-sm" name="biaya_pendaftaran">
                        <option selected value="">All</option>
                        <option value="150000">150.000</option>
                        <option value="250000">250.000</option>
                        <option value="300000">300.000</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(\App\Models\TahunAjaran::where('status_aktif', 'AKTIF')->get() as $ta)
                        <option value="{{$ta->id}}">{{$ta->tahun_ajaran}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3 id="pendaftar_daftar_email">0</h3>
                <p>Pendaftar (Daftar Email)</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 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3 id="pendaftar_isi_data">0</h3>
                <p>Pendaftar (Isi Data)</p>
            </div>
            <div class="icon">
                <i class="fa fa-shopping-cart"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-teal">
            <div class="inner">
                <h3 id="pendaftar_sudah_bayar">0</h3>
                <p>Pendaftar (Sudah Bayar)</p>
            </div>
            <!--<div class="icon"><i class="fa fa-money-bill-wave"></i></div>-->
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-blue">
            <div class="inner">
                <h3 id="jumlah_kas_pendaftaran">0</h3>
                <p>Jumlah Kas Masuk (Pendaftaran)</p>
            </div>
            <!--<div class="icon"><i class="fa fa-chart-pie"></i></div>-->
        </div>
    </div>
</div>

{{-- line three --}}
<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3 id="pendaftar_lulus_ujian">0</h3>
                <p>Pendaftar (Lulus Ujian)</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 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3 id="daftar_ulang_kelulusan">0</h3>
                <p>Daftar Ulang Kelulusan
                    (Sudah Bayar D. Ulang PPDB)</p>
            </div>
            <div class="icon">
                {{-- <i class="fa fa-shopping-cart"></i> --}}
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-teal">
            <div class="inner">
                <h3 id="box_jumlah_pendapatan2">0</h3>
                <p>Jumlah Pendapatan</p>
            </div>
            <!--<div class="icon"><i class="fa fa-money-bill-wave"></i></div>-->
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-blue">
            <div class="inner">
                <h3 id="jumlah_pendapatan_daftar_ulang">0</h3>
                <p>Jumlah Kas Masuk
                    (Daftar Ulang)</p>
            </div>
            <!--<div class="icon"><i class="fa fa-chart-pie"></i></div>-->
        </div>
    </div>
</div>

<section class="approval-pembayaran-wrapper">
    <div class="card card-outline card-info">
        <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>
    <div class="modal fade" tabindex="-1" id="approvalData" role="dialog" aria-labelledby="warning">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <form action="#" class="form-approval-data" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Pembayaran</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="p-2">
                        <div class="form-group">
                            <label class="form-control-label">Bukti Pembayaran</label>
                        </div>
                        <div class="form-group">
                            <img class="bukti_pembayaran pointer" src="/images/bukti_pembayaran/default.png" width="150px">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Nama Lengkap</label>
                            <input type="text" name="nama_lengkap" class="form-control form-control-sm" readonly>
                            <input name="id_log" hidden>
                            <input name="id_user" hidden>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Email</label>
                            <input type="text" name="email" class="form-control form-control-sm" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Total Tagihan</label>
                            <input type="text" name="total_tagihan" class="form-control form-control-sm" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Total Bayar</label>
                            <input type="text" name="total_bayar" class="form-control form-control-sm" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Catatan</label>
                            <textarea name="catatan" class="form-control form-control-sm" readonly></textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Approval</label>
                            <select name="status_approval" class="form-control form-control-sm" required autofocus>
                                <option value="DISETUJUI">SETUJUI</option>
                                <option value="DITOLAK">TOLAK</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Catatan Approval</label>
                            <textarea name="catatan_approval" class="form-control form-control-sm" required autofocus placeholder="Catatan Approval"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" id="approvalFooter"></div>
                </form>
            </div>
        </div>
    </div>
</section>

<div class="pendapatan-chart-wrapper">
    <div class="card card-outline card-info">
        <div class="card-header">
            <h3 class="card-title">Pendapatan</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
            </div>
        </div>
        <div class="card-body" id="card-chartPendapatan"></div>
        <div class="card-footer text-center p-0" id="laporan_pendapatan-parent">
            <div class="card mb-0">
                <a class="d-block w-100 text-center" data-toggle="collapse" href="#laporan_pendapatan" aria-expanded="false">
                    <div class="card-header"><h4 class="card-title w-100">Laporan Pendapatan <i class="fas fa-angle-right"></i></h4></div>
                </a>
                <div id="laporan_pendapatan" class="collapse" data-parent="#laporan_pendapatan-parent" style="">
                    <div class="card-body">
                        <div>
                            <table class="table table-bordered">
                                <thead class="bg-info">
                                    <tr>
                                        <th width="50%">Month</th>
                                        <th>Pendapatan</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody_laporan_pendapatan">
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="pendaftar-chart-wrapper">
    <div class="row">
        <div class="col-md-6">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">Pendaftar</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row" style="margin: 2rem;">
                        <div class="col-md-12 text-center">
                            <h3 class="chartPendaftar_msg"></h3>
                        </div>
                        <div class="col-md-12" id="card-chartPendaftar"></div>
                    </div>
                </div>
            </div>
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">Jalur Pendaftaran</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row" style="margin: 2rem;">
                        <div class="col-md-12 text-center">
                            <h3 class="chartJalurPendaftaran_msg"></h3>
                        </div>
                        <div class="col-md-12" id="card-chartJalurPendaftaran"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">Recent Pendaftar</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-responsive">
                        <thead class="bg-info">
                            <tr>
                                <th width="25%" class="nowrap">Nama</th>
                                <th width="25%" class="nowrap">Email</th>
                                <th width="25%" class="nowrap">Jenis Kelamin</th>
                                <th width="25%" class="nowrap">TGL Daftar</th>
                                <th width="25%" class="nowrap">Approval Pembayaran</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_recent_pendaftar">
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="pembayaran-chart-wrapper">
    <div class="card card-outline card-info">
        <div class="card-header">
            <h3 class="card-title">Pembayaran</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
            </div>
        </div>
        <div class="card-body" id="card-chartPembayaran">
        </div>
    </div>
</div>
<div class="pembayaran_tagihan-chart-wrapper">
    <div class="card card-outline card-info">
        <div class="card-header">
            <h3 class="card-title">Pembayaran Tagihan</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
            </div>
        </div>
        <div class="card-body" id="card-chartPembayaranTagihan">
        </div>
    </div>
</div>
<div class="peserta_ujian-chart-wrapper">
    <div class="card card-outline card-info">
        <div class="card-header">
            <h3 class="card-title">Peserta Ujian</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
            </div>
        </div>
        <div class="card-body" id="card-chartPesertaUjian">
        </div>
    </div>
</div>
<div class="jenis-sekolah-chart-wrapper">
    <div class="card card-outline card-info">
        <div class="card-header">
            <h3 class="card-title">Jenis Sekolah</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
            </div>
        </div>
        <div class="card-body" id="card-chartJenisSekolah">
        </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: "",
        filter_approval: "MENUNGGU",
        tipe_pendapatan: "All",
        // jalur_pendaftaran: "ALL",
    }
    var isInitialLoad = true; // Flag untuk tracking initial load

    $(document).ready(function(e){
        // TIDAK memanggil loadThis() pada initial load
        // loadThis(param)

        // Menampilkan placeholder message
        showInitialPlaceholder();
        $(document).on('click', '.btn-approval', function(e){
            var ini = $(this), id = ini.data('id');
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/pembayaran/getData',
                type: "get",
                data: {
                    id: id,
                }
            }).done(function (result) {
                hideLoading(e_modal_wait);
                if (result.data[0]) {
                    data = result.data[0];
                    var form = $('.form-approval-data');
                    form.find('input[name=nama_lengkap]').val(data.nama_lengkap);
                    form.find('input[name=email]').val(data.email);
                    form.find('input[name=id_user]').val(data.id_user);
                    form.find('input[name=total_tagihan]').val(convertToRupiah(data.total_bayar));
                    last_log = data.last_log;
                    if(last_log){
                        form.find('input[name=id_log]').val(last_log.id);
                        form.find('input[name=total_bayar]').val(convertToRupiah(last_log.total_bayar));
                        form.find('textarea[name=catatan]').val(last_log.catatan);
                        form.find('.bukti_pembayaran').attr('src', '/images/bukti_pembayaran/'+last_log.bukti_pembayaran);
                        
                        var footer = '<a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>' +
                                     '<button type="submit" class="btn btn-success btn-sm">Submit</button>';
                        $('#approvalFooter').html(footer)
                        $('#approvalData').modal('show');
                    } else {
                        failedAlert('Not Found');
                    }
                } else {
                    failedAlert('Not Found');
                }
            })
            .fail(ajax_fail);
        });
        $(document).on('click', '.bukti_pembayaran', function(e){
            window.open($(this).attr('src'));
        });
        
        $(document).on('submit', '.form-approval-data', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                id = ini.find('input[name=id_user]').val(),
                url = '/web_api/pembayaran/approval/'+id;
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id_log: ini.find('input[name=id_log]').val(),
                status_approval: ini.find('select[name=status_approval]').val(),
                catatan_approval: ini.find('textarea[name=catatan_approval]').val()
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(datas){
                $.ajax({
                    url: url,
                    type: "post",
                    data: datas
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#approvalData').modal('hide');
                        loadThis(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            postData(post_data);
            
        });
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "Today",
            filter_approval: "MENUNGGU",
            tipe_pendapatan: "All",
            jalur_pendaftaran: "ALL",
        };
        $('select[name=filter]').val('Today');
        $('select[name=tipe_pendapatan]').val('All');
        $('select[name=jalur_pendaftaran]').val('All');
        $('select[name=biaya_pendaftaran]').val('');
        $('input[name=date_to]').val('');
        $('input[name=date_from]').val('');
        $('select[name=id_jenis_sekolah]').val('');
        $('select[name=id_tahun_ajaran]').val('');
        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=jalur_pendaftaran]', function(e){
        e.preventDefault();
        param.jalur_pendaftaran = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=biaya_pendaftaran]', function(e){
        e.preventDefault();
        param.biaya_pendaftaran = $(this).val();
        loadThis(param);
    });
    $(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);
    });
    $(document).on('change', 'select[name=id_tahun_ajaran]', function(e){
        e.preventDefault();
        param.id_tahun_ajaran = $(this).val();
        loadThis(param);
    });

    function showInitialPlaceholder(){
        // Set semua box ke 0
        $('#pendaftar_daftar_email').html('0');
        $('#pendaftar_isi_data').html('0');
        $('#pendaftar_sudah_bayar').html('0');
        $('#jumlah_kas_pendaftaran').html('Rp. 0');
        $('#pendaftar_lulus_ujian').html('0');
        $('#daftar_ulang_kelulusan').html('0');
        $('#box_jumlah_pendapatan2').html('Rp. 0');
        $('#jumlah_pendapatan_daftar_ulang').html('Rp. 0');

        // Set message untuk charts
        $('#card-chartPendapatan').html('<div class="text-center p-5"><h5 class="text-muted">Silakan pilih filter untuk menampilkan data pendapatan</h5></div>');
        $('#card-chartPendaftar').html('<div class="text-center p-5"><h5 class="text-muted">Silakan pilih filter untuk menampilkan data pendaftar</h5></div>');
        $('#card-chartJalurPendaftaran').html('<div class="text-center p-5"><h5 class="text-muted">Silakan pilih filter untuk menampilkan data jalur pendaftaran</h5></div>');
        $('#card-chartPembayaran').html('<div class="text-center p-5"><h5 class="text-muted">Silakan pilih filter untuk menampilkan data pembayaran</h5></div>');
        $('#card-chartPembayaranTagihan').html('<div class="text-center p-5"><h5 class="text-muted">Silakan pilih filter untuk menampilkan data tagihan</h5></div>');
        $('#card-chartPesertaUjian').html('<div class="text-center p-5"><h5 class="text-muted">Silakan pilih filter untuk menampilkan data peserta ujian</h5></div>');
        $('#card-chartJenisSekolah').html('<div class="text-center p-5"><h5 class="text-muted">Silakan pilih filter untuk menampilkan data jenis sekolah</h5></div>');

        // Set message untuk tabel
        $('#dataTableRow').html('<div class="text-center p-5"><h5 class="text-muted">Silakan pilih filter untuk menampilkan data approval pembayaran</h5></div>');
        $('#tbody_recent_pendaftar').html('<tr class="text-center"><td colspan="5"><i class="text-muted">Silakan pilih filter untuk menampilkan data</i></td></tr>');
        $('#tbody_laporan_pendapatan').html('<tr class="text-center"><td colspan="2"><i class="text-muted">Silakan pilih filter untuk menampilkan laporan</i></td></tr>');
    }

    function loadThis(params){
        isInitialLoad = false; // Set flag bahwa ini bukan initial load lagi
        setCountBoxes(params);
        loadApprovalPembayaran(params)
        setPendapatan(params);
        setPendaftar(params);
        setJalurPendaftaran(params);
        setPembayaran(params);
        setPembayaranTagihan(params);
        setPesertaUjian(params);
        setJenisSekolah(params);
    }
    function setCountBoxes(params){
        $.ajax({
            url: '/web_api/dashboard/getBoxes',
            type: "get",
            data: params
        }).done(function (result) {
            $('#box_jumlah_pendaftar').html(result.jumlah_pendaftar)
            $('#box_jumlah_pendapatan2').html("Rp. "+ convertToRibuan(result.jumlah_pendapatan))
            $('#pendaftar_daftar_email').html(result.jumlah_pendaftar)
            $('#pendaftar_isi_data').html(result.jumlah_pendaftar_isi_data)
            $('#pendaftar_sudah_bayar').html(result.jumlah_pendaftar_sudah_bayar)
            $('#pendaftar_lulus_ujian').html(result.jumlah_peserta_lulus_ujian)
            $('#daftar_ulang_kelulusan').html(result.jumlah_daftar_ulang_kelulusan)
            $('#box_jumlah_transaksi').html(result.jumlah_transaksi)
            $('#box_jumlah_pendapatan').html("Rp. "+ convertToRibuan(result.jumlah_pendapatan))
            $('#jumlah_kas_pendaftaran').html("Rp. "+ convertToRibuan(result.jumlah_pendapatan_pendaftaran))
            $('#jumlah_pendapatan_daftar_ulang').html("Rp. "+ convertToRibuan(result.jumlah_pendapatan_daftar_ulang))
            $('#box_jumlah_sales').html("Rp. "+ convertToRibuan(result.jumlah_sales))
        }).fail(ajax_fail);
    }
    function loadApprovalPembayaran(params){
        url = "/web_api/pembayaran/getPembayaran";
        th = '<th width="5%">Bukti</th>' +
             '<th>NAMA LENGKAP</th>' +
             '<th>EMAIL</th>' +
             '<th>TEMPAT LAHIR</th>' +
             '<th>TANGGAL LAHIR</th>' +
             '<th>JENIS KELAMIN</th>' +
             '<th>PENDAFTARAN</th>' +
             '<th>TANGGAL PENDAFTARAN</th>' +
             '<th>REKENING</th>' +
             '<th>TOTAL BAYAR</th>' +
             '<th>STATUS PEMBAYARAN</th>' +
             '<th>TANGGAL PEMBAYARAN</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "bukti_pembayaran", 'className':'text-center'},
                    { "data": "nama_lengkap", 'className':'text-center nowrap'},
                    { "data": "email", 'className':'text-center nowrap'},
                    { "data": "tempat_lahir", 'className':'text-center nowrap'},
                    { "data": "tanggal_lahir", 'className':'text-center nowrap'},
                    { "data": "jenis_kelamin", 'className':'text-center nowrap'},
                    { "data": "id_pendaftaran", 'className':'text-center nowrap'},
                    { "data": "tanggal_pendaftaran", 'className':'text-center nowrap'},
                    { "data": "id_rekening", 'className':'text-center nowrap'},
                    { "data": "total_bayar", 'className':'text-center nowrap'},
                    { "data": "approval", 'className':'nowrap'},
                    { "data": "tanggal_pembayaran", 'className':'nowrap'},
                    { "data": "id_user", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 0,
                    "data": "bukti_pembayaran",
                    "render" : function (data, type, row) {
                        return '<a href="/images/bukti_pembayaran/'+row.bukti_pembayaran+'" target="new"><img src="/images/bukti_pembayaran/'+row.bukti_pembayaran+'" width="80px"></a>';
                    }
                },
                {
                    "targets" : 6,
                    "data": "id_pendaftaran",
                    "render" : function (data, type, row) {
                        return row.pendaftaran_siswa;
                    }
                },
                {
                    "targets" : 8,
                    "data": "id_rekening",
                    "render" : function (data, type, row) {
                        if(row.tipe == "VA") return 'VA (' + row.cust_code + ')';
                        return row.akun_rekening;
                    }
                },
                {
                    "targets" : 9,
                    "data": "total_bayar",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.total_bayar);
                    }
                },
                {
                    "targets" : 12,
                    "data": "id_user",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        if(row.tipe == "VA") return '';
                        var btn_approval = '<a href="#" class="dropdown-item btn-approval" data-id="'+row.id_user+'"><i class="fa fa-check-circle text-success mr-3 ml-1"></i> APPROVAL</a>';
                        if(row.approval != "MENUNGGU") btn_approval = "";
                        btn = '<div class="btn-group">' +
                                    '<button type="button" class="btn btn-sm btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">' +
                                        'Action ' +
                                    '</button>' +
                                    '<div class="dropdown-menu" role="menu" style="">' +
                                        btn_approval +
                                    '</div>' +
                                   '</div>';
                        return btn;
                    }
                },
            ];   
        
        order = [[0, 'desc']];
        sDom = '';        
        buttons = [];
        loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableRow', 2, 0);
    }
    function setPendapatan(params){
        $.ajax({
            url: '/web_api/dashboard/getPendapatan',
            type: "get",
            data: params
        }).done(function (result) {
            $('#card-chartPendapatan').html('');
            $('#card-chartPendapatan').html('<canvas class="chart" id="chartPendapatan" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>');
            barLineChart($('#chartPendapatan'), result.labels, result.datasets, 'line', true, false);
            
            var tr = '';
            $.each(result.datas, function(index, value){
                tr += '<tr>' +
                        '<td>'+ value.month_year +'</td>' +
                        '<td>'+ convertToRupiah(value.pendapatan) +'</td>' +
                      '</tr>';
            });
            $('#tbody_laporan_pendapatan').html(tr);
        }).fail(ajax_fail);
    }
    function setPendaftar(params){
        $.ajax({
            url: '/web_api/dashboard/getPendaftar',
            type: "get",
            data: params
        }).done(function (result) {
            if(result.datas.length){
                $('#card-chartPendaftar').html('');
                $('#card-chartPendaftar').html('<canvas id="chartPendaftar" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>');
                pieDoughnutChart($('#chartPendaftar'), result.labels, result.datasets, 'pie');
                
                var tr = '';
                $.each(result.datas, function(index, value){
                    tr += '<tr>' +
                            '<td>'+ value.nama_lengkap +'</td>' +
                            '<td>'+ value.email +'</td>' +
                            '<td>'+ value.jenis_kelamin +'</td>' +
                            '<td>'+ value.tgl_bergabung_dFY +'</td>' +
                            '<td>'+ value.approval +'</td>' +
                          '</tr>';
                });
                $('#tbody_recent_pendaftar').html(tr);
            
                $('.chartPendaftar_msg').html('');
            }else{
                $('.chartPendaftar_msg').html('No Data!');
                $('#tbody_recent_pendaftar').html('<tr class="text-center"><td colspan="5">No Data</td></tr>');
            }
        }).fail(ajax_fail);
    }
    function setJalurPendaftaran(params){
        $.ajax({
            url: '/web_api/dashboard/getPendaftarJalurPendaftaran',
            type: "get",
            data: params
        }).done(function (result) {
            if(result.datas.length){
                $('#card-chartJalurPendaftaran').html('');
                $('#card-chartJalurPendaftaran').html('<canvas id="chartJalurPendaftaran" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>');
                pieDoughnutChart($('#chartJalurPendaftaran'), result.labels, result.datasets, 'pie');
                
                $('.chartJalurPendaftaran_msg').html('');
            }else{
                $('.chartJalurPendaftaran_msg').html('No Data!');
            }
        }).fail(ajax_fail);
    }
    function setPembayaran(params){
        $.ajax({
            url: '/web_api/dashboard/getPembayaran',
            type: "get",
            data: params
        }).done(function (result) {
            $('#card-chartPembayaran').html('');
            $('#card-chartPembayaran').html('<canvas class="chart" id="chartPembayaran" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>');
            barLineChart($('#chartPembayaran'), result.labels, result.datasets, 'bar', true, true);
        }).fail(ajax_fail);
    }
    function setPembayaranTagihan(params){
        $.ajax({
            url: '/web_api/dashboard/getTagihan',
            type: "get",
            data: params
        }).done(function (result) {
            $('#card-chartPembayaranTagihan').html('');
            $('#card-chartPembayaranTagihan').html('<canvas class="chart" id="chartPembayaranTagihan" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>');
            barLineChart($('#chartPembayaranTagihan'), result.labels, result.datasets, 'bar', true, true);
        }).fail(ajax_fail);
    }
    function setPesertaUjian(params){
        $.ajax({
            url: '/web_api/dashboard/getPesertaUjian',
            type: "get",
            data: params
        }).done(function (result) {
            $('#card-chartPesertaUjian').html('');
            $('#card-chartPesertaUjian').html('<canvas class="chart" id="chartPesertaUjian" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>');
            barLineChart($('#chartPesertaUjian'), result.labels, result.datasets, 'bar', false, true);
        }).fail(ajax_fail);
    }
    function setJenisSekolah(params){
        $.ajax({
            url: '/web_api/dashboard/getJenisSekolah',
            type: "get",
            data: params
        }).done(function (result) {
            $('#card-chartJenisSekolah').html('');
            $('#card-chartJenisSekolah').html('<canvas class="chart" id="chartJenisSekolah" style="min-height: 700px; height: 700px; max-height: 700px; max-width: 100%;"></canvas>');
            barLineChart($('#chartJenisSekolah'), result.labels, result.datasets, 'horizontalBar', false, false);
        }).fail(ajax_fail);
    }
</script>
@endpush