detail siswa done
parent
df6f9c7034
commit
d2f13f3b19
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,410 @@
|
||||
.daterangepicker {
|
||||
position: absolute;
|
||||
color: inherit;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
width: 278px;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
margin-top: 7px;
|
||||
top: 100px;
|
||||
left: 20px;
|
||||
z-index: 3001;
|
||||
display: none;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.daterangepicker:before, .daterangepicker:after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.daterangepicker:before {
|
||||
top: -7px;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker:after {
|
||||
top: -6px;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #fff;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
|
||||
.daterangepicker.opensleft:before {
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.daterangepicker.opensleft:after {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.daterangepicker.openscenter:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.daterangepicker.openscenter:after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.daterangepicker.opensright:before {
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.daterangepicker.opensright:after {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up:before {
|
||||
top: initial;
|
||||
bottom: -7px;
|
||||
border-bottom: initial;
|
||||
border-top: 7px solid #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up:after {
|
||||
top: initial;
|
||||
bottom: -6px;
|
||||
border-bottom: initial;
|
||||
border-top: 6px solid #fff;
|
||||
}
|
||||
|
||||
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.daterangepicker.single .drp-selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .drp-calendar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .drp-buttons {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.daterangepicker.auto-apply .drp-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar {
|
||||
display: none;
|
||||
max-width: 270px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
padding: 8px 0 8px 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.single .calendar-table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
|
||||
color: #fff;
|
||||
border: solid black;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .next span {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .prev span {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table {
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
|
||||
background-color: #eee;
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.daterangepicker td.week, .daterangepicker th.week {
|
||||
font-size: 80%;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.daterangepicker td.in-range {
|
||||
background-color: #ebf4f8;
|
||||
border-color: transparent;
|
||||
color: #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker td.start-date {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.daterangepicker td.end-date {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.daterangepicker td.start-date.end-date {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.daterangepicker td.active, .daterangepicker td.active:hover {
|
||||
background-color: #357ebd;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.daterangepicker th.month {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker td.disabled, .daterangepicker option.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
|
||||
font-size: 12px;
|
||||
padding: 1px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.daterangepicker select.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
.daterangepicker select.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
background: #eee;
|
||||
border: 1px solid #eee;
|
||||
padding: 2px;
|
||||
outline: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-time {
|
||||
text-align: center;
|
||||
margin: 4px auto 0 auto;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-time select.disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-buttons {
|
||||
clear: both;
|
||||
text-align: right;
|
||||
padding: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
display: none;
|
||||
line-height: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-selected {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-buttons .btn {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.rtl .drp-calendar.right {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.ltr .drp-calendar.left {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges {
|
||||
float: none;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .ranges {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges ul {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li {
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li.active {
|
||||
background-color: #08c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Larger Screen Styling */
|
||||
@media (min-width: 564px) {
|
||||
.daterangepicker {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges ul {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.daterangepicker.single .ranges ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.daterangepicker.single .drp-calendar.left {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.daterangepicker {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
clear: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left .calendar-table {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right .calendar-table {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left .calendar-table {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges, .daterangepicker .drp-calendar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 730px) {
|
||||
.daterangepicker .ranges {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.daterangepicker.rtl .ranges {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
clear: none !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,149 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('page-name','Siswa')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">@yield('page-name')</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><b>Kelas</b> : {{$siswa->kelas->nama}} </p>
|
||||
<p>
|
||||
<b>Nama</b> : {{$siswa->nama}}
|
||||
@if($siswa->is_yatim)
|
||||
<span class="tag tag-green">Yatim</span>
|
||||
@endif
|
||||
</p>
|
||||
<p><b>Tempat, Tanggal Lahir</b> : {{$siswa->tempat_lahir.', '.$siswa->tanggal_lahir}} </p>
|
||||
<p><b>Alamat</b> : {{$siswa->alamat}} </p>
|
||||
<p><b>Nama Wali</b> : {{$siswa->nama_wali}} </p>
|
||||
<p><b>No. Telp Wali</b> : {{$siswa->telp_wali}} </p>
|
||||
<p><b>Pekerjaan Wali</b> : {{$siswa->pekerjaan_wali}} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tabungan</h3>
|
||||
<div class="card-options">
|
||||
<a href="{{ route('tabungan.cetak', $siswa->id) }}" target="_blank" class="btn btn-primary">Cetak</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><b>Saldo : </b>IDR. {{$saldo}}</p>
|
||||
<table class="table card-table table-hover table-vcenter text-wrap">
|
||||
<tr>
|
||||
<th>Tanggal</th>
|
||||
<th>KD</th>
|
||||
<th>Jumlah</th>
|
||||
<th>Keterangan</th>
|
||||
</tr>
|
||||
@foreach($tabungan as $item)
|
||||
<tr>
|
||||
<td>{{ $item->created_at->format('d-m-Y') }}</td>
|
||||
<td>
|
||||
@if($item->tipe == 'in')
|
||||
Menabung
|
||||
@elseif($item->tipe == 'out')
|
||||
Penarikan
|
||||
@endif
|
||||
</td>
|
||||
<td style="min-width: 100px">IDR. {{ format_idr($item->jumlah) }}</td>
|
||||
<td style="max-width: 100px">{{ $item->keperluan }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</table>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex">
|
||||
<div class="ml-auto mb-0">
|
||||
{{ $tabungan->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tagihan SPP</h3>
|
||||
@if(!$siswa->is_yatim)
|
||||
<div class="card-options">
|
||||
<input class="form-control mr-4" type="text" name="dates" style="max-width: 200px" id="daterange" value="{{ now()->subDay(7)->format('m-d-Y')." - ".now()->format('m-d-Y') }}">
|
||||
<button id="btn-cetak-spp" class="btn btn-primary" value="{{ $siswa->id }}">Cetak</button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if($siswa->is_yatim)
|
||||
<b>Siswa/Siswi Yatim biaya Gratis</b>
|
||||
@else
|
||||
<table class="table card-table table-hover table-vcenter text-wrap">
|
||||
<tr>
|
||||
<th>Nama Tagihan</th>
|
||||
<th>Total</th>
|
||||
<th>Lunas</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Keterangan</th>
|
||||
</tr>
|
||||
@foreach($tagihan as $item)
|
||||
<tr>
|
||||
<td>{{ $item['nama'] }}</td>
|
||||
<td>{{ $item['total'] }}</td>
|
||||
<td>
|
||||
@if($item['is_lunas'])
|
||||
<span class="tag tag-green">Lunas</span>
|
||||
@else
|
||||
<span class="tag tag-purple">Belum</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>{{ $item['created_at'] }}</td>
|
||||
<td>{{ $item['keterangan'] }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</table>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@section('css')
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('css/daterangepicker.css') }}" />
|
||||
@endsection
|
||||
@section('js')
|
||||
<script>
|
||||
require(['jquery', 'moment','daterangepicker'], function ($, moment, daterangepicker) {
|
||||
$(document).ready(function () {
|
||||
$('input[name="dates"]').daterangepicker();
|
||||
});
|
||||
$('#btn-cetak-spp').on('click', function(){
|
||||
//form print
|
||||
var form = document.createElement("form");
|
||||
form.setAttribute("style", "display: none");
|
||||
form.setAttribute("method", "post");
|
||||
form.setAttribute("action", "{{ route('spp.print') }}/" + this.value);
|
||||
form.setAttribute("target", "_blank");
|
||||
|
||||
var token = document.createElement("input");
|
||||
token.setAttribute("name", "_token");
|
||||
token.setAttribute("value", "{{csrf_token()}}");
|
||||
|
||||
var dateForm = document.createElement("input");
|
||||
dateForm.setAttribute("name", "dates");
|
||||
dateForm.setAttribute("value", $('#daterange').val());
|
||||
|
||||
form.appendChild(token);
|
||||
form.appendChild(dateForm);
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
|
||||
console.log($('#daterange').val())
|
||||
})
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@ -0,0 +1,48 @@
|
||||
<h2 style="text-align:center"><b> {{ $sitename }} </b></h2 >
|
||||
<h3 style="text-align:center">Tabungan</h3>
|
||||
<br>
|
||||
<p><b>Nama :</b> {{ $siswa->nama }} <b>Kelas : </b> {{ $siswa->kelas->nama }}{{ isset($siswa->kelas->periode) ? '('.$siswa->kelas->periode->nama.')' : '' }}</p>
|
||||
<p><b>Saldo : </b>IDR. {{ $saldo }}</p>
|
||||
<table style="border: 1px solid black; width: 100%">
|
||||
<tr style="border: 1px solid black;">
|
||||
<th>No</th>
|
||||
<th>Tanggal</th>
|
||||
<th>KD</th>
|
||||
<th>Jumlah</th>
|
||||
</tr>
|
||||
@foreach ($tabungan as $index => $item)
|
||||
<tr class="{{ ($index%2) ? 'gray' : '' }}">
|
||||
<td style="min-width:20px;text-align: center;">
|
||||
{{ $index+1 }}
|
||||
</td>
|
||||
<td style="min-width:200px;text-align: center;">
|
||||
{{ $item->created_at->format('d-m-Y') }}
|
||||
</td>
|
||||
<td style="min-width:20px;text-align: center;">
|
||||
@if($item->tipe == 'in')
|
||||
Menabung
|
||||
@else
|
||||
Penarikan
|
||||
@endif
|
||||
</td>
|
||||
<td style="min-width:200px;text-align: left;">
|
||||
IDR. {{ format_idr($item->jumlah) }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</table>
|
||||
<style>
|
||||
@media print {
|
||||
tr.gray {
|
||||
background-color: #ececec !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
th {
|
||||
background-color: #dadada !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.print()
|
||||
</script>
|
||||
@ -0,0 +1,48 @@
|
||||
<h2 style="text-align:center"><b> {{ $sitename }} </b></h2 >
|
||||
<h3 style="text-align:center">Tanda Bukti Pembayaran</h3>
|
||||
<br>
|
||||
<p><b>Nama :</b> {{ $siswa->nama }} <b>Kelas : </b> {{ $siswa->kelas->nama }}{{ isset($siswa->kelas->periode) ? '('.$siswa->kelas->periode->nama.')' : '' }}</p>
|
||||
<p><b>Tanggal : </b> {{ $tanggal }}</p>
|
||||
<table style="border: 1px solid black; width: 100%">
|
||||
<tr style="border: 1px solid black;">
|
||||
<th>No</th>
|
||||
<th>Tagihan</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Jumlah</th>
|
||||
<th>Keterangan</th>
|
||||
</tr>
|
||||
@foreach ($transaksi as $index => $item)
|
||||
<tr class="{{ ($index%2) ? 'gray' : '' }}">
|
||||
<td style="min-width:20px;text-align: center;">
|
||||
{{ $index+1 }}
|
||||
</td>
|
||||
<td style="min-width:200px;text-align: center;">
|
||||
{{ $item->tagihan->nama }}
|
||||
</td>
|
||||
<td style="min-width:80px;text-align: center;">
|
||||
{{ $item->created_at->format('d-m-Y') }}
|
||||
</td>
|
||||
<td style="min-width:200px;text-align: left;">
|
||||
IDR. {{ format_idr($item->keuangan->jumlah) }}
|
||||
</td>
|
||||
<td style="min-width:20px;text-align: center;">
|
||||
{{ $item->keterangan }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</table>
|
||||
<style>
|
||||
@media print {
|
||||
tr.gray {
|
||||
background-color: #ececec !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
th {
|
||||
background-color: #dadada !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.print()
|
||||
</script>
|
||||
Loading…
Reference in New Issue