shifting mode color text
This commit is contained in:
Generated
+850
-504
File diff suppressed because it is too large
Load Diff
@@ -41,10 +41,15 @@
|
|||||||
|
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-2xl font-bold text-gray-800">Resiliensi & Produksi Pertanian</h2>
|
<h2 class="text-2xl font-bold teks-header-judul">
|
||||||
<p class="text-gray-500 text-sm mt-1">Pengembangan Agroforestry Polikultur Adaptif Iklim & Praktik GAP</p>
|
Resiliensi & Produksi Pertanian
|
||||||
</div>
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-sm mt-1 teks-header-sub">
|
||||||
|
Pengembangan Agroforestry Polikultur
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<button class="bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center gap-2 shadow-sm">
|
<button class="bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center gap-2 shadow-sm">
|
||||||
<i data-lucide="map" class="w-4 h-4"></i> Mode Pemetaan
|
<i data-lucide="map" class="w-4 h-4"></i> Mode Pemetaan
|
||||||
|
|||||||
@@ -13,6 +13,16 @@
|
|||||||
|
|
||||||
@push('scripts-head')
|
@push('scripts-head')
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script src="https://unpkg.com/lucide@latest"></script>
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
@endpush
|
@endpush
|
||||||
@@ -23,9 +33,14 @@
|
|||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-2xl font-bold text-gray-800">Ringkasan M&E (Theory of Change)</h2>
|
<h2 class="text-2xl font-bold teks-header-judul">
|
||||||
<p class="text-gray-500 text-sm mt-1">Capaian Utama Transformasi Bioekonomi Desa Ngada</p>
|
Ringkasan M&E (Theory of Change)
|
||||||
</div>
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-sm mt-1 teks-header-sub">
|
||||||
|
Capaian Utama Transformasi Bioekonomi Desa Ngada
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<button class="bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center gap-2">
|
<button class="bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center gap-2">
|
||||||
<i data-lucide="download" class="w-4 h-4"></i> Export PDF
|
<i data-lucide="download" class="w-4 h-4"></i> Export PDF
|
||||||
|
|||||||
@@ -90,6 +90,23 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
|
<!-- Dark Mode Shifting -->
|
||||||
|
|
||||||
|
<style type="text/tailwindcss">
|
||||||
|
@layer utilities {
|
||||||
|
|
||||||
|
.teks-header-judul {
|
||||||
|
@apply text-gray-800 dark:text-gray-80;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.teks-header-sub {
|
||||||
|
@apply text-gray-500 dark:text-gray-300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@stack('scripts')
|
@stack('scripts')
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
@extends('layout.main')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
|
||||||
|
<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 Map Tanaman</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
<form id="addTanamanForm" action="{{ route('tanaman.store') }}" method="POST">
|
||||||
|
@csrf
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-5 mb-4">
|
||||||
|
<h6 class="mb-3 text-primary"><i class="ti tabler-seeding me-1"></i> Data Tanaman</h6>
|
||||||
|
|
||||||
|
<div class="mb-3 form-control-validation">
|
||||||
|
<label class="form-label">Nama Tanaman (Cth: Pohon Mangga 01)<span class="text-danger">*</span></label>
|
||||||
|
<input type="text" class="form-control" name="nama" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3 form-control-validation">
|
||||||
|
<label class="form-label">Pemilik/Pengelola<span class="text-danger">*</span></label>
|
||||||
|
<select name="profile_id" class="select2 form-select" data-placeholder="Pilih Pemilik">
|
||||||
|
<option value="">Pilih Pemilik</option>
|
||||||
|
@foreach($profiles as $p)
|
||||||
|
<option value="{{ $p->id }}">{{ $p->nama }}</option>
|
||||||
|
@endforeach
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 mb-3 form-control-validation">
|
||||||
|
<label class="form-label">Komoditas<span class="text-danger">*</span></label>
|
||||||
|
<select name="komoditas_id" class="select2 form-select" data-placeholder="Pilih Komoditas">
|
||||||
|
<option value="">Pilih Komoditas</option>
|
||||||
|
@foreach($komoditas as $k)
|
||||||
|
<option value="{{ $k->id }}">{{ $k->nama }}</option>
|
||||||
|
@endforeach
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 mb-3 form-control-validation">
|
||||||
|
<label class="form-label">Kondisi<span class="text-danger">*</span></label>
|
||||||
|
<select name="kondisi_tanaman" class="select2 form-select" data-placeholder="Kondisi">
|
||||||
|
<option value="">Pilih Kondisi</option>
|
||||||
|
<option value="sehat">Sehat</option>
|
||||||
|
<option value="sakit">Sakit</option>
|
||||||
|
<option value="mati">Mati</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="my-4">
|
||||||
|
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Tentukan Titik Koordinat</h6>
|
||||||
|
|
||||||
|
<div class="mb-3 form-control-validation">
|
||||||
|
<label class="form-label text-success fw-bold">1. Pilih Lahan (Lokasi Tanam)<span class="text-danger">*</span></label>
|
||||||
|
<select id="lahan-select" name="lahan_id" class="select2 form-select" data-placeholder="Pilih Lahan">
|
||||||
|
<option value="">Pilih Lahan</option>
|
||||||
|
@foreach($lahan as $l)
|
||||||
|
<option value="{{ $l->id }}">{{ $l->nama }}</option>
|
||||||
|
@endforeach
|
||||||
|
</select>
|
||||||
|
<small class="text-muted d-block mt-1">Pilih lahan untuk memunculkan poligon di peta.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 mb-2">
|
||||||
|
<label class="form-label text-success fw-bold">2. Klik Area pada Peta di samping untuk mengisi koordinat otomatis <i class="ti tabler-arrow-right d-none d-lg-inline"></i></label>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 mb-3 form-control-validation">
|
||||||
|
<label class="form-label">Latitude<span class="text-danger">*</span></label>
|
||||||
|
<input type="text" class="form-control bg-lighter" id="lat-input" name="latitude" readonly placeholder="Otomatis" />
|
||||||
|
</div>
|
||||||
|
<div class="col-6 mb-3 form-control-validation">
|
||||||
|
<label class="form-label">Longitude<span class="text-danger">*</span></label>
|
||||||
|
<input type="text" class="form-control bg-lighter" id="lng-input" name="longitude" readonly placeholder="Otomatis" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4 text-end">
|
||||||
|
<a href="{{ route('tanaman.index') }}" class="btn btn-label-secondary me-2">Batal</a>
|
||||||
|
<button type="submit" class="btn btn-primary data-submit">Simpan Tanaman</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<div class="border rounded h-100 min-vh-50" style="min-height: 500px; position: relative;">
|
||||||
|
<div id="map" style="height: 100%; width: 100%; z-index: 1; border-radius: 0.375rem;"></div>
|
||||||
|
<div id="map-overlay" class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-50 rounded" style="z-index: 2;">
|
||||||
|
<h5 class="text-white text-center px-4"><i class="ti tabler-map-search mb-2" style="font-size: 3rem;"></i><br>Silakan pilih Lahan terlebih dahulu</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
@push('scripts')
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.select2').select2();
|
||||||
|
|
||||||
|
let map = L.map('map').setView([-2.5489, 118.0149], 5);
|
||||||
|
L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
|
||||||
|
maxZoom: 20,
|
||||||
|
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
|
||||||
|
attribution: '© Google Maps Satellite'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
let currentPolygon = null;
|
||||||
|
let currentMarker = null;
|
||||||
|
|
||||||
|
$('#lahan-select').on('change', function() {
|
||||||
|
let lahanId = $(this).val();
|
||||||
|
|
||||||
|
if (currentPolygon) map.removeLayer(currentPolygon);
|
||||||
|
if (currentMarker) map.removeLayer(currentMarker);
|
||||||
|
$('#lat-input').val('');
|
||||||
|
$('#lng-input').val('');
|
||||||
|
fvAdd.revalidateField('latitude');
|
||||||
|
|
||||||
|
if (lahanId) {
|
||||||
|
$('#map-overlay').addClass('d-none');
|
||||||
|
|
||||||
|
$.get(`/tanaman/get-lahan/${lahanId}`, function(res) {
|
||||||
|
if (res.status === 'success' && res.path) {
|
||||||
|
try {
|
||||||
|
let rawData = JSON.parse(res.path);
|
||||||
|
let latLngs = rawData.map(coord => [coord[1], coord[0]]);
|
||||||
|
|
||||||
|
currentPolygon = L.polygon(latLngs, {
|
||||||
|
color: '#28c76f',
|
||||||
|
fillColor: '#28c76f',
|
||||||
|
fillOpacity: 0.4,
|
||||||
|
weight: 2
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
map.fitBounds(currentPolygon.getBounds(), { padding: [30, 30] });
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Format JSON Lahan tidak valid.");
|
||||||
|
Swal.fire('Oops!', 'Format koordinat lahan ini rusak/tidak valid.', 'warning');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
Swal.fire('Oops!', 'Lahan ini belum memiliki data pemetaan (Polygon kosong).', 'warning');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$('#map-overlay').removeClass('d-none');
|
||||||
|
map.setView([-2.5489, 118.0149], 5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
map.on('click', function(e) {
|
||||||
|
let lahanId = $('#lahan-select').val();
|
||||||
|
if (!lahanId) {
|
||||||
|
Swal.fire('Perhatian', 'Silakan pilih Lahan terlebih dahulu sebelum menentukan titik tanam.', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let lat = e.latlng.lat.toFixed(8);
|
||||||
|
let lng = e.latlng.lng.toFixed(8);
|
||||||
|
|
||||||
|
$('#lat-input').val(lat);
|
||||||
|
$('#lng-input').val(lng);
|
||||||
|
|
||||||
|
fvAdd.revalidateField('latitude');
|
||||||
|
fvAdd.revalidateField('longitude');
|
||||||
|
|
||||||
|
if (currentMarker) {
|
||||||
|
map.removeLayer(currentMarker);
|
||||||
|
}
|
||||||
|
currentMarker = L.marker([lat, lng]).addTo(map)
|
||||||
|
.bindPopup("<b>Titik Tanam Dipilih!</b><br>Lat: " + lat + "<br>Lng: " + lng).openPopup();
|
||||||
|
});
|
||||||
|
|
||||||
|
const addForm = document.getElementById('addTanamanForm');
|
||||||
|
let fvAdd = FormValidation.formValidation(addForm, {
|
||||||
|
fields: {
|
||||||
|
nama: { validators: { notEmpty: { message: 'Nama tanaman wajib diisi' } } },
|
||||||
|
profile_id: { validators: { notEmpty: { message: 'Pemilik wajib dipilih' } } },
|
||||||
|
lahan_id: { validators: { notEmpty: { message: 'Lahan wajib dipilih' } } },
|
||||||
|
komoditas_id: { validators: { notEmpty: { message: 'Komoditas wajib dipilih' } } },
|
||||||
|
kondisi_tanaman: { validators: { notEmpty: { message: 'Kondisi wajib dipilih' } } },
|
||||||
|
latitude: { validators: { notEmpty: { message: 'Klik pada peta untuk menentukan titik koordinat' } } },
|
||||||
|
longitude: { validators: { notEmpty: { message: 'Longitude tidak boleh kosong' } } },
|
||||||
|
},
|
||||||
|
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 = $(addForm).serialize();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: addForm.action,
|
||||||
|
type: 'POST',
|
||||||
|
data: formData,
|
||||||
|
success: function (res) {
|
||||||
|
Swal.fire({ icon: 'success', title: 'Berhasil!', text: res.message, timer: 1500, showConfirmButton: false })
|
||||||
|
.then(() => window.location.href = "{{ route('tanaman.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
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
@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 Map Tanaman</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-body border-bottom pt-4">
|
||||||
|
<form method="GET" action="{{ route('tanaman.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 Tanaman / Lahan..." value="{{ request('search') }}">
|
||||||
|
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||||
|
</div>
|
||||||
|
<a href="{{ route('tanaman.create') }}" class="btn btn-sm btn-primary">
|
||||||
|
<i class="ti tabler-plus me-1"></i> Tambah Tanaman
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-responsive text-nowrap">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead class="border-top">
|
||||||
|
<tr>
|
||||||
|
<th>No</th>
|
||||||
|
<th>Nama Tanaman</th>
|
||||||
|
<th>Komoditas</th>
|
||||||
|
<th>Lahan</th>
|
||||||
|
<th>Kondisi</th>
|
||||||
|
<th>Koordinat</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@forelse($tanaman as $index => $item)
|
||||||
|
<tr>
|
||||||
|
<td>{{ $tanaman->firstItem() + $index }}</td>
|
||||||
|
<td><span class="text-heading fw-medium">{{ $item->nama }}</span></td>
|
||||||
|
<td>{{ $item->komoditas->nama ?? '-' }}</td>
|
||||||
|
<td>{{ $item->lahan->nama ?? '-' }}</td>
|
||||||
|
<td>
|
||||||
|
@if($item->kondisi_tanaman == 'sehat')
|
||||||
|
<span class="badge bg-label-success">Sehat</span>
|
||||||
|
@elseif($item->kondisi_tanaman == 'sakit')
|
||||||
|
<span class="badge bg-label-warning">Sakit</span>
|
||||||
|
@else
|
||||||
|
<span class="badge bg-label-danger">Mati</span>
|
||||||
|
@endif
|
||||||
|
</td>
|
||||||
|
<td><small>{{ $item->latitude }},<br>{{ $item->longitude }}</small></td>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<a href="#" class="btn btn-icon btn-text-secondary rounded-pill"><i class="ti tabler-edit ti-md"></i></a>
|
||||||
|
<a href="#" class="btn btn-icon btn-text-secondary rounded-pill"><i class="ti tabler-trash ti-md"></i></a>
|
||||||
|
<a href="{{ route('tanaman.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="7" class="text-center py-4">Tidak ada data tanaman ditemukan.</td></tr>
|
||||||
|
@endforelse
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer d-flex justify-content-center justify-content-md-end border-top">
|
||||||
|
{{ $tanaman->appends(request()->query())->links('pagination::bootstrap-5') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
@@ -0,0 +1,170 @@
|
|||||||
|
@extends('layout.main')
|
||||||
|
|
||||||
|
@push('style')
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.plant-marker {
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 5px rgba(0,0,0,0.6);
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { box-shadow: 0 0 0 0 rgba(0,0,0, 0.4); }
|
||||||
|
70% { box-shadow: 0 0 0 10px rgba(0,0,0, 0); }
|
||||||
|
100% { box-shadow: 0 0 0 0 rgba(0,0,0, 0); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@endpush
|
||||||
|
|
||||||
|
@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 Map Tanaman</h5>
|
||||||
|
<a href="{{ route('tanaman.index') }}" class="btn btn-sm btn-label-secondary">
|
||||||
|
<i class="ti tabler-arrow-left me-1"></i> Kembali
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-5 mb-4">
|
||||||
|
<h6 class="mb-3 text-primary"><i class="ti tabler-seeding me-1"></i> Identitas Tanaman</h6>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">Nama Tanaman</label>
|
||||||
|
<input type="text" class="form-control bg-lighter fw-bold text-dark" value="{{ $tanaman->nama }}" readonly />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">Pemilik / Pengelola</label>
|
||||||
|
<input type="text" class="form-control bg-lighter" value="{{ $tanaman->profile->nama ?? '-' }}" readonly />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 mb-3">
|
||||||
|
<label class="form-label">Komoditas</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-text color-indicator" style="background-color: #fff; border-right: none;"></span>
|
||||||
|
<input type="text" class="form-control bg-lighter" value="{{ $tanaman->komoditas->nama ?? '-' }}" readonly />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 mb-3">
|
||||||
|
<label class="form-label">Kondisi Saat Ini</label>
|
||||||
|
<div>
|
||||||
|
@if($tanaman->kondisi_tanaman == 'sehat')
|
||||||
|
<span class="badge bg-label-success w-100 p-2 fs-6">Sehat</span>
|
||||||
|
@elseif($tanaman->kondisi_tanaman == 'sakit')
|
||||||
|
<span class="badge bg-label-warning w-100 p-2 fs-6">Sakit</span>
|
||||||
|
@else
|
||||||
|
<span class="badge bg-label-danger w-100 p-2 fs-6">Mati</span>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="my-4">
|
||||||
|
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Informasi Spasial (Lokasi)</h6>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">Berada di Lahan</label>
|
||||||
|
<input type="text" class="form-control bg-lighter" value="{{ $tanaman->lahan->nama ?? '-' }}" readonly />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6 mb-3">
|
||||||
|
<label class="form-label">Latitude</label>
|
||||||
|
<input type="text" class="form-control bg-lighter font-monospace" value="{{ $tanaman->latitude }}" readonly />
|
||||||
|
</div>
|
||||||
|
<div class="col-6 mb-3">
|
||||||
|
<label class="form-label">Longitude</label>
|
||||||
|
<input type="text" class="form-control bg-lighter font-monospace" value="{{ $tanaman->longitude }}" readonly />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-7 mb-4">
|
||||||
|
<h6 class="mb-3 text-primary"><i class="ti tabler-map me-1"></i> Visualisasi Titik Tanam</h6>
|
||||||
|
<div class="border rounded" style="height: 500px; position: relative;">
|
||||||
|
<div id="map" style="height: 100%; width: 100%; border-radius: 0.375rem; z-index: 1;"></div>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted d-block mt-2 fst-italic">*Klik pada titik tanaman di peta untuk melihat informasi kondisi.</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
@push('scripts')
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
let lahanPath = {!! $tanaman->lahan->path ? $tanaman->lahan->path : '[]' !!};
|
||||||
|
let plantLat = {{ $tanaman->latitude }};
|
||||||
|
let plantLng = {{ $tanaman->longitude }};
|
||||||
|
let plantName = "{{ $tanaman->nama }}";
|
||||||
|
let plantCondition = "{{ ucfirst($tanaman->kondisi_tanaman) }}";
|
||||||
|
let komoditasId = {{ $tanaman->komoditas_id ?? 1 }};
|
||||||
|
|
||||||
|
const colorPalette = [
|
||||||
|
'#FF33A8', '#3357FF', '#F3FF33', '#FF5733', '#33FFF5',
|
||||||
|
'#8A33FF', '#FF8F33', '#33FF8A', '#FF3333', '#33A8FF'
|
||||||
|
];
|
||||||
|
|
||||||
|
let markerColor = colorPalette[komoditasId % colorPalette.length];
|
||||||
|
|
||||||
|
document.querySelector('.color-indicator').style.backgroundColor = markerColor;
|
||||||
|
|
||||||
|
let map = L.map('map').setView([plantLat, plantLng], 18);
|
||||||
|
|
||||||
|
L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
|
||||||
|
maxZoom: 22,
|
||||||
|
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
|
||||||
|
attribution: '© Google Maps Satellite'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
if (Array.isArray(lahanPath) && lahanPath.length > 0) {
|
||||||
|
try {
|
||||||
|
let latLngs = lahanPath.map(coord => [coord[1], coord[0]]);
|
||||||
|
|
||||||
|
let polygon = L.polygon(latLngs, {
|
||||||
|
color: '#28c76f',
|
||||||
|
fillColor: '#28c76f',
|
||||||
|
fillOpacity: 0.3,
|
||||||
|
weight: 2
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
map.fitBounds(polygon.getBounds(), { padding: [20, 20] });
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Gagal menggambar poligon lahan.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let customIcon = L.divIcon({
|
||||||
|
className: 'custom-div-icon',
|
||||||
|
html: `<div class="plant-marker" style="background-color:${markerColor}; width:20px; height:20px;"></div>`,
|
||||||
|
iconSize: [20, 20],
|
||||||
|
iconAnchor: [10, 10]
|
||||||
|
});
|
||||||
|
|
||||||
|
let badgeClass = 'bg-label-success';
|
||||||
|
if (plantCondition.toLowerCase() === 'sakit') badgeClass = 'bg-label-warning';
|
||||||
|
if (plantCondition.toLowerCase() === 'mati') badgeClass = 'bg-label-danger';
|
||||||
|
|
||||||
|
let popupContent = `
|
||||||
|
<div class="text-center" style="min-width: 120px;">
|
||||||
|
<h6 class="mb-1 fw-bold">${plantName}</h6>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
let marker = L.marker([plantLat, plantLng], { icon: customIcon }).addTo(map);
|
||||||
|
marker.bindPopup(popupContent);
|
||||||
|
|
||||||
|
setTimeout(() => { marker.openPopup(); }, 500);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@endpush
|
||||||
Reference in New Issue
Block a user