✨(pembayaran): Implementasi fitur create pembayaran baru dengan autocomplete debitur
- Menambahkan method create() di PembayaranController untuk menampilkan form pembayaran baru - Menambahkan logika create pembayaran di method store() dengan validasi type 'create' - Menambahkan penyimpanan data pembayaran baru ke tabel persetujuan_penawaran dan noc - Menambahkan upload bukti bayar dengan penyimpanan ke storage public - Menambahkan migration untuk kolom branch_id di tabel noc - Menambahkan view create.blade.php dengan form pembayaran lengkap dan autocomplete debitur - Menambahkan validasi JavaScript untuk format file dan ukuran maksimal 2MB - Menambahkan TomSelect untuk pencarian debitur dengan AJAX real-time - Menambahkan integrasi dengan API debitur search untuk autocomplete - Memperbaiki method edit() untuk mendukung parameter tiket dalam pencarian persetujuan penawaran - Mengubah query dataForDatatables untuk mendukung data dari persetujuan_penawaran dan permohonan - Menambahkan mapping data yang fleksibel untuk menampilkan informasi dari berbagai sumber - Menambahkan field nomor_tiket, nominal_bayar, dan catatan pada form create - Menambahkan validasi client-side untuk memastikan file upload sesuai format - Menambahkan relasi branch_id pada tabel noc untuk tracking cabang pembuat - Menambahkan redirect ke pembayaran.index setelah berhasil menyimpan pembayaran baru - Menambahkan import PhpParser\Node\Expr\Cast\Object_ (perlu dibersihkan) - Mengoptimalkan query dengan eager loading dan mapping data yang efisien - Menambahkan support untuk pembayaran tanpa permohonan (standalone payment) - Menambahkan field is_permohonan untuk membedakan jenis pembayaran - Menambahkan validasi dan error handling yang komprehensif
This commit is contained in:
Daeng Deni Mardaeni
322
resources/views/pembayaran/create.blade.php
Normal file
322
resources/views/pembayaran/create.blade.php
Normal file
@@ -0,0 +1,322 @@
|
||||
@extends('layouts.main')
|
||||
|
||||
@section('breadcrumbs')
|
||||
{{ Breadcrumbs::render(request()->route()->getName()) }}
|
||||
@endsection
|
||||
|
||||
@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">
|
||||
Tambah Pembayaran
|
||||
</div>
|
||||
<div class="flex gap-2 items-center">
|
||||
<a href="{{ route('pembayaran.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="{{ route('pembayaran.store') }}" method="POST" class="grid gap-5"
|
||||
enctype="multipart/form-data" id="pembayaranForm">
|
||||
@csrf
|
||||
|
||||
<!-- Hidden fields untuk menyimpan ID yang dipilih -->
|
||||
<input type="hidden" name="permohonan_id" id="permohonan_id" value="{{ old('permohonan_id') }}">
|
||||
<input type="hidden" name="penawaran_id" id="penawaran_id" value="{{ old('penawaran_id') }}">
|
||||
<input type="hidden" name="debitur_id" id="debitur_id" value="{{ old('debitur_id') }}">
|
||||
<input type="hidden" name="type" id="create" value="create">
|
||||
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
|
||||
<label class="form-label max-w-56">
|
||||
Debitur <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<select name="debitur_search" id="debitur_search"
|
||||
class="input w-full @error('debitur_id') border-danger bg-danger-light @enderror"
|
||||
placeholder="Cari debitur berdasarkan kode atau nama...">
|
||||
<option value="">Pilih Debitur</option>
|
||||
</select>
|
||||
@error('debitur_id')
|
||||
<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">
|
||||
Nomor Registrasi
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<input type="text" name="nomor_registrasi" id="nomor_registrasi"
|
||||
class="input w-full @error('nomor_registrasi') border-danger bg-danger-light @enderror"
|
||||
value="{{ old('nomor_registrasi') }}" placeholder="Nomor Registrasi">
|
||||
@error('nomor_registrasi')
|
||||
<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">
|
||||
Nomor Tiket
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<input type="text" name="nomor_tiket" id="nomor_tiket"
|
||||
class="input w-full @error('nomor_tiket') border-danger bg-danger-light @enderror"
|
||||
value="{{ old('nomor_tiket') }}" placeholder="Nomor Tiket">
|
||||
@error('nomor_tiket')
|
||||
<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">
|
||||
Nominal Bayar <span class="text-danger">*</span>
|
||||
</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') }}" placeholder="Masukkan nominal bayar" min="0"
|
||||
step="0.01">
|
||||
@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">
|
||||
Bukti Bayar <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<input type="file" name="bukti_bayar" id="bukti_bayar"
|
||||
class="file-input w-full @error('bukti_bayar') border-danger bg-danger-light @enderror"
|
||||
accept=".pdf,.jpg,.jpeg,.png">
|
||||
<small class="mt-1 text-gray-600">Format yang diizinkan: PDF, JPG, JPEG, PNG (Max: 2MB)</small>
|
||||
@error('bukti_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">
|
||||
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"
|
||||
placeholder="Masukkan catatan (opsional)">{{ old('catatan') }}</textarea>
|
||||
@error('catatan')
|
||||
<em class="text-sm alert text-danger">{{ $message }}</em>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 justify-end">
|
||||
<a href="{{ route('pembayaran.index') }}" class="btn btn-secondary">
|
||||
Batal
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary" id="submitBtn">
|
||||
<i class="ki-filled ki-check"></i> Simpan Pembayaran
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
/**
|
||||
* Inisialisasi TomSelect untuk pencarian debitur dengan AJAX
|
||||
* Menggunakan autocomplete untuk mencari berdasarkan kode atau nama debitur
|
||||
*/
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Inisialisasi TomSelect untuk field debitur
|
||||
const debiturSelect = new window.TomSelect('#debitur_search', {
|
||||
valueField: 'id',
|
||||
labelField: 'display_name',
|
||||
searchField: ['kode_debitur', 'name'],
|
||||
placeholder: 'Ketik kode atau nama debitur untuk mencari...',
|
||||
load: function(query, callback) {
|
||||
// Minimal 2 karakter untuk mulai pencarian
|
||||
if (query.length < 2) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
||||
// Tampilkan loading state
|
||||
this.loading = true;
|
||||
|
||||
// AJAX request untuk mencari debitur
|
||||
fetch(`{{ route('api.debitur.search') }}?q=${encodeURIComponent(query)}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
// Log untuk debugging
|
||||
console.log('Debitur search results:', data);
|
||||
|
||||
// Format data untuk TomSelect
|
||||
const formattedData = data.data.map(item => ({
|
||||
id: item.id,
|
||||
display_name: `${item.kode_debitur} - ${item.name}`,
|
||||
kode_debitur: item.kode_debitur,
|
||||
name: item.name
|
||||
}));
|
||||
|
||||
callback(formattedData);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching debitur data:', error);
|
||||
callback();
|
||||
this.loading = false;
|
||||
|
||||
// Tampilkan pesan error ke user
|
||||
alert(
|
||||
'Terjadi kesalahan saat mencari data debitur. Silakan coba lagi.'
|
||||
);
|
||||
});
|
||||
},
|
||||
render: {
|
||||
option: function(data, escape) {
|
||||
return `<div class="px-3 py-2 hover:bg-gray-50">
|
||||
<div class="font-medium text-gray-900">${escape(data.kode_debitur)}</div>
|
||||
<div class="text-sm text-gray-600">${escape(data.name)}</div>
|
||||
</div>`;
|
||||
},
|
||||
item: function(data, escape) {
|
||||
return `<div>${escape(data.kode_debitur)} - ${escape(data.name)}</div>`;
|
||||
}
|
||||
},
|
||||
onChange: function(value) {
|
||||
// Log untuk debugging
|
||||
console.log('Debitur selected:', value);
|
||||
|
||||
if (value) {
|
||||
const selectedOption = this.options[value];
|
||||
if (selectedOption) {
|
||||
// Set hidden field untuk debitur_id
|
||||
document.getElementById('debitur_id').value = value;
|
||||
|
||||
// Jika ada data permohonan, isi field terkait
|
||||
if (selectedOption.permohonan) {
|
||||
const permohonan = selectedOption.permohonan;
|
||||
|
||||
// Set hidden fields
|
||||
document.getElementById('permohonan_id').value = permohonan.id || '';
|
||||
document.getElementById('penawaran_id').value = permohonan
|
||||
.penawaran_id || '';
|
||||
|
||||
// Set visible fields
|
||||
document.getElementById('nomor_registrasi').value = permohonan
|
||||
.nomor_registrasi || '';
|
||||
document.getElementById('nomor_tiket').value = permohonan.nomor_tiket ||
|
||||
'';
|
||||
|
||||
// Set nominal bayar jika ada dari penawaran
|
||||
if (permohonan.nominal_penawaran) {
|
||||
document.getElementById('nominal_bayar').value = permohonan
|
||||
.nominal_penawaran;
|
||||
}
|
||||
} else {
|
||||
// Clear fields jika tidak ada data permohonan
|
||||
document.getElementById('permohonan_id').value = '';
|
||||
document.getElementById('penawaran_id').value = '';
|
||||
document.getElementById('nomor_registrasi').value = '';
|
||||
document.getElementById('nomor_tiket').value = '';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Clear semua field jika tidak ada yang dipilih
|
||||
document.getElementById('debitur_id').value = '';
|
||||
document.getElementById('permohonan_id').value = '';
|
||||
document.getElementById('penawaran_id').value = '';
|
||||
document.getElementById('nomor_registrasi').value = '';
|
||||
document.getElementById('nomor_tiket').value = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Validasi form sebelum submit
|
||||
* Memastikan field wajib sudah diisi
|
||||
*/
|
||||
document.getElementById('pembayaranForm').addEventListener('submit', function(e) {
|
||||
const debiturId = document.getElementById('debitur_id').value;
|
||||
const nominalBayar = document.getElementById('nominal_bayar').value;
|
||||
const buktiBayar = document.getElementById('bukti_bayar').files[0];
|
||||
|
||||
let errors = [];
|
||||
|
||||
// Validasi debitur
|
||||
if (!debiturId) {
|
||||
errors.push('Debitur harus dipilih');
|
||||
}
|
||||
|
||||
// Validasi nominal bayar
|
||||
if (!nominalBayar || parseFloat(nominalBayar) <= 0) {
|
||||
errors.push('Nominal bayar harus diisi dan lebih dari 0');
|
||||
}
|
||||
|
||||
// Validasi bukti bayar
|
||||
if (!buktiBayar) {
|
||||
errors.push('Bukti bayar harus diupload');
|
||||
} else {
|
||||
// Validasi ukuran file (max 2MB)
|
||||
if (buktiBayar.size > 2 * 1024 * 1024) {
|
||||
errors.push('Ukuran file bukti bayar maksimal 2MB');
|
||||
}
|
||||
|
||||
// Validasi tipe file
|
||||
const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
|
||||
if (!allowedTypes.includes(buktiBayar.type)) {
|
||||
errors.push('Format file bukti bayar harus PDF, JPG, JPEG, atau PNG');
|
||||
}
|
||||
}
|
||||
|
||||
// Tampilkan error jika ada
|
||||
if (errors.length > 0) {
|
||||
e.preventDefault();
|
||||
alert('Terdapat kesalahan:\n\n' + errors.join('\n'));
|
||||
return false;
|
||||
}
|
||||
|
||||
// Disable submit button untuk mencegah double submit
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<i class="ki-filled ki-loading"></i> Menyimpan...';
|
||||
|
||||
// Log untuk debugging
|
||||
console.log('Form submitted with data:', {
|
||||
debitur_id: debiturId,
|
||||
permohonan_id: document.getElementById('permohonan_id').value,
|
||||
penawaran_id: document.getElementById('penawaran_id').value,
|
||||
nominal_bayar: nominalBayar
|
||||
});
|
||||
});
|
||||
|
||||
// Re-enable submit button jika ada error dari server
|
||||
@if ($errors->any())
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.innerHTML = '<i class="ki-filled ki-check"></i> Simpan Pembayaran';
|
||||
@endif
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user