@extends('wali_kelas.main')

@section('title','Tagihan Siswa')
@section('header','Tagihan Siswa')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/dashboard-wali-kelas">Tagihan Siswa</a></li>
<li class="breadcrumb-item active">Detail</li>
@endsection

@section('content')

<style>
    .editable-wrapper {
      position: relative;
      width: auto;
    }
    
    .editable-wrapper select {
      width: 100%;
    }
    
    .editable-wrapper > * {
      box-sizing: border-box;
    }
    
    .editable-wrapper input {
      position: absolute;
      width: calc(100% - 20px);
    }
</style>

<section class="p-4">
    <div class="card card-primary card-outline">
        <div class="card-header">
            <h3 class="card-title">Siswa</h3>
        </div>
        <div class="card-body">
            <div class="form-group">
                <label class="form-control-label">No. Pendaftaran</label>
                <input type="text" class="form-control form-control-sm" readonly placeholder="No. Pendaftaran" value="{{$data->no_pendaftaran}}">
            </div>
            <div class="form-group">
                <label class="form-control-label">Nama Lengkap</label>
                <input type="text" class="form-control form-control-sm" readonly placeholder="Nama Lengkap" value="{{$data->nama_lengkap}}">
            </div>
            <div class="form-group">
                <label class="form-control-label">Email</label>
                <input type="email" class="form-control form-control-sm" readonly placeholder="Email" value="{{$data->email}}">
            </div>
            <div class="form-group">
                <label class="form-control-label">Total Tagihan</label>
                <input class="form-control form-control-sm" readonly placeholder="Total Tagihan" value="{{convertToRupiah($data->total_tagihan)}}">
            </div>
            <div class="form-group">
                <label class="form-control-label">Sisa Tagihan</label>
                <input class="form-control form-control-sm" readonly placeholder="Sisa Tagihan" value="{{convertToRupiah($data->sisa_tagihan)}}">
            </div>
        </div>
    </div>
    <div class="card card-primary card-outline">
        <div class="card-header">
            <div class="row">
                <div class="col-md-2">
                    <select class="form-control form-control-sm mb-1" onchange="location.href='?bulan_tagihan={{$bulan_tagihan}}&waktu_pembayaran={{$waktu_pembayaran}}&id_tahun_ajaran={{$id_tahun_ajaran}}&tahun_ajaran='+this.value">
                        <option selected value="">ALL</option>
                        @foreach($item_pembayaran as $ip)
                        <option {{$id_item_pembayaran == $ip->id ? 'selected':''}} value="{{$ip->id}}">{{$ip->item_pembayaran}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-control form-control-sm mb-1" onchange="location.href='?bulan_tagihan={{$bulan_tagihan}}&id_item_pembayaran={{$id_item_pembayaran}}&id_tahun_ajaran={{$id_tahun_ajaran}}&waktu_pembayaran='+this.value">
                        <option selected value="">ALL</option>
                        <option {{$waktu_pembayaran == "BULANAN" ? 'selected':''}}>BULANAN</option>
                        <option {{$waktu_pembayaran == "TAHUNAN" ? 'selected':''}}>TAHUNAN</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-control form-control-sm mb-1" onchange="location.href='?bulan_tagihan={{$bulan_tagihan}}&waktu_pembayaran={{$waktu_pembayaran}}&id_item_pembayaran={{$id_item_pembayaran}}&id_tahun_ajaran='+this.value">
                        <option selected value="">ALL</option>
                        @foreach($tahun_ajaran as $ta)
                        <option {{$id_tahun_ajaran == $ta->id ? 'selected':''}} value="{{$ta->id}}">{{$ta->tahun_ajaran}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="month" class="form-control form-control-sm mb-1" name="bulan_tagihan" placeholder="Bulan Tagihan (YYYY-MM) EG:2022-01"
                    onchange="location.href='?waktu_pembayaran={{$waktu_pembayaran}}&id_item_pembayaran={{$id_item_pembayaran}}&bulan_tagihan_end={{$bulan_tagihan_end}}&id_tahun_ajaran={{$id_tahun_ajaran}}&bulan_tagihan='+this.value" value="{{$bulan_tagihan}}">
                </div>
                <div class="col-md-2">
                    <input type="month" class="form-control form-control-sm mb-1" name="bulan_tagihan_end" placeholder="Bulan Tagihan (YYYY-MM) EG:2022-01"
                    onchange="location.href='?waktu_pembayaran={{$waktu_pembayaran}}&id_item_pembayaran={{$id_item_pembayaran}}&bulan_tagihan={{$bulan_tagihan}}&id_tahun_ajaran={{$id_tahun_ajaran}}&bulan_tagihan_end='+this.value" value="{{$bulan_tagihan_end}}">
                </div>
                <div class="col-md-2">
                    <a class="form-control form-control-sm btn btn-info" href="/walas-tagihan-siswa/detail/{{$id_user}}">Refresh</a>
                </div>
            </div>
        </div>
    </div>
    <div class="card card-primary card-outline">
        <div class="card-header">
            <h3 class="card-title mb-1">Tunggakan Siswa</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="table-tunggakan-siswa" style="min-height:300px">
                    <thead>
                        <tr class="bg-info">
                            <th class="nowrap">JUDUL</th>
                            <th class="nowrap">JUMLAH TUNGGAKAN</th>
                            <th class="nowrap">DIBAYAR</th>
                            <th class="nowrap">SISA TUNGGAKAN</th>
                            <th class="nowrap">STATUS TUNGGAKAN</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data->tunggakan_tahun_lalu as $tunggakan)
                        <tr class="tr_tunggakan">
                            <td class="nowrap">{{$tunggakan->judul}}</td>
                            <td class="nowrap">{{convertToRupiah($tunggakan->jumlah_tunggakan)}}</td>
                            <td class="nowrap">{{convertToRupiah($tunggakan->dibayar)}}</td>
                            <td class="nowrap">{{convertToRupiah($tunggakan->sisa_tunggakan)}}</td>
                            <td class="nowrap">{{$tunggakan->status_tunggakan}}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center">No Data!</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <!--<div class="card-footer">-->
        <!--    <button type="submit" class="btn btn-sm btn-success float-right">Submit</button>-->
        <!--</div>-->
    </div>
    <div class="card card-primary card-outline">
        <div class="card-header">
            <h3 class="card-title mb-1">Log Tagihan Siswa</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="table-jenis-sekolah-create" style="min-height:300px">
                    <thead>
                        <tr class="bg-info">
                            <th class="nowrap">ITEM</th>
                            <th class="nowrap">WAKTU PEMBAYARAN</th>
                            <th class="nowrap">BULAN TAGIHAN</th>
                            <th class="nowrap">BIAYA (QTY)</th>
                            <th class="nowrap">TOTAL PENGURANGAN BIAYA</th>
                            <th class="nowrap">TOTAL PELUNASAN BIAYA</th>
                            <th class="nowrap">TOTAL BIAYA</th>
                            <th class="nowrap">MIN AYAR</th>
                            <th class="nowrap">DIBAYAR</th>
                            <th class="nowrap">SISA TAGIHAN</th>
                            <th class="nowrap">STATUS TAGIHAN</th>
                            <th class="nowrap">#</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data->tagihan as $tagihan)
                        <tr class="tr_tagihan">
                            <td class="nowrap">{{$tagihan->id_log_tagihan_siswa}} # {{$tagihan->item_pembayaran}} {{isset($tagihan->setting_pembayaran->ukuran_seragam)?$tagihan->setting_pembayaran->ukuran_seragam->ukuran_seragam:''}}</td>
                            <td class="nowrap">{{$tagihan->waktu_pembayaran}}</td>
                            <td class="nowrap">{{date('F Y', strtotime($tagihan->bulan_tagihan))}}</td>
                            <td class="nowrap">Rp. {{number_format($tagihan->biaya_satuan,0,".",".")}},00 ({{$tagihan->qty}})</td>
                            <td class="nowrap">Rp. {{number_format($tagihan->total_pengurangan_biaya,0,".",".")}},00</td>
                            <td class="nowrap">Rp. {{number_format($tagihan->total_pelunasan_biaya,0,".",".")}},00</td>
                            <td class="nowrap">Rp. {{number_format($tagihan->total_biaya,0,".",".")}},00</td>
                            <td class="nowrap">Rp. {{number_format($tagihan->min_bayar_tagihan,0,".",".")}},00</td>
                            <td class="nowrap">Rp. {{number_format($tagihan->dibayar,0,".",".")}},00</td>
                            <td class="nowrap">Rp. {{number_format($tagihan->sisa_tagihan,0,".",".")}},00</td>
                            <td class="nowrap">{{$tagihan->status_tagihan}}</td>
                            <td>
                                <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">
                                        <a href="#" class="dropdown-item btn-detail-pengurangan" data-id="{{$tagihan->id_log_tagihan_siswa}}"><i class="fa fa-info text-info mr-3 ml-1"></i> DETAIL PENGURANGAN</a>
                                        <a href="#" class="dropdown-item btn-detail-pelunasan" data-id="{{$tagihan->id_log_tagihan_siswa}}"><i class="fa fa-info text-info mr-3 ml-1"></i> DETAIL PELUNASAN</a>
                                        @if($tagihan->status_tagihan != "SUDAH")
                                        @if($create)
                                        <a href="#" class="dropdown-item btn-add-pengurangan-tagihan" 
                                            data-id="{{$tagihan->id_log_tagihan_siswa}}"
                                            data-item = "{{$tagihan->item_pembayaran}}"
                                            data-waktu_pembayaran = "{{$tagihan->waktu_pembayaran}}"
                                            data-bulan_tagihan = "{{date('F Y', strtotime($tagihan->bulan_tagihan))}}"
                                            data-biaya = "{{$tagihan->sisa_tagihan}}"
                                            data-total_biaya = "{{$tagihan->sisa_tagihan}}"
                                        ><i class="fa fa-plus text-success mr-2 ml-1"></i> ADD PENGURANGAN</a>
                                        
                                        <a href="#" class="dropdown-item btn-add-pelunasan-tagihan" 
                                            data-id="{{$tagihan->id_log_tagihan_siswa}}"
                                            data-item = "{{$tagihan->item_pembayaran}}"
                                            data-waktu_pembayaran = "{{$tagihan->waktu_pembayaran}}"
                                            data-bulan_tagihan = "{{date('F Y', strtotime($tagihan->bulan_tagihan))}}"
                                            data-biaya = "{{$tagihan->sisa_tagihan}}"
                                            data-total_biaya = "{{$tagihan->sisa_tagihan}}"
                                        ><i class="fa fa-plus text-success mr-2 ml-1"></i> ADD PELUNASAN</a>
                                        @endif
                                        @if($update)
                                        <a href="#" class="dropdown-item btn-delete-tagihan" 
                                            data-id="{{$tagihan->id_log_tagihan_siswa}}"
                                            data-item = "{{$tagihan->item_pembayaran}}"
                                            data-waktu_pembayaran = "{{$tagihan->waktu_pembayaran}}"
                                            data-bulan_tagihan = "{{date('F Y', strtotime($tagihan->bulan_tagihan))}}"
                                            data-biaya = "{{$tagihan->sisa_tagihan}}"
                                            data-total_biaya = "{{$tagihan->sisa_tagihan}}"
                                        ><i class="fa fa-trash text-danger mr-3 ml-1"></i> DELETE TAGIHAN</a>
                                        @endif
                                        @endif
                                    </div>
                                    @if($tagihan->status_tagihan != "SUDAH")
                                    @if($update)
                                    <input type="checkbox" name="id[]" style="height: 2rem; margin-left: 1rem; width: 1.5rem;vertical-align: middle; cursor: pointer;" value="{{$tagihan->id_log_tagihan_siswa}}">
                                    @endif
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center">No Data!</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <!--<div class="card-footer">-->
        <!--    <button type="submit" class="btn btn-sm btn-success float-right">Submit</button>-->
        <!--</div>-->
    </div>
    <div class="card card-primary card-outline">
        <div class="card-header">
            <h3 class="card-title mb-1">Dana Ortu Asuh</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="table-daba-ortu-asuh" style="min-height:300px">
                    <thead>
                        <tr class="bg-info">
                            <th class="nowrap">BULAN TAGIHAN</th>
                            <th class="nowrap">TOTAL BIAYA</th>
                            <th class="nowrap">TOTAL PELUNASAN BIAYA</th>
                            <th class="nowrap">DIBAYAR</th>
                            <th class="nowrap">SISA TAGIHAN</th>
                            <th class="nowrap">BAYAR</th>
                            <th class="nowrap">#</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data->tagihan_dana_ortu_asuh as $tdoa)
                        <tr class="tr_tunggakan">
                            <td class="nowrap">{{date('F Y', strtotime($tdoa->bulan_tagihan))}}</td>
                            <td class="nowrap">{{convertToRupiah($tdoa->biaya)}}</td>
                            <td class="nowrap">{{convertToRupiah($tdoa->total_pelunasan_biaya)}}</td>
                            <td class="nowrap">{{convertToRupiah($tdoa->dibayar)}}</td>
                            <td class="nowrap">{{convertToRupiah($tdoa->sisa_tagihan)}}</td>
                            <td class="nowrap">{{$tdoa->status_tagihan}}</td>
                            <td>
                                <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">
                                        <a href="#" class="dropdown-item btn-detail-pelunasan-ortu-asuh" data-id="{{$tdoa->id}}"><i class="fa fa-info text-info mr-3 ml-1"></i> DETAIL PELUNASAN</a>
                                        @if($tdoa->status_tagihan != "SUDAH" && $create)
                                        <a href="#" class="dropdown-item btn-add-pelunasan-ortu-asuh" 
                                            data-id="{{$tdoa->id}}"
                                            data-bulan_tagihan = "{{date('F Y', strtotime($tdoa->bulan_tagihan))}}"
                                            data-biaya = "{{$tdoa->sisa_tagihan}}"
                                            data-total_biaya = "{{$tdoa->sisa_tagihan}}"
                                        ><i class="fa fa-plus text-success mr-2 ml-1"></i> ADD PELUNASAN</a>
                                        @if($update)
                                        <a href="#" class="dropdown-item btn-delete-ortu-asuh" 
                                            data-id="{{$tdoa->id}}"
                                            data-bulan_tagihan = "{{date('F Y', strtotime($tdoa->bulan_tagihan))}}"
                                            data-biaya = "{{$tdoa->sisa_tagihan}}"
                                            data-total_biaya = "{{$tdoa->sisa_tagihan}}"
                                        ><i class="fa fa-trash text-danger mr-3 ml-1"></i> DELETE TAGIHAN</a>
                                        @endif
                                        @endif
                                    </div>
                                    @if($tdoa->status_tagihan != "SUDAH")
                                    @if($update)
                                    <input type="checkbox" name="id[]" style="height: 2rem; margin-left: 1rem; width: 1.5rem;vertical-align: middle; cursor: pointer;" value="{{$tagihan->id_log_tagihan_siswa}}">
                                    @endif
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center">No Data!</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <!--<div class="card-footer">-->
        <!--    <button type="submit" class="btn btn-sm btn-success float-right">Submit</button>-->
        <!--</div>-->
    </div>
</section>
<div class="modal fade" tabindex="-1" id="detailPenguranganTagihan" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pengurangan Tagihan</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="dataTableDetailPenguranganTagihan" id="dataTableDetailPenguranganTagihan">
                    <label class="el-waiting-message">Loading your data. It may take some time..</label>
                </div>
            </div>
            <div class="modal-footer" id="detailFooter">
                <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="deleteDataMultiple" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Trash</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <img src="{{asset('images/app/icon_info.png')}}" width="35%" height="40%">
                <br>
                <p class="mt-4">
                    <span style="font-weight:bold" id="t_message_multiple">
                    </span>
                </p>
            </div>
            <div class="modal-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="button" class="btn btn-danger btn-sm btn-multiple-delete-submit">Trash</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="detailPelunasanTagihan" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pelunasan Tagihan</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="dataTableDetailPelunasanTagihan" id="dataTableDetailPelunasanTagihan">
                    <label class="el-waiting-message">Loading your data. It may take some time..</label>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="detailPelunasanOrtuAsuh" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pelunasan Dana Ortu Asuh</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="dataTableDetailPelunasanOrtuAsuh" id="dataTableDetailPelunasanOrtuAsuh">
                    <label class="el-waiting-message">Loading your data. It may take some time..</label>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="createData" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-create-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Pengurangan Tagihan</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="form-group">
                    <label class="form-control-label">ITEM</label>
                    <input type="text" name="item" class="form-control form-control-sm" readonly placeholder="ITEM">
                    <input name="id" hidden>
                </div>
                <div class="form-group">
                    <label class="form-control-label">WAKTU PEMBAYARAN</label>
                    <input type="text" name="waktu_pembayaran" class="form-control form-control-sm" readonly placeholder="WAKTU PEMBAYARAN">
                </div>
                <div class="form-group">
                    <label class="form-control-label">BULAN TAGIHAN</label>
                    <input type="text" name="bulan_tagihan" class="form-control form-control-sm" readonly placeholder="BULAN TAGIHAN">
                </div>
                <div class="form-group">
                    <label class="form-control-label">BIAYA</label>
                    <input type="text" name="biaya_txt" class="form-control form-control-sm" readonly placeholder="BIAYA">
                    <input name="biaya"hidden>
                </div>
                <div class="form-group">
                    <label class="form-control-label">ITEM PENGURANGAN</label>
                    <div class="editable-wrapper">
                        <input type="text" name="item_pengurangan" class="form-control form-control-sm" placeholder="ITEM PENGURANGAN">
                        <select class="form-control form-control-sm select_item_pengurangan">
                            <option selected disabled value="">Item Pengurangan</option>
                            @foreach($item_pengurangan as $ip)
                            <option {{$ip->item_pengurangan == $ip->item_pengurangan ? 'selected':''}}>{{$ip->item_pengurangan}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label">PENGURANGAN BIAYA</label>
                    <input type="number" min="1" readonly name="pengurangan_biaya" class="form-control form-control-sm" required autofocus placeholder="PENGURANGAN BIAYA">
                </div>
                <div class="form-group">
                    <label class="form-control-label">TOTAL BIAYA</label>
                    <input type="text" name="total_biaya_txt" class="form-control form-control-sm" readonly placeholder="TOTAL BIAYA">
                    <input name="total_biaya" hidden>
                </div>
            </div>
            <div class="modal-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>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="createPelunasan" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-create-pelunasan" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Pelunasan Tagihan</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="form-group">
                    <label class="form-control-label">ITEM</label>
                    <input type="text" name="item" class="form-control form-control-sm" readonly placeholder="ITEM">
                    <input name="id" hidden>
                </div>
                <div class="form-group">
                    <label class="form-control-label">WAKTU PEMBAYARAN</label>
                    <input type="text" name="waktu_pembayaran" class="form-control form-control-sm" readonly placeholder="WAKTU PEMBAYARAN">
                </div>
                <div class="form-group">
                    <label class="form-control-label">BULAN TAGIHAN</label>
                    <input type="text" name="bulan_tagihan" class="form-control form-control-sm" readonly placeholder="BULAN TAGIHAN">
                </div>
                <div class="form-group">
                    <label class="form-control-label">BIAYA</label>
                    <input type="text" name="biaya_txt" class="form-control form-control-sm" readonly placeholder="BIAYA">
                    <input name="biaya"hidden>
                </div>
                <div class="form-group">
                    <label class="form-control-label">ITEM PELUNASAN</label>
                    <div class="editable-wrapper">
                        <input type="text" name="item_pelunasan" class="form-control form-control-sm" placeholder="ITEM PELUNASAN">
                        <select class="form-control form-control-sm select_item_pelunasan">
                            <option selected value="">Item Pelunasan</option>
                            @foreach($item_pelunasan as $ip)
                            <option {{$ip->item_pelunasan == $ip->item_pelunasan ? 'selected':''}}>{{$ip->item_pelunasan}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label">PELUNASAN BIAYA</label>
                    <input type="number" min="1" readonly name="pelunasan_biaya" class="form-control form-control-sm" required autofocus placeholder="PELUNASAN BIAYA">
                </div>
                <div class="form-group">
                    <label class="form-control-label">TOTAL BIAYA</label>
                    <input type="text" name="total_biaya_txt" class="form-control form-control-sm" readonly placeholder="TOTAL BIAYA">
                    <input name="total_biaya" hidden>
                </div>
            </div>
            <div class="modal-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>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="deleteData" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-delete-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Tagihan</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="form-group">
                    <label class="form-control-label">ITEM</label>
                    <input type="text" name="item" class="form-control form-control-sm" readonly placeholder="ITEM">
                    <input name="id" hidden>
                </div>
                <div class="form-group">
                    <label class="form-control-label">WAKTU PEMBAYARAN</label>
                    <input type="text" name="waktu_pembayaran" class="form-control form-control-sm" readonly placeholder="WAKTU PEMBAYARAN">
                </div>
                <div class="form-group">
                    <label class="form-control-label">BULAN TAGIHAN</label>
                    <input type="text" name="bulan_tagihan" class="form-control form-control-sm" readonly placeholder="BULAN TAGIHAN">
                </div>
                <div class="form-group">
                    <label class="form-control-label">BIAYA</label>
                    <input type="text" name="biaya_txt" class="form-control form-control-sm" readonly placeholder="BIAYA">
                    <input name="biaya"hidden>
                </div>
                <div class="form-group">
                    <label class="form-control-label">TOTAL BIAYA</label>
                    <input type="text" name="total_biaya_txt" class="form-control form-control-sm" readonly placeholder="TOTAL BIAYA">
                    <input name="total_biaya" hidden>
                </div>
                <div class="form-group">
                    <label class="form-control-label">DELETE TAGIHAN</label>
                    <select class="form-control form-control-sm" name="delete_tagihan">
                        <option>TIDAK</option>
                        <option>YA</option>
                    </select>
                </div>
            </div>
            <div class="modal-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-danger btn-sm">Delete</button>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="createPelunasanDanaOrtuAsuh" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-create-pelunasan-ortu-asuh" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Pelunasan Dana Ortu Asuh</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input name="id" hidden>
                <div class="form-group">
                    <label class="form-control-label">BULAN TAGIHAN</label>
                    <input type="text" name="bulan_tagihan" class="form-control form-control-sm" readonly placeholder="BULAN TAGIHAN">
                </div>
                <div class="form-group">
                    <label class="form-control-label">BIAYA</label>
                    <input type="text" name="biaya_txt" class="form-control form-control-sm" readonly placeholder="BIAYA">
                    <input name="biaya"hidden>
                </div>
                <div class="form-group">
                    <label class="form-control-label">ITEM PELUNASAN</label>
                    <div class="editable-wrapper">
                        <input type="text" name="item_pelunasan" class="form-control form-control-sm" placeholder="ITEM PELUNASAN">
                        <select class="form-control form-control-sm select_item_pelunasan">
                            <option selected value="">Item Pelunasan</option>
                            @foreach($item_pelunasan as $ip)
                            <option {{$ip->item_pelunasan == $ip->item_pelunasan ? 'selected':''}}>{{$ip->item_pelunasan}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label">PELUNASAN BIAYA</label>
                    <input type="number" min="1" readonly name="pelunasan_biaya" class="form-control form-control-sm" required autofocus placeholder="PELUNASAN BIAYA">
                </div>
                <div class="form-group">
                    <label class="form-control-label">TOTAL BIAYA</label>
                    <input type="text" name="total_biaya_txt" class="form-control form-control-sm" readonly placeholder="TOTAL BIAYA">
                    <input name="total_biaya" hidden>
                </div>
            </div>
            <div class="modal-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>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="deleteOrtuAsuh" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-delete-ortu-asuh" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Tagihan</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="form-group">
                    <label class="form-control-label">BULAN TAGIHAN</label>
                    <input type="text" name="bulan_tagihan" class="form-control form-control-sm" readonly placeholder="BULAN TAGIHAN">
                    <input name="id" hidden>
                </div>
                <div class="form-group">
                    <label class="form-control-label">TOTAL BIAYA</label>
                    <input type="text" name="total_biaya" class="form-control form-control-sm" readonly placeholder="TOTAL BIAYA">
                </div>
                <div class="form-group">
                    <label class="form-control-label">DELETE TAGIHAN</label>
                    <select class="form-control form-control-sm" name="delete_tagihan">
                        <option>TIDAK</option>
                        <option>YA</option>
                    </select>
                </div>
            </div>
            <div class="modal-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-danger btn-sm">Delete</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection
@push('custom-scripts')

<script>
    $(document).on('click', '.btn-clear-select', function(e){
        $('input:checkbox').prop('checked', false);
    });

    $(document).on('click', '.btn-multiple-delete', function(e){
        var id = [];

        $(':checkbox:checked').each(function(i){
        id[i] = $(this).val();
        });
        console.log(id);
        var checkedCheckboxes = $(':checkbox:checked');
        var numberOfCheckedCheckboxes = checkedCheckboxes.length;
        if(id.length === 0){
        infoAlert("Pilih minimal satu data");
        }else{
            $('#t_message_multiple').html('<b>' + numberOfCheckedCheckboxes + ' Data will be deleted, continue?</b>');
            $('#deleteDataMultiple').modal('show');
        }

    });

    $(document).on('click', '.btn-multiple-delete-submit', function(e){
            var id = [];

            $(':checkbox:checked').each(function(i){
            id[i] = $(this).val();
            });
            if(id.length === 0){
            successAlert("Pilih minimal satu data");
            }else{
                var e_modal_wait = $("#modalWait");
                $('#deleteDataMultiple').modal('hide');
                showLoading(e_modal_wait);
                $.ajax({
                url: '/web_api/log_tagihan_siswa/trash-multiple',
                type: "get",
                data:{
                    id:id
                },
            }).done(function (result) {
                hideLoading(e_modal_wait);
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    successAlert(message);
                    location.reload();
                } else {
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            }).fail(ajax_fail);
            }
    });
    
    $(document).on('change input', '.form-create-data input[name=pengurangan_biaya]', function(){
        var ini = $(this), parent = ini.parents('.form-create-data'),
            biaya = parent.find('input[name=biaya]').val(),
            inp_total_biaya = parent.find('input[name=total_biaya]');
            inp_total_biaya_txt = parent.find('input[name=total_biaya_txt]');
        
        total_tagihan = biaya - ini.val();
        // if(ini.val() > ini.attr('max')){
        //     total_tagihan = biaya - ini.attr('max');
        //     parent.find('input[name=pengurangan_biaya]').val(ini.attr('max')).trigger('change');
        // }
        inp_total_biaya.val(total_tagihan);
        inp_total_biaya_txt.val(convertToRupiah(total_tagihan));
    });
    $(document).on('change input', '.form-create-data input[name=item_pengurangan]', function(){
        var ini = $(this), parent = ini.parents('.form-create-data'), inp_pengurangan_biaya = parent.find('input[name=pengurangan_biaya]');
        if(ini.val()){
            inp_pengurangan_biaya.attr('readonly', false)
        }else{
            inp_pengurangan_biaya.attr('readonly', true)
            inp_pengurangan_biaya.val(0);
        }
    });
    $(document).on('change', '.form-create-data .select_item_pengurangan', function(){
        var ini = $(this), parent = ini.parents('.form-create-data'), inp_item_pengurangan = parent.find('input[name=item_pengurangan]');
        inp_item_pengurangan.val(ini.val()).trigger('change');
    });
    
    $(document).on('change input', 'input[name=pelunasan_biaya]', function(){
        var ini = $(this), parent = ini.parents('form'),
            biaya = parent.find('input[name=biaya]').val(),
            inp_total_biaya = parent.find('input[name=total_biaya]');
            inp_total_biaya_txt = parent.find('input[name=total_biaya_txt]');
        
        total_tagihan = biaya - ini.val();
        // if(ini.val() > ini.attr('max')){
        //     total_tagihan = biaya - ini.attr('max');
        //     parent.find('input[name=pengurangan_biaya]').val(ini.attr('max')).trigger('change');
        // }
        inp_total_biaya.val(total_tagihan);
        inp_total_biaya_txt.val(convertToRupiah(total_tagihan));
    });
    $(document).on('change input', 'input[name=item_pelunasan]', function(){
        var ini = $(this), parent = ini.parents('form'), inp_pelunasan_biaya = parent.find('input[name=pelunasan_biaya]');
        if(ini.val()){
            inp_pelunasan_biaya.attr('readonly', false)
        }else{
            inp_pelunasan_biaya.attr('readonly', true)
            inp_pelunasan_biaya.val(0);
        }
    });
    $(document).on('change', '.select_item_pelunasan', function(){
        var ini = $(this), parent = ini.parents('.editable-wrapper'), inp_item_pelunasan = parent.find('input[name=item_pelunasan]');
        inp_item_pelunasan.val(ini.val()).trigger('change');
    });
    
    var param = {
    }
    var param_pelunasan = {
    }
    var param_pelunasan_ortu_asuh = {
    }
    function loadDetailPengurangan(params){
        url = "/web_api/log_tagihan_siswa/getPenguranganTagihan";
        th = '<th class="nowrap">ITEM PENGURANGAN</th>' +
             '<th class="nowrap">BIAYA</th>' +
             '<th class="nowrap">PENGURANGAN</th>' +
             '<th class="nowrap">TOTAL BIAYA</th>' +
             '<th class="nowrap">DIBAYAR</th>' +
             '<th class="nowrap">SISA TAGIHAN</th>' +
             '<th class="nowrap">CREATED BY</th>' +
             '<th class="nowrap">CREATED AT</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "item_pengurangan", 'className':'nowrap'},
                    { "data": "biaya", 'className':'nowrap'},
                    { "data": "pengurangan_biaya", 'className':'nowrap'},
                    { "data": "total_biaya", 'className':'nowrap'},
                    { "data": "dibayar", 'className':'nowrap'},
                    { "data": "sisa_tagihan", 'className':'nowrap'},
                    { "data": "created_by", 'className':'nowrap'},
                    { "data": "created_at", 'className':'nowrap'},
                    { "data": "id", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 1,
                    "data": "biaya",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.biaya);
                    }
                },
                {
                    "targets" : 2,
                    "data": "pengurangan_biaya",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.pengurangan_biaya);
                    }
                },
                {
                    "targets" : 3,
                    "data": "total_biaya",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.total_biaya);
                    }
                },
                {
                    "targets" : 4,
                    "data": "dibayar",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.dibayar);
                    }
                },
                {
                    "targets" : 5,
                    "data": "sisa_tagihan",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.sisa_tagihan);
                    }
                },
                {
                    "targets" : 6,
                    "data": "created_by",
                    "render" : function (data, type, row) {
                        if(!row.created_by_user) return '-';
                        return row.created_by_user.nama_lengkap;
                    }
                },
                {
                    "targets" : 7,
                    "data": "created_at",
                    "render" : function (data, type, row) {
                        if(!row.created_at) return '-';
                        return row.created_date;
                    }
                },
                {
                    "targets" : 8,
                    "data": "id",
                    "render" : function (data, type, row) {
                        if({{$update}}){
                            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">' +
                                        '<a href="#" class="dropdown-item btn-remove-pengurangan" data-id="'+row.id+'"><i class="fa fa-trash text-danger mr-3 ml-1"></i> REMOVE</a>' +
                                    '</div>' +
                                   '</div>';
                        
                            return btn;
                        }
                        return ''
                    }
                },
            ];   
        
        order = [];
        sDom = '';        
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableDetailPenguranganTagihan');
    }
    $(document).on('click', '.btn-add-pengurangan-tagihan', function(e){
        e.preventDefault();
        var form = $('.form-create-data'), ini = $(this);
        form.find('input[name=id]').val(ini.data('id'));
        form.find('input[name=item]').val(ini.data('item'));
        form.find('input[name=waktu_pembayaran]').val(ini.data('waktu_pembayaran'));
        form.find('input[name=bulan_tagihan]').val(ini.data('bulan_tagihan'));
        form.find('input[name=biaya_txt]').val(convertToRupiah(ini.data('biaya')));
        form.find('input[name=total_biaya_txt]').val(convertToRupiah(ini.data('total_biaya')));
        form.find('input[name=biaya]').val(ini.data('biaya'));
        form.find('input[name=total_biaya]').val(ini.data('total_biaya'));
        form.find('input[name=item_pengurangan]').val('');
        form.find('input[name=pengurangan_biaya]').val(0);
        form.find('input[name=pengurangan_biaya]').attr('max', ini.data('biaya'));
        $('#createData').modal('show');
    });
    $(document).on('click', '.btn-detail-pengurangan', function(e){
        e.preventDefault();
        $('#detailPenguranganTagihan').modal('show');
        param.id_log_tagihan = $(this).data('id');
        loadDetailPengurangan(param)
    });
    $(document).ready(function(e){
        $(document).on('submit', '.form-create-data', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                url = '/web_api/log_tagihan_siswa/pengurangan_tagihan/create';
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id_log_tagihan: ini.find('input[name=id]').val(),
                biaya: ini.find('input[name=biaya]').val(),
                item_pengurangan: ini.find('input[name=item_pengurangan]').val(),
                pengurangan_biaya: ini.find('input[name=pengurangan_biaya]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(post_data){
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#createData').modal('hide');
                        successAlertPerma(message);
                        setTimeout(function() {
                            location.reload();
                        }, 4000);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            postData(post_data);
            
        });
        $(document).on('click', '.btn-remove-pengurangan', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/log_tagihan_siswa/pengurangan_tagihan/remove/'+id,
                type: "get",
                data: {}
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    $('#detailPenguranganTagihan').modal('hide');
                    successAlertPerma(message);
                    setTimeout(function() {
                        location.reload();
                    }, 4000);
                } else {
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });
    });
    
    $(document).on('click', '.btn-detail-pelunasan', function(e){
        e.preventDefault();
        $('#detailPelunasanTagihan').modal('show');
        param_pelunasan.id_log_tagihan = $(this).data('id');
        loadDetailPelunasan(param_pelunasan)
    });
    function loadDetailPelunasan(params){
        url = "/web_api/log_tagihan_siswa/getPelunasanTagihan";
        th = '<th class="nowrap">ITEM PELUNASAN</th>' +
             '<th class="nowrap">BIAYA</th>' +
             '<th class="nowrap">PELUNASAN</th>' +
             '<th class="nowrap">TOTAL BIAYA</th>' +
             '<th class="nowrap">DIBAYAR</th>' +
             '<th class="nowrap">SISA TAGIHAN</th>' +
             '<th class="nowrap">CREATED BY</th>' +
             '<th class="nowrap">CREATED AT</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "item_pelunasan", 'className':'nowrap'},
                    { "data": "biaya", 'className':'nowrap'},
                    { "data": "pelunasan_biaya", 'className':'nowrap'},
                    { "data": "total_biaya", 'className':'nowrap'},
                    { "data": "dibayar", 'className':'nowrap'},
                    { "data": "sisa_tagihan", 'className':'nowrap'},
                    { "data": "created_by", 'className':'nowrap'},
                    { "data": "created_at", 'className':'nowrap'},
                    { "data": "id", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 1,
                    "data": "biaya",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.biaya);
                    }
                },
                {
                    "targets" : 2,
                    "data": "pelunasan_biaya",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.pelunasan_biaya);
                    }
                },
                {
                    "targets" : 3,
                    "data": "total_biaya",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.total_biaya);
                    }
                },
                {
                    "targets" : 4,
                    "data": "dibayar",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.dibayar);
                    }
                },
                {
                    "targets" : 5,
                    "data": "sisa_tagihan",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.sisa_tagihan);
                    }
                },
                {
                    "targets" : 6,
                    "data": "created_by",
                    "render" : function (data, type, row) {
                        if(!row.created_by_user) return '-';
                        return row.created_by_user.nama_lengkap;
                    }
                },
                {
                    "targets" : 7,
                    "data": "created_at",
                    "render" : function (data, type, row) {
                        if(!row.created_at) return '-';
                        return row.created_date;
                    }
                },
                {
                    "targets" : 8,
                    "data": "id",
                    "render" : function (data, type, row) {
                        if({{$update}}){
                            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">' +
                                        '<a href="#" class="dropdown-item btn-remove-pelunasan" data-id="'+row.id+'"><i class="fa fa-trash text-danger mr-3 ml-1"></i> REMOVE</a>' +
                                    '</div>' +
                                   '</div>';
                        
                            return btn;
                        }
                        return '';
                    }
                },
            ];   
        
        order = [];
        sDom = '';        
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableDetailPelunasanTagihan');
    }
    $(document).ready(function(e){
        $(document).on('click', '.btn-remove-pelunasan', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/log_tagihan_siswa/pelunasan_tagihan/remove/'+id,
                type: "get",
                data: {}
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    $('#detailPelunasanTagihan').modal('hide');
                    successAlertPerma(message);
                    setTimeout(function() {
                        location.reload();
                    }, 4000);
                } else {
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });
    });
    
    $(document).on('click', '.btn-add-pelunasan-tagihan', function(e){
        e.preventDefault();
        var form = $('.form-create-pelunasan'), ini = $(this);
        form.find('input[name=id]').val(ini.data('id'));
        form.find('input[name=item]').val(ini.data('item'));
        form.find('input[name=waktu_pembayaran]').val(ini.data('waktu_pembayaran'));
        form.find('input[name=bulan_tagihan]').val(ini.data('bulan_tagihan'));
        form.find('input[name=biaya_txt]').val(convertToRupiah(ini.data('biaya')));
        form.find('input[name=total_biaya_txt]').val(convertToRupiah(ini.data('total_biaya')));
        form.find('input[name=biaya]').val(ini.data('biaya'));
        form.find('input[name=total_biaya]').val(ini.data('total_biaya'));
        form.find('input[name=item_pelunasan]').val('');
        form.find('input[name=pelunasan_biaya]').val(0);
        form.find('input[name=pelunasan_biaya]').attr('max', ini.data('biaya'));
        $('#createPelunasan').modal('show');
    });
    $(document).on('click', '.btn-delete-tagihan', function(e){
        e.preventDefault();
        var form = $('.form-delete-data'), ini = $(this);
        form.find('input[name=id]').val(ini.data('id'));
        form.find('input[name=item]').val(ini.data('item'));
        form.find('input[name=waktu_pembayaran]').val(ini.data('waktu_pembayaran'));
        form.find('input[name=bulan_tagihan]').val(ini.data('bulan_tagihan'));
        form.find('input[name=biaya_txt]').val(convertToRupiah(ini.data('biaya')));
        form.find('input[name=total_biaya_txt]').val(convertToRupiah(ini.data('total_biaya')));
        form.find('input[name=biaya]').val(ini.data('biaya'));
        form.find('input[name=total_biaya]').val(ini.data('total_biaya'));
        form.find('select[name=delete_tagihan]').val('TIDAK');
        $('#deleteData').modal('show');
    });
    $(document).ready(function(e){
        $(document).on('submit', '.form-create-pelunasan', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                url = '/web_api/log_tagihan_siswa/pelunasan_tagihan/create';
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id_log_tagihan: ini.find('input[name=id]').val(),
                biaya: ini.find('input[name=biaya]').val(),
                item_pelunasan: ini.find('input[name=item_pelunasan]').val(),
                pelunasan_biaya: ini.find('input[name=pelunasan_biaya]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(post_data){
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#createPelunasan').modal('hide');
                        successAlertPerma(message);
                        setTimeout(function() {
                            location.reload();
                        }, 4000);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            postData(post_data);
            
        });
        $(document).on('submit', '.form-delete-data', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                id_log_tagihan = ini.find('input[name=id]').val(),
                url = '/web_api/log_tagihan_siswa/delete_tagihan/'+id_log_tagihan;
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id_log_tagihan: id_log_tagihan,
                biaya: ini.find('input[name=biaya]').val(),
                delete_tagihan: ini.find('select[name=delete_tagihan]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(post_data){
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#deleteData').modal('hide');
                        successAlertPerma(message);
                        setTimeout(function() {
                            location.reload();
                        }, 4000);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            postData(post_data);
            
        });
    });
    
    
    $(document).on('click', '.btn-detail-pelunasan-ortu-asuh', function(e){
        e.preventDefault();
        $('#detailPelunasanOrtuAsuh').modal('show');
        param_pelunasan_ortu_asuh.id_log_tagihan_dana_ortu_asuh = $(this).data('id');
        loadDetailPelunasanOrtuAsuh(param_pelunasan_ortu_asuh)
    });
    function loadDetailPelunasanOrtuAsuh(params){
        url = "/web_api/log_tagihan_siswa/getPelunasanTagihanOrtuAsuh";
        th = '<th class="nowrap">ITEM PELUNASAN</th>' +
             '<th class="nowrap">BIAYA</th>' +
             '<th class="nowrap">PELUNASAN</th>' +
             '<th class="nowrap">TOTAL BIAYA</th>' +
             '<th class="nowrap">DIBAYAR</th>' +
             '<th class="nowrap">SISA TAGIHAN</th>' +
             '<th class="nowrap">CREATED BY</th>' +
             '<th class="nowrap">CREATED AT</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "item_pelunasan", 'className':'nowrap'},
                    { "data": "biaya", 'className':'nowrap'},
                    { "data": "pelunasan_biaya", 'className':'nowrap'},
                    { "data": "total_biaya", 'className':'nowrap'},
                    { "data": "dibayar", 'className':'nowrap'},
                    { "data": "sisa_tagihan", 'className':'nowrap'},
                    { "data": "created_by", 'className':'nowrap'},
                    { "data": "created_at", 'className':'nowrap'},
                    { "data": "id", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 1,
                    "data": "biaya",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.biaya);
                    }
                },
                {
                    "targets" : 2,
                    "data": "pelunasan_biaya",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.pelunasan_biaya);
                    }
                },
                {
                    "targets" : 3,
                    "data": "total_biaya",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.total_biaya);
                    }
                },
                {
                    "targets" : 4,
                    "data": "dibayar",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.dibayar);
                    }
                },
                {
                    "targets" : 5,
                    "data": "sisa_tagihan",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.sisa_tagihan);
                    }
                },
                {
                    "targets" : 6,
                    "data": "created_by",
                    "render" : function (data, type, row) {
                        if(!row.created_by_user) return '-';
                        return row.created_by_user.nama_lengkap;
                    }
                },
                {
                    "targets" : 7,
                    "data": "created_at",
                    "render" : function (data, type, row) {
                        if(!row.created_at) return '-';
                        return row.created_date;
                    }
                },
                {
                    "targets" : 8,
                    "data": "id",
                    "render" : function (data, type, row) {
                        if({{$update}}){
                            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">' +
                                        '<a href="#" class="dropdown-item btn-remove-pelunasan-ortu-asuh" data-id="'+row.id+'"><i class="fa fa-trash text-danger mr-3 ml-1"></i> REMOVE</a>' +
                                    '</div>' +
                                   '</div>';
                        
                            return btn;
                        }
                        return '';
                    }
                },
            ];   
        
        order = [];
        sDom = '';        
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableDetailPelunasanOrtuAsuh');
    }
    
    $(document).on('click', '.btn-add-pelunasan-ortu-asuh', function(e){
        e.preventDefault();
        var form = $('.form-create-pelunasan-ortu-asuh'), ini = $(this);
        form.find('input[name=id]').val(ini.data('id'));
        form.find('input[name=bulan_tagihan]').val(ini.data('bulan_tagihan'));
        form.find('input[name=biaya_txt]').val(convertToRupiah(ini.data('biaya')));
        form.find('input[name=total_biaya_txt]').val(convertToRupiah(ini.data('total_biaya')));
        form.find('input[name=biaya]').val(ini.data('biaya'));
        form.find('input[name=total_biaya]').val(ini.data('total_biaya'));
        form.find('input[name=item_pelunasan]').val('');
        form.find('input[name=pelunasan_biaya]').val(0);
        form.find('input[name=pelunasan_biaya]').attr('max', ini.data('biaya'));
        $('#createPelunasanDanaOrtuAsuh').modal('show');
    });
    $(document).on('click', '.btn-delete-ortu-asuh', function(e){
        e.preventDefault();
        var form = $('.form-delete-ortu-asuh'), ini = $(this);
        form.find('input[name=id]').val(ini.data('id'));
        form.find('input[name=bulan_tagihan]').val(ini.data('bulan_tagihan'));
        form.find('input[name=total_biaya]').val(ini.data('total_biaya'));
        form.find('select[name=delete_tagihan]').val('TIDAK');
        $('#deleteOrtuAsuh').modal('show');
    });
    $(document).ready(function(e){
        $(document).on('submit', '.form-create-pelunasan-ortu-asuh', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                url = '/web_api/log_tagihan_siswa/pelunasan_tagihan_ortu_asuh/create';
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id: ini.find('input[name=id]').val(),
                biaya: ini.find('input[name=biaya]').val(),
                item_pelunasan: ini.find('input[name=item_pelunasan]').val(),
                pelunasan_biaya: ini.find('input[name=pelunasan_biaya]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(post_data){
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#createPelunasanDanaOrtuAsuh').modal('hide');
                        successAlertPerma(message);
                        setTimeout(function() {
                            location.reload();
                        }, 4000);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            postData(post_data);
            
        });
        $(document).on('click', '.btn-remove-pelunasan-ortu-asuh', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/log_tagihan_siswa/pelunasan_tagihan_ortu_asuh/remove/'+id,
                type: "get",
                data: {}
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    $('#detailPelunasanOrtuAsuh').modal('hide');
                    successAlertPerma(message);
                    setTimeout(function() {
                        location.reload();
                    }, 4000);
                } else {
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });
        $(document).on('submit', '.form-delete-ortu-asuh', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                id_log_tagihan_dana_ortu_asuh = ini.find('input[name=id]').val(),
                url = '/web_api/log_tagihan_siswa/delete_dana_ortu_asuh/'+id_log_tagihan_dana_ortu_asuh;
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id_log_tagihan_dana_ortu_asuh: id_log_tagihan_dana_ortu_asuh,
                delete_tagihan: ini.find('select[name=delete_tagihan]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(post_data){
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#deleteOrtuAsuh').modal('hide');
                        successAlertPerma(message);
                        setTimeout(function() {
                            location.reload();
                        }, 4000);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            postData(post_data);
            
        });
    });
</script>
@endpush