267 lines
15 KiB
PHP
267 lines
15 KiB
PHP
@extends('layout.main')
|
|
|
|
@section('content')
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="card">
|
|
<div class="card-header border-bottom mb-4">
|
|
<h5 class="card-title mb-0">Tambah Profile Baru</h5>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<form id="addNewProfileForm" action="{{ route('profile.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<h6 class="mb-3">Informasi Akun</h6>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4 form-control-validation">
|
|
<label class="form-label" for="add-profile-nama">Nama Lengkap<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="add-profile-nama" name="nama" placeholder="Cth: Budi Santoso" />
|
|
</div>
|
|
<div class="col-md-6 mb-4 form-control-validation">
|
|
<label class="form-label" for="add-profile-email">Email<span class="text-danger">*</span></label>
|
|
<input type="email" class="form-control" id="add-profile-email" name="email" placeholder="Cth: budi@email.com" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4 form-control-validation">
|
|
<label class="form-label" for="add-profile-telepon">No. Telepon<span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="add-profile-telepon" name="telepon" placeholder="Cth: 08123456789" />
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
<h6 class="mb-3">Lokasi & Alamat</h6>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4">
|
|
<label class="form-label" for="add-profile-provinsi">Provinsi</label>
|
|
<select id="add-profile-provinsi" class="select2 form-select" data-placeholder="Pilih Provinsi">
|
|
<option value="">Pilih Provinsi</option>
|
|
@foreach($provinsi as $prov)
|
|
<option value="{{ $prov->id }}">{{ $prov->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<label class="form-label" for="add-profile-kabupaten">Kabupaten/Kota</label>
|
|
<select id="add-profile-kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota" disabled>
|
|
<option value="">Pilih Kabupaten/Kota</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4">
|
|
<label class="form-label" for="add-profile-kecamatan">Kecamatan</label>
|
|
<select id="add-profile-kecamatan" class="select2 form-select" data-placeholder="Pilih Kecamatan" disabled>
|
|
<option value="">Pilih Kecamatan</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 mb-4 form-control-validation">
|
|
<label class="form-label" for="add-profile-desa">Desa/Kelurahan<span class="text-danger">*</span></label>
|
|
<select id="add-profile-desa" name="desa_kelurahan_id" class="select2 form-select" data-placeholder="Pilih Desa/Kelurahan" disabled>
|
|
<option value="">Pilih Desa/Kelurahan</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label" for="add-profile-alamat">Alamat Lengkap</label>
|
|
<textarea class="form-control" id="add-profile-alamat" name="alamat" rows="2" placeholder="Jl. Sudirman No. 10..."></textarea>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
<h6 class="mb-3">Dokumen Pribadi</h6>
|
|
<small class="text-muted d-block mb-3">*Biarkan field upload kosong jika tidak ingin mengubah dokumen lama.</small>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4 form-control-validation">
|
|
<label class="form-label" for="add-profile-ktp">NIK (KTP)</label>
|
|
<input type="text" class="form-control" id="add-profile-ktp" name="ktp" placeholder="Cth: 317..." />
|
|
</div>
|
|
<div class="col-md-6 mb-4 form-control-validation">
|
|
<label class="form-label" for="add-profile-kk">No. KK</label>
|
|
<input type="text" class="form-control" id="add-profile-kk" name="kk" placeholder="Cth: 317..." />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4 form-control-validation">
|
|
<label class="form-label" for="add-profile-file-ktp">Upload KTP</label>
|
|
<input type="file" class="form-control" id="add-profile-file-ktp" name="file_ktp" accept="image/*,.pdf" />
|
|
<div id="preview-container-ktp" class="mt-3 d-none">
|
|
<img id="preview-image-ktp" src="" alt="Preview KTP" class="img-thumbnail d-none" style="width: 100%; max-height: 250px; object-fit: contain; background-color: #f8f9fa;">
|
|
<div id="preview-pdf-ktp" class="badge bg-label-danger p-2 d-none w-100"><i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF Terpilih</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-4 form-control-validation">
|
|
<label class="form-label" for="add-profile-file-kk">Upload KK</label>
|
|
<input type="file" class="form-control" id="add-profile-file-kk" name="file_kk" accept="image/*,.pdf" />
|
|
<div id="preview-container-kk" class="mt-3 d-none">
|
|
<img id="preview-image-kk" src="" alt="Preview KK" class="img-thumbnail d-none" style="width: 100%; max-height: 250px; object-fit: contain; background-color: #f8f9fa;">
|
|
<div id="preview-pdf-kk" class="badge bg-label-danger p-2 d-none w-100"><i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF Terpilih</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 text-end">
|
|
<a href="{{ route('profile.index') }}" class="btn btn-label-secondary me-2">Kembali</a>
|
|
<button type="submit" class="btn btn-primary data-submit">Simpan Profile</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
'use strict';
|
|
$(document).ready(function () {
|
|
$('.select2').select2();
|
|
|
|
function handleFilePreview(inputId, containerId, imageId, pdfId) {
|
|
$(`#${inputId}`).on('change', function(event) {
|
|
const file = event.target.files[0];
|
|
const $container = $(`#${containerId}`);
|
|
const $image = $(`#${imageId}`);
|
|
const $pdf = $(`#${pdfId}`);
|
|
|
|
if (file) {
|
|
$container.removeClass('d-none');
|
|
if (file.type.match('image.*')) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
$image.attr('src', e.target.result).removeClass('d-none');
|
|
$pdf.addClass('d-none');
|
|
}
|
|
reader.readAsDataURL(file);
|
|
}
|
|
else if (file.type === 'application/pdf') {
|
|
$image.addClass('d-none').attr('src', '');
|
|
$pdf.removeClass('d-none');
|
|
} else {
|
|
$container.addClass('d-none');
|
|
}
|
|
} else {
|
|
$container.addClass('d-none');
|
|
$image.attr('src', '').addClass('d-none');
|
|
$pdf.addClass('d-none');
|
|
}
|
|
});
|
|
}
|
|
|
|
handleFilePreview('add-profile-file-ktp', 'preview-container-ktp', 'preview-image-ktp', 'preview-pdf-ktp');
|
|
handleFilePreview('add-profile-file-kk', 'preview-container-kk', 'preview-image-kk', 'preview-pdf-kk');
|
|
|
|
function setupCascadingDropdown(prefix) {
|
|
$(`#${prefix}-provinsi`).on('change', function () {
|
|
let provinsiId = $(this).val();
|
|
let $kabupaten = $(`#${prefix}-kabupaten`);
|
|
let $kecamatan = $(`#${prefix}-kecamatan`);
|
|
let $desa = $(`#${prefix}-desa`);
|
|
|
|
$kabupaten.empty().append('<option value="">Pilih Kabupaten/Kota</option>').prop('disabled', true).trigger('change');
|
|
$kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').prop('disabled', true).trigger('change');
|
|
$desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change');
|
|
|
|
if (provinsiId) {
|
|
$.get(`/kabupatenkotabyprovinsi/${provinsiId}`, function (res) {
|
|
$kabupaten.prop('disabled', false);
|
|
let dataList = Array.isArray(res) ? res : (res.data || []);
|
|
$.each(dataList, function (key, val) { $kabupaten.append(`<option value="${val.id}">${val.nama}</option>`); });
|
|
});
|
|
}
|
|
});
|
|
|
|
$(`#${prefix}-kabupaten`).on('change', function () {
|
|
let kabupatenId = $(this).val();
|
|
let $kecamatan = $(`#${prefix}-kecamatan`);
|
|
let $desa = $(`#${prefix}-desa`);
|
|
|
|
$kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').prop('disabled', true).trigger('change');
|
|
$desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change');
|
|
|
|
if (kabupatenId) {
|
|
$.get(`/kecamatanbykabupatenkota/${kabupatenId}`, function (res) {
|
|
$kecamatan.prop('disabled', false);
|
|
let dataList = Array.isArray(res) ? res : (res.data || []);
|
|
$.each(dataList, function (key, val) { $kecamatan.append(`<option value="${val.id}">${val.nama}</option>`); });
|
|
});
|
|
}
|
|
});
|
|
|
|
$(`#${prefix}-kecamatan`).on('change', function () {
|
|
let kecamatanId = $(this).val();
|
|
let $desa = $(`#${prefix}-desa`);
|
|
|
|
$desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change');
|
|
|
|
if (kecamatanId) {
|
|
$.get(`/desakelurahanbykecamatan/${kecamatanId}`, function (res) {
|
|
$desa.prop('disabled', false);
|
|
let dataList = Array.isArray(res) ? res : (res.data || []);
|
|
$.each(dataList, function (key, val) { $desa.append(`<option value="${val.id}">${val.nama}</option>`); });
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
setupCascadingDropdown('add-profile');
|
|
|
|
const addForm = document.getElementById('addNewProfileForm');
|
|
let fvAdd = FormValidation.formValidation(addForm, {
|
|
fields: {
|
|
nama: { validators: { notEmpty: { message: 'Nama wajib diisi' } } },
|
|
email: { validators: { notEmpty: { message: 'Email wajib diisi' }, emailAddress: { message: 'Email tidak valid' } } },
|
|
telepon: { validators: { notEmpty: { message: 'Nomor telepon wajib diisi' }, stringLength: { max: 13, message: 'Maksimal 13 karakter' } } },
|
|
desa_kelurahan_id: { validators: { notEmpty: { message: 'Desa/Kelurahan wajib dipilih' } } },
|
|
ktp: { validators: { stringLength: { min: 16, max: 16, message: 'KTP harus 16 digit' } } },
|
|
file_ktp: { validators: { file: { extension: 'jpeg,jpg,png,pdf', maxSize: 2097152, message: 'Maksimal 2MB (JPG, PNG, PDF)' } } },
|
|
kk: { validators: { stringLength: { min: 16, max: 16, message: 'KK harus 16 digit' } } },
|
|
file_kk: { validators: { file: { extension: 'jpeg,jpg,png,pdf', maxSize: 2097152, message: 'Maksimal 2MB (JPG, PNG, PDF)' } } }
|
|
},
|
|
plugins: {
|
|
trigger: new FormValidation.plugins.Trigger(),
|
|
bootstrap5: new FormValidation.plugins.Bootstrap5({ eleValidClass: '', rowSelector: '.form-control-validation' }),
|
|
submitButton: new FormValidation.plugins.SubmitButton(),
|
|
}
|
|
}).on('core.form.valid', function () {
|
|
$(addForm).find('select').prop('disabled', false);
|
|
let formData = new FormData(addForm);
|
|
|
|
$.ajax({
|
|
url: addForm.action,
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function () {
|
|
Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Data disimpan', timer: 1500, showConfirmButton: false })
|
|
.then(() => window.location.href = "{{ route('profile.index') }}");
|
|
},
|
|
error: function (xhr) {
|
|
if (xhr.status === 422) {
|
|
const errors = xhr.responseJSON.errors || {};
|
|
Object.keys(errors).forEach(key => {
|
|
fvAdd.updateFieldStatus(key, 'Invalid', 'notEmpty');
|
|
const fieldRow = addForm.querySelector(`[name="${key}"]`).closest('.form-control-validation');
|
|
const messageContainer = fieldRow.querySelector('.fv-plugins-message-container');
|
|
if (messageContainer) messageContainer.innerHTML = `<div class="fv-help-block text-danger">${errors[key][0]}</div>`;
|
|
});
|
|
} else {
|
|
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
$('.select2').on('change', function() {
|
|
const name = $(this).attr('name');
|
|
if (name && addForm.querySelector(`[name="${name}"]`)) fvAdd.revalidateField(name);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |