/home2/mshostin/crm.ms-hostingladz.com/resources/views/pages/reports/report.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Perfect Scrollbar CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/simplebar.css') }}">
<!-- Fonts CSS -->
<link
href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<!-- Icons CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/feather.css') }}">
<!-- Date Range Picker CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/daterangepicker.css') }}">
<!-- App CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/app-light.css') }}" id="lightTheme" disabled>
<link rel="stylesheet" href="{{ asset('assets/css/app-dark.css') }}" id="darkTheme">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
{{-- @vite(['resources/sass/app.scss', 'resources/js/app.js']) --}}
<style>
.table-responsive {
overflow-x: auto;
max-width: 100%;
}
.table th, .table td {
white-space: nowrap;
min-width: 120px;
}
.table th:first-child, .table td:first-child {
min-width: 100px;
}
.btn-export {
margin: 10px;
}
.export-buttons {
text-align: center;
margin: 20px 0;
}
@media print {
.export-buttons {
display: none !important;
}
}
</style>
</head>
<body class="vertical dark ">
<div id="app" class="wrapper">
<div class="container p-4 bg-white text-center " id="getPrint">
<div class="bg-white m-auto">
<div class="row">
<div class="col-5">
<img src="{{ asset('assets/images/unnamed.png') }}" class="img-fluid" alt="main_logo"
style="width: 200px;">
</div>
<div class="col-7 text-end" style=" padding-top:2.4rem;">
<h5 class=" fs-1">NEW CRM</h5>
<p style="font-size: 1.2rem"><span class="bg-dark text-white">COMPLAINT TYPE REPORT</span></p>
<h5 style="font-size: 0.8rem">ISSUE DATE: {{ \Carbon\Carbon::now()->format('d F Y, h:i A') }}
</h5>
</div>
<div class="col-12 mt-2">
<div class="text-center mt-4">
<b>From {{ \Carbon\Carbon::parse($dateS)->format('d F Y') }} to
{{ \Carbon\Carbon::parse($dateE)->format('d F Y') }}</b>
<br />
@if ($type != null)
<b>Complaint Type : {{ $type->title }}</b>
@endif
@if ($source != null)
<b>Source : {{ $source }}</b>
@endif
@if ($prio != null)
<b>Priority : {{ $prio->title }}</b>
@endif
@if ($consumer != null)
<b>Consumer Number : {{ $consumer }}</b>
@endif
</div>
<!-- Export Buttons -->
<div class="export-buttons">
<button type="button" onclick="exportToExcel()" class="btn btn-success btn-lg btn-export">
<i class="fas fa-file-excel"></i> Export to Excel
</button>
</div>
<div class="table-responsive mt-4">
<table class="table table-striped table-bordered">
<thead>
<tr style="background-color:#5b9bd5; color: #FFF !important;">
<th class="text-white">Date</th>
@foreach (array_unique(array_column($complaints->toArray(), 'type_id')) as $complaintTypeId)
<th class="text-white">{{ $complaints->firstWhere('type_id', $complaintTypeId)->type->title }}
</th>
@endforeach
</tr>
</thead>
<tbody>
@foreach ($complaints->groupBy('date') as $date => $complaintsByDate)
<tr>
<td>{{ $date }}</td>
@foreach ($complaints->pluck('type')->unique('id') as $complaintType)
@php
$count = $complaintsByDate
->where('type_id', $complaintType->id)
->sum('num_complaints');
@endphp
<td>{{ $count ?? 0 }}</td>
@endforeach
</tr>
@endforeach
<tr>
<td><strong>Total</strong></td>
@foreach (array_unique(array_column($complaints->toArray(), 'type_id')) as $complaintTypeId)
<td><b>{{ $complaints->where('type_id', $complaintTypeId)->sum('num_complaints') }}</b>
</td>
@endforeach
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Core JS Files -->
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/popper.min.js') }}"></script>
<script src="{{ asset('assets/js/moment.min.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/js/simplebar.min.js') }}"></script>
<script src='{{ asset('assets/js/daterangepicker.js') }}'></script>
<script src='{{ asset('assets/js/jquery.stickOnScroll.js') }}'></script>
<script src="{{ asset('assets/js/chroma.min.js') }}"></script>
<script src="{{ asset('assets/js/ifbreakpoint.js') }}"></script>
<script src="{{ asset('assets/js/config.js') }}"></script>
<script src="{{ asset('assets/js/theme.switcher.js') }}"></script>
<script src="{{ asset('assets/js/d3.min.js') }}"></script>
<script src="{{ asset('assets/js/leaflet.js') }}"></script>
<script src="{{ asset('assets/js/map.world.js') }}"></script>
<script src="{{ asset('assets/js/map.euro.js') }}"></script>
<script src="{{ asset('assets/js/map.us.js') }}"></script>
<script src="{{ asset('assets/js/maps.custom.js') }}"></script>
<!-- select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- select2 -->
<script>
$(document).ready(function() {
// Select2 Multiple
$('.select2-multiple').select2({
placeholder: "Select",
allowClear: true
});
$('.select2-multiple2').select2({
placeholder: "Select",
allowClear: true
});
});
function getPrint() {
var elem = document.getElementById('getPrint');
var print_area = window.open();
print_area.document.write('<html>');
print_area.document.write(
'<link rel="dns-prefetch" href="//fonts.gstatic.com"><link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet"><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" /><link href="{{ asset('assets/css/nucleo-icons.css') }}" rel="stylesheet" /><link href="{{ asset('assets/css/nucleo-svg.css') }}" rel="stylesheet" /><link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"><link id="pagestyle" href="{{ asset('assets/css/material-dashboard.css?v=3.0.0') }}" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" /><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw=="crossorigin="anonymous" referrerpolicy="no-referrer" /><link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />'
);
print_area.document.write('<body>');
print_area.document.write(elem.innerHTML);
print_area.document.write('</body></html>');
// print_area.focus();
print_area.print();
// print_area.close();
}
function exportToExcel() {
// Create a table element for export
var table = document.querySelector('table');
var html = table.outerHTML;
// Create download link
var link = document.createElement('a');
link.download = 'complaint_type_report.xls';
link.href = 'data:application/vnd.ms-excel,' + encodeURIComponent(html);
link.click();
}
// Auto-hide export buttons on print
window.addEventListener('beforeprint', function() {
document.querySelectorAll('.export-buttons').forEach(btn => btn.style.display = 'none');
});
window.addEventListener('afterprint', function() {
document.querySelectorAll('.export-buttons').forEach(btn => btn.style.display = 'block');
});
var ctx = document.getElementById("chart-bars").getContext("2d");
new Chart(ctx, {
type: "bar",
data: {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: [{
label: "Sales",
tension: 0.4,
borderWidth: 0,
borderRadius: 4,
borderSkipped: false,
backgroundColor: "rgba(255, 255, 255, .8)",
data: [50, 20, 10, 22, 50, 10, 40],
maxBarThickness: 6
}, ],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}
},
interaction: {
intersect: false,
mode: 'index',
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5],
color: 'rgba(255, 255, 255, .2)'
},
ticks: {
suggestedMin: 0,
suggestedMax: 500,
beginAtZero: true,
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: 'normal',
lineHeight: 2
},
color: "#fff"
},
},
x: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5],
color: 'rgba(255, 255, 255, .2)'
},
ticks: {
display: true,
color: '#f8f9fa',
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: 'normal',
lineHeight: 2
},
}
},
},
},
});
var ctx2 = document.getElementById("chart-line").getContext("2d");
new Chart(ctx2, {
type: "line",
data: {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Mobile apps",
tension: 0,
borderWidth: 0,
pointRadius: 5,
pointBackgroundColor: "rgba(255, 255, 255, .8)",
pointBorderColor: "transparent",
borderColor: "rgba(255, 255, 255, .8)",
borderColor: "rgba(255, 255, 255, .8)",
borderWidth: 4,
backgroundColor: "transparent",
fill: true,
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
maxBarThickness: 6
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}
},
interaction: {
intersect: false,
mode: 'index',
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5],
color: 'rgba(255, 255, 255, .2)'
},
ticks: {
display: true,
color: '#f8f9fa',
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: 'normal',
lineHeight: 2
},
}
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
borderDash: [5, 5]
},
ticks: {
display: true,
color: '#f8f9fa',
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: 'normal',
lineHeight: 2
},
}
},
},
},
});
var ctx3 = document.getElementById("chart-line-tasks").getContext("2d");
new Chart(ctx3, {
type: "line",
data: {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Mobile apps",
tension: 0,
borderWidth: 0,
pointRadius: 5,
pointBackgroundColor: "rgba(255, 255, 255, .8)",
pointBorderColor: "transparent",
borderColor: "rgba(255, 255, 255, .8)",
borderWidth: 4,
backgroundColor: "transparent",
fill: true,
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
maxBarThickness: 6
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}
},
interaction: {
intersect: false,
mode: 'index',
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5],
color: 'rgba(255, 255, 255, .2)'
},
ticks: {
display: true,
padding: 10,
color: '#f8f9fa',
font: {
size: 14,
weight: 300,
family: "Roboto",
style: 'normal',
lineHeight: 2
},
}
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
borderDash: [5, 5]
},
ticks: {
display: true,
color: '#f8f9fa',
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: 'normal',
lineHeight: 2
},
}
},
},
},
});
</script>
<script>
var win = navigator.platform.indexOf('Win') > -1;
if (win && document.querySelector('#sidenav-scrollbar')) {
var options = {
damping: '0.5'
}
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
}
</script>
<!-- Github buttons -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="{{ asset('assets/js/material-dashboard.min.js?v=3.0.0') }}"></script>
</body>
</html>