574 lines
26 KiB
PHP
574 lines
26 KiB
PHP
@extends('layouts.master')
|
|
|
|
@section('styles')
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
|
|
<style>
|
|
.select2-container .select2-selection--single {
|
|
height: 48px;
|
|
}
|
|
|
|
.select2-container--default
|
|
.select2-selection--single
|
|
.select2-selection__rendered {
|
|
line-height: 38px;
|
|
}
|
|
|
|
.select2-container--default
|
|
.select2-selection--single
|
|
.select2-selection__arrow {
|
|
height: 38px;
|
|
}
|
|
.table th {
|
|
text-align: center;
|
|
}
|
|
.table td {
|
|
/* text-align: right; */
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- partial -->
|
|
<div class="container-fluid page-body-wrapper">
|
|
<div class="main-panel">
|
|
<div class="content-wrapper">
|
|
<div class="row">
|
|
<div class="col-md-12 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Laporan Stiker Harian</h4>
|
|
<form id="formTanggal">
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
<div class="d-flex gap-2">
|
|
<input type="date" class="form-control" id="tanggalMulai" name="tanggal_mulai">
|
|
</div>
|
|
<div class="mt-3">
|
|
<input type="text" class="form-control" id="cari_data" name="cariData" placeholder="Cari berdasarkan Nama">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<div class="d-flex gap-2">
|
|
<input type="date" class="form-control" id="tanggalSelesai" name="tanggal_selesai">
|
|
</div>
|
|
<div class="mt-3">
|
|
<input type="text" class="form-control" id="cari_nopol" name="cariData" placeholder="Cari berdasarkan No. Polisi">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<div class="mt-1">
|
|
<select id="jenisLangganan" class="form-control js-example-basic-multiple" data-placeholder="Jenis Langganan : (SEMUA)" multiple="multiple">
|
|
@foreach ($filterSelect['jenisLangganan'] as $jenisLangganan )
|
|
<option value="{{ $jenisLangganan->id }}">{{ $jenisLangganan->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="mt-4">
|
|
<select id="jenisStiker" class="form-control js-example-basic-multiple" data-placeholder="Jenis Stiker : (SEMUA)" multiple="multiple">
|
|
@foreach ($filterSelect['jenisStiker'] as $jStiker )
|
|
<option value="{{ $jStiker->kode }}">{{ $jStiker->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-1 d-flex justify-content-center align-items-center">
|
|
<button type="button" id="btnProses"
|
|
class="btn btn-light btn-lg w-100">
|
|
Proses
|
|
</button>
|
|
</div>
|
|
<div class="col-sm-1">
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<div class="form-group">
|
|
<p>Jumlah Pendapatan : </p> <h3 id="pendapatan"></h3><br>
|
|
<p>Jumlah Transaksi : </p> <h3 id="jmlTrans"></h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-1">
|
|
<button type="button" class="btn btn-info btn-icon-text btn-export-pdf">
|
|
Print
|
|
<i class="mdi mdi-printer btn-icon-append"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="table-bordered" id="cetak">
|
|
<table id="table-stiker" class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th width="3%">No.</th>
|
|
<th width="10%">No. Transaksi</th>
|
|
<th>Nama</th>
|
|
<th>No. Telp</th>
|
|
<th>Alamat / Email</th>
|
|
<th>Jenis<br>Langganan</th>
|
|
<th>Jenis<br>Stiker</th>
|
|
<th width="15%">Periode</th>
|
|
<th>No. Polisi<br>Terdaftar</th>
|
|
<th>Jenis Trans</th>
|
|
<th>Harga</th>
|
|
<th>Tanggal</th>
|
|
<th>Petugas</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbodyResult">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('javascript')
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
|
|
|
|
<script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
|
|
<script src="{{ asset('js/select2.js') }}"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
let location = @json($filterSelect['softsetting'] ?? '');
|
|
console.log(location?.namaperusahaan);
|
|
|
|
let awal = '';
|
|
let akhir = '';
|
|
let pendapatan = 0;
|
|
let jmlTrans = 0;
|
|
let pdfData = [];
|
|
let today = new Date().toISOString().split('T')[0];
|
|
console.log(today);
|
|
|
|
$('#tanggalMulai').val(new Date().toISOString().split('T')[0]);
|
|
$('#tanggalSelesai').val(new Date().toISOString().split('T')[0]);
|
|
|
|
$('#btnProses').on('click', function () {
|
|
|
|
const jenisLangganan = $('#jenisLangganan').val();
|
|
const jenisStiker = $('#jenisStiker').val();
|
|
const nama = $('#cari_data').val();
|
|
const nopol = $('#cari_nopol').val();
|
|
|
|
awal = $('#tanggalMulai').val();
|
|
akhir = $('#tanggalSelesai').val();
|
|
|
|
|
|
// if (!jenisLangganan || jenisLangganan.length === 0) {
|
|
// alert('Pilih minimal 1 jenis langganan');
|
|
// return;
|
|
// }
|
|
|
|
if (!awal || !akhir) {
|
|
alert('Periode harus diisi');
|
|
return;
|
|
}
|
|
|
|
const btn = $(this);
|
|
|
|
btn.prop('disabled', true).text('Memproses...');
|
|
$('#alertSuccess').addClass('d-none');
|
|
|
|
$.ajax({
|
|
url: "{{ route('stikerData') }}",
|
|
type: "GET",
|
|
data: {
|
|
jenis_langganan: jenisLangganan,
|
|
jenis_stiker: jenisStiker,
|
|
tanggalAwal: awal,
|
|
tanggalAkhir: akhir,
|
|
name: nama,
|
|
no_pol: nopol,
|
|
_token: "{{ csrf_token() }}"
|
|
},
|
|
success: function(response) {
|
|
pdfData = response.data;
|
|
console.log(response);
|
|
const tbody = $('#tbodyResult');
|
|
tbody.empty();
|
|
pendapatan = 0;
|
|
jmlTrans = 0;
|
|
$('#jmlTrans').text('');
|
|
|
|
// $.each(response.data, function (i, row) {
|
|
|
|
// pendapatan += parseInt(row.harga || 0, 10);
|
|
|
|
// tbody.append(`
|
|
// <tr>
|
|
// <td class="text-center">${i + 1}</td>
|
|
// <td class="text-center">${row.notrans ?? '-'}</td>
|
|
// <td class="text-left">${row.nama ?? '-'}</td>
|
|
// <td class="text-left">${row.telepon ?? '-'}</td>
|
|
// <td class="text-left">${row.alamat ?? '-'}</td>
|
|
// <td class="text-center">${row.awal ?? '-'} - ${row.akhir ?? '-'}</td>
|
|
// <td class="text-center">${row.nopol ?? '-'}</td>
|
|
// <td>${row.jenis_langganan ?? '-'}</td>
|
|
// <td>${row.harga ?? ''}</td>
|
|
// <td>${row.tgl_edited ?? ''}</td>
|
|
// <td class="text-end">${row.operator ?? ''}</td>
|
|
// </tr>
|
|
// `);
|
|
// });
|
|
|
|
// initDataTable();
|
|
|
|
// 🔥 sortable aktif
|
|
if (!response.success) return;
|
|
// const tbody = $('#tbodyResult');
|
|
// tbody.empty(); // 🔥 hapus isi lama
|
|
|
|
if (response.data.length === 0) {
|
|
tbody.append(`
|
|
<tr>
|
|
<td colspan="11" class="text-center text-danger text-muted">
|
|
Tidak ada data
|
|
</td>
|
|
</tr>
|
|
`);
|
|
return;
|
|
}
|
|
|
|
$.each(response.data, function (i, row) {
|
|
|
|
pendapatan += parseInt(row.tarif || 0, 10);
|
|
jmlTrans += 1;
|
|
awalDate = row.awal.toString('YYYY-MM-DD');
|
|
tbody.append(`
|
|
<tr>
|
|
<td class="text-center">${i + 1}</td>
|
|
<td class="text-center">${row.notrans ?? '-'}</td>
|
|
<td class="text-left">${row.nama ?? '-'}</td>
|
|
<td class="text-center">${row.telp ?? '-'}</td>
|
|
<td class="text-center">${row.alamat ?? '-'}</td>
|
|
<td class="text-center">${row.jenis_langganan ?? '-'}</td>
|
|
<td class="text-center">${row.stasiunkerja ?? '-'}</td>
|
|
<td>
|
|
${row.awal.split(' ')[0] ?? ''}
|
|
<small class="text-muted">s/d ${row.akhir.split(' ')[0] ?? ''}</small>
|
|
</td>
|
|
<td class="text-center">${row.nopol ?? '-'}</td>
|
|
<td>${row.jenis_member ?? '-'}</td>
|
|
<td>${row.tarif ?? ''}</td>
|
|
<td>${row.tgl_edited ?? ''}</td>
|
|
<td class="text-end">${row.petugas ?? ''}</td>
|
|
</tr>
|
|
`);
|
|
// <td>${row.jenis_langganan ?? '-'}</td>
|
|
});
|
|
|
|
$('#pendapatan').text('Rp. ' + rupiah(pendapatan));
|
|
$('#jmlTrans').text(rupiah(jmlTrans));
|
|
// console.log(jmlTrans);
|
|
|
|
btn.prop('disabled', false).text('Proses');
|
|
|
|
},
|
|
error: function (xhr) {
|
|
console.log(xhr.responseText);
|
|
}
|
|
});
|
|
});
|
|
|
|
function rupiah(angka) {
|
|
return new Intl.NumberFormat('id-ID').format(angka || 0);
|
|
}
|
|
|
|
|
|
// let table;
|
|
// function initDataTable() {
|
|
// if ($.fn.DataTable.isDataTable('#table-stiker')) {
|
|
// table.destroy(); // reset kalau reload data
|
|
// }
|
|
|
|
// table = $('#table-stiker').DataTable({
|
|
// order: [[1, 'desc']], // default sort No Transaksi
|
|
// pageLength: 10,
|
|
// lengthChange: true,
|
|
// searching: false,
|
|
// info: true,
|
|
// });
|
|
// }
|
|
|
|
$('.btn-export-pdf').on('click', function () {
|
|
|
|
const { jsPDF } = window.jspdf;
|
|
|
|
const doc = new jsPDF({
|
|
orientation: 'portrait',
|
|
unit: 'mm',
|
|
format: 'a4'
|
|
});
|
|
|
|
const pageWidth = doc.internal.pageSize.getWidth();
|
|
const pageHeight = doc.internal.pageSize.getHeight();
|
|
|
|
const marginLeft = 10;
|
|
const marginRight = 10;
|
|
const marginTop = 20;
|
|
const marginBottom = 20;
|
|
|
|
// =========================
|
|
// HEADER FUNCTION
|
|
// =========================
|
|
const drawHeader = () => {
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.setFontSize(14);
|
|
doc.text('LAPORAN STIKER HARIAN', pageWidth / 2, 15, { align: 'center' });
|
|
|
|
doc.setFontSize(10);
|
|
doc.setFont('helvetica', 'normal');
|
|
doc.text('PT PARKIR MAJU JAYA', pageWidth / 2, 22, { align: 'center' });
|
|
|
|
doc.setFontSize(9);
|
|
doc.text(`Periode : ${awal} s/d ${akhir}`, marginLeft, 32);
|
|
doc.text(
|
|
`Dicetak : ${new Date().toLocaleDateString('id-ID')}`,
|
|
pageWidth - marginRight,
|
|
32,
|
|
{ align: 'right' }
|
|
);
|
|
|
|
doc.text(`Jumlah Pendapatan : ${rupiah(pendapatan)}`, marginLeft, 38);
|
|
doc.text(`Jumlah Transaksi : ${jmlTrans}`, marginLeft, 38);
|
|
|
|
// garis pemisah
|
|
doc.line(marginLeft, 40, pageWidth - marginRight, 40);
|
|
};
|
|
|
|
// =========================
|
|
// BODY DATA
|
|
// =========================
|
|
if (pdfData.length === 0) {
|
|
alert('Data belum tersedia');
|
|
return;
|
|
}
|
|
|
|
const tableBody = pdfData.map((row, i) => ([
|
|
i + 1,
|
|
row.notrans ?? '-',
|
|
row.nama ?? '-',
|
|
// row.telepon ?? '-',
|
|
row.nopol ?? '-',
|
|
row.jenis_langganan ?? '-',
|
|
`${row.awal ?? '-'} s/d ${row.akhir ?? '-'}`,
|
|
rupiah(row.harga),
|
|
// row.operator ?? '-'
|
|
]));
|
|
|
|
// =========================
|
|
// AUTOTABLE
|
|
// =========================
|
|
doc.autoTable({
|
|
head: [[
|
|
'No',
|
|
'No Transaksi',
|
|
'Nama',
|
|
// 'Telepon',
|
|
'No Pol',
|
|
'Jenis',
|
|
'Periode',
|
|
'Harga',
|
|
// 'Operator'
|
|
]],
|
|
|
|
body: tableBody,
|
|
|
|
startY: 45,
|
|
|
|
margin: {
|
|
left: marginLeft,
|
|
right: marginRight,
|
|
top: marginTop,
|
|
bottom: marginBottom
|
|
},
|
|
|
|
styles: {
|
|
fontSize: 8,
|
|
cellPadding: 2,
|
|
valign: 'middle'
|
|
},
|
|
|
|
headStyles: {
|
|
fillColor: [220, 220, 220],
|
|
textColor: 20,
|
|
fontStyle: 'bold',
|
|
halign: 'center'
|
|
},
|
|
|
|
columnStyles: {
|
|
0: { halign: 'center', cellWidth: 10 },
|
|
7: { halign: 'right' }
|
|
},
|
|
|
|
didDrawPage: function (pdfData) {
|
|
// drawHeader();
|
|
if (pdfData.pageNumber === 1) {
|
|
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.setFontSize(14);
|
|
doc.text('LAPORAN STIKER HARIAN', pageWidth / 2, 15, { align: 'center' });
|
|
|
|
doc.setFontSize(10);
|
|
doc.setFont('helvetica', 'normal');
|
|
doc.text(location.namaperusahaan, pageWidth / 2, 22, { align: 'center' });
|
|
|
|
doc.setFontSize(9);
|
|
doc.text(`Periode : ${awal} s/d ${akhir}`, marginLeft, 32);
|
|
doc.text(
|
|
`Dicetak : ${new Date().toLocaleDateString('id-ID')}`,
|
|
pageWidth - marginRight,
|
|
32,
|
|
{ align: 'right' }
|
|
);
|
|
|
|
doc.text(`Jumlah Pendapatan : ${rupiah(pendapatan)}`, marginLeft, 38);
|
|
doc.text(
|
|
`Jumlah Transaksi : ${rupiah(jmlTrans)}`,
|
|
pageWidth - marginRight,
|
|
38,
|
|
{ align: 'right'}
|
|
);
|
|
|
|
doc.line(marginLeft, 40, pageWidth - marginRight, 40);
|
|
}
|
|
|
|
// FOOTER
|
|
// const pageCount = doc.internal.getNumberOfPages();
|
|
doc.setFontSize(8);
|
|
doc.text(
|
|
// `Halaman ${doc.internal.getCurrentPageInfo().pageNumber} dari ${pdfData.pageNumber}`,
|
|
`Halaman ${pdfData.pageNumber}`,
|
|
pageWidth / 2,
|
|
pageHeight - 10,
|
|
{ align: 'center' }
|
|
);
|
|
}
|
|
});
|
|
|
|
doc.save('Rekap_Harian.pdf');
|
|
});
|
|
});
|
|
|
|
// $('.btn-export-pdf').on('click', async function () {
|
|
|
|
// const { jsPDF } = window.jspdf;
|
|
|
|
// const doc = new jsPDF({
|
|
// orientation: 'portrait',
|
|
// unit: 'mm',
|
|
// format: 'a4'
|
|
// });
|
|
|
|
// const element = document.getElementById('cetak');
|
|
|
|
// const canvas = await html2canvas(element, {
|
|
// scale: 2,
|
|
// useCORS: true
|
|
// });
|
|
|
|
// const imgData = canvas.toDataURL('image/png');
|
|
|
|
// const pageWidth = doc.internal.pageSize.getWidth();
|
|
// const pageHeight = doc.internal.pageSize.getHeight();
|
|
|
|
// const marginTop = 20;
|
|
// const marginBottom = 20;
|
|
// const marginLeft = 10;
|
|
// const marginRight = 10;
|
|
|
|
// const headerHeight = 45; // ⬅️ ruang judul
|
|
// const contentHeight = pageHeight - headerHeight - marginBottom;
|
|
|
|
// const imgWidth = pageWidth - marginLeft - marginRight;
|
|
// const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
|
|
|
// let renderedHight = 0;
|
|
// let page = 1;
|
|
// let renderedHeight = 0;
|
|
|
|
// while (renderedHeight < imgHeight) {
|
|
|
|
// if (page > 1) doc.addPage();
|
|
|
|
// doc.setFont('helvetica', 'bold');
|
|
// doc.setFontSize(14);
|
|
// doc.text('LAPORAN STIKER HARIAN', pageWidth / 2, 15, { align: 'center' });
|
|
|
|
// // SUB JUDUL
|
|
// doc.setFontSize(10);
|
|
// doc.setFont('helvetica', 'normal');
|
|
// doc.text('PT PARKIR MAJU JAYA', pageWidth / 2, 22, { align: 'center' });
|
|
|
|
// doc.setFontSize(9);
|
|
// doc.text(`Periode : ${awal} s/d ${akhir}`, marginLeft, 32);
|
|
// doc.text(`Dicetak : ${new Date().toLocaleDateString('id-ID')}`, pageWidth - marginRight, 32, {
|
|
// align: 'right'
|
|
// });
|
|
|
|
// doc.setFontSize(9);
|
|
// doc.text(`Jumlah Pendapatan : ${pendapatan}`, marginLeft, 38);
|
|
// doc.text(`Jumlah Pendapatan : 15`, pageWidth - marginRight, 38, {
|
|
// align: 'right'
|
|
// });
|
|
|
|
// doc.addImage(
|
|
// imgData,
|
|
// 'PNG',
|
|
// marginLeft,
|
|
// marginTop - renderedHeight,
|
|
// imgWidth,
|
|
// imgHeight
|
|
// );
|
|
|
|
// renderedHeight += contentHeight;
|
|
// page++;
|
|
// }
|
|
// doc.save('Rekap_Harian.pdf');
|
|
// });
|
|
// halaman berikutnya
|
|
// while (heightLeft > 0) {
|
|
// position = heightLeft - imgHeight + marginTop;
|
|
// doc.addPage();
|
|
// // doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
|
|
// doc.addImage(
|
|
// imgData,
|
|
// 'PNG',
|
|
// marginLeft,
|
|
// position,
|
|
// imgWidth,
|
|
// imgHeight
|
|
// );
|
|
// heightLeft -= (pageHeight - marginTop - marginBottom);
|
|
// }
|
|
// $('.btn-export-pdf').on('click', async function () {
|
|
// // $('.cetak').css('display','block');
|
|
// // $('.user').css('display','block');
|
|
// const { jsPDF } = window.jspdf;
|
|
// const doc = new jsPDF({
|
|
// orientation: 'portrait',
|
|
// unit: 'mm',
|
|
// format: 'a4'});
|
|
// // 'l', 'pt'
|
|
// // ambil elemen tabel
|
|
// const table = document.getElementById('cetak');
|
|
// const canvas = await html2canvas(table, { scale: 2 });
|
|
// const imgData = canvas.toDataURL('image/png');
|
|
// const imgWidth = doc.internal.pageSize.getWidth();
|
|
// const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
|
// doc.addImage(imgData, 'PNG', 0, 20, imgWidth, imgHeight);
|
|
// doc.save(`Rekap Harian.pdf`);
|
|
// });
|
|
</script>
|
|
@endsection |