2025-01-06 16:00:51 +07:00
@ extends ( 'layouts.app' )
@ section ( 'title' )
Dashboard
@ endsection
@ section ( 'admin-content' )
< script src = " https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js " ></ script >
< section class = " content-header " >
< div class = " container-fluid " >
< div class = " row mb-2 " >
< div class = " col-sm-6 " >
< h1 > Lihat Expense Vehicle Running Cost </ h1 >
</ div >
< div class = " col-sm-6 " >
< ol class = " breadcrumb float-sm-right " >
< li class = " breadcrumb-item " >< a href = " { { route('dashboard.index') }} " > Dashboard </ a ></ li >
</ li >
</ ol >
</ div >
</ div >
</ div >
</ section >
< section class = " content " >
< div class = " container-fluid " >
< div class = " card card-primary card-outline " >
< div class = " card-body " >
< form method = " POST " enctype = " multipart/form-data " >
@ csrf
@ include ( 'backend.layouts.partials.messages' )
< div class = " row " >
< div class = " col-lg-6 " >
< div class = " mb-3 " >
< label class = " form-label " > No Expense </ label >
< input type = " text " class = " form-control " name = " expense_number " value = " { { $form->expense_number }} " readonly >
</ div >
< div class = " mb-3 " >
< label class = " form-label " > Tanggal </ label >
< input type = " datetime-local " class = " form-control " name = " tanggal " readonly value = " { { $form->tanggal }} " >
</ div >
< div class = " mb-3 " >
< label class = " form-label " > Liter Bensin </ label >
< input type = " text " class = " form-control " name = " liter " readonly value = " { { $form->liter }} " >
</ div >
< div class = " mb-3 " >
< label class = " form-label " > Total Harga Bensin </ label >
< input type = " string " class = " form-control " name = " total " id = " total " readonly value = " { { $form->total }} " >
</ div >
< div class = " mb-3 " >
< label class = " form-label " > Bukti Total Harga Bensin </ label >< br >
< a href = " { { $form->bukti_total }} " target = " _blank " > Lihat Bukti </ a >
</ div >
</ div >
< div class = " col-lg-6 " >
< div class = " mb-3 " >
< label class = " form-label " > Jarak ( km ) </ label >
< input type = " number " class = " form-control " name = " jarak " id = " jarak " readonly value = " { { $form->jarak }} " >
</ div >
< div class = " mb-3 " >
< label class = " form-label " > Tipe Bensin </ label >
< select class = " form-control " name = " tipe_bensin " disabled >
< option value = " pertamax " {{ $form -> tipe_bensin == 'pertamax' ? 'selected' : '' }} > Pertamax </ option >
< option value = " pertalite " {{ $form -> tipe_bensin == 'pertalite' ? 'selected' : '' }} > Pertalite </ option >
</ select >
</ div >
< div class = " mb-3 " >
< label class = " form-label " > Nomor Polisi </ label >
< input type = " text " class = " form-control " name = " nopol " id = " nopol " readonly value = " { { $form->nopol }} " >
</ div >
< div class = " mb-3 " >
< label class = " form-label " > Keterangan </ label >
< textarea class = " form-control " name = " keterangan " id = " keterangan " readonly > {{ $form -> keterangan }} </ textarea >
</ div >
</ div >
2025-03-04 14:48:50 +07:00
< div class = " col-lg-12 " >
< div class = " mb-3 " >
< label class = " form-label " > Status </ label >
< input type = " text " class = " form-control " name = " status " value = " { { $form->status }} " readonly >
</ div >
</ div >
2025-01-06 16:00:51 +07:00
< div class = " col-lg-12 " >
< a href = " { { route('forms.vehicle') }} " class = " btn btn-secondary " > Kembali </ a >
2025-03-04 14:35:50 +07:00
@ if ( auth () -> user () -> can ( 'approval.approve' ) && $form -> status == 'On Progress' )
< button type = " button " class = " btn btn-success final-approve-modal " data - id = " { { route('forms.vehicle.approve', $form->id ) }} " > Approve 1 </ button >
2025-03-04 15:20:23 +07:00
2025-03-04 15:22:41 +07:00
< form action = " { { route('forms.vehicle.reject', $form->id ) }} " method = " class= " d - inline " onsubmit= " return confirm ( 'Are you sure you want to reject this item?' ); " >
2025-03-04 15:20:23 +07:00
@csrf
@method('PUT')
<button type= " submit " class= " btn btn - danger btn - sm " >
Reject
</button>
</form>
2025-03-04 14:35:50 +07:00
@elseif(auth()->user()->can('approval2.approve') && $form->status == 'Approved 1')
<button type= " button " class= " btn btn - success open - approve - modal " data-id= " {{ route ( 'forms.vehicle.approve2' , $form -> id ) }} " >Approve 2</button>
2025-03-04 15:20:23 +07:00
2025-03-04 15:22:41 +07:00
<form action= " {{ route ( 'forms.vehicle.reject' , $form -> id ) }} " method= " class = " d-inline " onsubmit = " return confirm('Are you sure you want to reject this item?'); " >
2025-03-04 15:20:23 +07:00
@ csrf
@ method ( 'PUT' )
< button type = " submit " class = " btn btn-danger btn-sm " >
Reject
</ button >
</ form >
2025-03-04 14:35:50 +07:00
@ elseif ( auth () -> user () -> can ( 'final_approval.approve' ) && $form -> status == 'Approved 2' )
< button type = " button " class = " btn btn-primary open-approve-modal " data - id = " { { route('forms.vehicle.final-approve', $form->id ) }} " > Final Approve </ button >
@ endif
2025-01-06 16:00:51 +07:00
</ div >
</ div >
</ form >
</ div >
</ div >
</ div >
</ section >
2025-03-04 14:35:50 +07:00
< section >
< div class = " modal fade " id = " approveModal " tabindex = " -1 " role = " dialog " aria - labelledby = " approveModalLabel " aria - hidden = " true " >
< div class = " modal-dialog modal-lg " role = " document " >
< div class = " modal-content " >
< form id = " approveForm " method = " POST " action = " " >
@ csrf
@ method ( 'PUT' )
< div class = " modal-header " >
< h5 class = " modal-title " id = " approveModalLabel " > Approve Item </ h5 >
< button type = " button " class = " close " data - dismiss = " modal " aria - label = " Close " >
< span aria - hidden = " true " >& times ; </ span >
</ button >
</ div >
< div class = " modal-body " >
<!-- Loading spinner -->
< div id = " loadingSpinner " class = " d-flex justify-content-center align-items-center " style = " height: 200px; " >
< div class = " spinner-border text-primary " role = " status " >
< span class = " sr-only " > Loading ...</ span >
</ div >
</ div >
2025-01-06 16:00:51 +07:00
2025-03-04 14:35:50 +07:00
<!-- Modal content ( hidden initially ) -->
< div id = " modalContent " class = " d-none " >
< p > Please review the details below :</ p >
< ul class = " list-group " >
< li class = " list-group-item " >
< strong > Expense Number :</ strong > < span id = " expense_number " ></ span >
</ li >
< li class = " list-group-item " >
< strong > User :</ strong > < span id = " user " ></ span >
</ li >
< li class = " list-group-item " >
< strong > Tipe :</ strong > Vehicle Running Cost
</ li >
< li class = " list-group-item " >
< strong > Tanggal & Waktu :</ strong > < span id = " tanggal " ></ span >
</ li >
< li class = " list-group-item " >
< strong > Jarak :</ strong > < span id = " jarak " ></ span > km
</ li >
< li class = " list-group-item " >
< strong > Total Liter Bensin :</ strong > < span id = " liter " ></ span > liter
</ li >
< li class = " list-group-item " >
< strong > No Polisi :</ strong > < span id = " nopol " ></ span >
</ li >
< li class = " list-group-item " >
< strong > Tipe Bensin :</ strong > < span id = " tipe_bensin " ></ span >
</ li >
< li class = " list-group-item " >
< strong > Bukti Total :</ strong > < span id = " bukti_total " ></ span >
</ li >
< li class = " list-group-item " >
< strong > Nominal Total :</ strong > < span id = " total_value " ></ span >
</ li >
</ ul >
</ div >
</ div >
< div class = " modal-footer " >
< button type = " button " class = " btn btn-secondary " data - dismiss = " modal " > Cancel </ button >
< button type = " submit " class = " btn btn-primary " > Approve </ button >
</ div >
</ form >
</ div >
</ div >
</ div >
</ section >
< section >
< div class = " modal fade " id = " finalApproveModal " tabindex = " -1 " role = " dialog " aria - labelledby = " finalApproveModalLabel " aria - hidden = " true " >
< div class = " modal-dialog modal-lg " role = " document " >
< div class = " modal-content " >
< form id = " finalApproveForm " method = " POST " action = " " >
@ csrf
@ method ( 'PUT' )
< div class = " modal-header " >
< h5 class = " modal-title " id = " approveModalLabel " > Approve Item </ h5 >
< button type = " button " class = " close " data - dismiss = " modal " aria - label = " Close " >
< span aria - hidden = " true " >& times ; </ span >
</ button >
</ div >
< div class = " modal-body " >
<!-- Loading spinner -->
< div id = " finalLoadingSpinner " class = " d-flex justify-content-center align-items-center " style = " height: 200px; " >
< div class = " spinner-border text-primary " role = " status " >
< span class = " sr-only " > Loading ...</ span >
</ div >
</ div >
<!-- Modal content ( hidden initially ) -->
< div id = " finalModalContent " class = " d-none " >
< p > Please review the details below :</ p >
< ul class = " list-group " >
< li class = " list-group-item " >
< strong > Expense Number :</ strong > < span id = " final_expense_number " ></ span >
</ li >
< li class = " list-group-item " >
< strong > User :</ strong > < span id = " final_user " ></ span >
</ li >
< li class = " list-group-item " >
< strong > Tipe :</ strong > Vehicle Running Cost
</ li >
< li class = " list-group-item " >
< strong > Tanggal & Waktu :</ strong > < span id = " final_tanggal " ></ span >
</ li >
< li class = " list-group-item " >
< strong > Jarak :</ strong > < span id = " final_jarak " ></ span > km
</ li >
< li class = " list-group-item " >
< strong > Total Liter Bensin :</ strong > < span id = " final_liter " ></ span > liter
</ li >
< li class = " list-group-item " >
< strong > No Polisi :</ strong > < span id = " final_nopol " ></ span >
</ li >
< li class = " list-group-item " >
< strong > Tipe Bensin :</ strong > < span id = " final_tipe_bensin " ></ span >
</ li >
< li class = " list-group-item " >
< strong > Bukti Total :</ strong > < span id = " final_bukti_total " ></ span >
</ li >
</ ul >
< p class = " mt-2 " > Please select the items you want to approve :</ p >
< ul class = " list-group list-unstyled " >
< li >
< div class = " form-group " >
< div class = " custom-control custom-checkbox " >
< input type = " checkbox " class = " custom-control-input " id = " final_total " name = " total " required >
< label class = " custom-control-label " for = " final_total " > Total ( < span id = " final_total_value " ></ span > ) </ label >
</ div >
</ div >
</ li >
</ ul >
</ div >
</ div >
< div class = " modal-footer " >
< button type = " button " class = " btn btn-secondary " data - dismiss = " modal " > Cancel </ button >
< button type = " submit " class = " btn btn-primary " > Approve </ button >
</ div >
</ form >
</ div >
</ div >
</ div >
</ section >
@ endsection
@ section ( 'scripts' )
2025-01-06 16:00:51 +07:00
< script >
new AutoNumeric ( '#total' , {
digitGroupSeparator : '.' , // Pemisah ribuan
decimalCharacter : ',' , // Karakter desimal (tidak digunakan karena tanpa desimal)
currencySymbol : 'Rp.' , // Simbol mata uang
decimalPlaces : 0 , // Tidak ada angka desimal
unformatOnSubmit : true // Nilai asli tanpa format saat
});
</ script >
2025-03-04 14:35:50 +07:00
< script >
$ ( document ) . on ( 'click' , '.open-approve-modal' , function () {
const approveUrl = $ ( this ) . data ( 'id' );
// Show spinner and hide content initially
$ ( '#loadingSpinner' ) . show ();
$ ( '#modalContent' ) . addClass ( 'd-none' );
$ ( '#approveForm' ) . attr ( 'action' , approveUrl ); // Set the form action
$ ( '#loadingSpinner' ) . addClass ( 'd-flex' );
$ ( '#approveModal' ) . modal ( 'show' ); // Show the modal
// Get detail from /forms/vehicle/detail/{id}
$ . get ( approveUrl . replace ( / approve2 | final - approve / g , 'detail' ), function ( data ) {
const formatter = new Intl . NumberFormat ( 'id-ID' , {
style : 'currency' ,
currency : 'IDR' ,
minimumFractionDigits : 0
});
$ ( '#total_value' ) . text ( formatter . format ( data . total ));
// Detail data
$ ( '#user' ) . text ( data . user . name );
$ ( '#expense_number' ) . text ( data . expense_number );
$ ( '#tanggal' ) . text ( new Date ( data . created_at ) . toLocaleDateString ( 'id-ID' , {
year : 'numeric' ,
month : 'long' ,
day : 'numeric'
}));
$ ( '#jarak' ) . text ( data . jarak );
$ ( '#liter' ) . text ( data . liter );
$ ( '#tipe_bensin' ) . text ( data . tipe_bensin );
$ ( '#nopol' ) . text ( data . nopol );
$ ( '#bukti_total' ) . html ( data . total ? '<a href="' + data . total + '" target="_blank">Download</a>' : '-' );
// Hide spinner and show content
$ ( '#loadingSpinner' ) . hide ();
$ ( '#loadingSpinner' ) . removeClass ( 'd-flex' );
$ ( '#loadingSpinner' ) . addClass ( 'd-none' );
$ ( '#modalContent' ) . removeClass ( 'd-none' );
// Reset the total to zero
$ ( '#total' ) . val ( 0 );
});
});
// Handle Approve Button Click
$ ( document ) . on ( 'click' , '.final-approve-modal' , function () {
const approveUrl = $ ( this ) . data ( 'id' );
// Show spinner and hide content initially
$ ( '#finalLoadingSpinner' ) . show ();
$ ( '#finalModalContent' ) . addClass ( 'd-none' );
$ ( '#finalApproveForm' ) . attr ( 'action' , approveUrl ); // Set the form action
$ ( '#finalLoadingSpinner' ) . addClass ( 'd-flex' );
$ ( '#finalApproveModal' ) . modal ( 'show' ); // Show the modal
// Get detail from /forms/vehicle/detail/{id}
$ . get ( approveUrl . replace ( 'approve' , 'detail' ), function ( data ) {
console . log ( data );
const formatter = new Intl . NumberFormat ( 'id-ID' , {
style : 'currency' ,
currency : 'IDR' ,
minimumFractionDigits : 0
});
$ ( '#final_total_value' ) . text ( formatter . format ( data . total ));
// Assign data values to checkboxes
$ ( '#final_total' ) . data ( 'value' , data . total );
// Detail data
$ ( '#final_user' ) . text ( data . user . name );
$ ( '#final_expense_number' ) . text ( data . expense_number );
$ ( '#final_tanggal' ) . text ( new Date ( data . created_at ) . toLocaleDateString ( 'id-ID' , {
year : 'numeric' ,
month : 'long' ,
day : 'numeric'
}));
$ ( '#final_jarak' ) . text ( data . jarak );
$ ( '#final_liter' ) . text ( data . liter );
$ ( '#final_tipe_bensin' ) . text ( data . tipe_bensin );
$ ( '#final_nopol' ) . text ( data . nopol );
$ ( '#final_bukti_total' ) . html ( data . bukti_total ? '<a href="' + data . bukti_total + '" target="_blank">Download</a>' : '-' );
// Hide spinner and show content
$ ( '#finalLoadingSpinner' ) . hide ();
$ ( '#finalLoadingSpinner' ) . removeClass ( 'd-flex' );
$ ( '#finalLoadingSpinner' ) . addClass ( 'd-none' );
$ ( '#finalModalContent' ) . removeClass ( 'd-none' );
// Reset the total to zero
$ ( '#total' ) . val ( 0 );
});
});
// Update total dynamically
$ ( '.custom-control-input' ) . on ( 'change' , function () {
let total = 0 ;
$ ( '.custom-control-input:checked' ) . each ( function () {
total += parseFloat ( $ ( this ) . data ( 'value' ) || 0 );
});
const formatter = new Intl . NumberFormat ( 'id-ID' , {
style : 'currency' ,
currency : 'IDR' ,
minimumFractionDigits : 0 ,
});
$ ( '#total' ) . val ( formatter . format ( total ));
});
// Uncheck all checkboxes when the modal is closed
$ ( '#finalApproveModal' ) . on ( 'hidden.bs.modal' , function () {
$ ( '.custom-control-input' ) . prop ( 'checked' , false ); // Uncheck all checkboxes
$ ( '#total' ) . val ( '0' ); // Reset total to 0
});
</ script >
2025-01-06 16:00:51 +07:00
@ endsection
