Files
CKB/resources/views/back/report/transaction.blade.php

436 lines
16 KiB
PHP
Executable File

@extends('layouts.backapp')
@section('content')
<style>
.table-responsive {
height: 60vh;
overflow: auto;
}
.nav-link-tab {
font-weight: bold !important;
}
.nav-link-tab.active {
font-weight: normal !important;
}
.dataTables_wrapper .dataTable td, .dataTables_wrapper .dataTable th, .dataTables_wrapper .dataTable tr {
background: #fff;
}
</style>
<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">
<span class="kt-portlet__head-icon">
<i class="kt-font-brand flaticon2-line-chart"></i>
</span>
<h3 class="kt-portlet__head-title">
Laporan Pekerjaan
</h3>
</div>
<div class="kt-portlet__head-toolbar">
<div class="kt-portlet__head-wrapper">
<div class="kt-portlet__head-actions mt-2 mb-2">
@can('update', $menus['report.transaction'])
<a href="{{ route('report.transaction.bulkclose') }}" id="bulk-close" class="btn btn-warning">Close Terpilih</a>
@endcan
<button id="export" class="btn btn-success">Export</button>
</div>
</div>
</div>
</div>
<div class="kt-portlet__body">
<form class="kt-form kt-form--fit mb-5" id="searchForm">
<div class="row">
<div class="col-4 kt-margin-b-10-tablet-and-mobile">
<div class="input-daterange input-group" id="kt_datepicker_range">
<input type="text" class="form-control" placeholder="Tanggal Mulai" id="date_start" name="date_start">
<div class="input-group-append">
<span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
</div>
<input type="text" class="form-control" placeholder="Tanggal Akhir" id="date_end" name="date_end">
</div>
</div>
<div class="col-3 kt-margin-b-10-tablet-and-mobile">
<div class="input-daterange input-group">
<select name="mechanic" id="mechanic" class="form-control">
<option value="0" disabled selected>Mekanik</option>
@foreach ($mechanics as $mechanic)
<option value="{{ $mechanic->id }}">{{ $mechanic->name }}</option>
@endforeach
</select>
<select name="sa" id="sa" class="form-control">
<option value="0" disabled selected>SA</option>
@foreach ($sas as $sa)
<option value="{{ $sa->id }}">{{ $sa->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-3 kt-margin-b-10-tablet-and-mobile">
<div class="form-group">
<select name="dealer" id="dealer" class="form-control">
<option value="0" disabled selected>Dealer</option>
@foreach ($dealers as $dealer)
<option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-2 kt-margin-b-10-tablet-and-mobile">
<button type="button" class="btn btn-brand btn-elevate btn-icon-sm" id="kt_search"> Cari</button>
</div>
</div>
</form>
<!--begin: Datatable -->
<div class="table-responsive">
<table class="table" id="kt_table">
<thead>
<tr>
<th style="background: #fff;z-index: 2;"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></th>
<th style="background: #fff;z-index: 2;">Tanggal</th>
<th>Dealer</th>
<th>Mekanik</th>
<th>SA</th>
<th>No. Polisi</th>
<th>Warranty</th>
<th>Kategori</th>
<th>Qty</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!--end: Datatable -->
</div>
</div>
</div>
<!--begin::Modal-->
<div class="modal fade" id="transactionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="transactionForm" data-form="store" class="kt-form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalHeading"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
@csrf
<div class="kt-portlet__body">
<div class="form-group">
<label>Dealer</label>
<select name="dealer_id" id="dealer_id" class="form-control">
@foreach ($dealers as $dealer)
<option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label>SPK</label>
<input type="text" class="form-control" id="spk" name="spk" placeholder="SPK" value="" autocomplete="off" />
</div>
<div class="form-group">
<label>Tanggal</label>
<input type="date" class="form-control" id="date" name="date" placeholder="Tanggal" value="" autocomplete="off" />
</div>
<div class="form-group">
<label>No. Polisi</label>
<input type="text" class="form-control" id="police_number" name="police_number" placeholder="No. Polisi" value="" autocomplete="off" />
</div>
<div class="form-group">
<label>Pekerjaan</label>
<select name="work_id" id="work_id" class="form-control">
@foreach ($works as $work)
<option value="{{ $work->id }}">{{ $work->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label>Qty</label>
<input type="number" class="form-control" id="qty" name="qty" placeholder="Qty" value="" autocomplete="off" />
</div>
<div class="form-group">
<label>Warranty</label>
<select name="warranty" id="warranty" class="form-control">
<option value="1">Ya</option>
<option value="0">Tidak</option>
</select>
</div>
<div class="form-group">
<label>Service Advisor</label>
<select name="sa_id" id="sa_id" class="form-control">
@foreach ($sas as $sa)
<option value="{{ $sa->id }}">{{ $sa->name }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-primary" id="saveBtn" value="create">Simpan</button>
</div>
</div>
</form>
</div>
</div>
<!--end::Modal-->
<input type="hidden" name="ajax_url" value="{{ route('report.transaction_data') }}">
@endsection
@section('javascripts')
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('#kt_table').DataTable({
processing: true,
serverSide: true,
fixedColumns: {
left: 2,
right: 1
},
ajax: {
url: $('input[name="ajax_url"]').val(),
type: "POST",
data: function (q) {
q.date_start = $('input[name="date_start"]').val();
q.date_end = $('input[name="date_end"]').val();
q.sa = $('select[name="sa"]').val();
q.mechanic = $('select[name="mechanic"]').val();
q.dealer = $('select[name="dealer"]').val();
}
},
columns: [
{
data: 'id',
orderable: false,
searchable: false,
name: 'transaction.id',
render: function(data, type, row) {
return `<input type="checkbox" name="selected[]" value="${data}" />`;
}
},
{
data: 'date',
name: 'transactions.date',
render: function (data, type, row) {
if (!data) return '';
return data.split(' ')[0]; // ambil bagian sebelum spasi
}
},
{data: 'dealer_name', name: 'd.name'},
{data: 'username', name: 'users.name'},
{data: 'sa_name', name: 'sa.name'},
{data: 'police_number', name: 'transactions.police_number'},
{
data: 'warranty',
name: 'transactions.warranty',
render: function(data, type, row) {
if(row.warranty == 1){
return 'Ya'
}else{
return 'Tidak'
}
}
},
{data: 'category_name', name: 'cat.name'},
{data: 'qty', name: 'transactions.qty'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$("#export").click(function() {
let data = {
date_start : $('input[name="date_start"]').val(),
date_end : $('input[name="date_end"]').val(),
sa : $('select[name="sa"]').val(),
mechanic : $('select[name="mechanic"]').val(),
dealer : $('select[name="dealer"]').val()
}
var url = '{{ route("report.transaction.export") }}?' + $.param(data)
window.location = url;
})
function closeTransaction(id)
{
let url = $("#closeTransaction"+id).attr('data-url')
$.ajax({
url: url,
type: 'PUT',
success: function(res) {
table.ajax.reload()
}
})
}
function destroyTransaction(id)
{
let action = $("#destroyTransaction"+id).attr("data-action")
Swal.fire({
title: 'Hapus Pekerjaan?',
text: "Anda tidak akan bisa mengembalikannya!",
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#dedede',
confirmButtonText: 'Hapus'
}).then((result) => {
if (result.value) {
$.ajax({
url: action,
type: 'POST',
data: {
_token: $('meta[name="csrf-token"]').attr('content'),
_method: 'DELETE'
},
success: function(res) {
Swal.fire(
'Pekerjaan Dihapus!'
)
table.ajax.reload()
}
})
}
})
}
function editTransaction(id) {
let form_action = $("#editTransaction"+id).attr("data-action")
let edit_url = $("#editTransaction"+id).attr("data-url")
$("#transactionModal").modal("show")
$("#transactionForm").append('<input type="hidden" name="_method" value="PUT">')
$("#transactionForm").attr('action', form_action)
$("#transactionForm").attr('data-form', 'update')
$.get(edit_url, function(res) {
$("#transactionForm select[name='dealer_id'] option[value='"+ res.data.dealer_id +"']").prop('selected', true);
$("#transactionForm select[name='sa_id'] option[value='"+ res.data.user_sa_id +"']").prop('selected', true);
$("#transactionForm select[name='work_id'] option[value='"+ res.data.work_id +"']").prop('selected', true);
$("#transactionForm select[name='dealer_id'] option[value='"+ res.data.dealer_id +"']").prop('selected', true);
$("#transactionForm select[name='warranty'] option[value='"+ res.data.warranty +"']").prop('selected', true);
$("#transactionForm input[name='spk']").val(res.data.spk)
var d = new Date(res.data.date);
var day = ("0" + d.getDate()).slice(-2);
var month = ("0" + (d.getMonth() + 1)).slice(-2);
var date = d.getFullYear()+"-"+(month)+"-"+(day) ;
$("#transactionForm input[name='date']").val(date)
$("#transactionForm input[name='police_number']").val(res.data.police_number)
$("#transactionForm input[name='qty']").val(res.data.qty)
})
}
var KTBootstrapDatepicker = function () {
var arrows;
arrows = {
leftArrow: '<i class="la la-angle-left"></i>',
rightArrow: '<i class="la la-angle-right"></i>'
}
var daterange = function () {
$('#kt_datepicker_range').datepicker({
todayHighlight: true,
orientation: "bottom left",
templates: arrows,
autoclose: true,
format: "yyyy-mm-dd",
todayBtn: "linked",
clearBtn: true
});
}
return {
init: function () {
daterange();
}
};
}();
function bulkClose(url, selected) {
$.ajax({
url: url,
type: 'POST',
data: { selected: selected },
success: function(res) {
$("#workModal").modal("hide")
$('#workForm').trigger("reset")
table.ajax.reload()
}
})
}
jQuery(document).ready(function () {
// Add event handlers for modal close buttons
$('.close, [data-dismiss="modal"]').on('click', function() {
$('#transactionModal').modal('hide');
});
// Also handle the "Batal" button
$('.btn-secondary[data-dismiss="modal"]').on('click', function() {
$('#transactionModal').modal('hide');
});
KTBootstrapDatepicker.init();
$('#kt_search').on('click', function (e) {
e.preventDefault();
table.ajax.reload();
});
$('#bulk-close').on('click', function (e) {
e.preventDefault();
let url = $('#bulk-close').attr('href')
let selected = $("input[name='selected[]']:checked").map(function (idx, elem) {
return $(elem).val();
}).get();
bulkClose(url, selected)
table.ajax.reload();
});
$("#transactionForm").submit(function(e) {
e.preventDefault();
$.ajax({
url: $('#transactionForm').attr("action"),
type: 'POST',
data: $('#transactionForm').serialize(),
success: function(res) {
$("#transactionModal").modal("hide")
$('#transactionForm').trigger("reset")
if(res.status == 200) {
Swal.fire(
'Ubah Data',
'Data berhasil diubah'
).then((result) => {
table.ajax.reload()
})
}
}
})
})
$(document).on("click", ".action-print", function () {
let type = $(this).data("type");
let id = $(this).data("id");
let url = $(this).data("url");
window.open(url, "_blank");
});
})
</script>
@endsection