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

    <div class="row pt-2 pb-2">
        <div class="col-sm-9">
            <h4 class="page-title">Dashboard {{$biodata[0]->siswa_name}}</h4>
		</div>
        <div class="col-sm-3">
        
        </div>
    </div>
    <!-- End Breadcrumb-->

    <div class="row">
        <div class="col-lg-4">
            {{-- dd($biodata[0]->psb_id) --}}
            <div class="card">
                <img src="{{asset('upload_file_psb/'.$biodata[0]->siswa_foto.'')}}" class="card-img-top" alt="Card image cap">
            <div class="card-body pt-3">
                <h5 class="card-title">{{$biodata[0]->siswa_name}}</h5>
                <p class="card-text">{{$biodata[0]->siswa_address}}</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]->siswa_birth_place}}, {{date('d-m-Y',strtotime($biodata[0]->siswa_birth_date))}}</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]->siswa_nik}}</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]->siswa_nohp}}</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">Tagihan</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]->siswa_email}}
                                    </td>
                                </tr>
                                <!-- <tr>
                                    <td>
                                        Agama
                                    </td>
                                    <td>
                                        {{$biodata[0]->siswa_agama}}
                                    </td>
                                </tr> -->
                                <tr>
                                    <td>
                                        Jenis Kelamin
                                    </td>
                                    <td>
                                        {{$biodata[0]->siswa_gender}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Anak Ke
                                    </td>
                                    <td>
                                        {{$biodata[0]->siswa_anak_ke}}
                                    </td>
                                </tr>
                                <!-- <tr>
                                    <td>
                                        Hobi
                                    </td>
                                    <td>
                                        {{$biodata[0]->siswa_hobi}}
                                    </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]->siswa_nama_ibu}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Pekerjaan Ibu
                                        </td>
                                        <td>
                                            {{$biodata[0]->siswa_pekerjaan_ibu}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Nama Ayah
                                        </td>
                                        <td>
                                            {{$biodata[0]->siswa_nama_ayah}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Pekerjaan Ayah
                                        </td>
                                        <td>
                                            {{$biodata[0]->siswa_pekerjaan_ayah}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            No Handphone Orang Tua
                                        </td>
                                        <td>
                                            {{$biodata[0]->siswa_no_tlp_ortu}}
                                        </td>
                                    </tr>
                                    <!-- <tr>
                                        <td>
                                            Email Orang Tua
                                        </td>
                                        <td>
                                            {{$biodata[0]->siswa_email_ortu}}
                                        </td>
                                    </tr> -->
                                    <tr>
                                        <td>
                                            Alamat Orang Tua
                                        </td>
                                        <td>
                                            <p>{{$biodata[0]->siswa_alamat_ortu}}</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]->siswa_nama_wali}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            No Handphone Wali
                                        </td>
                                        <td>
                                            {{$biodata[0]->siswa_no_tlp_wali}}
                                        </td>
                                    </tr>
                                    <!-- <tr>
                                        <td>
                                            Email Wali
                                        </td>
                                        <td>
                                            {{$biodata[0]->siswa_email_wali}}
                                        </td>
                                    </tr> -->
                                    <tr>
                                        <td>
                                            Alamat Wali
                                        </td>
                                        <td>
                                            <p>{{$biodata[0]->siswa_alamat_wali}}</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>                           
                    </div>
                </div>
                <!--/row-->
            </div>
            <div class="tab-pane" id="messages">
                <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 Biaya</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;"></td>
                                    <td>
                                        
                                    </td>
                                    <td>
                                        
                                    </td>
                                    <td>
                                        
                                    </td>
                                    <td>

                                    </td>
                                </tr>                    
                        </tbody> 
                    </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light waves-effect waves-light m-1" name="Cetak Invoice"> <i class="fa fa-print"></i> Cetak Invoice</button>
                        <button type="button" class="btn btn-warning waves-effect waves-light m-1" data-toggle="modal" data-target="#warningmodal"> <i class="fa fa-money"></i> Bayar Tagihan</button>
                    </div>                        
                
            </div>
        </div>
    </div>
        {{-- @php
            $tagihan_id=$request->tagihan_id;
            $tagihan = \App\Models\M_Tagihan::find($tagihan_id)->get();
        @endphp --}}
        <!--Warning Modal -->
        <div class="modal fade" id="warningmodal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content border-warning">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title text-white">Form Pembayaran</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                        
                            <div class="col-4">
                                <div class="form-group row">
                                    <form id="bayar-tagihan">
                                    {{csrf_field()}}
                                    <label>Nama Biaya</label>
                                    <input type="hidden" name="tagihan_id" class="form-control">
                                    <input type="hidden" name="siswa_id"  class="form-control">
                                    <input type="text" name="tagihan_name" class="form-control" > 
                                </div>
                                <div class="form-group row">
                                    <label>Jumlah</label>
                                    <input type="text" name="tagihan_jumlah" id="jumlah" class="form-control" >
                                </div>
                                <div class="form-group row">
                                    <label>Diskon (%)</label>
                                    <input type="text" name="transaksi_diskon" id="diskon" class="form-control">
                                </div>
                                <div class="form-group row">
                                    <label>Tipe Pembayaran</label>
                                    <select name="transaksi_tipe_pembayaran" class="form-control select-select" id="tipe_pembayaran">
                                        <option value="0">Tunai</option>
                                        <option value="1">Non Tunai</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-1"></div>
                            <div class="col-1"></div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label>Total</label>
                                    <h1><span id="totaltagihan" class="badge badge-dark">Rp 0,00-</span></h1>
                                </div>
                                <div class="form-group row">
                                    <label>Bayar</label>
                                    <input type="text" name="transaksi_bayar" id="bayar" class="form-control">
                                </div>
                                <div class="bayar 0" style="display: none;">
                                    <div class="form-group row">
                                        <label>Kembali</label>
                                        <input type="text" name="transaksi_kembali" id="kembali" class="form-control">
                                    </div>
                                </div>
                                <div class="bayar 1" style="display: none;">
                                    <div class="form-group row">
                                        <label>No Kartu</label>
                                        <input type="text" name="transaksi_no_kartu_atm" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    <button type="button" class="btn btn-primary submit-btn" onclick="save_tagihan()"><i class="fa fa-check-square-o"></i> Save changes</button>
                </div>
                </form>
                </div>
            </div>
        </div>
        <!--End Modal -->
</div>
    
@endsection
@section('js')
<script type="text/javascript">
    form = $("#form-all-lg");
    var url_edit = "/edit-datadiri" ;
    var url_update = "/update-datadiri" ;

$(function(){
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();
//         $.ajax({
//             type  : 'GET',
//             dataType: 'JSON',
//             url   : 'dashboard-siswa/get-detail-tagihan/',
//             headers : {
//                         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//                 },
//             data  : { 
//                 siswa_id : data_r.siswa_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>'+
//                         '<td style="font-weight:bold">Action</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>';
//                     } else {
//                         var print= '<h5><span class="badge badge-success">Lunas</span></h5>';
//                     }
//                     tb +=
//                     '<tr>'+
//                     '<td style="display: none;">'+v.tagihan_id+'</td>'+
//                     '<td>'+v.tagihan_name+'</td>'+
//                     '<td>'+v.tagihan_jumlah+'</td>'+
//                     '<td>'+v.tagihan_sisa+'</td>'+
//                     '<td>'+print+'</td>'+                    
//                     '<td><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" data-target="#warningmodal"><i class="fa fa-money"></i> Bayar Tagihan</a></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"),
        jumlah    = link.data("jumlah");

    modal.find("#tagihanid").val(tagihanid);
    modal.find("#namabiaya").val(namabiaya);
    modal.find("#jumlah").val(jumlah);
    modal.find("#diskon").val(0);
    modal.find("#bayar").val(0);
    modal.find("#kembali").val(0);
    modal.find("#totaltagihan").text("Rp. "+addCommas(jumlah));
});

$('#warningmodal').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");
        if(optionValue){
            $(".bayar").not("." + optionValue).hide();
            $("." + optionValue).show();
        } else{
            $(".bayar").hide();
        }
    });
    }).change();
});

function save_tagihan()
{
    $("#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
                    {
                    location.reload(true)
                    }
                });
                } 
            }).fail(function(data) {  
                var dt = data.responseJSON;
                
                if(dt.errors)
                {
                    $.each(dt.errors, function (key, value) {
                        var input = '[name=' + key + ']';
                        
                        $(input + '+span').html('<strong>'+ value +'</strong>');
                        $(input).addClass('is-invalid');
                        $(input).focus();
                        $(input).change(function(){
                            $(input+'+span').html('');
                            $(input).removeClass('is-invalid');
                        })
                    });  
                }
                else
                {
                    swal({
                    title: dt.status.message,
                    type: "error"
                    })
                }
                
            });
        }   
    });
}
</script>
@endsection