1255 lines
48 KiB
PHP
1255 lines
48 KiB
PHP
@extends('layouts.backapp')
|
|
|
|
@section('styles')
|
|
<style>
|
|
/* Loading overlay - Modified to only cover content section */
|
|
#loading-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
#loading-overlay .spinner-border {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Make content section relative for absolute positioning of overlay */
|
|
.kt-content {
|
|
position: relative;
|
|
}
|
|
|
|
/* Button loading state */
|
|
.btn.loading {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Table styling */
|
|
.table th {
|
|
background-color: #f8f9fa;
|
|
border-color: #dee2e6;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.table td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Mechanic column styling */
|
|
.mechanic-column {
|
|
background-color: #f8f9fa;
|
|
min-width: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Select2 styling - Fixed to prevent conflicts */
|
|
.select2-container--default .select2-selection--single {
|
|
height: 38px !important;
|
|
border: 1px solid #ced4da !important;
|
|
border-radius: 0.375rem !important;
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
line-height: 36px !important;
|
|
padding-left: 12px !important;
|
|
color: #495057 !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
height: 36px !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.select2-container--default .select2-search--dropdown .select2-search__field {
|
|
border: 1px solid #ced4da !important;
|
|
border-radius: 0.375rem !important;
|
|
background-color: #ffffff !important;
|
|
color: #495057 !important;
|
|
}
|
|
|
|
.select2-dropdown {
|
|
border: 1px solid #ced4da !important;
|
|
border-radius: 0.375rem !important;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option {
|
|
background-color: #ffffff !important;
|
|
color: #495057 !important;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
|
background-color: #007bff !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option[aria-selected=true] {
|
|
background-color: #e9ecef !important;
|
|
color: #495057 !important;
|
|
}
|
|
|
|
/* Form label styling */
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #595d6e;
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
display: block;
|
|
}
|
|
|
|
/* Filter buttons styling */
|
|
.filter-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
.filter-buttons .btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Datepicker styling */
|
|
.datepicker {
|
|
width: 100% !important;
|
|
max-width: 100%;
|
|
}
|
|
.datepicker-dropdown {
|
|
width: auto !important;
|
|
min-width: 250px;
|
|
max-width: 300px;
|
|
}
|
|
/* Ensure input field follows parent width */
|
|
input.datepicker {
|
|
width: 100% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="kt-content" id="kt_content">
|
|
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
|
|
<div class="kt-portlet__head kt-portlet__head--lg">
|
|
<div class="kt-portlet__head-label">
|
|
<h3 class="kt-portlet__head-title">
|
|
Laporan Teknisi
|
|
</h3>
|
|
</div>
|
|
<div class="kt-portlet__head-toolbar">
|
|
<div class="kt-portlet__head-actions">
|
|
<button type="button" class="btn btn-bold btn-success btn--sm" id="btn-export-excel">
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="kt-portlet__body">
|
|
<!-- Filter Section -->
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label class="form-label">Tanggal Mulai</label>
|
|
<input type="text" class="form-control datepicker" id="filter-start-date" placeholder="Tanggal awal" value="{{ date('Y-m-d', strtotime('-30 days')) }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label class="form-label">Tanggal Akhir</label>
|
|
<input type="text" class="form-control datepicker" id="filter-end-date" placeholder="Tanggal akhir" value="{{ date('Y-m-d') }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="form-label">Filter Dealer</label>
|
|
<select class="form-control select2" id="filter-dealer">
|
|
<option value="">Semua Dealer</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-12 filter-buttons">
|
|
<button type="button" class="btn btn-primary btn-sm" id="btn-filter">
|
|
Cari
|
|
</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" id="btn-reset">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-12">
|
|
<small class="form-text text-muted" id="default-dealer-info">Pilih dealer untuk memfilter data atau biarkan "Semua Dealer" untuk melihat data lengkap.</small>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Table Section --}}
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered" id="report-technician-table">
|
|
<thead id="table-header">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Pekerjaan</th>
|
|
<th>Kode Pekerjaan</th>
|
|
<th>Kategori</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
<tfoot id="table-footer">
|
|
<tr>
|
|
<th colspan="4" class="text-center">Total</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('javascripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Check if jQuery and DataTable are available
|
|
if (typeof $ === 'undefined') {
|
|
console.error('jQuery is not loaded');
|
|
return;
|
|
}
|
|
|
|
if (typeof $.fn.DataTable === 'undefined') {
|
|
console.error('DataTable is not loaded');
|
|
// Show error message to user
|
|
$('body').append('<div class="alert alert-danger m-3">DataTable library tidak dimuat. Silakan refresh halaman.</div>');
|
|
return;
|
|
}
|
|
|
|
let dataTable;
|
|
let mechanics = [];
|
|
let isInitialized = false; // Flag to prevent double initialization
|
|
|
|
// Loading overlay functions - Modified to only cover content section
|
|
var showLoadingOverlay = function (message) {
|
|
const $content = $('#kt_content');
|
|
|
|
if ($("#loading-overlay").length === 0) {
|
|
$content.append(`
|
|
<div id="loading-overlay" style="
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
">
|
|
<div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
<div class="text-light mt-3" style="font-size: 1.1rem; font-weight: 500;">${message}</div>
|
|
</div>
|
|
`);
|
|
} else {
|
|
$("#loading-overlay").show();
|
|
$("#loading-overlay .text-light:last").text(message);
|
|
}
|
|
};
|
|
|
|
var hideLoadingOverlay = function () {
|
|
$("#loading-overlay").hide();
|
|
};
|
|
|
|
// Initialize datepickers
|
|
$('.datepicker').datepicker({
|
|
format: 'yyyy-mm-dd',
|
|
autoclose: true,
|
|
todayHighlight: true
|
|
});
|
|
|
|
// Initialize Select2 for dealer dropdown
|
|
function initializeSelect2() {
|
|
console.log("Initializing Select2...");
|
|
|
|
if (typeof $.fn.select2 !== 'undefined') {
|
|
$('#filter-dealer').select2({
|
|
placeholder: 'Pilih...',
|
|
allowClear: true,
|
|
width: '100%'
|
|
});
|
|
} else {
|
|
console.warn('Select2 is not loaded, using default dropdown');
|
|
}
|
|
}
|
|
|
|
// Store original button text
|
|
$('#btn-filter').data('original-text', $('#btn-filter').html());
|
|
|
|
// Load dealers first
|
|
loadDealers();
|
|
|
|
function loadDealers() {
|
|
$.ajax({
|
|
url: '{{ route("reports.technician.dealers") }}',
|
|
type: 'GET',
|
|
success: function(response) {
|
|
console.log('Dealers response:', response);
|
|
if (response.status === 'success') {
|
|
let options = '<option value="">Semua Dealer</option>';
|
|
response.data.forEach(function(dealer) {
|
|
options += `<option value="${dealer.id}">${dealer.name} (${dealer.dealer_code})</option>`;
|
|
});
|
|
$('#filter-dealer').html(options);
|
|
|
|
console.log('Dealers loaded:', response.data.length);
|
|
|
|
// Initialize Select2 after populating options
|
|
initializeSelect2();
|
|
|
|
// Default ke "Semua Dealer" (tidak ada dealer yang terselect)
|
|
console.log('Default set to "Semua Dealer"');
|
|
$('#default-dealer-info').text('Pilih dealer untuk memfilter data atau biarkan "Semua Dealer" untuk melihat data lengkap.');
|
|
|
|
// Load initial DataTable only once
|
|
if (!isInitialized) {
|
|
console.log('Dealers loaded, initializing DataTable...');
|
|
setTimeout(function() {
|
|
initializeDataTable();
|
|
isInitialized = true;
|
|
}, 100);
|
|
}
|
|
} else {
|
|
toastr.error('Gagal memuat data dealer');
|
|
hideLoadingOverlay();
|
|
}
|
|
},
|
|
error: function() {
|
|
toastr.error('Gagal memuat data dealer');
|
|
hideLoadingOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadTechnicianData() {
|
|
console.log('loadTechnicianData called');
|
|
|
|
// Get dealer value from Select2 or regular select
|
|
let dealerId = '';
|
|
if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) {
|
|
dealerId = $('#filter-dealer').select2('val') || '';
|
|
console.log('Using Select2 value:', dealerId);
|
|
} else {
|
|
dealerId = $('#filter-dealer').val() || '';
|
|
console.log('Using regular select value:', dealerId);
|
|
}
|
|
|
|
const startDate = $('#filter-start-date').val();
|
|
const endDate = $('#filter-end-date').val();
|
|
|
|
console.log('Date range:', { startDate, endDate });
|
|
|
|
const requestData = {
|
|
dealer_id: dealerId || '',
|
|
start_date: startDate,
|
|
end_date: endDate
|
|
};
|
|
|
|
console.log('Requesting data with params:', requestData);
|
|
|
|
$.ajax({
|
|
url: '{{ route("reports.technician.data") }}',
|
|
type: 'GET',
|
|
data: requestData,
|
|
success: function(response) {
|
|
|
|
if (response.status === 'success') {
|
|
// Validate response data
|
|
if (response.mechanics && Array.isArray(response.mechanics)) {
|
|
mechanics = response.mechanics;
|
|
} else {
|
|
console.warn('Invalid mechanics data:', response.mechanics);
|
|
mechanics = [];
|
|
}
|
|
|
|
} else {
|
|
console.error('Server returned error status:', response);
|
|
toastr.error('Gagal memuat data laporan teknisi');
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX Error occurred:');
|
|
console.error('Status:', status);
|
|
console.error('Error:', error);
|
|
console.error('Response Text:', xhr.responseText);
|
|
console.error('Status Code:', xhr.status);
|
|
console.error('Status Text:', xhr.statusText);
|
|
|
|
let errorMessage = 'Gagal memuat data laporan teknisi';
|
|
if (xhr.status === 500) {
|
|
errorMessage = 'Server error: ' + (xhr.responseText || 'Unknown error');
|
|
} else if (xhr.status === 404) {
|
|
errorMessage = 'Endpoint tidak ditemukan';
|
|
} else if (xhr.status === 403) {
|
|
errorMessage = 'Akses ditolak';
|
|
}
|
|
|
|
toastr.error(errorMessage);
|
|
},
|
|
complete: function() {
|
|
|
|
// Always reset button state and hide overlay
|
|
hideLoadingOverlay();
|
|
|
|
// Reset button state using stored original text
|
|
var $btnFilter = $('#btn-filter');
|
|
var storedText = $btnFilter.data('original-text') || 'Cari';
|
|
$btnFilter.html(storedText).prop('disabled', false).removeClass('loading');
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeDataTable() {
|
|
try {
|
|
// Destroy existing DataTable if exists and clean up
|
|
if (dataTable && typeof dataTable.destroy === 'function') {
|
|
dataTable.destroy();
|
|
dataTable = null;
|
|
}
|
|
|
|
// Clean up existing search inputs
|
|
$('#datatable-search').closest('.row').remove();
|
|
$('#simple-search').closest('.row').remove();
|
|
|
|
// Completely recreate table structure to avoid DOM conflicts
|
|
const $table = $('#report-technician-table');
|
|
$table.empty();
|
|
|
|
// Recreate basic table structure
|
|
$table.html(`
|
|
<thead id="table-header">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Pekerjaan</th>
|
|
<th>Kode Pekerjaan</th>
|
|
<th>Kategori</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
<tfoot id="table-footer">
|
|
<tr>
|
|
<th colspan="4" class="text-center">Total</th>
|
|
</tr>
|
|
</tfoot>
|
|
`);
|
|
|
|
// Check if DataTable is available
|
|
if (typeof $.fn.DataTable === 'undefined') {
|
|
console.error('DataTable is not loaded');
|
|
return;
|
|
}
|
|
|
|
// Check if table element exists
|
|
if ($table.length === 0) {
|
|
console.error('Table element not found');
|
|
return;
|
|
}
|
|
|
|
// Get filter values
|
|
let dealerId = '';
|
|
if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) {
|
|
dealerId = $('#filter-dealer').select2('val') || '';
|
|
} else {
|
|
dealerId = $('#filter-dealer').val() || '';
|
|
}
|
|
|
|
const startDate = $('#filter-start-date').val();
|
|
const endDate = $('#filter-end-date').val();
|
|
|
|
// Try to initialize DataTable with Yajra DataTable
|
|
try {
|
|
// If mechanics are already available, use the complete structure
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
updateTableStructureWithMechanics();
|
|
return;
|
|
}
|
|
|
|
dataTable = $table.DataTable({
|
|
processing: true,
|
|
serverSide: false, // We'll handle server-side manually
|
|
ajax: {
|
|
url: '{{ route("reports.technician.datatable") }}',
|
|
type: 'GET',
|
|
data: function(d) {
|
|
d.dealer_id = dealerId;
|
|
d.start_date = startDate;
|
|
d.end_date = endDate;
|
|
return d;
|
|
},
|
|
dataSrc: function(json) {
|
|
console.log('DataTable response:', json);
|
|
|
|
// Update mechanics from response
|
|
if (json.mechanics && Array.isArray(json.mechanics)) {
|
|
mechanics = json.mechanics;
|
|
console.log('Mechanics loaded:', mechanics.length);
|
|
|
|
// Update table structure with mechanic columns
|
|
setTimeout(function() {
|
|
updateTableStructureWithMechanics();
|
|
}, 100);
|
|
}
|
|
|
|
return json.data || [];
|
|
}
|
|
},
|
|
columns: [
|
|
{ data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, width: '50px', className: 'text-center' },
|
|
{ data: 'work_name', name: 'work_name', orderable: true, searchable: true },
|
|
{ data: 'work_code', name: 'work_code', orderable: true, searchable: true, width: '120px' },
|
|
{ data: 'category_name', name: 'category_name', orderable: true, searchable: true, width: '150px' }
|
|
],
|
|
pageLength: -1,
|
|
lengthMenu: [],
|
|
order: [[1, 'asc']],
|
|
responsive: false,
|
|
dom: '<"row"<"col-sm-12"f>>' +
|
|
'<"row"<"col-sm-12"tr>>' +
|
|
'<"row"<"col-sm-12"i>>',
|
|
language: {
|
|
emptyTable: "Tidak ada data yang tersedia",
|
|
info: "Menampilkan _TOTAL_ entri",
|
|
infoEmpty: "Menampilkan 0 entri",
|
|
infoFiltered: "(difilter dari _MAX_ total entri)",
|
|
search: "Cari:",
|
|
zeroRecords: "Tidak ditemukan data yang sesuai",
|
|
processing: "Memuat data..."
|
|
},
|
|
initComplete: function() {
|
|
try {
|
|
var api = this.api();
|
|
console.log('DataTable initialization complete');
|
|
console.log('Data rows:', api.data().length);
|
|
console.log('Mechanics count:', mechanics.length);
|
|
|
|
if (api.data().length === 0) {
|
|
toastr.info('Tidak ada data yang ditemukan untuk filter yang dipilih. Silakan coba filter yang berbeda.');
|
|
}
|
|
|
|
// Enable filter button di sini!
|
|
var $btnFilter = $('#btn-filter');
|
|
var storedText = $btnFilter.data('original-text') || 'Cari';
|
|
$btnFilter.html(storedText).prop('disabled', false).removeClass('loading');
|
|
hideLoadingOverlay();
|
|
} catch (error) {
|
|
console.error('Error in initComplete:', error);
|
|
hideLoadingOverlay();
|
|
}
|
|
},
|
|
drawCallback: function() {
|
|
try {
|
|
// Update totals in footer
|
|
updateTableTotals();
|
|
} catch (error) {
|
|
console.error('Error in drawCallback:', error);
|
|
}
|
|
}
|
|
});
|
|
|
|
console.log('DataTable initialized successfully');
|
|
|
|
} catch (dataTableError) {
|
|
console.error('DataTable initialization failed:', dataTableError);
|
|
toastr.error('Gagal memuat tabel data');
|
|
hideLoadingOverlay();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error in initializeDataTable:', error);
|
|
toastr.error('Gagal memuat tabel data');
|
|
hideLoadingOverlay();
|
|
}
|
|
}
|
|
|
|
function createFallbackTable(data) {
|
|
try {
|
|
// Clean up existing search inputs
|
|
$('#datatable-search').closest('.row').remove();
|
|
$('#simple-search').closest('.row').remove();
|
|
|
|
// Ensure DataTable is destroyed
|
|
if (dataTable && typeof dataTable.destroy === 'function') {
|
|
dataTable.destroy();
|
|
dataTable = null;
|
|
}
|
|
|
|
const $table = $('#report-technician-table');
|
|
$table.empty();
|
|
|
|
if (data.length > 0) {
|
|
let tableHtml = '<thead><tr>';
|
|
tableHtml += '<th>No</th><th>Nama Pekerjaan</th><th>Kode Pekerjaan</th><th>Kategori</th>';
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic) {
|
|
if (mechanic && mechanic.name) {
|
|
tableHtml += `<th>${mechanic.name}</th>`;
|
|
}
|
|
});
|
|
}
|
|
tableHtml += '</tr></thead><tbody>';
|
|
|
|
data.forEach(function(item, index) {
|
|
tableHtml += `<tr>
|
|
<td>${index + 1}</td>
|
|
<td>${item.work_name || ''}</td>
|
|
<td>${item.work_code || ''}</td>
|
|
<td>${item.category_name || ''}</td>
|
|
`;
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic) {
|
|
if (mechanic && mechanic.id) {
|
|
tableHtml += `<td>${item[`mechanic_${mechanic.id}_total`] || 0}</td>`;
|
|
}
|
|
});
|
|
}
|
|
tableHtml += '</tr>';
|
|
});
|
|
tableHtml += '</tbody>';
|
|
$table.html(tableHtml);
|
|
|
|
// Add simple search functionality to fallback table
|
|
addSimpleSearch($table);
|
|
|
|
} else {
|
|
$table.html('<tbody><tr><td colspan="100%" class="text-center">Tidak ada data yang tersedia untuk filter yang dipilih</td></tr></tbody>');
|
|
}
|
|
console.log('Fallback table created successfully');
|
|
hideLoadingOverlay();
|
|
} catch (fallbackError) {
|
|
console.error('Error creating fallback table:', fallbackError);
|
|
toastr.error('Gagal memuat tabel data. Silakan refresh halaman.');
|
|
hideLoadingOverlay();
|
|
}
|
|
}
|
|
|
|
function addMechanicColumns(api) {
|
|
if (!Array.isArray(mechanics) || mechanics.length === 0) {
|
|
console.log('No mechanics to add columns for');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
console.log('Adding mechanic columns for', mechanics.length, 'mechanics');
|
|
|
|
// Instead of adding columns dynamically, we'll update the table structure
|
|
// and reinitialize the DataTable with the complete column configuration
|
|
updateTableStructureWithMechanics();
|
|
|
|
} catch (error) {
|
|
console.error('Error adding mechanic columns:', error);
|
|
}
|
|
}
|
|
|
|
function updateTableStructureWithMechanics() {
|
|
try {
|
|
// Destroy existing DataTable
|
|
if (dataTable && typeof dataTable.destroy === 'function') {
|
|
dataTable.destroy();
|
|
dataTable = null;
|
|
}
|
|
|
|
const $table = $('#report-technician-table');
|
|
$table.empty();
|
|
|
|
// Build header rows
|
|
let headerRow1 = `
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Pekerjaan</th>
|
|
<th>Kode Pekerjaan</th>
|
|
<th>Kategori</th>
|
|
`;
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic) {
|
|
headerRow1 += `<th class="mechanic-column" style="text-align: center; background-color: #f8f9fa;"><strong>${mechanic.name}</strong></th>`;
|
|
});
|
|
}
|
|
headerRow1 += `</tr>`;
|
|
|
|
// Set thead
|
|
$table.append(`<thead id="table-header">${headerRow1}</thead>`);
|
|
$table.append('<tbody></tbody>');
|
|
|
|
// Build footer
|
|
let footerHtml = '<tr><th colspan="4" class="text-center"><strong>Total</strong></th>';
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function() {
|
|
footerHtml += `<th class="text-center mechanic-column"><strong>0</strong></th>`;
|
|
});
|
|
}
|
|
footerHtml += '</tr>';
|
|
$table.append(`<tfoot id="table-footer">${footerHtml}</tfoot>`);
|
|
|
|
// Reinitialize DataTable
|
|
initializeDataTableWithMechanics();
|
|
} catch (error) {
|
|
console.error('Error updating table structure:', error);
|
|
hideLoadingOverlay();
|
|
}
|
|
}
|
|
|
|
function initializeDataTableWithMechanics() {
|
|
try {
|
|
// Get filter values
|
|
let dealerId = '';
|
|
if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) {
|
|
dealerId = $('#filter-dealer').select2('val') || '';
|
|
} else {
|
|
dealerId = $('#filter-dealer').val() || '';
|
|
}
|
|
|
|
const startDate = $('#filter-start-date').val();
|
|
const endDate = $('#filter-end-date').val();
|
|
|
|
// Build complete column configuration
|
|
const columns = [
|
|
{ data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, width: '50px', className: 'text-center' },
|
|
{ data: 'work_name', name: 'work_name', orderable: true, searchable: true },
|
|
{ data: 'work_code', name: 'work_code', orderable: true, searchable: true, width: '120px' },
|
|
{ data: 'category_name', name: 'category_name', orderable: true, searchable: true, width: '150px' }
|
|
];
|
|
|
|
// Add mechanic columns
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic) {
|
|
if (mechanic && mechanic.id) {
|
|
columns.push({
|
|
data: `mechanic_${mechanic.id}_total`,
|
|
name: `mechanic_${mechanic.id}_total`,
|
|
title: `${mechanic.name || 'Unknown'}`,
|
|
orderable: false,
|
|
searchable: false,
|
|
className: 'text-center mechanic-column',
|
|
defaultContent: '0'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize DataTable with complete configuration
|
|
dataTable = $('#report-technician-table').DataTable({
|
|
processing: true,
|
|
serverSide: false,
|
|
ajax: {
|
|
url: '{{ route("reports.technician.datatable") }}',
|
|
type: 'GET',
|
|
data: function(d) {
|
|
d.dealer_id = dealerId;
|
|
d.start_date = startDate;
|
|
d.end_date = endDate;
|
|
return d;
|
|
},
|
|
dataSrc: function(json) {
|
|
console.log('DataTable response:', json);
|
|
|
|
// Update mechanics from response
|
|
if (json.mechanics && Array.isArray(json.mechanics)) {
|
|
mechanics = json.mechanics;
|
|
}
|
|
|
|
return json.data || [];
|
|
}
|
|
},
|
|
columns: columns,
|
|
pageLength: -1,
|
|
lengthMenu: [],
|
|
order: [[1, 'asc']],
|
|
responsive: false,
|
|
dom: '<"row"<"col-sm-12"f>>' +
|
|
'<"row"<"col-sm-12"tr>>' +
|
|
'<"row"<"col-sm-12"i>>',
|
|
language: {
|
|
emptyTable: "Tidak ada data yang tersedia",
|
|
info: "Menampilkan _TOTAL_ entri",
|
|
infoEmpty: "Menampilkan 0 entri",
|
|
infoFiltered: "(difilter dari _MAX_ total entri)",
|
|
search: "Cari:",
|
|
zeroRecords: "Tidak ditemukan data yang sesuai",
|
|
processing: "Memuat data..."
|
|
},
|
|
initComplete: function() {
|
|
try {
|
|
var api = this.api();
|
|
console.log('DataTable with mechanics initialization complete');
|
|
console.log('Data rows:', api.data().length);
|
|
console.log('Mechanics count:', mechanics.length);
|
|
|
|
if (api.data().length === 0) {
|
|
toastr.info('Tidak ada data yang ditemukan untuk filter yang dipilih. Silakan coba filter yang berbeda.');
|
|
} else {
|
|
// Update totals after initialization
|
|
setTimeout(function() {
|
|
updateTableTotals();
|
|
}, 200);
|
|
}
|
|
|
|
// Enable filter button di sini!
|
|
var $btnFilter = $('#btn-filter');
|
|
var storedText = $btnFilter.data('original-text') || 'Cari';
|
|
$btnFilter.html(storedText).prop('disabled', false).removeClass('loading');
|
|
hideLoadingOverlay();
|
|
} catch (error) {
|
|
console.error('Error in initComplete:', error);
|
|
hideLoadingOverlay();
|
|
}
|
|
},
|
|
drawCallback: function() {
|
|
try {
|
|
console.log('DataTable drawCallback triggered');
|
|
// Add a small delay to ensure data is fully rendered
|
|
setTimeout(function() {
|
|
updateTableTotals();
|
|
}, 100);
|
|
} catch (error) {
|
|
console.error('Error in drawCallback:', error);
|
|
}
|
|
}
|
|
});
|
|
|
|
console.log('DataTable with mechanics initialized successfully');
|
|
|
|
} catch (error) {
|
|
console.error('Error initializing DataTable with mechanics:', error);
|
|
toastr.error('Gagal memuat tabel data');
|
|
hideLoadingOverlay();
|
|
}
|
|
}
|
|
|
|
function updateTableTotals() {
|
|
if (!dataTable) {
|
|
console.log('DataTable not initialized');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Get DataTable API - try multiple methods
|
|
let api = null;
|
|
|
|
// Method 1: Direct API access
|
|
if (dataTable && typeof dataTable.api === 'function') {
|
|
api = dataTable.api();
|
|
console.log('Using dataTable.api() method');
|
|
}
|
|
// Method 2: jQuery DataTable API
|
|
else if (dataTable && typeof dataTable.dataTable === 'function') {
|
|
api = dataTable.dataTable().api();
|
|
console.log('Using dataTable.dataTable().api() method');
|
|
}
|
|
// Method 3: Direct access to DataTable instance
|
|
else if (dataTable && dataTable.api) {
|
|
api = dataTable.api;
|
|
console.log('Using direct dataTable.api access');
|
|
}
|
|
// Method 4: Try to get from jQuery element
|
|
else if ($('#report-technician-table').dataTable) {
|
|
api = $('#report-technician-table').dataTable().api();
|
|
console.log('Using jQuery element dataTable().api() method');
|
|
}
|
|
|
|
if (!api) {
|
|
console.warn('Cannot access DataTable API - trying alternative method');
|
|
// Alternative: Get data directly from table rows
|
|
updateTableTotalsFromDOM();
|
|
return;
|
|
}
|
|
|
|
console.log('DataTable API accessed successfully');
|
|
const data = api.data().toArray();
|
|
console.log('Data rows found:', data.length);
|
|
|
|
if (data.length === 0) {
|
|
console.log('No data rows found');
|
|
return;
|
|
}
|
|
|
|
// Calculate totals for each mechanic
|
|
const totals = {};
|
|
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic) {
|
|
if (mechanic && mechanic.id) {
|
|
totals[`mechanic_${mechanic.id}_total`] = 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Sum up values from all rows
|
|
data.forEach(function(row, index) {
|
|
console.log(`Row ${index}:`, row);
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic) {
|
|
if (mechanic && mechanic.id) {
|
|
const value = parseInt(row[`mechanic_${mechanic.id}_total`] || 0);
|
|
totals[`mechanic_${mechanic.id}_total`] += value;
|
|
console.log(`Mechanic ${mechanic.name}: adding ${value}, total now: ${totals[`mechanic_${mechanic.id}_total`]}`);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
console.log('Calculated totals:', totals);
|
|
|
|
// Update footer with totals
|
|
const $footer = $('#table-footer tr');
|
|
if ($footer.length > 0) {
|
|
let footerHtml = '<th colspan="4" class="text-center"><strong>Total</strong></th>';
|
|
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic) {
|
|
if (mechanic && mechanic.id) {
|
|
const total = totals[`mechanic_${mechanic.id}_total`] || 0;
|
|
footerHtml += `<th class="text-center mechanic-column"><strong>${total}</strong></th>`;
|
|
}
|
|
});
|
|
}
|
|
|
|
$footer.html(footerHtml);
|
|
console.log('Footer updated successfully');
|
|
} else {
|
|
console.warn('Footer row not found');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating table totals:', error);
|
|
// Fallback to DOM method
|
|
updateTableTotalsFromDOM();
|
|
}
|
|
}
|
|
|
|
function updateTableTotalsFromDOM() {
|
|
try {
|
|
console.log('Using DOM method to calculate totals');
|
|
|
|
// Calculate totals for each mechanic
|
|
const totals = {};
|
|
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic) {
|
|
if (mechanic && mechanic.id) {
|
|
totals[`mechanic_${mechanic.id}_total`] = 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Get data from table rows directly
|
|
const $rows = $('#report-technician-table tbody tr');
|
|
console.log('Found table rows:', $rows.length);
|
|
|
|
$rows.each(function(index) {
|
|
const $row = $(this);
|
|
const $cells = $row.find('td');
|
|
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic, mechanicIndex) {
|
|
if (mechanic && mechanic.id) {
|
|
// Skip first 4 columns (No, Nama Pekerjaan, Kode Pekerjaan, Kategori)
|
|
const cellIndex = 4 + mechanicIndex;
|
|
const $cell = $cells.eq(cellIndex);
|
|
const value = parseInt($cell.text() || 0);
|
|
totals[`mechanic_${mechanic.id}_total`] += value;
|
|
console.log(`Row ${index}, Mechanic ${mechanic.name}: cell ${cellIndex} = ${value}, total now: ${totals[`mechanic_${mechanic.id}_total`]}`);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
console.log('DOM calculated totals:', totals);
|
|
|
|
// Update footer with totals
|
|
const $footer = $('#table-footer tr');
|
|
if ($footer.length > 0) {
|
|
let footerHtml = '<th colspan="4" class="text-center"><strong>Total</strong></th>';
|
|
|
|
if (Array.isArray(mechanics) && mechanics.length > 0) {
|
|
mechanics.forEach(function(mechanic) {
|
|
if (mechanic && mechanic.id) {
|
|
const total = totals[`mechanic_${mechanic.id}_total`] || 0;
|
|
footerHtml += `<th class="text-center mechanic-column"><strong>${total}</strong></th>`;
|
|
}
|
|
});
|
|
}
|
|
|
|
$footer.html(footerHtml);
|
|
console.log('DOM Footer updated successfully');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error in DOM method:', error);
|
|
}
|
|
}
|
|
|
|
function addSimpleSearch($table) {
|
|
// Add search input above table
|
|
const searchHtml = `
|
|
<div class="row mb-3">
|
|
<div class="col-sm-12">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">
|
|
<i class="fa fa-search"></i>
|
|
</span>
|
|
</div>
|
|
<input type="text" class="form-control" id="simple-search" placeholder="Cari data...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
$table.before(searchHtml);
|
|
|
|
// Add search functionality
|
|
$('#simple-search').on('keyup', function() {
|
|
const searchTerm = $(this).val().toLowerCase();
|
|
$table.find('tbody tr').each(function() {
|
|
const rowText = $(this).text().toLowerCase();
|
|
if (rowText.includes(searchTerm)) {
|
|
$(this).show();
|
|
} else {
|
|
$(this).hide();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Filter button click - Fixed button state management
|
|
$('#btn-filter').on('click', function() {
|
|
console.log('Filter button clicked');
|
|
|
|
// Prevent multiple clicks
|
|
var filterButton = $('#btn-filter');
|
|
if (filterButton.hasClass('loading') || filterButton.prop('disabled')) {
|
|
console.log('Button already loading or disabled, ignoring click');
|
|
return; // Already processing
|
|
}
|
|
|
|
// Get dealer value from Select2 or regular select
|
|
let selectedDealer = '';
|
|
if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) {
|
|
selectedDealer = $('#filter-dealer').select2('val') || '';
|
|
} else {
|
|
selectedDealer = $('#filter-dealer').val();
|
|
}
|
|
|
|
console.log('Selected dealer:', selectedDealer);
|
|
|
|
// Show warning if user selects "Semua Dealer"
|
|
if (selectedDealer === '') {
|
|
if (!confirm('Memilih "Semua Dealer" akan memuat data yang lebih besar dan mungkin memakan waktu lebih lama. Lanjutkan?')) {
|
|
return; // User cancelled
|
|
}
|
|
}
|
|
|
|
console.log('Filter button clicked - starting data load');
|
|
|
|
// Store the original button text before changing it
|
|
var originalText = filterButton.html();
|
|
filterButton.data('original-text', originalText);
|
|
|
|
// Show loading state
|
|
filterButton.addClass('loading').prop('disabled', true);
|
|
filterButton.html('<i class="fa fa-spinner fa-spin"></i> Mencari...');
|
|
|
|
console.log('Button loading state set, original text:', originalText);
|
|
console.log('Button disabled state:', filterButton.prop('disabled'));
|
|
console.log('Button loading class:', filterButton.hasClass('loading'));
|
|
|
|
// Show loading overlay
|
|
showLoadingOverlay("Memuat data laporan teknisi...");
|
|
|
|
// Reload DataTable
|
|
if (dataTable && typeof dataTable.destroy === 'function') {
|
|
dataTable.destroy();
|
|
dataTable = null;
|
|
}
|
|
|
|
// Reset initialization flag to allow re-initialization
|
|
isInitialized = false;
|
|
// Ambil mechanics terbaru dari endpoint filter
|
|
let dealerId = '';
|
|
if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) {
|
|
dealerId = $('#filter-dealer').select2('val') || '';
|
|
} else {
|
|
dealerId = $('#filter-dealer').val();
|
|
}
|
|
const startDate = $('#filter-start-date').val();
|
|
const endDate = $('#filter-end-date').val();
|
|
$.ajax({
|
|
url: '{{ route("reports.technician.data") }}',
|
|
type: 'GET',
|
|
data: { dealer_id: dealerId, start_date: startDate, end_date: endDate },
|
|
success: function(response) {
|
|
if (response.status === 'success' && Array.isArray(response.mechanics)) {
|
|
mechanics = response.mechanics;
|
|
updateTableStructureWithMechanics(); // DataTable akan rebuild dengan mechanics baru
|
|
} else {
|
|
initializeDataTable(); // fallback
|
|
}
|
|
},
|
|
error: function() {
|
|
initializeDataTable();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Export button click
|
|
$('#btn-export-excel').on('click', function() {
|
|
exportToExcel();
|
|
});
|
|
|
|
// Reset button click
|
|
$('#btn-reset').on('click', function() {
|
|
console.log('Reset button clicked');
|
|
|
|
// Reset dealer selection
|
|
if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) {
|
|
$('#filter-dealer').val('').trigger('change');
|
|
} else {
|
|
$('#filter-dealer').val('');
|
|
}
|
|
|
|
// Reset date inputs
|
|
$('#filter-start-date').val('{{ date('Y-m-d', strtotime('-30 days')) }}');
|
|
$('#filter-end-date').val('{{ date('Y-m-d') }}');
|
|
|
|
console.log('Filters reset, reloading DataTable...');
|
|
|
|
// Reset initialization flag
|
|
isInitialized = false;
|
|
// Show loading overlay
|
|
showLoadingOverlay("Memuat data laporan teknisi...");
|
|
if (dataTable && typeof dataTable.destroy === 'function') {
|
|
dataTable.destroy();
|
|
dataTable = null;
|
|
}
|
|
// Ambil mechanics terbaru dari endpoint data reset
|
|
let dealerId = '';
|
|
const startDate = $('#filter-start-date').val();
|
|
const endDate = $('#filter-end-date').val();
|
|
$.ajax({
|
|
url: '{{ route("reports.technician.data") }}',
|
|
type: 'GET',
|
|
data: { dealer_id: dealerId, start_date: startDate, end_date: endDate },
|
|
success: function(response) {
|
|
if (response.status === 'success' && Array.isArray(response.mechanics)) {
|
|
mechanics = response.mechanics;
|
|
updateTableStructureWithMechanics();
|
|
} else {
|
|
initializeDataTable();
|
|
}
|
|
},
|
|
error: function() {
|
|
initializeDataTable();
|
|
}
|
|
});
|
|
});
|
|
|
|
function exportToExcel() {
|
|
// Prevent multiple clicks
|
|
var exportButton = $('#btn-export-excel');
|
|
if (exportButton.hasClass('loading')) {
|
|
return; // Already processing
|
|
}
|
|
|
|
// Get dealer value from Select2 or regular select
|
|
let dealerId = '';
|
|
if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) {
|
|
dealerId = $('#filter-dealer').select2('val') || '';
|
|
} else {
|
|
dealerId = $('#filter-dealer').val();
|
|
}
|
|
const startDate = $('#filter-start-date').val();
|
|
const endDate = $('#filter-end-date').val();
|
|
|
|
let url = '{{ route("reports.technician.export") }}';
|
|
let params = [];
|
|
|
|
if (dealerId) {
|
|
params.push('dealer_id=' + dealerId);
|
|
}
|
|
if (startDate) {
|
|
params.push('start_date=' + startDate);
|
|
}
|
|
if (endDate) {
|
|
params.push('end_date=' + endDate);
|
|
}
|
|
|
|
if (params.length > 0) {
|
|
url += '?' + params.join('&');
|
|
}
|
|
|
|
// Show loading state
|
|
exportButton.addClass('loading').prop('disabled', true);
|
|
var originalHtml = exportButton.html();
|
|
exportButton.html('<i class="fa fa-spinner fa-spin"></i> Exporting...');
|
|
|
|
// Open in new window
|
|
let newWindow = window.open(url, '_blank');
|
|
|
|
// Reset button and hide overlay after a delay
|
|
setTimeout(function() {
|
|
exportButton.removeClass('loading').prop('disabled', false).html(originalHtml);
|
|
hideLoadingOverlay();
|
|
}, 2000);
|
|
}
|
|
|
|
// Make exportToExcel available globally
|
|
window.exportToExcel = exportToExcel;
|
|
|
|
// Cleanup loading overlay on page unload
|
|
$(window).on('beforeunload', function() {
|
|
hideLoadingOverlay();
|
|
});
|
|
|
|
// Cleanup Select2 on page unload
|
|
$(window).on('beforeunload', function() {
|
|
if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) {
|
|
$('#filter-dealer').select2('destroy');
|
|
}
|
|
});
|
|
|
|
// Fallback for toastr if not available
|
|
if (typeof toastr === 'undefined') {
|
|
window.toastr = {
|
|
success: function(msg) { console.log('SUCCESS:', msg); },
|
|
error: function(msg) { console.log('ERROR:', msg); },
|
|
warning: function(msg) { console.log('WARNING:', msg); },
|
|
info: function(msg) { console.log('INFO:', msg); }
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
@endsection |