@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">
<div class="table-responsive">
<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>
</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 () {
$.ajax({
url: "{{url('report/getLaporan_stok')}}",
type: "GET",
beforeSend: function () {
$('#loading').removeClass('dis-none');
},
success: function (data) {
$('#loading').addClass('dis-none');
$('#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>' +
'<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-search').on('click', function(){
var tgl_awal = $('#tgl_awal').val();
var tgl_akhir = $('#tgl_akhir').val();
var cari = $('#cari').val();
var pajak = $('#pajak').val();
console.log(pajak);
$('#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>' +
'<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>
@endsection