Server : LiteSpeed System : Linux barito.iixcp.rumahweb.net 5.14.0-611.49.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Apr 21 16:39:08 EDT 2026 x86_64 User : elvh3918 ( 1528) PHP Version : 8.2.31 Disable Function : mail Directory : /home/elvh3918/public_html/pmm/storage/framework/views/ |
<?php $__env->startSection('content-guest-donut'); ?>
<div class="card" style="height: 350px; overflow-y: auto;">
<div class="card-header border-0">
<div class="d-flex justify-content-between">
<h3 class="card-title">Top 8 Item Visit<span id="lbl_year_donut_item" class="ml-1"></span></h3>
<a href="javascript:void(0);" onclick='report_donut(<?php echo e($query_customer->id); ?>)'>View Report</a>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div class="chart-responsive mb-1" id="lbl_piechart_donut_item">
<div class="flex animate-pulse space-x-4">
<div class="size-10 rounded-full bg-gray-200"></div>
<div class="flex-1 space-y-6 py-1">
<div class="h-2 rounded bg-gray-200"></div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 h-2 rounded bg-gray-200"></div>
<div class="col-span-1 h-2 rounded bg-gray-200"></div>
</div>
<div class="h-2 rounded bg-gray-200"></div>
<div class="h-2 rounded bg-gray-200"></div>
<div class="h-2 rounded bg-gray-200"></div>
<div class="h-2 rounded bg-gray-200"></div>
<div class="h-2 rounded bg-gray-200"></div>
</div>
</div>
</div>
</div>
<!-- ./chart-responsive -->
</div>
<!-- /.col -->
<div class="col-md-4">
<div class="d-flex flex-column" style="height: 200px; overflow-y: auto;"id="lbl_item_donut_item">
<div class="flex animate-pulse space-x-4">
<div class="size-10 rounded-full bg-gray-200"></div>
<div class="flex-1 space-y-6 py-1">
<div class="h-2 rounded bg-gray-200"></div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 h-2 rounded bg-gray-200"></div>
<div class="col-span-1 h-2 rounded bg-gray-200"></div>
</div>
<div class="h-2 rounded bg-gray-200"></div>
<div class="h-2 rounded bg-gray-200"></div>
<div class="h-2 rounded bg-gray-200"></div>
<div class="h-2 rounded bg-gray-200"></div>
<div class="h-2 rounded bg-gray-200"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /.col -->
</div>
</div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('page-script-guest-donut'); ?>
<script>
function showDonut(customer_id) {
let year = new Date(<?php echo json_encode(\Carbon\Carbon::now()); ?>);
year = year.getFullYear();
document.getElementById('lbl_year_donut_item').innerHTML = year;
$.ajax({
dataType: 'json',
type: "GET",
url: '<?php echo e(env('APP_URL')); ?>' + "/api/dashboard/show-visit-item-customer/" + customer_id,
success: function(res) {
if (res.length == 0) {
document.getElementById('lbl_piechart_donut_item').innerHTML = 'No Data';
document.getElementById('lbl_item_donut_item').innerHTML = 'No Data';
return;
} else {
document.getElementById('lbl_piechart_donut_item').innerHTML = '<canvas id="pieChart"></canvas>';
document.getElementById('lbl_item_donut_item').innerHTML = setCustomerList(res);
setShowVisitDonut(res);
}
},
error: function(xhr, status, error) {
document.getElementById('lbl_piechart_donut_item').innerHTML = error;
document.getElementById('lbl_item_donut_item').innerHTML = error;
return;
}
});
}
function setCustomerList(data) {
let html = '';
for (let index = 0; index < data.length; index++) {
html += '<span class="mr-2">';
html += '<i class="fas fa-circle mr-2" style="color:' + data[index]['color'] + ';"></i> ' + data[index]['name'] + ' <span class="badge badge-pill badge-secondary">' + data[index]['visit'] + '</span>';
html += '</span>';
}
return html;
}
function setShowVisitDonut(data) {
const customer = [];
const value = [];
const color = [];
for (let index = 0; index < data.length; index++) {
customer.push(data[index]['name']);
value.push(data[index]['visit']);
color.push(data[index]['color']);
}
var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
var pieData = {
labels: customer,
datasets: [
{
data: value,
backgroundColor: color
}
]
}
var pieOptions = {
legend: {
display: false
}
}
var pieChart = new Chart(pieChartCanvas, {
type: 'doughnut',
data: pieData,
options: pieOptions
})
}
function report_donut(customer_id) {
var date_now = new Date(<?php echo json_encode(\Carbon\Carbon::now()); ?>);
var date_from = new Date(date_now.getFullYear(), 0, 1);
date_from = moment(date_from).format('YYYY-MM-DD');
var date_to = moment(date_now).format('YYYY-MM-DD');
var url = "<?php echo e(route('guest.report', [':customer_id', 0, ':date_from', ':date_to', ':item_code'])); ?>";
url = url.replace(':customer_id', customer_id);
url = url.replace(':date_from', date_from);
url = url.replace(':date_to', date_to);
url = url.replace(':item_code', null);
location.href = url;
}
</script>
<?php $__env->stopSection(); ?><?php /**PATH /home/elvh3918/public_html/pmm/resources/views/content/guest/partials/donut.blade.php ENDPATH**/ ?>