report_laporan_stok2.blade.php
7 Maret 2023
FIKRI
php_laravel_blade
3 years ago
23 kB
9
Indexable
@extends('templates/main')
@section('css')
<link rel="stylesheet" href="{{ asset('css/report/report_transaction/style.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/css/datedropper.css') }}">
<style>
* {
font-weight: bold
}
/* HTML Table Freeze Column and Row by igniel.com */
.table-responsive {
height: 80vh;
/*margin: 2rem 0;*/
overflow: auto;
scroll-snap-type: both mandatory;
white-space: nowrap;
}
.table-responsive .table {
margin: 0;
overflow: unset;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
padding: 1rem 2.5rem;
text-align: left;
}
thead th {
border-bottom: 1px solid #ccc;
font-weight: 600;
top: 0;
z-index: 1;
}
th.tp {
background-color: #fff;
z-index: 2;
}
tbody th {
left: 0;
text-align: left;
}
tbody th, th.tp {
border-right: 1px solid #ccc;
}
tr {
padding: 0;
}
td {
color: #000000;
vertical-align: top;
}
tbody tr:nth-child(odd) th {
background-color: #fff;
}
thead th, tbody tr:nth-child(even) th, tr:nth-child(even) td {
background-color: #f4f4f4; /* striped background color */
}
thead th, tbody th {
position: sticky;
-webkit-position: sticky;
}
@media screen and (max-width: 680px) {
.table-responsive {height: 70vh}
}
@media screen and (max-width: 480px) {
.table-responsive {height: 60vh}
}
kbd {
background-color: #D0D0D0;
color: #000000;
}
</style>
@endsection
@section('content')
<div class="row">
<div class="col-12 grid-margin">
<div class="card card-noborder b-radius">
<div class="card-header d-flex justify-content-between align-items-center">
<h4 class="page-title">Laporan Stok
<p id="tgl"></p>
</h4>
<div class="row">
<div class="col-2">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control form-control-lg" placeholder="Cari"
aria-describedby="basic-addon2" id="cari" name="cari">
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="input-group">
<select class="form-control form-control-lg" name="pajak" id="pajak">
<option value="">Semua</option>
<option value="ppn">PPN</option>
<option value="non_ppn">Non PPN</option>
</select>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-6">
<div class="input-group">
<input type="date" class="form-control form-control-lg" placeholder="Tanggal"
aria-label="Search" aria-describedby="basic-addon2" id="tgl_awal"
name="tgl_awal">
</div>
</div>
<div class="col-6">
<div class="input-group">
<input type="date" class="form-control form-control-lg" placeholder="Tanggal"
aria-label="Search" aria-describedby="basic-addon2" id="tgl_akhir"
name="tgl_akhir">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="form-group mr-2">
<button class="btn btn-primary" id="btn-search" type="submit">
<i class="mdi mdi-find-replace"></i>
</button>
</div>
<div class="form-group mr-2">
<form action="{{url('report/laporan_stok_awal/export')}}" target="_blank" method="get">
@csrf
<input type="hidden" name="cari" id="cari1">
<input type="hidden" name="tgl_awal" id="input_tgl_awal1">
<input type="hidden" name="tgl_akhir" id="input_tgl_akhir1">
<input type="hidden" name="pajak" id="pajak1">
<button class="btn btn-success" id="btn-export" type="submit">
<i class="mdi mdi-file-excel"></i>
</button>
</form>
</div>
<div class="form-group">
<form action="{{url('report/laporan_stok_awal/print')}}" target="_blank" method="get">
@csrf
<input type="hidden" name="cari" id="cari2">
<input type="hidden" name="tgl_awal" id="input_tgl_awal2">
<input type="hidden" name="tgl_akhir" id="input_tgl_akhir2">
<input type="hidden" name="pajak" id="pajak2">
<button class="btn btn-secondary " id="btn-export" type="submit">
<i class="mdi mdi-eye"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-2">
<kbd>Total Item</kbd><br> ppn : <span id="jumlah_ppn"></span><br>non ppn : <span
id="jumlah_non_ppn"></span> <br>Total : <span id="jumlah_barang"></span>
</div>
{{-- <div class="col-1">
<p>Item (status pajak) : </p> PPN : <span id="jumlah_ppn"></span><br>NonPPN : <span
id="jumlah_non_ppn"></span>
</div> --}}
<div class="col-2">
<kbd>Total Awal</kbd> <br>besar : <span id="awal_besar"></span><br>kecil : <span
id="awal_kecil"></span>
</div>
<div class="col-2">
<kbd>Total Masuk</kbd> <br>besar : <span id="masuk_besar"></span><br>kecil : <span
id="masuk_kecil"></span>
</div>
<div class="col-2">
<kbd>Total Keluar</kbd><br>besar : <span id="keluar_besar"></span><br>kecil : <span
id="keluar_kecil"></span>
</div>
<div class="col-2">
<kbd>Total Akhir</kbd><br>besar : <span id="akhir_besar"></span><br>kecil : <span
id="akhir_kecil"></span>
</div>
<div class="col-2">
<kbd>Nilai Akhir</kbd><br>besar : <span id="nilai_besar"></span><br>kecil : <span
id="nilai_kecil"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 grid-margin">
<div class="card card-noborder b-radius">
<div class="card-body">
<div class="col-12">
{{-- <iframe src="{{url('/report/laporan_stok_awal/table-view')}}" frameborder="0" width="100%" height="100%"></iframe> --}}
<div class="table-responsive" id="tbl_res">
{{-- <div class="col-12 dis-none mb-3" id="loading">
<center>
<img src="https://i.gifer.com/ZKZx.gif" width="20px" alt="">
</center>
</div> --}}
<table class="table table-custom">
<thead>
<tr>
<th scope="row">Nama Barang</th>
<th scope="col">Stok Awal<br>(besar)</th>
<th scope="col">Stok Awal<br>(kecil)</th>
<th scope="col">Stok Masuk<br>(besar)</th>
<th scope="col">Harga Beli<br>(besar)</th>
<th scope="col">Total Nilai Masuk<br>(besar)</th>
<th scope="col">Stok Masuk<br>(kecil)</th>
<th scope="col">Harga Beli<br>(kecil)</th>
<th scope="col">Total Nilai Masuk<br>(kecil)</th>
<th scope="col">Stok Keluar<br>(besar)</th>
<th scope="col">Harga Jual<br>(besar)</th>
<th scope="col">Total Nilai Keluar<br>(besar)</th>
<th scope="col">Stok Keluar<br>(kecil)</th>
<th scope="col">Harga Jual<br>(kecil)</th>
<th scope="col">Total Nilai keluar<br>(kecil)</th>
<th scope="col">Stok Akhir<br>(besar)</th>
<th scope="col">Stok Akhir<br>(kecil)</th>
<th scope="col">Stok Dalam Rupiah<br>(besar)</th>
<th scope="col">Stok Dalam Rupiah<br>(kecil)</th>
<th>Status Pajak</th>
</tr>
</thead>
<tbody id="data_tr"></tbody>
<tfoot id="data_tf"></tfoot>
</table>
<div class="col-12 dis-none mb-3" id="loading">
<center>
<img src="https://i.gifer.com/ZKZx.gif" width="20px" alt="">
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script src="{{ asset('plugins/js/datedropper.js') }}"></script>
<script src="{{ asset('js/report/report_transaction/script.js') }}"></script>
<script>
$(document).ready(function () {
get();
var page = 1;
var offset = 0;
var cek = false;
var idtbl = document.querySelector('#tbl_res');
idtbl.addEventListener('scroll', function() {
console.log(idtbl.scrollTop + idtbl.clientHeight + 1 >= idtbl.scrollHeight);
console.log('scroll top :'+idtbl.scrollTop);
console.log('client height :'+idtbl.clientHeight);
console.log('scroll hight :'+idtbl.scrollHeight);
if (idtbl.scrollTop + idtbl.clientHeight + page >= idtbl.scrollHeight && cek == false) {
page++;
get();
console.log('Cek : '+page);
}
});
var totalbr = ppn = nonppn = awalb = awalk = masukb = masukk = keluarb = keluark = akhirb = akhirk = nilaib = nilaik = 0;
function get(){
$.ajax({
url: "{{url('report/getLaporan_stok_awal')}}?offset=" + offset,
type: "GET",
beforeSend: function () {
cek = true;
$('#loading').removeClass('dis-none');
},
success: function (data) {
cek = false
if (data.data.length > 0) {
console.log(data);
$('#loading').addClass('dis-none');
$('#tgl').text(data.tgl);
var laporan = data.data;
var html = '';
// var ppn = 0;
// var nonppn = 0;
// var awalb = 0;
// var awalk = 0;
// var masukb = 0;
// var masukk = 0;
// var keluarb = 0;
// var keluark = 0;
// var akhirb = 0;
// var akhirk = 0;
// var nilaib = 0;
// var nilaik = 0;
laporan.forEach(function (item) {
var tgl = new Date(item.created_at).toLocaleDateString('id-ID', {
weekday: 'long',
day: '2-digit',
month: 'long',
year: 'numeric',
});
html += '<tr id="databarang">' +
'<th scope="row" style="color: #292929"> <span>' + item.nama_barang+'</span><span class="d-block mt-2 txt-light">' + item.kode_barang + '</span></th>' +
'<td scope="row">' + item.stok_awal_besar + '</td>' +
'<td scope="row">' + item.stok_awal_kecil + '</td>' +
'<td scope="row" style="color: #4CDB4C"> <i class="mdi mdi-arrow-down"></i>' + item.stok_masuk_besar + '</td>' +
'<td scope="row">' + item.harga_beli_besar + '</td>' +
'<td scope="row" style="color: #292929"> - ' + item.total_nilai_besar + '</td>' +
'<td scope="row" style="color: #4CDB4C"> <i class="mdi mdi-arrow-down"></i>' + item.stok_masuk_kecil + '</td>' +
'<td scope="row">' + item.harga_beli_kecil + '</td>' +
'<td scope="row" style="color: #292929"> - ' + item.total_nilai_kecil + '</td>' +
'<td scope="row" style="color: #0d6efd"> <i class="mdi mdi-arrow-up"></i>' + item.stok_keluar_besar + '</td>' +
'<td scope="row">' + item.harga_jual_besar + '</td>' +
'<td scope="row" style="color: #292929"> + ' + item.total_nilai_jual_besar + '</td>' +
'<td scope="row" style="color: #0d6efd"> <i class="mdi mdi-arrow-up"></i>' + item.stok_keluar_kecil + '</td>' +
'<td scope="row">' + item.harga_jual_kecil + '</td>' +
'<td scope="row" style="color: #292929"> + ' + item.total_nilai_jual_kecil + '</td>' +
'<td scope="row">' + item.stok_akhir_besar + '</td>' +
'<td scope="row">' + item.stok_akhir_kecil + '</td>' +
'<td scope="row">' + item.stok_rupiah_besar + '</td>' +
'<td scope="row">' + item.stok_rupiah_kecil + '</td>' +
'<td scope="row">' + item.status_pajak + '</td>' +
'</tr>';
});
totalbr += data.total_barang;
ppn += data.ppn;
nonppn += data.nonppn;
awalb += data.stok_awal_besar;
awalk += data.stok_awal_kecil;
masukb += data.stok_masuk_besar;
masukk += data.stok_masuk_kecil;
keluarb += data.stok_keluar_besar;
keluark += data.stok_keluar_kecil;
akhirb += data.stok_akhir_besar;
akhirk += data.stok_akhir_kecil;
nilaib += data.nilai_akhir_besar;
nilaik += data.nilai_akhir_kecil;
// $('#data_tr').html(html);
$('#data_tr').append(html);
$('#jumlah_barang').text(totalbr);
$('#jumlah_ppn').text(ppn);
$('#jumlah_non_ppn').text(nonppn);
$('#awal_besar').text(awalb);
$('#awal_kecil').text(awalk);
$('#masuk_besar').text(masukb);
$('#masuk_kecil').text(masukk);
$('#keluar_besar').text(keluarb);
$('#keluar_kecil').text(keluark);
$('#akhir_besar').text(akhirb);
$('#akhir_kecil').text(akhirk);
$('#nilai_besar').text(nilaib);
$('#nilai_kecil').text(nilaik);
// $('#jumlah_barang').text(data.total_barang);
// $('#jumlah_ppn').text(data.ppn);
// $('#jumlah_non_ppn').text(data.nonppn);
// $('#awal_besar').text(data.stok_awal_besar);
// $('#awal_kecil').text(data.stok_awal_kecil);
// $('#masuk_besar').text(data.stok_masuk_besar);
// $('#masuk_kecil').text(data.stok_masuk_kecil);
// $('#keluar_besar').text(data.stok_keluar_besar);
// $('#keluar_kecil').text(data.stok_keluar_kecil);
// $('#akhir_besar').text(data.stok_akhir_besar);
// $('#akhir_kecil').text(data.stok_akhir_kecil);
// $('#nilai_besar').text(data.nilai_akhir_besar);
// $('#nilai_kecil').text(data.nilai_akhir_kecil);
offset += data.data.length;
console.log('offset :'+ offset);
}else{
$(window).unbind('scroll');
}
}
})
}
$('#btn-search').on('click', function(){
var tgl_awal = $('#tgl_awal').val();
var tgl_akhir = $('#tgl_akhir').val();
var cari = $('#cari').val();
var pajak = $('#pajak').val();
$('#cari1').val(cari);
$('#input_tgl_awal1').val(tgl_awal);
$('#input_tgl_akhir1').val(tgl_akhir);
$('#pajak1').val(pajak);
$('#cari2').val(cari);
$('#input_tgl_awal2').val(tgl_awal);
$('#input_tgl_akhir2').val(tgl_akhir);
$('#pajak2').val(pajak);
$.ajax({
url: "{{url('/report/getLaporan_stok_awal/search')}}",
type: "GET",
beforeSend: function () {
$('#btn-search').addClass('disabled');
$('#btn-export').addClass('disabled');
$('#loading').removeClass('dis-none');
},
data: {
tgl_awal: tgl_awal,
tgl_akhir: tgl_akhir,
cari: cari,
pajak: pajak
},
success: function (data) {
$('#loading').addClass('dis-none');
$('#btn-search').removeClass('disabled');
$('#btn-export').removeClass('disabled');
$('#tgl').text(data.tgl);
var laporan = data.data;
var html = '';
laporan.forEach(function (item) {
var tgl = new Date(item.created_at).toLocaleDateString('id-ID', {
weekday: 'long',
day: '2-digit',
month: 'long',
year: 'numeric',
});
html += '<tr id="databarang">' +
'<th scope="row" style="color: #292929"> <span>' + item.nama_barang+'</span><span class="d-block mt-2 txt-light">' + item.kode_barang + '</span></th>' +
'<td scope="row">' + item.stok_awal_besar + '</td>' +
'<td scope="row">' + item.stok_awal_kecil + '</td>' +
'<td scope="row" style="color: #4CDB4C"> <i class="mdi mdi-arrow-down"></i>' + item.stok_masuk_besar + '</td>' +
'<td scope="row">' + item.harga_beli_besar + '</td>' +
'<td scope="row" style="color: #292929"> - ' + item.total_nilai_besar + '</td>' +
'<td scope="row" style="color: #4CDB4C"> <i class="mdi mdi-arrow-down"></i>' + item.stok_masuk_kecil + '</td>' +
'<td scope="row">' + item.harga_beli_kecil + '</td>' +
'<td scope="row" style="color: #292929"> - ' + item.total_nilai_kecil + '</td>' +
'<td scope="row" style="color: #0d6efd"> <i class="mdi mdi-arrow-up"></i>' + item.stok_keluar_besar + '</td>' +
'<td scope="row">' + item.harga_jual_besar + '</td>' +
'<td scope="row" style="color: #292929"> + ' + item.total_nilai_jual_besar + '</td>' +
'<td scope="row" style="color: #0d6efd"> <i class="mdi mdi-arrow-up"></i>' + item.stok_keluar_kecil + '</td>' +
'<td scope="row">' + item.harga_jual_kecil + '</td>' +
'<td scope="row" style="color: #292929"> + ' + item.total_nilai_jual_kecil + '</td>' +
'<td scope="row">' + item.stok_akhir_besar + '</td>' +
'<td scope="row">' + item.stok_akhir_kecil + '</td>' +
'<td scope="row">' + item.stok_rupiah_besar + '</td>' +
'<td scope="row">' + item.stok_rupiah_kecil + '</td>' +
'<td scope="row">' + item.status_pajak + '</td>' +
'</tr>';
});
$('#data_tr').html(html);
$('#jumlah_barang').text(data.total_barang);
$('#jumlah_ppn').text(data.ppn);
$('#jumlah_non_ppn').text(data.nonppn);
$('#awal_besar').text(data.stok_awal_besar);
$('#awal_kecil').text(data.stok_awal_kecil);
$('#masuk_besar').text(data.stok_masuk_besar);
$('#masuk_kecil').text(data.stok_masuk_kecil);
$('#keluar_besar').text(data.stok_keluar_besar);
$('#keluar_kecil').text(data.stok_keluar_kecil);
$('#akhir_besar').text(data.stok_akhir_besar);
$('#akhir_kecil').text(data.stok_akhir_kecil);
$('#nilai_besar').text(data.nilai_akhir_besar);
$('#nilai_kecil').text(data.nilai_akhir_kecil);
$('#btn-export').removeClass('dis-none');
}
});
// }
});
});
</script>
@endsectionEditor is loading...