report_pembelian.blade.php
unknown
php_laravel_blade
2 years ago
19 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 modal-group">
<div class="modal fade" id="modalPrint" tabindex="-1" role="dialog" aria-labelledby="modalExportLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalExportLabel">Filter View</h5>
<button type="button" class="close close-btn" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{url('report/pembelian/print')}}" id="exportType" name="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" id="print-modal-body" align="center">
<div class="col-12 d-flex justify-content-center">
<div class="wrapper">
<input type="radio" name="filter" id="option-1" value="pasok" checked>
<input type="radio" name="filter" id="option-2" value="detail">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>Per Pembelian</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-header d-flex justify-content-between ">
<h4 class="page-title">Laporan Pembelian
<p id="tgl"></p>
</h4>
<span class="mr-2">
<select class="form-select form-select-sm form-control form-control-lg" id="select-pajak">
<option value="0" selected>Semua</option>
<option value="1">PPN</option>
<option value="2">Non PPN</option>
</select>
</span>
<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_pembelian" name="cari_pembelian">
</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">
{{-- <form action="{{url('report/pembelian/export')}}" target="_blank" method="get">
@csrf
<input type="hidden" name="status_pajak" class="input_status_pajak">
<input type="hidden" name="cari_pembelian" class="input_cari_pembelian">
<input type="hidden" name="tgl_awal" class="input_tgl_awal">
<input type="hidden" name="tgl_akhir" class="input_tgl_akhir">
<button class="btn btn-success " id="btn-export" type="submit">
<i class="mdi mdi-file-excel"></i>
</button>
</form> --}}
<button class="btn btn-success" id="btn-export" data-toggle="modal" data-target="#modalPrint" type="button">
<i class="mdi mdi-file-excel"></i>
</button>
</div>
<div class="form-group">
{{-- <form action="{{url('report/pembelian/print')}}" target="_blank" method="get" name="print">
@csrf
<input type="hidden" name="status_pajak" class="input_status_pajak">
<input type="hidden" name="cari_pembelian" class="input_cari_pembelian">
<input type="hidden" name="tgl_awal" class="input_tgl_awal">
<input type="hidden" name="tgl_akhir" class="input_tgl_akhir">
<input type="hidden" name="filter">
<button class="btn btn-secondary " id="btn-export" type="button" data-toggle="modal" data-target="#modalPrint">
<i class="mdi mdi-eye"></i>
</button>
</form> --}}
<button class="btn btn-secondary" id="btn-print" data-toggle="modal" data-target="#modalPrint" type="button">
<i class="mdi mdi-eye"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-2">
<kbd>Jumlah pasok</kbd><br> <span id="jumlah_pasok"></span>
</div>
<div class="col-2">
<kbd>Jumlah Supplier</kbd><br> <span id="jumlah_pemasok"></span>
</div>
<div class="col-2">
<kbd>Jumlah Harga Total</kbd><br> <span id="jumlah_harga_total"></span>
</div>
<div class="col-3">
<kbd>Jumlah Barang</kbd><br>besar : <span id="jumlah_dos"></span> | kecil : <span
id="jumlah_pack"></span>
</div>
<div class="col-3">
<kbd>Jumlah Harga</kbd><br>besar : <span id="harga_dos"></span><br>kecil : <span
id="harga_pack"></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="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 Pasok</th>
<th scope="col">No Surat Jalan</th>
<th scope="col">No Faktur Pajak</th>
<th scope="col">Supplier</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>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/getPembelian')}}",
type: "GET",
beforeSend: function () {
$('#loading').removeClass('dis-none');
},
success: function (data) {
$('#loading').addClass('dis-none');
$('#tgl').text(data.tgl);
var pasok = data.pasok;
var html = '';
pasok.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_pasok+'</th>' +
'<td scope="row">' + item.surat_jalan+'</td>' +
'<td scope="row">' + item.no_faktur+'</td>' +
'<td scope="row">' + item.pemasok + '</td>' +
'<td scope="row">' + item.nama_barang + '</td>' +
'<td scope="row">' + item.jumlah + '</td>' +
'<td scope="row"> Rp. ' + item.subtotal + ',00 </td>' +
'<td scope="row">' + item.status_pajak +'</td>' +
'<td scope="row">' + tgl + ' ' + jam + '</td>' +
'</tr>';
});
$('#data_tr').html(html);
var jumlah = data.jumlah;
$('#jumlah_pasok').text(jumlah);
$('#jumlah_dos').text(data.jumlah_dos);
$('#jumlah_pack').text(data.jumlah_pack);
$('#harga_dos').text("Rp. "+data.harga_dos);
$('#harga_pack').text("Rp. "+data.harga_pack);
$('#jumlah_pemasok').text(data.jumlah_pemasok);
$('#jumlah_harga_total').text("Rp. "+data.jumlah_harga_total);
}
})
$('#btn-export').on('click', function(){
document.forms.exportType.action = "{{url('report/pembelian/export')}}"
});
$('#btn-print').on('click', function(){
document.forms.exportType.action = "{{url('report/pembelian/print')}}"
});
// search table tr
$('#btn-search').on('click', function () {
var tgl_awal = $('#tgl_awal').val();
var tgl_akhir = $('#tgl_akhir').val();
var cari_pembelian = $('#cari_pembelian').val();
var status_pajak = $('#select-pajak').val();
$('.input_cari_pembelian').val(cari_pembelian);
$('.input_tgl_awal').val(tgl_awal);
$('.input_tgl_akhir').val(tgl_akhir);
$('.input_status_pajak').val(status_pajak);
$.ajax({
url: "{{url('report/getPembelian/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_pembelian: cari_pembelian,
status_pajak: status_pajak,
},
success: function (data) {
$('#btn-search').removeClass('disabled');
$('#btn-export').removeClass('disabled');
$('#loading').addClass('dis-none');
$('#tgl').text(data.tgl);
var pasok = data.pasok;
var html = '';
pasok.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_pasok+'</th>' +
'<td scope="row">' + item.surat_jalan+'</td>' +
'<td scope="row">' + item.no_faktur+'</td>' +
'<td scope="row">' + item.pemasok + '</td>' +
'<td scope="row">' + item.nama_barang + '</td>' +
'<td scope="row">' + item.jumlah + '</td>' +
'<td scope="row"> Rp. ' + item.subtotal + ',00 </td>' +
'<td scope="row">' + item.status_pajak +'</td>' +
'<td scope="row">' + tgl + ' ' + jam + '</td>' +
'</tr>';
});
$('#data_tr').html(html);
$('#jumlah_pasok').text(data.jumlah);
$('#jumlah_dos').text(data.jumlah_dos);
$('#jumlah_pack').text(data.jumlah_pack);
$('#harga_dos').text("Rp. "+data.harga_dos);
$('#harga_pack').text("Rp. "+data.harga_pack);
$('#jumlah_pemasok').text(data.jumlah_pemasok);
$('#jumlah_harga_total').text("Rp. "+data.jumlah_harga_total);
}
});
$('#btn-export').removeClass('dis-none');
});
$('#btn-print').on('click', function () {
var filter_preview = document.querySelector('input[name="filter_preview"]:checked').value;
$('input[name="filter"]').val(filter_preview);
$('form[name="print"]').submit();
});
});
</script>
@endsectionEditor is loading...