Files
expense/resources/views/backend/pages/forms/vehicle/view.blade.php
T
2025-10-13 15:51:53 +07:00

589 lines
26 KiB
PHP
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@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">
<div>
@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>
@if ($form->type == 'gasoline')
<div class="mb-3">
<label class="form-label">Liter Bensin</label>
<input type="text" class="form-control" name="liter" readonly value="{{ $form->liter }}">
</div>
@endif
<div class="mb-3">
<label class="form-label">Total</label>
<input type="string" class="form-control" name="total" id="total" readonly value="{{ $form->total }}">
</div>
</div>
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Tipe Expense</label>
<input type="text" class="form-control" name="expense_type"
value="{{ $form->type == 'gasoline' ? 'Gasoline' : 'Parking Toll' }}" readonly>
</div>
@if ($form->type == 'gasoline')
<div class="mb-3">
<label class="form-label">Km (Odometer)</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>
@endif
<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>
<div class="col-12">
<div class="mb-4">
<label class="form-label mb-0">Lampiran</label>
<p class="text-muted small mt-1 mb-2">Gunakan tombol preview untuk melihat lampiran.</p>
<div class="table-responsive">
<table class="table table-bordered align-middle" id="vehicle-view-attachments-table">
<thead class="table-light">
<tr>
<th style="width: 30%">Kategori</th>
<th style="width: 40%">Nama File</th>
<th style="width: 15%" class="text-center">Preview</th>
<th style="width: 15%" class="text-center">Download</th>
</tr>
</thead>
<tbody>
@forelse ($attachments as $attachment)
<tr class="vehicle-view-attachment-row">
<td>{{ $attachment['file_category'] ? ucwords(str_replace('_', ' ', $attachment['file_category'])) : '-' }}</td>
<td>{{ $attachment['filename'] ?? basename($attachment['file_path']) }}</td>
<td class="text-center">
<button type="button"
class="btn btn-sm btn-outline-secondary vehicle-preview-attachment"
data-preview-url="{{ $attachment['preview_url'] }}"
data-download-url="{{ $attachment['download_url'] }}"
data-preview-type="{{ $attachment['preview_type'] }}"
data-file-name="{{ $attachment['filename'] ?? basename($attachment['file_path']) }}">
Preview
</button>
</td>
<td class="text-center">
<a href="{{ $attachment['download_url'] }}"
target="_blank"
class="btn btn-sm btn-outline-primary">
Download
</a>
</td>
</tr>
@empty
<tr class="vehicle-view-attachments-empty text-center text-muted">
<td colspan="4">Tidak ada lampiran.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
<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>
<div class="col-lg-12">
<a href="{{ route('forms.vehicle') }}" class="btn btn-secondary">Kembali</a>
@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>
<button type="button"
class="btn btn-danger open-reject-modal"
data-action="{{ route('forms.vehicle.reject', $form->id) }}">
Reject
</button>
@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>
<button type="button"
class="btn btn-danger open-reject-modal"
data-action="{{ route('forms.vehicle.reject', $form->id) }}">
Reject
</button>
@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
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@include('backend.components.attachment-preview-modal', [
'modalId' => 'vehicleViewAttachmentPreviewModal',
'title' => 'Preview Lampiran',
])
<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>
<!-- 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> <span id="type"></span>
</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> <span id="final_type"></span>
</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>
<section>
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form id="rejectForm" method="POST" action="">
@csrf
@method('PUT')
<div class="modal-header">
<h5 class="modal-title" id="rejectModalLabel">Reject Expense</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="rejectRemarks">Remarks <span class="text-danger">*</span></label>
<textarea class="form-control" name="remarks" id="rejectRemarks" rows="3" required></textarea>
</div>
<p class="mb-0 text-muted small">Pengajuan akan ditolak setelah Anda mengirimkan catatan ini.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Reject</button>
</div>
</form>
</div>
</div>
</div>
</section>
@endsection
@section('scripts')
<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 dikirimkan
});
</script>
<script>
function escapeHtml(value) {
return String(value || '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
function openAttachmentModal(modalSelector, options) {
const settings = Object.assign({
title: 'Lampiran',
type: 'other',
source: null,
downloadUrl: null,
fileName: 'Lampiran'
}, options || {});
const $modal = $(modalSelector);
const $image = $modal.find('.attachment-preview-image');
const $object = $modal.find('.attachment-preview-object');
const $placeholder = $modal.find('.attachment-preview-placeholder');
$modal.find('.attachment-preview-modal-title').text(settings.title || 'Lampiran');
$image.addClass('d-none').attr('src', '');
$object.addClass('d-none').attr('data', '').attr('src', '');
$placeholder.removeClass('d-none').html('Tidak ada file untuk ditampilkan.');
if (settings.type === 'image' && settings.source) {
$image.attr('src', settings.source).removeClass('d-none');
$placeholder.addClass('d-none');
} else if (settings.type === 'pdf' && settings.source) {
$object.attr('data', settings.source).attr('src', settings.source).removeClass('d-none');
$placeholder.addClass('d-none');
} else {
const safeName = escapeHtml(settings.fileName || 'Lampiran');
let message = '<p class="mb-2">' + safeName + '</p><p class="text-muted mb-0">Preview tidak tersedia. Silakan unduh file untuk melihat konten.</p>';
if (settings.downloadUrl) {
message += '<div class="mt-3"><a href="' + settings.downloadUrl + '" target="_blank" class="btn btn-sm btn-outline-primary">Download</a></div>';
}
$placeholder.html(message);
}
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
} else {
$modal.modal('show');
}
}
function buildAttachmentLinks(attachments) {
if (!attachments || !attachments.length) {
return '-';
}
return attachments.map(function (item, index) {
const label = escapeHtml(item.filename || item.file_category || ('Lampiran ' + (index + 1)));
const downloadUrl = item.download_url || '#';
return '<div><a href="' + downloadUrl + '" target="_blank">' + label + '</a></div>';
}).join('');
}
$(document).on('click', '.vehicle-preview-attachment', function () {
const $button = $(this);
const previewType = $button.data('preview-type') || 'other';
const previewUrl = $button.data('preview-url') || null;
const downloadUrl = $button.data('download-url') || null;
const fileName = $button.data('file-name') || 'Lampiran';
let type = previewType;
let source = previewUrl;
if (!previewUrl || (previewType !== 'image' && previewType !== 'pdf')) {
type = 'other';
source = null;
}
openAttachmentModal('#vehicleViewAttachmentPreviewModal', {
title: fileName,
type: type,
source: source,
downloadUrl: downloadUrl,
fileName: fileName
});
});
$(document).on('click', '.open-reject-modal', function () {
const rejectUrl = $(this).data('action');
$('#rejectForm').attr('action', rejectUrl);
$('#rejectRemarks').val('');
$('#rejectModal').modal('show');
});
$('#rejectModal').on('shown.bs.modal', function () {
$('#rejectRemarks').trigger('focus');
});
$('#rejectModal').on('hidden.bs.modal', function () {
$('#rejectForm').attr('action', '');
$('#rejectRemarks').val('');
});
$(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'
}));
$('#type').html(data.type.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '));
$('#jarak').text(data.jarak > 0 ? data.jarak : '-')
$('#liter').text(data.liter > 0 ? data.liter : '-');
$('#tipe_bensin').text(data.tipe_bensin);
$('#nopol').text(data.nopol);
$('#bukti_total').html(buildAttachmentLinks(data.attachments));
// 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_type').html(data.type.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '));
$('#final_jarak').text(data.jarak > 0 ? data.jarak : '-');
$('#final_liter').text(data.liter > 0 ? data.liter : '-');
$('#final_tipe_bensin').text(data.tipe_bensin);
$('#final_nopol').text(data.nopol);
$('#final_bukti_total').html(buildAttachmentLinks(data.attachments));
// 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>
@endsection