You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

321 lines
15 KiB
PHTML

@extends('layouts.app')
@section('page-name','Pembayaran SPP')
@section('content')
<div class="page-header">
<h1 class="page-title">
@yield('page-name')
</h1>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Transaksi</h3>
</div>
@if(session()->has('msg'))
<div class="card-alert alert alert-{{ session()->get('type') }}" id="message" style="border-radius: 0px !important">
@if(session()->get('type') == 'success')
<i class="fe fe-check mr-2" aria-hidden="true"></i>
@else
<i class="fe fe-alert-triangle mr-2" aria-hidden="true"></i>
@endif
{{ session()->get('msg') }}
</div>
@endif
<div class="card-body">
{{-- <form action="{{ route('keuangan.store') }}" method="post"> --}}
@if($errors->any())
<div class="alert alert-danger">
@foreach($errors->all() as $error)
{{ $error }}<br>
@endforeach
</div>
@endif
<div class="row">
<div class="col-12">
@csrf
<div class="form-group">
<label class="form-label">Siswa</label>
<select id="siswa" class="form-control" name="siswa_id">
<option value="#">[-- Pilih Siswa --]</option>
@foreach($siswa as $item)
<option value="{{ $item->id }}"> {{ $item->nama.' - '.$item->kelas->nama.' - ' }} </option>
@endforeach
</select><br>
Saldo: IDR. <span id="saldo">0</span>
</div>
<div class="form-group" style="display: none" id="form-tagihan">
<label class="form-label" >Tagihan</label>
<select id="tagihan" class="form-control" name="tagihan_id">
</select>
</div>
<div class="form-group" style="display: none" id="form-tagihan-2">
<label class="form-label">Total Tagihan</label>
IDR. <span id="harga">0</span>
<label class="custom-switch">
<input type="checkbox" class="custom-switch-input" id="ada-diskon">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Ada diskon? </span>
</label>
</div>
<div class="form-group" style="display: none" id="form-diskon">
<label class="form-label">Diskon (IDR)</label>
<input type="text" name="diskon" id="diskon" class="form-control" placeholder="masukan angka dalam satuan mata uang, tanpa titik atau koma">
</div>
<div class="form-group" style="display: none" id="form-total">
<label class="form-label">Total Pembayaran</label>
<input type="text" name="pembayaran" class="form-control" id="total" readonly>
</div>
<div class="form-group" style="display: none" id="form-pembayaran">
<label class="form-label">Pembayaran</label>
<div class="selectgroup w-100">
<label class="selectgroup-item">
<input type="radio" name="via" value="tunai" class="selectgroup-input" checked="">
<span class="selectgroup-button">Tunai</span>
</label>
<label class="selectgroup-item" style="display: none" id="opsi-tabungan">
<input type="radio" name="via" value="tabungan" class="selectgroup-input">
<span class="selectgroup-button">Potong Tabungan</span>
</label>
</div>
</div>
<div class="form-group" style="display: none" id="form-keterangan">
<label class="form-label">Keterangan</label>
<textarea name="keterangan" id="keterangan" rows="3" class="form-control"></textarea>
</div>
</div>
</div>
<div class="d-flex">
<button class="btn btn-primary ml-auto" style="display: none" id="btn-simpan">Simpan</button>
</div>
{{-- </form> --}}
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Histori Transaksi</h3>
<div class="card-options">
<a href="{{ route('keuangan.export') }}" class="btn btn-primary btn-sm ml-2" download="true">Export</a>
</div>
</div>
<div class="table-responsive">
<table class="table card-table table-hover table-vcenter text-wrap">
<thead>
<tr>
<th class="w-1">No.</th>
<th>Tanggal</th>
<th>Siswa</th>
<th>Jumlah</th>
<th>Diskon</th>
<th>Total</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
@foreach ($transaksi as $index => $item)
<tr>
<td><span class="text-muted">{{ $index+1 }}</span></td>
<td>{{ $item->created_at->format('d-m-Y') }}</td>
<td>{{ $item->siswa->nama.'('.$item->siswa->kelas->nama.')' }}</td>
<td>IDR. {{ format_idr($item->tagihan->jumlah) }}</td>
<td>IDR. {{ format_idr($item->diskon) }}</td>
<td>IDR. {{ format_idr($item->tagihan->jumlah - $item->diskon) }}</td>
<td style="max-width:150px;">{{ $item->keterangan }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="card-footer">
<div class="d-flex">
<div class="ml-auto mb-0">
{{ $transaksi->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('css')
<link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
<style>
.select2-container--default .select2-selection--multiple .select2-selection__choice {
color: black;
}
.select2{
width: 100% !important;
}
</style>
@endsection
@section('js')
<script>
require(['jquery','select2','sweetalert'], function ($, select2, sweetalert) {
$(document).ready(function () {
//format IDR
function formatNumber(num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
}
$('#siswa').select2({
placeholder: "Pilih Siswa",
});
$('#tagihan').select2({});
var siswa_id; //siswa_id
var tagihan_id; //tagihan_id
var saldo; //saldo dari siswa
var harga; //harga dari tagihan
var diskon = 0; //diskon
var via = 'tunai'; //pembayaran via
// memilih siswa
$('#siswa').on('change',function(){
if(this.value == '#'){
$('#saldo').text('0')
$('#form-tagihan').hide()
$('#form-tagihan-2').hide()
$('#form-total').hide()
$('#form-pembayaran').hide()
$('#opsi-tabungan').hide()
$('#form-keterangan').hide()
$('#btn-simpan').hide()
return;
}else{
siswa_id = this.value
}
//get saldo
$.ajax({url: "{{ route('api.getsaldo') }}/" + this.value, success: function(result){
$('#saldo').text(result.sal)
saldo = result.saldo
$('#form-tagihan').show()
$('#form-tagihan-2').show()
$('#form-total').show()
$('#form-pembayaran').show()
if(saldo > 0){
$('#opsi-tabungan').show()
}
$('#form-keterangan').show()
$('#btn-simpan').show()
}, beforeSend: function(){
$('#saldo').text('tunggu, sedang mengambil saldo.....')
$('#form-tagihan').hide()
$('#form-tagihan-2').hide()
$('#form-total').hide()
$('#form-pembayaran').hide()
$('#opsi-tabungan').hide()
$('#form-keterangan').hide()
$('#btn-simpan').hide()
}});
//get tagihan
$.ajax({url: "{{ route('api.gettagihan') }}/" + this.value, success: function(result){
if(result.length == 0){
alert('tidak ada item tagihan yang tersedia')
}
$("#tagihan").empty()
for(i=0;i < result.length ;i++){
$("#tagihan").append('<option value="'+ result[i].id +'" data-harga="'+ result[i].jumlah +'">'+ result[i].nama +'</option>');
}
//set harga dari data pertama
tagihan_id = result[0].id
harga = result[0].jumlah
if(harga <= saldo){
$('#opsi-tabungan').show()
}else{
$('#opsi-tabungan').hide()
}
//menampilkan harga
$('#harga').text(formatNumber(harga));
$('#total').val(formatNumber(harga - diskon));
},});
})
$('#tagihan').on('change', function(){
tagihan_id = this.value
//set harga dari opsi yang dipilih
harga = $('option:selected', this).attr('data-harga');
if(harga <= saldo){
$('#opsi-tabungan').show()
}else{
$('#opsi-tabungan').hide()
}
//jika diganti diskon kembali ke nol
diskon = 0
$('#diskon').val('');
//menampilkan harga
$('#harga').text(formatNumber(harga));
$('#total').val(formatNumber(harga - diskon));
})
$('#ada-diskon').on('change', function(){
$('#form-diskon').toggle();
})
$('#diskon').keyup(function(){
if(this.value <= 0){
this.value = ''
diskon = 0
}else{
diskon = this.value
}
if((harga - diskon) < 0){
diskon = 0
alert('diskon invalid, silahkan tulis ulang')
$('#diskon').val('')
}
$('#total').val(formatNumber(harga - diskon));
if((harga - diskon) <= saldo){
$('#opsi-tabungan').show()
}else{
$('#opsi-tabungan').hide()
}
})
//pembayaran via
$('.selectgroup-input').change(function(){
via = this.value
})
$('#btn-simpan').on('click', function(){
console.log(harga)
if((harga - diskon) == NaN){
alert('diskon invalid')
}else{
$('#btn-simpan').addClass("btn-loading")
$.ajax({
type: "POST",
url: "{{ route('api.tagihan') }}/"+siswa_id,
data: {
tagihan_id : tagihan_id,
siswa_id : siswa_id,
jumlah : harga,
diskon : diskon,
keterangan : keterangan.value,
via : via
},
success: function(data){
console.log(data);
swal({title: data.msg})
setTimeout(function(){
window.location.reload()
}, 2000)
},
error: function(data){
console.log('Error......')
console.log(data)
}
});
}
})
});
});
</script>
@endsection