report_retur_penjualan.blade.php
unknown
php_laravel_blade
2 years ago
16 kB
2
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
}
.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 Retur Penjualan
<p id="tgl"></p>
</h4>
<div class="row mr-3">
<div class="col-3">
<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_retur_penjualan" name="cari_retur_penjualan">
</div>
</div>
</div>
<div class="col-5">
<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">
<button class="btn btn-success" id="btn-export" data-toggle="modal" data-target="#export" type="button">
<i class="mdi mdi-file-excel"></i>
</button>
</div>
<div class="form-group">
<button class="btn btn-secondary" id="btn-print" data-toggle="modal" data-target="#export" type="button">
<i class="mdi mdi-eye"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col">
<kbd>Jumlah Transaksi</kbd><br> <span id="jumlah_transaksi"></span>
</div>
<div class="col">
<kbd>Jumlah Customer</kbd><br> <span id="jumlah_pelanggan"></span>
</div>
<div class="col">
<kbd>Jumlah Total Harga</kbd><br> <span id="jumlah_total_harga"></span>
</div>
<div class="col">
<kbd>Jumlah Barang</kbd><br>besar : <span id="jumlah_dos"></span> | kecil : <span
id="jumlah_pack"></span>
</div>
<div class="col">
<kbd>Jumlah Harga</kbd><br>besar : <span id="total_dos"></span><br>kecil : <span id="total_pack" ></span>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- ============================= MODAL EXPORT =================================== --}}
<div class="row modal-group">
<div class="modal fade" id="export" role="dialog" aria-labelledby="export" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="export">Filter View</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{url('report/returPenjualan/print')}}" name="exportType" id="exportType" method="get" target="_blank">
@csrf
<input type="hidden" name="status_pajak" class="input_status_pajak">
<input type="hidden" name="cari_penjualan" class="input_cari_penjualan">
<input type="hidden" name="tgl_awal" class="input_tgl_awal">
<input type="hidden" name="tgl_akhir" class="input_tgl_akhir">
<div class="modal-body">
<div class="d-flex justify-content-center">
<div class="wrapper">
<input type="radio" name="filter" id="option-1" value="penjualan" checked>
<input type="radio" name="filter" id="option-2" value="barang">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>Per Penjualan</span>
</label>
<label for="option-2" class="option option-2">
<div class="dot"></div>
<span>Per Barang</span>
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Print</button>
</div>
</form>
</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="col-12 dis-none mb-3" id="loading">
<center>
<img src="https://i.gifer.com/ZKZx.gif" width="20px" alt="">
</center>
</div>
<div class="table-responsive">
<table class="table table-custom">
<thead>
<tr>
<th scope="row">Kode Transaksi</th>
<th scope="col">Customer</th>
<th scope="col">Nama Barang</th>
<th scope="col">Jumlah Barang</th>
<th scope="col">Harga Total</th>
<th scope="col">Status Pajak</th>
<th scope="col">Tanggal</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 () {
var x = [];
$.ajax({
url: "{{url('report/getReturPenjualan')}}",
type: "GET",
beforeSend: function () {
$('#loading').removeClass('dis-none');
},
success: function (data) {
$('#loading').addClass('dis-none');
$('#tgl').text(data.tgl);
var transaksi = data.transaksi;
var html = '';
transaksi.forEach(function (item) {
var tgl = new Date(item.created_at).toLocaleDateString('id-ID', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
});
var times = new Date(item.created_at).toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
});
var formatClock = times.replace('.', ':');
var jam = formatClock.replace('.', ':');
html += '<tr>' +
'<th scope="row" style="color: #292929">' + item.kode_transaksi+'</th>' +
'<td scope="row" id="id_customer">' + item.id_customer + '</td>' +
'<td scope="row">' + item.nama_barang + '</td>' +
'<td scope="row">' + item.jumlah + '</td>' +
'<td scope="row"> Rp. ' + item.total_barang + ',00 </td>' +
'<td scope="row">';
if(item.status_pajak){
html += 'ppn';
}
else{
html += 'non_ppn'
}
html += '</td>' +
'<td scope="row">' + tgl + ' ' + jam + '</td>' +
'</tr>';
});
$('#data_tr').html(html);
var jumlah = data.jumlah;
$('#jumlah_transaksi').text(jumlah);
$('#jumlah_dos').text(data.jumlah_dos);
$('#jumlah_pack').text(data.jumlah_pack);
$('#jumlah_pelanggan').text(data.jumlah_pelanggan);
$('#jumlah_total_harga').text('Rp. '+data.jumlah_total_harga);
$('#total_dos').text('Rp. '+data.total_dos);
$('#total_pack').text('Rp. '+data.total_pack);
}
})
$('#btn-export').on('click', function(){
document.forms.exportType.action = "{{url('report/returPenjualan/export')}}"
});
$('#btn-print').on('click', function(){
document.forms.exportType.action = "{{url('report/returPenjualan/print')}}"
});
// search table tr
$('#btn-search').on('click', function () {
var tgl_awal = $('#tgl_awal').val();
var tgl_akhir = $('#tgl_akhir').val();
var cari_retur_penjualan = $('#cari_retur_penjualan').val();
$('.input_cari_retur_penjualan').val(cari_retur_penjualan);
$('.input_tgl_awal').val(tgl_awal);
$('.input_tgl_akhir').val(tgl_akhir);
$.ajax({
url: "{{url('report/getReturPenjualan/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_retur_penjualan: cari_retur_penjualan,
},
success: function (data) {
$('#btn-search').removeClass('disabled');
$('#btn-export').removeClass('disabled');
$('#loading').addClass('dis-none');
$('#tgl').text(data.tgl);
var transaksi = data.transaksi;
var html = '';
transaksi.forEach(function (item) {
var tgl = new Date(item.created_at).toLocaleDateString('id-ID', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
});
var times = new Date(item.created_at).toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
});
var formatClock = times.replace('.', ':');
var jam = formatClock.replace('.', ':');
html += '<tr>' +
'<th scope="row" style="color: #292929">' + item.kode_transaksi+'</th>' +
'<td scope="row" id="id_customer">' + item.id_customer + '</td>' +
'<td scope="row">' + item.nama_barang + '</td>' +
'<td scope="row">' + item.jumlah + '</td>' +
'<td scope="row"> Rp. ' + item.total_barang + ',00 </td>' +
'<td scope="row">';
if(item.status_pajak){
html += 'ppn';
}
else{
html += 'non_ppn'
}
html += '</td>' +
'<td scope="row">' + tgl + ' ' + jam + '</td>' +
'</tr>';
});
$('#data_tr').html(html);
$('#jumlah_transaksi').text(data.jumlah);
$('#jumlah_dos').text(data.jumlah_dos);
$('#jumlah_pack').text(data.jumlah_pack);
$('#jumlah_pelanggan').text(data.jumlah_pelanggan);
$('#jumlah_total_harga').text('Rp. '+data.jumlah_total_harga);
$('#total_dos').text('Rp. '+data.total_dos);
$('#total_pack').text('Rp. '+data.total_pack);
}
});
$('#btn-export').removeClass('dis-none');
});
});
</script>
@endsectionEditor is loading...