Files
lpj/resources/views/noc/form.blade.php
Daeng Deni Mardaeni 19fb39b02f feat(noc): implementasi mutual exclusive selection untuk status kurang dan lebih bayar
- Menambahkan JavaScript untuk mutual exclusive selection antara status kurang bayar dan lebih bayar
- Hanya satu status yang bisa dipilih pada satu waktu untuk mencegah konflik data
- Implementasi fungsi resetFields() untuk membersihkan field yang tidak dipilih
- Menambahkan event handler untuk toggle visibility field berdasarkan pilihan status
- Menambahkan logging untuk tracking perubahan status pembayaran
- Field nominal dan bukti pengembalian otomatis direset ketika status berubah
- Mempertahankan UI existing dengan checkbox namun menambahkan logika mutual exclusive
- Menambahkan validasi client-side untuk mencegah input data yang tidak konsisten
- Support untuk readonly mode ketika memo penyelesaian sudah ada
- Implementasi function-level comments untuk dokumentasi kode
2025-07-31 13:24:18 +07:00

471 lines
27 KiB
PHP

@extends('layouts.main')
@section('breadcrumbs')
{{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection
@php
$hasMemo = false;
try {
$memoPath = $persetujuanPenawaran->noc->memo_penyelesaian ?? null;
$hasMemo = isset($memoPath) && !empty($memoPath) && Storage::disk('public')->exists($memoPath);
} catch (Exception $e) {
// Jika terjadi error, $hasMemo tetap false
}
@endphp
@section('content')
<div class="grid gap-5 mx-auto w-full lg:gap-7.5">
<div class="pb-2.5 border card border-agi-100">
<div class="card-header bg-agi-50" id="basic_settings">
<div class="flex flex-row gap-1.5 card-title">
{{ $hasMemo ? 'Proses Penyelesaian NOC' : 'NOC' }}
</div>
<div class="flex gap-2 items-center">
<a href="{{ route('noc.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i>
Back</a>
</div>
</div>
<div class="card-body">
<form action="{{ !$hasMemo ? route('noc.store') : route('noc.update', $persetujuanPenawaran) }}"
method="POST" class="grid gap-5" enctype="multipart/form-data">
@csrf
@if ($hasMemo)
@method('PUT')
@endif
<input type="hidden" name="penawaran_id"
value="{{ $persetujuanPenawaran->penawaran_id ?? old('penawaran_id') }}">
<input type="hidden" name="persetujuan_penawaran_id"
value="{{ $persetujuanPenawaran->id ?? old('persetujuan_penawaran_id') }}">
<input type="hidden" name="permohonan_id"
value="{{ $persetujuanPenawaran->penawaran->permohonan->id ?? $persetujuanPenawaran->permohonan->id }}">
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Status Bayar
</label>
<div class="flex flex-wrap items-baseline w-full">
<select
class="input tomselect w-full @error('status_pembayar') border-danger bg-danger-light @enderror"
name="status_pembayar" id="status_pembayar" {{ $hasMemo ? 'disabled' : '' }}>
<option value="">Pilih Status Bayar</option>
<option value="sudah_bayar"
{{ old('status_pembayar') == 'sudah_bayar' || $persetujuanPenawaran?->penawaran?->permohonan?->status_bayar == 'sudah_bayar' ? 'selected' : '' }}>
Sudah Bayar</option>
<option value="belum_bayar"
{{ old('status_pembayar') == 'belum_bayar' || $persetujuanPenawaran?->penawaran?->permohonan?->status_bayar == 'belum_bayar' ? 'selected' : '' }}>
Belum Bayar</option>
</select>
@error('status_bayar')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Bukti Pembayaran
</label>
<div class="flex flex-wrap items-baseline w-full">
@if (!empty($persetujuanPenawaran->bukti_bayar))
<div class="flex items-center mt-2">
<a href="{{ Storage::url($persetujuanPenawaran->bukti_bayar) }}" target="_blank"
class="badge badge-sm badge-outline badge-warning">
<i class="mr-2 ki-filled ki-eye"></i> Lihat File
</a>
</div>
@endif
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Jumlah Yang Harus Disetor
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="number" name="total_harus_bayar" id="total_harus_bayar"
class="input w-full @error('total_harus_bayar') border-danger bg-danger-light @enderror"
value="{{ old('total_harus_bayar', $persetujuanPenawaran->nominal_bayar ?? '') }}"
readonly>
@error('total_harus_bayar')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Jumlah Yang Disetor
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="number" name="nominal_bayar" id="nominal_bayar"
class="input w-full @error('nominal_bayar') border-danger bg-danger-light @enderror"
value="{{ old('nominal_bayar', $persetujuanPenawaran->noc->nominal_bayar ?? '') }}"
placeholder="Masukkan nominal bayar" {{ $hasMemo ? 'readonly' : '' }}>
@error('nominal_bayar')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Jumlah Pembukuan
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="number" name="total_pembukuan" id="total_pembukuan"
class="input w-full @error('total_pembukuan') border-danger bg-danger-light @enderror"
value="{{ old('total_pembukuan', $persetujuanPenawaran->noc->total_pembukuan ?? '') }}"
placeholder="Masukkan total pembukuan" {{ $hasMemo ? 'readonly' : '' }}>
@error('total_pembukuan')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Tanggal Pembayaran
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="date" name="tanggal_pembayaran" id="tanggal_pembayaran"
class="input w-full @error('tanggal_pembayaran') border-danger bg-danger-light @enderror"
value="{{ old('tanggal_pembayaran', isset($persetujuanPenawaran->noc->tanggal_pembayaran) ? date('Y-m-d', strtotime($persetujuanPenawaran->noc->tanggal_pembayaran)) : '') }}"
{{ $hasMemo ? 'readonly' : '' }}>
@error('tanggal_pembayaran')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Field Status Kurang Bayar -->
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Status Kurang Bayar
</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex gap-4 items-center">
<label class="checkbox-group">
<input class="checkbox checkbox-sm" name="status_kurang_bayar" id="status_kurang_bayar"
value="1" type="checkbox"
{{ old('status_kurang_bayar', $persetujuanPenawaran->noc->status_kurang_bayar ?? false) ? 'checked' : '' }}
{{ $hasMemo ? 'disabled' : '' }}>
<span class="checkbox-label">
Ya, ada kurang bayar
</span>
</label>
</div>
@error('status_kurang_bayar')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Field Nominal Kurang Bayar -->
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" id="nominal_kurang_bayar_section"
style="display: none;">
<label class="form-label max-w-56">
Nominal Kurang Bayar
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="number" name="nominal_kurang_bayar" id="nominal_kurang_bayar"
class="input w-full @error('nominal_kurang_bayar') border-danger bg-danger-light @enderror"
value="{{ old('nominal_kurang_bayar', $persetujuanPenawaran->noc->nominal_kurang_bayar ?? '') }}"
placeholder="Masukkan nominal kurang bayar" {{ $hasMemo ? 'readonly' : '' }}>
@error('nominal_kurang_bayar')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Field Status Lebih Bayar -->
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Status Lebih Bayar
</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex gap-4 items-center">
<label class="checkbox-group">
<input class="checkbox checkbox-sm" name="status_lebih_bayar" id="status_lebih_bayar"
value="1" type="checkbox"
{{ old('status_lebih_bayar', $persetujuanPenawaran->noc->status_lebih_bayar ?? false) ? 'checked' : '' }}
{{ $hasMemo ? 'disabled' : '' }}>
<span class="checkbox-label">Ya, ada lebih bayar </span>
</label>
</div>
@error('status_lebih_bayar')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Field Nominal Lebih Bayar -->
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" id="nominal_lebih_bayar_section"
style="display: none;">
<label class="form-label max-w-56">
Nominal Lebih Bayar
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="number" name="nominal_lebih_bayar" id="nominal_lebih_bayar"
class="input w-full @error('nominal_lebih_bayar') border-danger bg-danger-light @enderror"
value="{{ old('nominal_lebih_bayar', $persetujuanPenawaran->noc->nominal_lebih_bayar ?? '') }}"
placeholder="Masukkan nominal lebih bayar" {{ $hasMemo ? 'readonly' : '' }}>
@error('nominal_lebih_bayar')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Field Bukti Pengembalian -->
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" id="bukti_pengembalian_section"
style="display: none;">
<label class="form-label max-w-56">
Bukti Pengembalian
</label>
<div class="flex flex-wrap items-baseline w-full">
@if (!$hasMemo)
<input type="file" name="bukti_pengembalian" id="bukti_pengembalian"
class="file-input w-full @error('bukti_pengembalian') border-danger bg-danger-light @enderror"
accept=".pdf,.jpg,.jpeg,.png">
@error('bukti_pengembalian')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
@endif
@if (isset($persetujuanPenawaran->noc->bukti_pengembalian) && !empty($persetujuanPenawaran->noc->bukti_pengembalian))
<div class="flex items-center mt-2">
<a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_pengembalian) }}"
target="_blank" class="badge badge-sm badge-outline badge-warning">
<i class="mr-2 ki-filled ki-eye"></i> Lihat File
</a>
</div>
@endif
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Bukti KSL
</label>
<div class="flex flex-wrap items-baseline w-full">
@if (!$hasMemo)
<input type="file" name="bukti_ksl" id="bukti_ksl"
class="file-input w-full @error('bukti_ksl') border-danger bg-danger-light @enderror"
accept=".pdf,.jpg,.jpeg,.png">
@error('bukti_ksl')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
@endif
@if (isset($persetujuanPenawaran->noc->bukti_ksl) && !empty($persetujuanPenawaran->noc->bukti_ksl))
<div class="flex items-center mt-2">
<a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_ksl) }}" target="_blank"
class="badge badge-sm badge-outline badge-warning">
<i class="mr-2 ki-filled ki-eye"></i> Lihat File
</a>
</div>
@endif
</div>
</div>
@if ($hasMemo)
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Memo Penyelesaian
</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex items-center">
<a href="{{ Storage::url($persetujuanPenawaran->noc->memo_penyelesaian) }}"
target="_blank" class="badge badge-sm badge-outline badge-warning">
<i class="mr-2 ki-filled ki-eye"></i> Lihat File
</a>
<input type="hidden" name="memo_penyelesaian_existing"
value="{{ $persetujuanPenawaran->noc->memo_penyelesaian }}">
</div>
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Bukti Penyelesaian
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="file" name="bukti_penyelesaian" id="bukti_penyelesaian"
class="file-input w-full @error('bukti_penyelesaian') border-danger bg-danger-light @enderror"
accept=".pdf,.jpg,.jpeg,.png">
@error('bukti_penyelesaian')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
@if (isset($persetujuanPenawaran->noc->bukti_penyelesaian) && !empty($persetujuanPenawaran->noc->bukti_penyelesaian))
<div class="flex items-center mt-2">
<a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_penyelesaian) }}"
target="_blank" class="badge badge-sm badge-outline badge-warning">
<i class="mr-2 ki-filled ki-eye"></i> Lihat File
</a>
<input type="hidden" name="bukti_penyelesaian_existing"
value="{{ $persetujuanPenawaran->noc->bukti_penyelesaian }}">
</div>
@endif
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Nominal Penyelesaian
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="number" name="nominal_penyelesaian" id="nominal_penyelesaian"
class="input w-full @error('nominal_penyelesaian') border-danger bg-danger-light @enderror"
value="{{ old('nominal_penyelesaian', $persetujuanPenawaran->noc->nominal_penyelesaian ?? '') }}"
placeholder="Masukkan nominal penyelesaian">
@error('nominal_penyelesaian')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Tanggal Penyelesaian
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="date" name="tanggal_penyelesaian" id="tanggal_penyelesaian"
class="input w-full @error('tanggal_penyelesaian') border-danger bg-danger-light @enderror"
value="{{ old('tanggal_penyelesaian', isset($persetujuanPenawaran->noc->tanggal_penyelesaian) ? date('Y-m-d', strtotime($persetujuanPenawaran->noc->tanggal_penyelesaian)) : '') }}">
@error('tanggal_penyelesaian')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
@endif
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Catatan
</label>
<div class="flex flex-wrap items-baseline w-full">
<textarea name="catatan" id="catatan" rows="4"
class="textarea w-full @error('catatan') border-danger bg-danger-light @enderror" readonly
placeholder="Masukkan catatan">{{ old('catatan', $persetujuanPenawaran->catatan ?? '') }}</textarea>
@error('catatan')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">
Catatan NOC
</label>
<div class="flex flex-wrap items-baseline w-full">
<textarea name="catatan_noc" id="catatan_noc" rows="4"
class="textarea w-full @error('catatan_noc') border-danger bg-danger-light @enderror"
placeholder="Masukkan catatan noc">{{ old('catatan_noc', $persetujuanPenawaran->noc->catatan_noc ?? '') }}</textarea>
@error('catatan_noc')
<em class="text-sm alert text-danger">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex justify-end">
<button type="submit" class="btn btn-primary">
Proses
</button>
</div>
</form>
</div>
</div>
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
/**
* Fungsi untuk mengelola mutual exclusive selection antara kurang bayar dan lebih bayar
* Hanya satu status yang bisa dipilih pada satu waktu
*/
const statusKurangBayar = document.getElementById('status_kurang_bayar');
const statusLebihBayar = document.getElementById('status_lebih_bayar');
const nominalKurangBayarSection = document.getElementById('nominal_kurang_bayar_section');
const nominalLebihBayarSection = document.getElementById('nominal_lebih_bayar_section');
const buktiPengembalianSection = document.getElementById('bukti_pengembalian_section');
/**
* Fungsi untuk reset field dan section visibility
* @param {string} type - 'kurang' atau 'lebih'
*/
function resetFields(type) {
if (type === 'kurang') {
// Reset field lebih bayar
statusLebihBayar.checked = false;
nominalLebihBayarSection.style.display = 'none';
buktiPengembalianSection.style.display = 'none';
document.getElementById('nominal_lebih_bayar').value = '';
document.getElementById('bukti_pengembalian').value = '';
} else if (type === 'lebih') {
// Reset field kurang bayar
statusKurangBayar.checked = false;
nominalKurangBayarSection.style.display = 'none';
document.getElementById('nominal_kurang_bayar').value = '';
}
}
/**
* Event handler untuk status kurang bayar
* Menampilkan field nominal kurang bayar dan menyembunyikan field lebih bayar
*/
if (statusKurangBayar) {
// Set initial state
if (statusKurangBayar.checked) {
nominalKurangBayarSection.style.display = 'flex';
resetFields('kurang');
}
statusKurangBayar.addEventListener('change', function() {
if (this.checked) {
nominalKurangBayarSection.style.display = 'flex';
resetFields('kurang');
console.log('Status kurang bayar dipilih, field lebih bayar direset');
} else {
nominalKurangBayarSection.style.display = 'none';
document.getElementById('nominal_kurang_bayar').value = '';
console.log('Status kurang bayar dibatalkan');
}
});
}
/**
* Event handler untuk status lebih bayar
* Menampilkan field nominal dan bukti pengembalian, menyembunyikan field kurang bayar
*/
if (statusLebihBayar) {
// Set initial state
if (statusLebihBayar.checked) {
nominalLebihBayarSection.style.display = 'flex';
buktiPengembalianSection.style.display = 'flex';
resetFields('lebih');
}
statusLebihBayar.addEventListener('change', function() {
if (this.checked) {
nominalLebihBayarSection.style.display = 'flex';
buktiPengembalianSection.style.display = 'flex';
resetFields('lebih');
console.log('Status lebih bayar dipilih, field kurang bayar direset');
} else {
nominalLebihBayarSection.style.display = 'none';
buktiPengembalianSection.style.display = 'none';
document.getElementById('nominal_lebih_bayar').value = '';
document.getElementById('bukti_pengembalian').value = '';
console.log('Status lebih bayar dibatalkan');
}
});
}
});
</script>
@endpush