2025-01-04 13:53:53 +07:00
|
|
|
@extends('layouts.app')
|
|
|
|
|
|
|
|
|
|
@section('title')
|
2026-06-01 15:01:03 +07:00
|
|
|
Dashboard
|
2025-01-04 13:53:53 +07:00
|
|
|
@endsection
|
|
|
|
|
|
|
|
|
|
@section('admin-content')
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
2026-06-01 15:01:03 +07:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
|
|
2025-01-04 13:53:53 +07:00
|
|
|
<section class="content-header">
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<div class="row mb-2">
|
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
<h1>Lihat Expense Up Country</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>
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2026-06-01 15:01:03 +07:00
|
|
|
|
2025-01-04 13:53:53 +07:00
|
|
|
<section class="content">
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<div class="card card-primary card-outline">
|
|
|
|
|
<div class="card-body">
|
2026-06-01 15:01:03 +07:00
|
|
|
<div>
|
2025-01-04 13:53:53 +07:00
|
|
|
@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">Pilih Rayon</label>
|
2025-01-06 16:00:51 +07:00
|
|
|
<select class="form-control form-control-md" name="rayon_id" disabled>
|
2025-01-04 13:53:53 +07:00
|
|
|
<option value="">Pilih Rayon</option>
|
|
|
|
|
@foreach ($rayons as $rayon)
|
|
|
|
|
<option value="{{ $rayon->id }}" {{ $form->rayon_id == $rayon->id ? 'selected' : '' }}>{{ $rayon->name }}</option>
|
|
|
|
|
@endforeach
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
2026-06-01 15:01:03 +07:00
|
|
|
<label class="form-label">Tanggal Penggunaan</label>
|
|
|
|
|
<input type="text" class="form-control" name="tanggal"
|
|
|
|
|
value="{{ $form->tanggal ? \Carbon\Carbon::parse($form->tanggal)->locale('id')->translatedFormat('d F Y') : '-' }}" readonly>
|
2025-01-04 13:53:53 +07:00
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label class="form-label">Tujuan</label>
|
|
|
|
|
<input type="text" class="form-control" name="tujuan" value="{{ $form->tujuan }}" readonly>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label class="form-label">Jarak (km)</label>
|
|
|
|
|
<input type="number" class="form-control" name="jarak" value="{{ $form->jarak }}" readonly>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label class="form-label">Allowance</label>
|
2026-06-01 15:01:03 +07:00
|
|
|
<input type="text" class="form-control" name="allowance" id="allowance" value="{{ $form->allowance }}" readonly>
|
2025-01-04 13:53:53 +07:00
|
|
|
</div>
|
2026-06-01 15:01:03 +07:00
|
|
|
<div class="mb-3">
|
2025-06-18 19:15:53 +07:00
|
|
|
<label class="form-label">Transport Dalam Kota</label>
|
2026-06-01 15:01:03 +07:00
|
|
|
<input type="text" class="form-control" name="transport_dalkot" id="transport_dalkot" value="{{ $form->transport_dalkot }}" readonly>
|
2025-01-04 13:53:53 +07:00
|
|
|
</div>
|
2026-06-01 15:01:03 +07:00
|
|
|
<div class="mb-3">
|
2025-06-18 19:15:53 +07:00
|
|
|
<label class="form-label">Transport Antar Kota</label>
|
2026-06-01 15:01:03 +07:00
|
|
|
<input type="text" class="form-control" name="transport_ankot" id="transport_ankot" value="{{ $form->transport_ankot }}" readonly>
|
|
|
|
|
</div>
|
2025-01-04 13:53:53 +07:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-lg-6">
|
2026-06-01 15:01:03 +07:00
|
|
|
<div class="mb-3">
|
2025-06-18 19:15:53 +07:00
|
|
|
<label class="form-label">Hotel</label>
|
2026-06-01 15:01:03 +07:00
|
|
|
<input type="text" class="form-control" name="hotel" id="hotel" value="{{ $form->hotel }}" readonly>
|
2025-06-18 19:15:53 +07:00
|
|
|
</div>
|
2026-06-01 15:01:03 +07:00
|
|
|
<div class="mb-3">
|
2025-06-18 19:15:53 +07:00
|
|
|
<label class="form-label">Total</label>
|
|
|
|
|
<input type="text" class="form-control" name="total" id="total" value="{{ $form->total }}" readonly>
|
|
|
|
|
</div>
|
2026-06-01 15:01:03 +07:00
|
|
|
<div class="mb-3">
|
2025-06-18 19:15:53 +07:00
|
|
|
<label class="form-label">Status</label>
|
|
|
|
|
<input type="text" class="form-control" name="status" value="{{ $form->status }}" readonly>
|
2026-06-01 15:01:03 +07:00
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label class="form-label">UC Plan</label><br>
|
|
|
|
|
@if($form->uc_plan)
|
|
|
|
|
<a href="{{ $form->uc_plan }}" target="_blank" class="btn btn-sm btn-outline-info px-3"><i class="fas fa-file-alt mr-1"></i> Lihat Dokumen Plan</a>
|
|
|
|
|
@else
|
|
|
|
|
<span class="text-muted small font-italic">- Tidak ada plan diunggah -</span>
|
|
|
|
|
@endif
|
|
|
|
|
</div>
|
2025-03-04 14:48:50 +07:00
|
|
|
</div>
|
2025-10-13 14:55:46 +07:00
|
|
|
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="mb-4">
|
2026-06-01 15:01:03 +07:00
|
|
|
<label class="form-label">Lampiran Bukti Transaksi</label>
|
2025-10-13 14:55:46 +07:00
|
|
|
<div class="table-responsive">
|
|
|
|
|
<table class="table table-bordered align-middle">
|
|
|
|
|
<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)
|
|
|
|
|
@php
|
|
|
|
|
$categoryValue = $attachment['file_category'] ?? null;
|
|
|
|
|
$categoryLabel = $categoryValue ? ucwords(str_replace('_', ' ', $categoryValue)) : '-';
|
|
|
|
|
@endphp
|
|
|
|
|
<tr>
|
|
|
|
|
<td>{{ $categoryLabel }}</td>
|
|
|
|
|
<td>{{ $attachment['filename'] ?? basename($attachment['file_path']) }}</td>
|
|
|
|
|
<td class="text-center">
|
|
|
|
|
<button type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-secondary preview-attachment"
|
|
|
|
|
data-preview-url="{{ $attachment['preview_url'] }}"
|
|
|
|
|
data-download-url="{{ $attachment['download_url'] }}"
|
|
|
|
|
data-preview-type="{{ $attachment['preview_type'] }}"
|
|
|
|
|
data-category="{{ $categoryLabel }}">
|
|
|
|
|
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="text-center text-muted">
|
2026-06-01 15:01:03 +07:00
|
|
|
<td colspan="4">Tidak ada lampiran bukti tersedia.</td>
|
2025-10-13 14:55:46 +07:00
|
|
|
</tr>
|
|
|
|
|
@endforelse
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-01-04 13:53:53 +07:00
|
|
|
<div class="col-lg-12">
|
|
|
|
|
<a href="{{ route('forms.up-country') }}" 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.up-country.approve', $form->id) }}">Approve 1</button>
|
2026-06-01 15:01:03 +07:00
|
|
|
<button type="button" class="btn btn-danger open-reject-modal" data-action="{{ route('forms.up-country.reject', $form->id) }}">Reject</button>
|
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.up-country.approve2', $form->id) }}">Approve 2</button>
|
2026-06-01 15:01:03 +07:00
|
|
|
<button type="button" class="btn btn-danger open-reject-modal" data-action="{{ route('forms.up-country.reject', $form->id) }}">Reject</button>
|
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.up-country.final-approve', $form->id) }}">Final Approve</button>
|
|
|
|
|
@endif
|
2025-01-04 13:53:53 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-06-01 15:01:03 +07:00
|
|
|
</div>
|
2025-01-04 13:53:53 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2026-06-01 15:01:03 +07:00
|
|
|
|
|
|
|
|
{{-- MODAL PREVIEW DAN APPROVAL SYSTEM --}}
|
2025-03-04 14:35:50 +07:00
|
|
|
<section>
|
2026-06-01 15:01:03 +07:00
|
|
|
@include('backend.components.attachment-preview-modal', [
|
2025-10-13 14:55:46 +07:00
|
|
|
'modalId' => 'viewAttachmentPreviewModal',
|
|
|
|
|
'title' => 'Attachment Preview',
|
|
|
|
|
])
|
|
|
|
|
|
2026-06-01 15:01:03 +07:00
|
|
|
{{-- MODAL APPROVE 2 --}}
|
|
|
|
|
<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" style="border-radius: 12px; overflow: hidden;">
|
|
|
|
|
<form id="approveForm" method="POST" action="">
|
|
|
|
|
@csrf
|
|
|
|
|
@method('PUT')
|
|
|
|
|
<div class="modal-header bg-primary text-white">
|
|
|
|
|
<h5 class="modal-title fw-bold" id="approveModalLabel"><i class="fas fa-check-heading mr-2"></i>Review & Approve Pengajuan</h5>
|
|
|
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
|
|
|
<span aria-hidden="true">×</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body bg-light">
|
|
|
|
|
<div id="loadingSpinner" class="d-flex justify-content-center align-items-center" style="height: 250px;">
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
|
|
|
<p class="text-muted small mt-2">Memuat dokumen detail...</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="modalContent" class="d-none">
|
|
|
|
|
<div id="approve1_log_box" class="alert alert-success border-0 mb-3 d-none shadow-sm" style="border-radius: 8px;">
|
|
|
|
|
<div class="d-flex align-items-center">
|
|
|
|
|
<i class="fas fa-check-circle fa-lg mr-2"></i>
|
|
|
|
|
<div>
|
|
|
|
|
<span class="d-block fw-bold" style="font-size: 13px;">Telah Disetujui pada Approve 1</span>
|
|
|
|
|
<small class="d-block" style="font-size: 11px; opacity: 0.9;">
|
|
|
|
|
<strong>Oleh:</strong> <span id="appr1_by"></span> | <strong>Waktu:</strong> <span id="appr1_at"></span> WIB
|
|
|
|
|
</small>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h6 class="text-muted fw-bold mb-3 small text-uppercase tracking-wider"><i class="fas fa-info-circle mr-1"></i> Detail Informasi Biaya</h6>
|
|
|
|
|
<ul class="list-group shadow-sm mb-3" style="border-radius: 8px; overflow: hidden;">
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Expense Number:</strong> <span id="view_expense_number" class="fw-bold text-primary"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>User Pengaju:</strong> <span id="view_user" class="fw-bold"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Rayon / Cabang:</strong> <span id="view_rayon"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Tanggal Penggunaan:</strong> <span id="view_tanggal"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Tujuan Lokasi:</strong> <span id="view_tujuan"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Jarak Tempuh:</strong> <span id="view_jarak" class="badge badge-secondary p-2"></span></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<h6 class="text-muted fw-bold mb-3 small text-uppercase tracking-wider"><i class="fas fa-money-bill-wave mr-1"></i> Rincian Finansial & Bukti Dokumen</h6>
|
|
|
|
|
<div class="table-responsive shadow-sm bg-white border rounded" style="border-radius: 8px;">
|
|
|
|
|
<table class="table table-sm table-hover mb-0">
|
|
|
|
|
<thead class="thead-light">
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Komponen Biaya</th>
|
|
|
|
|
<th>Nominal Pengajuan</th>
|
|
|
|
|
<th class="text-center">Link File Bukti</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Allowance:</strong></td>
|
|
|
|
|
<td><span id="allowance_value" class="text-dark"></span></td>
|
|
|
|
|
<td class="text-center" id="bukti_allowance"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Transport Dalam Kota (Dalkot):</strong></td>
|
|
|
|
|
<td><span id="transport_dalkot_value" class="text-dark"></span></td>
|
|
|
|
|
<td class="text-center" id="bukti_transport_dalkot"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Transport Antar Kota (Ankot):</strong></td>
|
|
|
|
|
<td><span id="transport_ankot_value" class="text-dark"></span></td>
|
|
|
|
|
<td class="text-center" id="bukti_transport_ankot"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Hotel:</strong></td>
|
|
|
|
|
<td><span id="hotel_value" class="text-dark"></span></td>
|
|
|
|
|
<td class="text-center" id="bukti_hotel"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="bg-light font-weight-bold">
|
|
|
|
|
<td><strong>UC Plan Dokumen:</strong></td>
|
|
|
|
|
<td>-</td>
|
|
|
|
|
<td class="text-center" id="uc_plan"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer bg-white border-top">
|
|
|
|
|
<button type="button" class="btn btn-secondary px-4 rounded-pill" data-dismiss="modal">Cancel</button>
|
|
|
|
|
<button type="submit" class="btn btn-primary px-4 rounded-pill"><i class="fas fa-check mr-1"></i> Konfirmasi Approve</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
{{-- MODAL CHECKLIST UNTUK FINAL APPROVE --}}
|
|
|
|
|
<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" style="border-radius: 12px; overflow: hidden;">
|
|
|
|
|
<form id="finalApproveForm" method="POST" action="">
|
|
|
|
|
@csrf
|
|
|
|
|
@method('PUT')
|
|
|
|
|
<div class="modal-header bg-dark text-white">
|
|
|
|
|
<h5 class="modal-title fw-bold" id="finalApproveModalLabel"><i class="fas fa-clipboard-check mr-2"></i>Final Closing Checklist Budget</h5>
|
|
|
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
|
|
|
<span aria-hidden="true">×</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body bg-light">
|
|
|
|
|
<div id="finalLoadingSpinner" class="d-flex justify-content-center align-items-center" style="height: 200px;">
|
|
|
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="finalModalContent" class="d-none">
|
|
|
|
|
<p class="small text-muted mb-3">Tinjau kembali berkas pengaju biaya dinas bawah sebelum melakukan pelepasan dana cabang:</p>
|
|
|
|
|
<ul class="list-group shadow-sm mb-3">
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Expense Number:</strong> <span id="final_expense_number" class="fw-bold text-dark"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>User Pengaju:</strong> <span id="final_user"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Rayon:</strong> <span id="final_rayon"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Tanggal Dinas:</strong> <span id="final_tanggal"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Tujuan:</strong> <span id="final_tujuan"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>Jarak Tempuh:</strong> <span id="final_jarak"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>File Bukti Allowance:</strong> <span id="final_bukti_allowance"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>File Bukti Transport Dalkot:</strong> <span id="final_bukti_transport_dalkot"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>File Bukti Transport Ankot:</strong> <span id="final_bukti_transport_ankot"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>File Bukti Hotel:</strong> <span id="final_bukti_hotel"></span></li>
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between"><strong>UC Plan:</strong> <span id="final_uc_plan"></span></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<p class="mt-3 fw-bold text-dark small text-uppercase"><i class="fas fa-tasks mr-1"></i> Pilih Item Komponen Yang Di-approve :</p>
|
|
|
|
|
<ul class="list-group shadow-sm bg-white p-3 border rounded">
|
|
|
|
|
<li>
|
|
|
|
|
<div class="form-group mb-2">
|
|
|
|
|
<div class="custom-control custom-checkbox">
|
|
|
|
|
<input type="checkbox" class="custom-control-input" id="final_allowance" name="allowance">
|
|
|
|
|
<label class="custom-control-label" for="final_allowance">Allowance (<span id="final_allowance_value"></span>)</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<div class="form-group mb-2">
|
|
|
|
|
<div class="custom-control custom-checkbox">
|
|
|
|
|
<input type="checkbox" class="custom-control-input" id="final_transport_dalkot" name="transport_dalkot">
|
|
|
|
|
<label class="custom-control-label" for="final_transport_dalkot">Transport Dalkot (<span id="final_transport_dalkot_value"></span>)</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<div class="form-group mb-2">
|
|
|
|
|
<div class="custom-control custom-checkbox">
|
|
|
|
|
<input type="checkbox" class="custom-control-input" id="final_transport_ankot" name="transport_ankot">
|
|
|
|
|
<label class="custom-control-label" for="final_transport_ankot">Transport Ankot (<span id="final_transport_ankot_value"></span>)</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<div class="form-group mb-2">
|
|
|
|
|
<div class="custom-control custom-checkbox">
|
|
|
|
|
<input type="checkbox" class="custom-control-input" id="final_hotel" name="hotel">
|
|
|
|
|
<label class="custom-control-label" for="final_hotel">Hotel (<span id="final_hotel_value"></span>)</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<div class="form-group mt-3 mb-0">
|
|
|
|
|
<label class="fw-bold text-muted">Total Approved Budget</label>
|
|
|
|
|
<input type="text" class="form-control bg-white font-weight-bold text-success" id="total2" name="total" value="0" readonly>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer bg-white border-top">
|
|
|
|
|
<button type="button" class="btn btn-secondary px-4 rounded-pill" data-dismiss="modal">Cancel</button>
|
|
|
|
|
<button type="submit" class="btn btn-primary px-4 rounded-pill">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">×</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>
|
2025-03-04 14:35:50 +07:00
|
|
|
@endsection
|
|
|
|
|
|
|
|
|
|
@section('scripts')
|
2025-01-04 13:53:53 +07:00
|
|
|
<script>
|
2026-06-01 15:01:03 +07:00
|
|
|
$(document).ready(function() {
|
|
|
|
|
// Inisialisasi AutoNumeric Readonly Masking
|
|
|
|
|
const configReadonly = {
|
|
|
|
|
digitGroupSeparator: '.',
|
|
|
|
|
decimalCharacter: ',',
|
|
|
|
|
currencySymbol: 'Rp. ',
|
|
|
|
|
decimalPlaces: 0,
|
|
|
|
|
readOnly: true
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
new AutoNumeric('#allowance', configReadonly);
|
|
|
|
|
new AutoNumeric('#transport_dalkot', configReadonly);
|
|
|
|
|
new AutoNumeric('#transport_ankot', configReadonly);
|
|
|
|
|
new AutoNumeric('#hotel', configReadonly);
|
|
|
|
|
new AutoNumeric('#total', configReadonly);
|
|
|
|
|
|
|
|
|
|
// Logika Klik Preview Attachment Gallery
|
|
|
|
|
$(document).on('click', '.preview-attachment', function () {
|
|
|
|
|
const button = $(this);
|
|
|
|
|
const previewType = button.data('preview-type');
|
|
|
|
|
const previewUrl = button.data('preview-url');
|
|
|
|
|
const downloadUrl = button.data('download-url');
|
|
|
|
|
const category = button.data('category') || 'Attachment';
|
|
|
|
|
|
|
|
|
|
if (!previewUrl) {
|
|
|
|
|
if (downloadUrl) {
|
|
|
|
|
window.open(downloadUrl, '_blank');
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
openAttachmentModal('#viewAttachmentPreviewModal', category, previewType, previewUrl);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Logika Pembukaan Modal Reject
|
|
|
|
|
$(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('');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// ==========================================
|
|
|
|
|
// FIX PREVIEW LOADING: MODAL APPROVE 2 (AM / MIS)
|
|
|
|
|
// ==========================================
|
|
|
|
|
$(document).on('click', '.open-approve-modal', function() {
|
|
|
|
|
const approveUrl = $(this).data('id');
|
|
|
|
|
|
|
|
|
|
// Hidupkan spinner, sembunyikan kotak data kontent
|
|
|
|
|
$('#loadingSpinner').removeClass('d-none').addClass('d-flex').show();
|
|
|
|
|
$('#modalContent').addClass('d-none');
|
|
|
|
|
$('#approve1_log_box').addClass('d-none'); // Reset log box
|
|
|
|
|
|
|
|
|
|
$('#approveForm').attr('action', approveUrl);
|
|
|
|
|
$('#approveModal').modal('show');
|
|
|
|
|
|
|
|
|
|
// Mengambil data detail JSON via API route backend
|
|
|
|
|
$.get(approveUrl.replace(/approve2|final-approve/g, 'detail'), function (data) {
|
|
|
|
|
const formatter = new Intl.NumberFormat('id-ID', {
|
|
|
|
|
style: 'currency', currency: 'IDR', minimumFractionDigits: 0
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Isi Rincian Finansial Biaya
|
|
|
|
|
$('#allowance_value').text(formatter.format(data.allowance));
|
|
|
|
|
$('#transport_dalkot_value').text(formatter.format(data.transport_dalkot));
|
|
|
|
|
$('#transport_ankot_value').text(formatter.format(data.transport_ankot));
|
|
|
|
|
$('#hotel_value').text(formatter.format(data.hotel));
|
|
|
|
|
|
|
|
|
|
// Isi Detail Data Atas (SINKRON DENGAN ID HTML BARU)
|
|
|
|
|
$('#view_user').text(data.user ? data.user.name : '-');
|
|
|
|
|
$('#view_expense_number').text(data.expense_number);
|
|
|
|
|
$('#view_rayon').text(data.rayon ? data.rayon.name : '-');
|
|
|
|
|
|
|
|
|
|
if (data.tanggal) {
|
|
|
|
|
$('#view_tanggal').text(new Date(data.tanggal).toLocaleDateString('id-ID', {
|
|
|
|
|
year: 'numeric', month: 'long', day: 'numeric'
|
|
|
|
|
}));
|
|
|
|
|
} else {
|
|
|
|
|
$('#view_tanggal').text('-');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$('#view_tujuan').text(data.tujuan ? data.tujuan : '-');
|
|
|
|
|
$('#view_jarak').text(data.jarak ? data.jarak + ' km' : '0 km');
|
|
|
|
|
|
|
|
|
|
// Suntik Element Link Download Bukti Transaksi Dokumen Fisik
|
|
|
|
|
$('#bukti_allowance').html(data.bukti_allowance ? '<a href="' + data.bukti_allowance + '" target="_blank" class="btn btn-xs btn-primary"><i class="fas fa-download"></i> Buka File</a>' : '<span class="text-muted">-</span>');
|
|
|
|
|
$('#bukti_transport_dalkot').html(data.bukti_transport_dalkot ? '<a href="' + data.bukti_transport_dalkot + '" target="_blank" class="btn btn-xs btn-primary"><i class="fas fa-download"></i> Buka File</a>' : '<span class="text-muted">-</span>');
|
|
|
|
|
$('#bukti_transport_ankot').html(data.bukti_transport_ankot ? '<a href="' + data.bukti_transport_ankot + '" target="_blank" class="btn btn-xs btn-primary"><i class="fas fa-download"></i> Buka File</a>' : '<span class="text-muted">-</span>');
|
|
|
|
|
$('#bukti_hotel').html(data.bukti_hotel ? '<a href="' + data.bukti_hotel + '" target="_blank" class="btn btn-xs btn-primary"><i class="fas fa-download"></i> Buka File</a>' : '<span class="text-muted">-</span>');
|
|
|
|
|
$('#uc_plan').html(data.uc_plan ? '<a href="' + data.uc_plan + '" target="_blank" class="btn btn-xs btn-info"><i class="fas fa-file-pdf"></i> Open Plan</a>' : '<span class="text-muted">-</span>');
|
|
|
|
|
|
|
|
|
|
// SUNTIK LOG AUDIT TRAIL DATA APPROVE 1
|
|
|
|
|
if(data.approved_at && data.status !== 'On Progress') {
|
|
|
|
|
$('#appr1_by').text(data.approved_by_user ? data.approved_by_user.name : 'Regional Admin');
|
|
|
|
|
|
|
|
|
|
// Format Tanggal Jam Approve 1
|
|
|
|
|
let dateObj = new Date(data.approved_at);
|
|
|
|
|
let formattedAppr1Date = dateObj.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' }) + ' ' +
|
|
|
|
|
String(dateObj.getHours()).padStart(2, '0') + ':' +
|
|
|
|
|
String(dateObj.getMinutes()).padStart(2, '0');
|
|
|
|
|
|
|
|
|
|
$('#appr1_at').text(formattedAppr1Date);
|
|
|
|
|
$('#approve1_log_box').removeClass('d-none'); // Tampilkan box log hijau
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Hilangkan Loading Spinner, Tampilkan Kotak Konten Review Utama
|
|
|
|
|
$('#loadingSpinner').hide().removeClass('d-flex').addClass('d-none');
|
|
|
|
|
$('#modalContent').removeClass('d-none');
|
|
|
|
|
}).fail(function() {
|
|
|
|
|
Swal.fire('Error', 'Gagal memuat detail data kueri kuesioner biaya dari server.', 'error');
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Logika Pembukaan Modal Final Approve Checklist Dinamis
|
|
|
|
|
$(document).on('click', '.final-approve-modal', function() {
|
|
|
|
|
const approveUrl = $(this).data('id');
|
|
|
|
|
|
|
|
|
|
$('#finalLoadingSpinner').addClass('d-flex').show();
|
|
|
|
|
$('#finalModalContent').addClass('d-none');
|
|
|
|
|
$('#finalApproveForm').attr('action', approveUrl);
|
|
|
|
|
$('#finalApproveModal').modal('show');
|
|
|
|
|
|
|
|
|
|
$.get(approveUrl.replace('approve', 'detail'), function (data) {
|
|
|
|
|
const formatter = new Intl.NumberFormat('id-ID', {
|
|
|
|
|
style: 'currency', currency: 'IDR', minimumFractionDigits: 0
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#final_allowance_value').text(formatter.format(data.allowance));
|
|
|
|
|
$('#final_transport_dalkot_value').text(formatter.format(data.transport_dalkot));
|
|
|
|
|
$('#final_transport_ankot_value').text(formatter.format(data.transport_ankot));
|
|
|
|
|
$('#final_hotel_value').text(formatter.format(data.hotel));
|
|
|
|
|
|
|
|
|
|
$('#final_allowance').data('value', data.allowance);
|
|
|
|
|
$('#final_transport_dalkot').data('value', data.transport_dalkot);
|
|
|
|
|
$('#final_transport_ankot').data('value', data.transport_ankot);
|
|
|
|
|
$('#final_hotel').data('value', data.hotel);
|
|
|
|
|
|
|
|
|
|
$('#final_user').text(data.user ? data.user.name : '-');
|
|
|
|
|
$('#final_expense_number').text(data.expense_number);
|
|
|
|
|
$('#final_rayon').text(data.rayon ? data.rayon.name : '-');
|
|
|
|
|
$('#final_tanggal').text(new Date(data.tanggal).toLocaleDateString('id-ID', {
|
|
|
|
|
year: 'numeric', month: 'long', day: 'numeric'
|
|
|
|
|
}));
|
|
|
|
|
$('#final_tujuan').text(data.tujuan);
|
|
|
|
|
$('#final_jarak').text(data.jarak + ' km');
|
|
|
|
|
|
|
|
|
|
// Set default ceklis aktif saat pertama kali dibuka
|
|
|
|
|
$('.custom-control-input').prop('checked', true);
|
|
|
|
|
|
|
|
|
|
$('#finalLoadingSpinner').hide().removeClass('d-flex').addClass('d-none');
|
|
|
|
|
$('#finalModalContent').removeClass('d-none');
|
|
|
|
|
|
|
|
|
|
// Hitung akumulasi awal
|
|
|
|
|
calculateShowPageApprovedTotal();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function calculateShowPageApprovedTotal() {
|
|
|
|
|
let totalApproved = 0;
|
|
|
|
|
$('.custom-control-input:checked').each(function () {
|
|
|
|
|
totalApproved += parseFloat($(this).data('value') || 0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const formatter = new Intl.NumberFormat('id-ID', {
|
|
|
|
|
style: 'currency', currency: 'IDR', minimumFractionDigits: 0,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Menampilkan ke field id #total2 milik view detail Anda
|
|
|
|
|
$('#total2').val(formatter.format(totalApproved));
|
|
|
|
|
|
|
|
|
|
// Suntik input hidden ke form finalApproveForm agar terbaca request backend
|
|
|
|
|
if($('#hidden_view_approved_total').length === 0) {
|
|
|
|
|
$('#finalApproveForm').append(`<input type="hidden" id="hidden_view_approved_total" name="approved_total" value="${totalApproved}">`);
|
|
|
|
|
} else {
|
|
|
|
|
$('#hidden_view_approved_total').val(totalApproved);
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-03-04 14:35:50 +07:00
|
|
|
|
2026-06-01 15:01:03 +07:00
|
|
|
// Bind perubahan checklist
|
|
|
|
|
$(document).on('change', '.custom-control-input', function () {
|
|
|
|
|
calculateShowPageApprovedTotal();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#finalApproveModal').on('hidden.bs.modal', function () {
|
|
|
|
|
$('.custom-control-input').prop('checked', false);
|
|
|
|
|
$('#total2').val('0');
|
|
|
|
|
$('#hidden_view_approved_total').remove();
|
|
|
|
|
});
|
|
|
|
|
}); // <--- PENUTUP SEKAT READY FUNCTION JQUERY YANG HILANG SEBELUMNYA
|
|
|
|
|
|
|
|
|
|
// Handler Render Gallery Modal Core Engine (Sekarang Terbaca Sempurna Sebagai Fungsi Global)
|
2025-10-13 14:55:46 +07:00
|
|
|
function openAttachmentModal(modalSelector, title, type, source) {
|
|
|
|
|
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(title || 'Attachment');
|
|
|
|
|
$image.addClass('d-none').attr('src', '');
|
|
|
|
|
$object.addClass('d-none').attr('data', '').attr('src', '');
|
|
|
|
|
$placeholder.removeClass('d-none');
|
|
|
|
|
|
|
|
|
|
if (type === 'image' && source) {
|
|
|
|
|
$image.attr('src', source).removeClass('d-none');
|
|
|
|
|
$placeholder.addClass('d-none');
|
|
|
|
|
} else if (type === 'pdf' && source) {
|
|
|
|
|
$object.attr('data', source).attr('src', source).removeClass('d-none');
|
|
|
|
|
$placeholder.addClass('d-none');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
|
|
|
|
|
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
|
|
|
|
|
} else {
|
|
|
|
|
$modal.modal('show');
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-03-04 14:35:50 +07:00
|
|
|
</script>
|
2026-06-01 15:01:03 +07:00
|
|
|
@endsection
|
