Probindo/database-pertani-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Master

Browse Source
This commit is contained in:
afriadirahman
2026-03-10 14:05:41 +07:00
parent 72d7b97939
commit 79c91d83e5
88 changed files with 7289 additions and 956 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/master/profile/add.blade.php
+267
View File
@@ -0,0 +1,267 @@
@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
resources/views/master/profile/edit.blade.php
+300
View File
@@ -0,0 +1,300 @@
@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">Edit Profile</h5>
</div>
<div class="card-body">
<form id="editProfileForm" action="{{ route('profile.update', $profile->id) }}" method="POST" enctype="multipart/form-data">
@csrf
<input type="hidden" name="_method" value="PUT">
<input type="hidden" id="edit-profile-id" name="id" value="{{ $profile->id }}">
<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="edit-profile-nama">Nama Lengkap<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="edit-profile-nama" name="nama" value="{{ $profile->nama }}" />
</div>
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label" for="edit-profile-email">Email<span class="text-danger">*</span></label>
<input type="email" class="form-control" id="edit-profile-email" name="email" value="{{ $profile->email }}" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label" for="edit-profile-telepon">No. Telepon<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="edit-profile-telepon" name="telepon" value="{{ $profile->telepon }}" />
</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="edit-profile-provinsi">Provinsi</label>
<select id="edit-profile-provinsi" class="select2 form-select" data-placeholder="Pilih Provinsi">
<option value="">Pilih Provinsi</option>
@php
$provId = $profile->desakelurahan->kecamatan->kabupatenkota->provinsi_id ?? null;
@endphp
@foreach($provinsi as $prov)
<option value="{{ $prov->id }}" {{ $provId == $prov->id ? 'selected' : '' }}>{{ $prov->nama }}</option>
@endforeach
</select>
</div>
<div class="col-md-6 mb-4">
<label class="form-label" for="edit-profile-kabupaten">Kabupaten/Kota</label>
<select id="edit-profile-kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota">
@if($profile->desakelurahan)
<option value="{{ $profile->desakelurahan->kecamatan->kabupaten_kota_id }}" selected>
{{ $profile->desakelurahan->kecamatan->kabupatenkota->nama }}
</option>
@else
<option value="">Pilih Kabupaten/Kota</option>
@endif
</select>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label" for="edit-profile-kecamatan">Kecamatan</label>
<select id="edit-profile-kecamatan" class="select2 form-select" data-placeholder="Pilih Kecamatan">
@if($profile->desakelurahan)
<option value="{{ $profile->desakelurahan->kecamatan_id }}" selected>
{{ $profile->desakelurahan->kecamatan->nama }}
</option>
@else
<option value="">Pilih Kecamatan</option>
@endif
</select>
</div>
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label" for="edit-profile-desa">Desa/Kelurahan<span class="text-danger">*</span></label>
<select id="edit-profile-desa" name="desa_kelurahan_id" class="select2 form-select" data-placeholder="Pilih Desa/Kelurahan">
@if($profile->desakelurahan)
<option value="{{ $profile->desa_kelurahan_id }}" selected>
{{ $profile->desakelurahan->nama }}
</option>
@else
<option value="">Pilih Desa/Kelurahan</option>
@endif
</select>
</div>
</div>
<div class="mb-4">
<label class="form-label" for="edit-profile-alamat">Alamat Lengkap</label>
<textarea class="form-control" id="edit-profile-alamat" name="alamat" rows="2">{{ $profile->alamat }}</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="edit-profile-no-ktp">NIK (KTP)</label>
<input type="text" class="form-control" id="edit-profile-no-ktp" name="ktp" value="{{ $profile->ktp }}" />
</div>
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label" for="edit-profile-no-kk">No. KK</label>
<input type="text" class="form-control" id="edit-profile-no-kk" name="kk" value="{{ $profile->kk }}" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label" for="edit-profile-file-ktp">Ganti File KTP</label>
<input type="file" class="form-control" id="edit-profile-file-ktp" name="file_ktp" accept="image/*,.pdf" />
@php
$hasKtp = !empty($profile->path_ktp);
$isKtpPdf = $hasKtp && strtolower(pathinfo($profile->path_ktp, PATHINFO_EXTENSION)) === 'pdf';
@endphp
<div id="preview-container-ktp" class="mt-3 {{ $hasKtp ? '' : 'd-none' }}">
<img id="preview-image-ktp" src="{{ $hasKtp && !$isKtpPdf ? asset('storage/' . $profile->path_ktp) : '' }}" alt="Preview KTP" class="img-thumbnail {{ $hasKtp && !$isKtpPdf ? '' : '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 w-100 {{ $isKtpPdf ? '' : 'd-none' }}"><i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF (Tersimpan)</div>
</div>
</div>
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label" for="edit-profile-file-kk">Ganti File KK</label>
<input type="file" class="form-control" id="edit-profile-file-kk" name="file_kk" accept="image/*,.pdf" />
@php
$hasKk = !empty($profile->path_kk);
$isKkPdf = $hasKk && strtolower(pathinfo($profile->path_kk, PATHINFO_EXTENSION)) === 'pdf';
@endphp
<div id="preview-container-kk" class="mt-3 {{ $hasKk ? '' : 'd-none' }}">
<img id="preview-image-kk" src="{{ $hasKk && !$isKkPdf ? asset('storage/' . $profile->path_kk) : '' }}" alt="Preview KK" class="img-thumbnail {{ $hasKk && !$isKkPdf ? '' : '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 w-100 {{ $isKkPdf ? '' : 'd-none' }}"><i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF (Tersimpan)</div>
</div>
</div>
</div>
<div class="mt-4 text-end">
<a href="{{ route('profile.index') }}" class="btn btn-label-secondary me-2">Batal</a>
<button type="submit" class="btn btn-primary">Simpan Perubahan</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').html('<i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF (Baru Terpilih)');
} else {
$container.addClass('d-none');
}
}
});
}
handleFilePreview('edit-profile-file-ktp', 'preview-container-ktp', 'preview-image-ktp', 'preview-pdf-ktp');
handleFilePreview('edit-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>').trigger('change');
$kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').trigger('change');
$desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');
if (provinsiId) {
$.get(`/kabupatenkotabyprovinsi/${provinsiId}`, function (res) {
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>').trigger('change');
$desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');
if (kabupatenId) {
$.get(`/kecamatanbykabupatenkota/${kabupatenId}`, function (res) {
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>').trigger('change');
if (kecamatanId) {
$.get(`/desakelurahanbykecamatan/${kecamatanId}`, function (res) {
let dataList = Array.isArray(res) ? res : (res.data || []);
$.each(dataList, function (key, val) { $desa.append(`<option value="${val.id}">${val.nama}</option>`); });
});
}
});
}
setupCascadingDropdown('edit-profile');
const editForm = document.getElementById('editProfileForm');
let fvEdit = FormValidation.formValidation(editForm, {
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 terdiri dari 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 terdiri dari 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 () {
let formData = new FormData(editForm);
$.ajax({
url: editForm.action,
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function () {
Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Data diupdate', 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 => {
fvEdit.updateFieldStatus(key, 'Invalid', 'notEmpty');
const fieldRow = editForm.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 && editForm.querySelector(`[name="${name}"]`)) fvEdit.revalidateField(name);
});
});
</script>
@endpush
resources/views/master/profile/index.blade.php
+108
View File
@@ -0,0 +1,108 @@
@extends('layout.main')
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-title mb-0">Data Profile</h5>
</div>
<div class="card-body border-bottom pt-4">
<form method="GET" action="{{ route('profile.index') }}" class="d-flex justify-content-between align-items-center row gap-3 gap-md-0">
<div class="col-md-auto">
<div class="d-flex align-items-center">
<label class="me-2 text-nowrap">Show</label>
<select name="per_page" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
<option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
<option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
</select>
<label class="ms-2 text-nowrap">entries</label>
</div>
</div>
<div class="col-md-auto d-flex gap-2">
<div class="input-group input-group-sm w-auto">
<input type="text" name="search" class="form-control" placeholder="Cari Nama/Email..." value="{{ request('search') }}">
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
</div>
<a href="{{ route('profile.create') }}" class="btn btn-sm btn-primary">
<i class="ti tabler-plus me-1"></i> Tambah
</a>
</div>
</form>
</div>
<div class="table-responsive text-nowrap">
<table class="table table-hover">
<thead class="border-top">
<tr>
<th>No</th><th>User Info</th><th>Role</th><th>Desa/Kelurahan</th><th>Telepon</th><th>Actions</th>
</tr>
</thead>
<tbody>
@forelse($profiles as $index => $item)
<tr>
<td>{{ $profiles->firstItem() + $index }}</td>
<td>
<span class="text-heading fw-medium">{{ $item->nama }}</span><br>
<small class="text-muted">{{ $item->email }}</small>
</td>
<td><span class="badge bg-label-primary">{{ $item->role ?? 'User' }}</span></td>
<td><span class="badge bg-label-secondary">{{ $item->desakelurahan->nama ?? '-' }}</span></td>
<td>{{ $item->telepon ?? '-' }}</td>
<td>
<div class="d-flex align-items-center">
<a href="{{ route('profile.edit', $item->id) }}" class="btn btn-icon btn-text-secondary rounded-pill"><i class="ti tabler-edit ti-md"></i></a>
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill delete-record" data-id="{{ $item->id }}" data-nama="{{ $item->nama }}"><i class="ti tabler-trash ti-md"></i></a>
<a href="{{ route('profile.show', $item->id) }}" class="btn btn-icon btn-text-secondary rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
</div>
</td>
</tr>
@empty
<tr><td colspan="6" class="text-center py-4">Tidak ada data ditemukan.</td></tr>
@endforelse
</tbody>
</table>
</div>
<div class="card-footer d-flex justify-content-center justify-content-md-end border-top">
{{ $profiles->appends(request()->query())->links('pagination::bootstrap-5') }}
</div>
</div>
</div>
@endsection
@push('scripts')
<script>
'use strict';
const csrfToken = "{{ csrf_token() }}";
$(document).ready(function () {
$(document).on('click', '.delete-record', function () {
const id = $(this).data('id');
const name = $(this).data('nama');
Swal.fire({
title: 'Apakah Anda yakin?',
text: `Profile "${name}" akan dihapus secara permanen!`,
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Ya, Hapus!',
customClass: { confirmButton: 'btn btn-primary me-3', cancelButton: 'btn btn-label-secondary' },
buttonsStyling: false
}).then(function (result) {
if (result.value) {
$.ajax({
url: `/profile/${id}`,
type: 'DELETE',
headers: { 'X-CSRF-TOKEN': csrfToken },
success: function (res) {
Swal.fire({ icon: 'success', title: 'Terhapus!', text: res.message, showConfirmButton: false, timer: 1500 })
.then(() => window.location.reload());
},
error: () => Swal.fire({ icon: 'error', title: 'Gagal!', text: 'Terjadi kesalahan sistem.' })
});
}
});
});
});
</script>
@endpush
resources/views/master/profile/view.blade.php
+145
View File
@@ -0,0 +1,145 @@
@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 d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">Detail Profile</h5>
<a href="{{ route('profile.index') }}" class="btn btn-sm btn-label-secondary">
<i class="ti tabler-arrow-left me-1"></i> Kembali
</a>
</div>
<div class="card-body">
<form onsubmit="return false;">
<h6 class="mb-3 text-primary"><i class="ti tabler-user me-1"></i> Informasi Akun</h6>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label">Nama Lengkap</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->nama }}" readonly />
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Email</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->email }}" readonly />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label">No. Telepon</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->telepon ?? '-' }}" readonly />
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Role</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->role ?? '-' }}" readonly />
</div>
</div>
<hr class="my-4">
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Lokasi & Alamat</h6>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label">Provinsi</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->desakelurahan->kecamatan->kabupatenkota->provinsi->nama ?? '-' }}" readonly />
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Kabupaten/Kota</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->desakelurahan->kecamatan->kabupatenkota->nama ?? '-' }}" readonly />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label">Kecamatan</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->desakelurahan->kecamatan->nama ?? '-' }}" readonly />
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Desa/Kelurahan</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->desakelurahan->nama ?? '-' }}" readonly />
</div>
</div>
<div class="mb-4">
<label class="form-label">Alamat Lengkap</label>
<textarea class="form-control bg-lighter" rows="2" readonly>{{ $profile->alamat ?? '-' }}</textarea>
</div>
<hr class="my-4">
<h6 class="mb-3 text-primary"><i class="ti tabler-id me-1"></i> Dokumen Pribadi</h6>
<div class="row align-items-center">
<div class="col-md-6 mb-4">
<label class="form-label">NIK (KTP)</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->ktp ?? '-' }}" readonly />
</div>
<div class="col-md-6 mb-4">
<label class="form-label">No. KK</label>
<input type="text" class="form-control bg-lighter" value="{{ $profile->kk ?? '-' }}" readonly />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label d-block">File KTP</label>
@if($profile->path_ktp)
@php
$isKtpPdf = strtolower(pathinfo($profile->path_ktp, PATHINFO_EXTENSION)) === 'pdf';
@endphp
@if($isKtpPdf)
<div class="p-3 border rounded text-center bg-lighter">
<i class="ti tabler-file-type-pdf text-danger mb-2" style="font-size: 3rem;"></i>
<p class="mb-3 text-muted">Dokumen PDF Terlampir</p>
<a href="{{ asset('storage/' . $profile->path_ktp) }}" target="_blank" class="btn btn-sm btn-outline-primary">
<i class="ti tabler-download me-1"></i> Lihat / Unduh
</a>
</div>
@else
<a href="{{ asset('storage/' . $profile->path_ktp) }}" target="_blank">
<img src="{{ asset('storage/' . $profile->path_ktp) }}" alt="File KTP" class="img-thumbnail" style="width: 100%; max-height: 300px; object-fit: contain; background-color: #f8f9fa;">
</a>
<small class="text-muted mt-2 d-block fst-italic">*Klik gambar untuk memperbesar.</small>
@endif
@else
<div class="p-4 border rounded text-center bg-lighter">
<span class="text-muted fst-italic">Tidak ada file KTP yang diunggah.</span>
</div>
@endif
</div>
<div class="col-md-6 mb-4">
<label class="form-label d-block">File KK</label>
@if($profile->path_kk)
@php
$isKkPdf = strtolower(pathinfo($profile->path_kk, PATHINFO_EXTENSION)) === 'pdf';
@endphp
@if($isKkPdf)
<div class="p-3 border rounded text-center bg-lighter">
<i class="ti tabler-file-type-pdf text-danger mb-2" style="font-size: 3rem;"></i>
<p class="mb-3 text-muted">Dokumen PDF Terlampir</p>
<a href="{{ asset('storage/' . $profile->path_kk) }}" target="_blank" class="btn btn-sm btn-outline-primary">
<i class="ti tabler-download me-1"></i> Lihat / Unduh
</a>
</div>
@else
<a href="{{ asset('storage/' . $profile->path_kk) }}" target="_blank">
<img src="{{ asset('storage/' . $profile->path_kk) }}" alt="File KK" class="img-thumbnail" style="width: 100%; max-height: 300px; object-fit: contain; background-color: #f8f9fa;">
</a>
<small class="text-muted mt-2 d-block fst-italic">*Klik gambar untuk memperbesar.</small>
@endif
@else
<div class="p-4 border rounded text-center bg-lighter">
<span class="text-muted fst-italic">Tidak ada file KK yang diunggah.</span>
</div>
@endif
</div>
</div>
</form>
</div>
</div>
</div>
@endsection