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

    <div class="row pt-2 pb-2">
        <div class="col-sm-9">
		    <h4 class="page-title">PSB Dashboard </h4>
		</div>
        <div class="col-sm-3">
        
        </div>
    </div>
    <!-- End Breadcrumb-->

    <div class="row">
        <div class="col-lg-4">
            <div class="card">
                <img src="{{asset('upload_file_psb/'.$biodata[0]->psb_file_foto.'')}}" class="card-img-top" alt="Card image cap">
                <button type="button" onclick="edit_all('modal-all-lg',{{$biodata[0]->psb_id}})" class="btn btn-primary btn-square">Ubah Data Diri</button>
            <div class="card-body pt-3">
                <h5 class="card-title">{{$biodata[0]->psb_nama_siswa}}</h5>
                <p class="card-text">{{$biodata[0]->psb_alamat_siswa}}</p>
            </div>

            <div class="card-body border-top border-light">
                    <div class="media align-items-center">
                        <div><span class=" fa fa-table skill-img"></span></div>
                        <div class="media-body text-left ml-3">
                        <div class="progress-wrapper">
                            <b>Tempat Tanggal Lahir</b>
                            <p>{{$biodata[0]->psb_tempat_lahir_siswa}}, {{date('d-m-Y',strtotime($biodata[0]->psb_tgl_lahir_siswa))}}</p>
                        </div>                   
                    </div>
                    </div>
                    <hr>
                    <div class="media align-items-center">
                    <div><span class=" fa fa-id-card skill-img"></span></div>
                        <div class="media-body text-left ml-3">
                        <div class="progress-wrapper">
                            <b>NIK</b>
                            <p>{{$biodata[0]->psb_nik_siswa}}</p>
                        </div>                   
                    </div>
                    </div>
                    <hr>
                    <div class="media align-items-center">
                    <div><span class=" fa fa-phone skill-img"></span></div>
                        <div class="media-body text-left ml-3">
                        <div class="progress-wrapper">
                            <b>No. Telepon</b>
                            <p>{{$biodata[0]->psb_phone_siswa}}</p>
                        </div>                   
                    </div>
                    </div>
                    
                </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card">
        <div class="card-body">
        <ul class="nav nav-tabs nav-tabs-success top-icon nav-justified">
            <li class="nav-item">
                <a href="javascript:void();" data-target="#profile" data-toggle="pill" class="nav-link active"><i class="icon-user"></i> <span class="hidden-xs">Profile</span></a>
            </li>
            <li class="nav-item">
                <a href="javascript:void();" data-target="#messages" data-toggle="pill" class="nav-link"><i class="fa fa-money"></i> <span class="hidden-xs">Pembayaran</span></a>
            </li>
        </ul>
        <div class="tab-content p-3">
            <div class="tab-pane active" id="profile">
                
                <div class="row">
                    <div class="col-md-12">
                        <h5 class="mb-3">Data Diri</h5>
                        <table class="table table-hover table-striped">
                            <tbody>                                    
                                <tr>
                                    <td>
                                        Email
                                    </td>
                                    <td>
                                        {{$biodata[0]->psb_email_siswa}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Agama
                                    </td>
                                    <td>
                                        {{$biodata[0]->psb_agama_siswa}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Jenis Kelamin
                                    </td>
                                    <td>
                                        {{$biodata[0]->psb_jenis_kelamin_siswa}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Anak Ke
                                    </td>
                                    <td>
                                        {{$biodata[0]->psb_anak_ke_siswa}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Hobi
                                    </td>
                                    <td>
                                        {{$biodata[0]->psb_hobi_siswa}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="col-md-12">
                        <hr>
                        <h5 class="mb-3">Data Keluarga</h5>
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <tbody>                                    
                                    <tr>
                                        <td>
                                            Nama Ibu
                                        </td>
                                        <td>
                                            {{$biodata[0]->psb_ibu_siswa}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Pekerjaan Ibu
                                        </td>
                                        <td>
                                            {{$biodata[0]->psb_pekerjaan_ibu_siswa}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Nama Ayah
                                        </td>
                                        <td>
                                            {{$biodata[0]->psb_ayah_siswa}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Pekerjaan Ayah
                                        </td>
                                        <td>
                                            {{$biodata[0]->psb_pekerjaan_ayah_siswa}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            No Handphone Orang Tua
                                        </td>
                                        <td>
                                            {{$biodata[0]->psb_phone_ortu_siswa}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Email Orang Tua
                                        </td>
                                        <td>
                                            {{$biodata[0]->psb_email_ortu_siswa}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Alamat Orang Tua
                                        </td>
                                        <td>
                                            <p>{{$biodata[0]->psb_alamat_ortu_siswa}}</p>
                                            
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>                           
                    </div>
                    <div class="col-md-12">
                        <hr>
                        <h5 class="mb-3">Data Wali</h5>
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <tbody>                                    
                                    <tr>
                                        <td>
                                            Nama Wali
                                        </td>
                                        <td>
                                            {{$biodata[0]->psb_wali_siswa}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            No Handphone Wali
                                        </td>
                                        <td>
                                            {{$biodata[0]->psb_phone_wali_siswa}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Email Wali
                                        </td>
                                        <td>
                                            {{$biodata[0]->psb_email_wali_siswa}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Alamat Wali
                                        </td>
                                        <td>
                                            <p>{{$biodata[0]->psb_alamat_wali_siswa}}</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>                           
                    </div>
                </div>
                <!--/row-->
            </div>
            <div class="tab-pane" id="messages">
                @if ($biodata[0]->psb_status_registrasi=='Approved')
                <div class="table-responsive">
                    <table class="table table-bordered" id="table_tagihan" width="100%">
                        <thead>
                            <tr>
                                <th></th>
                                <th style="display: none;">Tagihan ID</th>
                                <th><strong>Total Tagihan</strong></th>
                                <th><strong>Masuk</strong></th>
                                <th><strong>Sisa</strong></th>
                                <th><strong>Status</strong></th>
                            </tr>
                        </thead>
                        <tbody>                                    
                            
                                <tr>
                                    <td class="tableClick"></td>
                                    <td style="display: none;">{{$tagihan[0]->psb_id}}</td>
                                    <td>
                                        Rp {{number_format($tagihan[0]->jumlah)}}
                                    </td>
                                    <td>
                                        @if ($tagihan[0]->masuk==null)
                                            Rp {{ 0 }}
                                        @else
                                            Rp {{number_format($tagihan[0]->masuk)}}
                                        @endif
                                    </td>
                                    <td>
                                        Rp {{number_format($tagihan[0]->sisa)}}
                                    </td>
                                    <td>
                                        @if($tagihan[0]->sisa>0)
                                            <h5><span class="badge badge-danger status">Belum Lunas</span></h5>
                                        @else
                                            <h5><span class="badge badge-success status">Lunas</span></h5>
                                        @endif                                                                        
                                    </td>
                                </tr>                    
                        </tbody> 
                    </table>
                    </div>
                    <div class="modal-footer">
                        
                @else
                <div class="alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <div class="alert-icon">
                        <i class="icon-info"></i>
                    </div>
                    <div class="alert-message">
                        <span><strong>Perhatian!</strong> Data anda belum di approve.</span>
                    </div>
                </div>
                @endif                
                
            </div>
        </div>
    </div>
</div>  
    
@endsection
@section('js')
<script type="text/javascript">
    form = $("#form-all-lg");
    var url_edit = "/edit-datadiri" ;
    var url_update = "/update-datadiri" ;
$(document).ready(function() {
    $('#tbl_tagihan').DataTable( {
        "scrollY": 200,
        "scrollX": true,
        bFilter: false, 
        bInfo: false,
        "ordering": false,
        paging:false
    } );

} );

function cek (e, row)
{
    
    if(e.checked){

        var grand_ttl = $('#grand_total').val();
        var jumlahtagihan = $('#jumlahtagihan'+row+'').val();
        $('#diskon'+row+'').prop("readonly", false);
        $('#dibayarkan'+row+'').prop("readonly", false);

        $('#bayar'+row+'').val(jumlahtagihan);

        var total_a=0;
        $("input[name^='nilai_bayar']").each(function () {
           total_a += parseFloat($(this).val());
        })
        $('[name="grand_total"]').val(total_a);
        $('[name="total_dibayarkan"]').val(total_a);
        // var total_b=0;
        // $("input[name^='dibayarkan']").each(function () {
        //    total_b += parseFloat($(this).val());
        // })
        // console.log(total_b);
        // $('[name="total_dibayarkan"]').val(total_b);

        var t = $('#total_dibayarkan').val(); 
        var z = $('#grand_total').val();
        var total = parseFloat(t)-parseFloat(z);
        $('#total_kembali').val(total);

    } else {
        var grand_ttl = $('#grand_total').val();
        var jumlahtagihan = $('#jumlahtagihan'+row+'').val();
        var byr = $('#bayar'+row+'').val();

        var total_a=0;
        var total_a = parseFloat(grand_ttl) - parseFloat(byr);

        $('[name="grand_total"]').val(total_a);
        $('[name="total_dibayarkan"]').val(total_a);

        
        $('#diskon'+row+'').prop("readonly", true);
        $('#dibayarkan'+row+'').prop("readonly", true);
        $('#diskon'+row+'').val(0);
        $('#dibayarkan'+row+'').val(0);
        $('#bayar'+row+'').val(0);

        var t = $('#total_dibayarkan').val(); 
        var z = $('#grand_total').val();
        var total = parseFloat(t)-parseFloat(z);
        $('#total_kembali').val(total);
    }

}
function hitung_diskon(e, row) {
    var diskon = $(e).val();
    var jumlahtagihan = $('#jumlahtagihan'+row+'').val();
    total_all = parseFloat(jumlahtagihan) - (parseFloat(diskon)/100) * parseFloat(jumlahtagihan);
    $('#bayar'+row+'').val(total_all);

    var grand_ttl = $('#grand_total').val();
    var bayar = $('#bayar'+row+'').val();

    var total_a=0;
    var total_a = parseFloat(grand_ttl) - (parseFloat(diskon)/100) * parseFloat(jumlahtagihan);

    $('[name="grand_total"]').val(total_a);

    var t = $('#total_dibayarkan').val(); 
    var z = $('#grand_total').val();
    var total = parseFloat(t)-parseFloat(z);
    $('#total_kembali').val(total);

}

function hitung() {
    var a = $('#tagihan_diskon').val();
    var b = $('#tagihan_jumlah').val();
    var total = parseFloat(b)-(parseFloat(a)*parseFloat(b)/100);
    $('#hidetotal').val(total);
    $('#tagihan_bayar').val(0);
    hitung_kembali();
}

function hitung_kembali() {
    var t = $('#tagihan_bayar').val(); 
    var z = $('#hidetotal').val();
    var total = parseFloat(t)-parseFloat(z);
    $('#tagihan_kembali').val(total);
}

function hitung_kembalian() {
    var t = $('#total_dibayarkan').val(); 
    var z = $('#grand_total').val();
    var total = parseFloat(t)-parseFloat(z);
    $('#total_kembali').val(total);
}

function hitung_dibayarkan(e, row){
    var total_a = 0;
    $("input[name^='dibayarkan']").each(function () {
       total_a += parseFloat($(this).val());
    })
    $('[name="total_dibayarkan"]').val(total_a);

    var grand_ttl = $('#grand_total').val();
    var total_dibayarkan = $('#total_dibayarkan').val();
    var hasil_kembalian = parseFloat(total_dibayarkan) - parseFloat(grand_ttl);
    console.log(grand_ttl);
    $('#total_kembali').val(hasil_kembalian);
}

$(function(){
validasi_angka();
money();

var table = $('#table_tagihan').DataTable( {
//"ajax": "../ajax/data/objects.txt",
"columns": [
    {
        "className":      'detail-tagihan',
        "orderable":      false,
        "data":           null,
        "defaultContent": ''
    },
    { "data": "psb_id", visible:true},
    { "data": "tagihan_jumlah" },
    { "data": "tagihan_masuk"},
    { "data": "tagihan_sisa"},
    { "data": "status" },
],
});

$('#table_tagihan tbody').on('click', 'td.detail-tagihan', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    var tb;
    var status;

    // console.log(row.data());

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        data_r = row.data();
        console.log(data_r.psb_id);
        $.ajax({
            type  : 'GET',
            dataType: 'JSON',
            url   : 'get-detail-tagihan-user/',
            headers : {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            data  : { 
                psb_id : data_r.psb_id,
                },
            success  : function(values){
                
                tb = '<table class="table table-bordered table-hover" border="2">'+
                '<thead>'+
                    '<tr>'+
                        '<td style="font-weight:bold;display: none;" >id</td>'+
                        '<td style="font-weight:bold">Nama Tagihan</td>'+
                        '<td style="font-weight:bold">Jumlah</td>'+
                        '<td style="font-weight:bold">Sisa</td>'+
                        '<td style="font-weight:bold">Status</td>'+
                    '</tr>'+
                '</thead>'+
                '<tbody>';
                $.each(values.data.data.detail_tagihan,function(i,v){
                    var masuk = v.tagihan_masuk;
                    var sisa = v.tagihan_sisa;
                    if (masuk<sisa) {
                        var print= '<h5><span class="badge badge-danger">Belum Lunas</span></h5>';
                        var btn = '<a data-toggle="modal" href="#" data-tagihanid="'+v.tagihan_id+'"  data-namabiaya="'+v.tagihan_name+'" data-jumlah="'+v.tagihan_jumlah+'" data-sisabiaya="'+v.tagihan_sisa+'" class="btn btn-warning waves-effect waves-light m-1" data-target="#warningmodal"><i class="fa fa-money"></i> Bayar Tagihan</a>';
                    } else {
                        var print= '<h5><span class="badge badge-success">Lunas</span></h5>';
                        var btn = '<a data-toggle="modal" href="#" data-tagihanid="'+v.tagihan_id+'"  data-namabiaya="'+v.tagihan_name+'" data-jumlah="'+v.tagihan_jumlah+'" class="btn btn-warning waves-effect waves-light m-1 disabled" data-target="#warningmodal"><i class="fa fa-money"></i> Bayar Tagihan</a>';
                    }
                    tb +=
                    '<tr>'+
                    '<td style="display: none;">'+v.tagihan_id+'</td>'+
                    '<td>'+v.tagihan_name+'</td>'+
                    '<td>Rp '+addCommas(v.tagihan_jumlah)+'</td>'+
                    '<td>Rp '+addCommas(v.tagihan_sisa)+'</td>'+
                    '<td>'+print+'</td>'+
                    '</tr>';           
                })
                tb+=
                '</tbody>'+
                '</table>';
                row.child(tb).show();
                tr.addClass('shown');
            }
        });
        // Open this row
        }
    });
});

// $('#diskon').blur(function() {
//     var jumlah = parseFloat($('#jumlah').val());
//     var diskon = parseFloat($(this).val()); //assume is decimal rate so used parseFloat to  change from string to #
//     var money = (jumlah - (jumlah * diskon/ 100));
//     $('#totaltagihan').text(money);
// });

// $('#bayar').blur(function() {
//     var totaltagihan = $('#totaltagihan').text();
//     //console.log(totaltagihan);
//     var bayar = parseFloat($(this).val()); //assume is decimal rate so used parseFloat to  change from string to #
//     var money = bayar-totaltagihan;
//     $('#kembali').val(money);
// });

$('#warningmodal').on('shown.bs.modal', function (e) {
    var link     = $(e.relatedTarget),
        modal    = $(this),
        tagihanid = link.data("tagihanid"),
        namabiaya = link.data("namabiaya"),
        sisabiaya = link.data("sisabiaya"),
        jumlah    = link.data("jumlah");

    modal.find("#tagihanid").val(tagihanid);
    modal.find("#namabiaya").val(namabiaya);
    if(sisabiaya>0){
        modal.find("#tagihan_jumlah").val(sisabiaya);
        modal.find("#hidetotal").val(sisabiaya);
        modal.find("#totaltagihan").text("Rp "+addCommas(sisabiaya));
    } else {
        modal.find("#tagihan_jumlah").val(jumlah);
        modal.find("#hidetotal").val(jumlah);
        modal.find("#totaltagihan").text("Rp "+addCommas(jumlah));
    }
    modal.find("#tagihan_bayar").val(0);
    modal.find("#tagihan_kembali").val(0);
});

$('#warningmodal').modal({
    show:false,
    keyboard: false,
    backdrop: 'static'
});

$('#bayarModal').modal({
    show:false,
    keyboard: false,
    backdrop: 'static'
});

$(document).ready(function(){
    $("#tipe_pembayaran").change(function(){
    $(this).find("option:selected").each(function(){
        var optionValue = $(this).attr("value");
        var v = $("#grand_total").val();
        if(optionValue=="0"){
            $(".kembalian").show();
            $(".1").hide();
            $("#total_dibayarkan").val(0);
            $("#total_kembali").val(0);
            $('#total_dibayarkan').prop("readonly", false);
        } else{
            $(".1").show();
            $("#total_dibayarkan").val(v);
            $(".kembalian").hide();
            $('#total_dibayarkan').prop("readonly", true);
        }
    });
    }).change();
});

$(document).ready(function(){
    $("#transaksi_tipe_pembayaran").change(function(){
    $(this).find("option:selected").each(function(){
        var optionValue = $(this).attr("value");
        var z = $("#tagihan_jumlah").val();
        if(optionValue=="0"){
            $(".tunai").show();
            document.getElementById("tagihan_bayar").value=0;
            document.getElementById("tagihan_kembali").value=0;
            $("#hidetotal").val(0);
            $(".nontunai").hide();
        } else{
            $(".nontunai").show();
            $("#tagihan_diskon").val(0);
            $("#tagihan_bayar").val(z);
            $("#hidetotal").val(z);
            $(".tunai").hide();
        }
    });
    }).change();
});

function save_tagihan()
{
    var a = $("#tagihan_bayar").val();
    var b = $("#tagihan_jumlah").val();
    var c = $("#tagihan_kembali").val();
    console.log(a+'-'+c);

    if (c > a || a == 0) {
        swal({
            text: "Jumlah yang anda masukkan salah/kurang",
            icon: "warning",
        })
    // } else if(c > a){
    //     swal({
    //         text: "Pembayaran Kurang",
    //         icon: "warning",
    //     })
    } else {
    $("#bayar-tagihan").validate();
    var data = new FormData($("#bayar-tagihan")[0]);
    var message = "input";
    swal({
        title: "Apakah anda yakin ?",
        text: "Data pembayaran sudah benar",
        icon: "warning",
        buttons: true,
        dangerMode: false,
        })
        .then((willDelete) => {
            if (willDelete) {
            $.ajax({
                type  : 'POST',
                url   : '/bayar-detail-tagihan',
                headers : {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data  : data,
                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
                    {
                        print_receipt(data.data.trans_id)
                        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"
                    })
                }
                
            });
        }   
    });
    }
}

function save_all_tagihan()
{

    var grand_ttl = $('#grand_total').val();
    var ttl_dibayarkan = $('#total_dibayarkan').val();
    var ttl_kembali = $('#total_kembali').val();
    console.log(grand_ttl);
    if(ttl_dibayarkan < grand_ttl || ttl_dibayarkan == 0){
        swal({
            text: "Jumlah yang anda masukkan salah/kurang",
            icon: "warning",
        })
    } else {
    
        $("#bayar-all-tagihan").validate();
        var data = new FormData($("#bayar-all-tagihan")[0]);
        var message = "input";
        swal({
            title: "Apakah anda yakin ?",
            text: "Data pembayaran sudah benar",
            icon: "warning",
            buttons: true,
            dangerMode: false,
            })
            .then((willDelete) => {
                if (willDelete) {
                $.ajax({
                    type  : 'POST',
                    url   : '/bayar-all-tagihan',
                    headers : {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data  : data,
                    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
                        {
                            print_receipt(data.data.trans_id)
                            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",
                        icon: "error"
                        })
                    }
                    
                });
            }   
        });
    }
}

function print_receipt(id)
{   
    window.open('../bukti-pembayaran/'+id+'');
}
</script>
@endsection