Update Master
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<title>Demo: Register Basic - Pages | Vuexy - Bootstrap Dashboard PRO</title>
|
||||
<title>Agomonev | {{ $title ?? 'Auth' }} </title>
|
||||
|
||||
<meta name="description" content="" />
|
||||
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
<p class="text-center">
|
||||
<span>New on our platform?</span>
|
||||
<a href="auth-register-basic.html">
|
||||
<a href="{{ route('register') }}">
|
||||
<span>Create an account</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
|
||||
<p class="text-center">
|
||||
<span>Already have an account?</span>
|
||||
<a href="auth-login-basic.html">
|
||||
<a href="{{ route('login') }}">
|
||||
<span>Sign in instead</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -10,11 +10,12 @@
|
||||
data-template="vertical-menu-template">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<title>Admin | Database Petani</title>
|
||||
<title>Admin | {{ $title ?? 'Database Petani' }}</title>
|
||||
|
||||
<meta name="description" content="" />
|
||||
|
||||
|
||||
@@ -42,7 +42,6 @@
|
||||
|
||||
<!-- Core JS -->
|
||||
<!-- build:js assets/vendor/js/theme.js -->
|
||||
|
||||
<script src="{{ asset('assets/vendor/libs/jquery/jquery.js') }}"></script>
|
||||
|
||||
<script src="{{ asset('assets/vendor/libs/popper/popper.js') }}"></script>
|
||||
@@ -79,6 +78,10 @@
|
||||
<!-- Page JS -->
|
||||
<script src="{{ asset('assets/js/dashboards-analytics.js') }}"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#logout').on('click', function(e) {
|
||||
|
||||
@@ -115,12 +115,12 @@
|
||||
<li class="menu-item">
|
||||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||||
<i class="menu-icon icon-base ti tabler-file"></i>
|
||||
<div data-i18n="master">Master</div>
|
||||
<div data-i18n="Master">Master</div>
|
||||
</a>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item">
|
||||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||||
<div data-i18n="wilayah">Wilayah</div>
|
||||
<div data-i18n="Wilayah">Wilayah</div>
|
||||
</a>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item">
|
||||
@@ -146,6 +146,59 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item">
|
||||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||||
<div data-i18n="Pertanian">Pertanian</div>
|
||||
</a>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item">
|
||||
<a href="{{ route('adat.index') }}" class="menu-link">
|
||||
<div data-i18n="Adat">Adat</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="{{ route('lahan.index') }}" class="menu-link">
|
||||
<div data-i18n="Lahan">Lahan</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="{{ route('komoditas.index') }}" class="menu-link">
|
||||
<div data-i18n="Komoditas">Komoditas</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="{{ route('tanaman.index') }}" class="menu-link">
|
||||
<div data-i18n="Tanaman">Tanaman</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item">
|
||||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||||
<div data-i18n="Penduduk">Penduduk</div>
|
||||
</a>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item">
|
||||
<a href="#" class="menu-link">
|
||||
<div data-i18n="Users">Users</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="{{ route('profile.index') }}" class="menu-link">
|
||||
<div data-i18n="Profile">Profile</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="{{ route('keluarga.index') }}" class="menu-link">
|
||||
<div data-i18n="Keluarga">Keluarga</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Misc -->
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasAddAdat" aria-labelledby="offcanvasAddAdatLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasAddAdatLabel" class="offcanvas-title">Tambah Adat</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form class="add-new-adat pt-0" id="addNewAdatForm" action="{{ route('adat.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="add-adat-provinsi">Provinsi</label>
|
||||
<select id="add-adat-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="mb-4">
|
||||
<label class="form-label" for="add-adat-kabupaten">Kabupaten/Kota</label>
|
||||
<select id="add-adat-kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota" disabled>
|
||||
<option value="">Pilih Kabupaten/Kota</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="add-adat-kecamatan">Kecamatan</label>
|
||||
<select id="add-adat-kecamatan" class="select2 form-select" data-placeholder="Pilih Kecamatan" disabled>
|
||||
<option value="">Pilih Kecamatan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-adat-desa">Desa/Kelurahan<span class="text-danger">*</span></label>
|
||||
<select id="add-adat-desa" name="desa_kelurahan_id" class="select2 form-select" data-placeholder="Pilih Desa/Kelurahan" disabled>
|
||||
<option value="">Pilih Desa/Kelurahan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-adat-nama">Nama Adat<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="add-adat-nama" placeholder="Contoh: Adat Perkawinan" name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,54 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasEditAdat" aria-labelledby="offcanvasEditAdatLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasEditAdatLabel" class="offcanvas-title">Edit Adat</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="editAdatForm" class="pt-0">
|
||||
@csrf
|
||||
<input type="hidden" id="edit-adat-id" name="id">
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="edit-adat-provinsi">Provinsi</label>
|
||||
<select id="edit-adat-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="mb-4">
|
||||
<label class="form-label" for="edit-adat-kabupaten">Kabupaten/Kota</label>
|
||||
<select id="edit-adat-kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota" disabled>
|
||||
<option value="">Pilih Kabupaten/Kota</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="edit-adat-kecamatan">Kecamatan</label>
|
||||
<select id="edit-adat-kecamatan" class="select2 form-select" data-placeholder="Pilih Kecamatan" disabled>
|
||||
<option value="">Pilih Kecamatan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-adat-desa">Desa/Kelurahan<span class="text-danger">*</span></label>
|
||||
<select id="edit-adat-desa" name="desa_kelurahan_id" class="select2 form-select" data-placeholder="Pilih Desa/Kelurahan" disabled>
|
||||
<option value="">Pilih Desa/Kelurahan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-adat-nama">Nama Adat<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="edit-adat-nama" name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3">Update Data</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,341 @@
|
||||
@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 Adat</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-bottom pt-4">
|
||||
<form method="GET" action="{{ route('adat.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>
|
||||
<option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</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 Adat..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-primary add-new" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddAdat">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Nama Adat</th>
|
||||
<th>Desa/Kelurahan</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($adat as $index => $item)
|
||||
<tr>
|
||||
<td>{{ $adat->firstItem() + $index }}</td>
|
||||
<td>
|
||||
@php
|
||||
$words = explode(' ', $item->nama);
|
||||
$initials = substr(implode('', array_map(fn($w) => strtoupper($w[0] ?? ''), $words)), 0, 2);
|
||||
$states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
$state = $states[array_rand($states)];
|
||||
@endphp
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar-wrapper me-3">
|
||||
<div class="avatar avatar-sm">
|
||||
<span class="avatar-initial rounded-circle bg-label-{{ $state }}">{{ $initials }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-heading fw-medium">{{ $item->nama }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-label-secondary">{{ $item->desakelurahan->nama ?? '-' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill edit-record" data-id="{{ $item->id }}"><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="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill view-record" data-id="{{ $item->id }}"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" 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">
|
||||
{{ $adat->appends(request()->query())->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('master.adat.add')
|
||||
@include('master.adat.view')
|
||||
@include('master.adat.edit')
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
$.validator.setDefaults({
|
||||
errorElement: 'div',
|
||||
errorPlacement: function (error, element) {
|
||||
error.addClass('invalid-feedback');
|
||||
if (element.hasClass('select2-hidden-accessible')) {
|
||||
error.insertAfter(element.next('span.select2'));
|
||||
} else {
|
||||
element.closest('.mb-6, .form-control-validation').append(error);
|
||||
}
|
||||
},
|
||||
highlight: function (element) { $(element).addClass('is-invalid'); },
|
||||
unhighlight: function (element) { $(element).removeClass('is-invalid'); }
|
||||
});
|
||||
|
||||
$('.select2').on('change', function() { $(this).valid(); });
|
||||
|
||||
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.select2');
|
||||
$kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').prop('disabled', true).trigger('change.select2');
|
||||
$desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change.select2');
|
||||
|
||||
if (provinsiId) {
|
||||
$.get(`/kabupatenkotabyprovinsi/${provinsiId}`, function (data) {
|
||||
$kabupaten.prop('disabled', false);
|
||||
$.each(data, function (key, val) {
|
||||
$kabupaten.append(`<option value="${val.id}">${val.nama}</option>`);
|
||||
});
|
||||
$kabupaten.trigger('change.select2');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(`#${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.select2');
|
||||
$desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change.select2');
|
||||
|
||||
if (kabupatenId) {
|
||||
$.get(`/kecamatanbykabupatenkota/${kabupatenId}`, function (data) {
|
||||
$kecamatan.prop('disabled', false);
|
||||
$.each(data, function (key, val) {
|
||||
$kecamatan.append(`<option value="${val.id}">${val.nama}</option>`);
|
||||
});
|
||||
$kecamatan.trigger('change.select2');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(`#${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.select2');
|
||||
|
||||
if (kecamatanId) {
|
||||
$.get(`/desakelurahanbykecamatan/${kecamatanId}`, function (data) {
|
||||
$desa.prop('disabled', false);
|
||||
$.each(data, function (key, val) {
|
||||
$desa.append(`<option value="${val.id}">${val.nama}</option>`);
|
||||
});
|
||||
$desa.trigger('change.select2');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupCascadingDropdown('add-adat');
|
||||
setupCascadingDropdown('edit-adat');
|
||||
|
||||
const offcanvasAdd = new bootstrap.Offcanvas(document.getElementById('offcanvasAddAdat'));
|
||||
$('#addNewAdatForm').validate({
|
||||
rules: {
|
||||
desa_kelurahan_id: { required: true },
|
||||
nama: { required: true }
|
||||
},
|
||||
messages: {
|
||||
desa_kelurahan_id: { required: "Desa/Kelurahan wajib dipilih" },
|
||||
nama: { required: "Nama Adat wajib diisi" }
|
||||
},
|
||||
submitHandler: function (form, event) {
|
||||
event.preventDefault();
|
||||
$(form).find('select').prop('disabled', false);
|
||||
$.ajax({
|
||||
url: $(form).attr('action'),
|
||||
type: 'POST',
|
||||
data: $(form).serialize(),
|
||||
success: function () {
|
||||
offcanvasAdd.hide();
|
||||
form.reset();
|
||||
$('.select2').val(null).trigger('change');
|
||||
Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Data disimpan', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
error: function (xhr) {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const offcanvasView = new bootstrap.Offcanvas(document.getElementById('offcanvasViewAdat'));
|
||||
$(document).on('click', '.view-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const $btn = $(this).addClass('disabled');
|
||||
|
||||
$.get(`/adat/${id}`, function (res) {
|
||||
$btn.removeClass('disabled');
|
||||
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
|
||||
$('#view-adat-provinsi').val(d.nama_provinsi || '-');
|
||||
$('#view-adat-kabupaten').val(d.nama_kabupaten_kota || '-');
|
||||
$('#view-adat-kecamatan').val(d.nama_kecamatan || '-');
|
||||
$('#view-adat-desa').val(d.nama_desa_kelurahan || '-');
|
||||
$('#view-adat-nama').val(d.nama);
|
||||
|
||||
offcanvasView.show();
|
||||
}
|
||||
}).fail(function() {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: 'Terjadi kesalahan saat mengambil data.' });
|
||||
});
|
||||
});
|
||||
|
||||
const offcanvasEdit = new bootstrap.Offcanvas(document.getElementById('offcanvasEditAdat'));
|
||||
$(document).on('click', '.edit-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const editForm = $('#editAdatForm');
|
||||
|
||||
editForm.validate().resetForm();
|
||||
editForm.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
$.get(`/adat/${id}`, function (res) {
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
$('#edit-adat-id').val(d.id);
|
||||
$('#edit-adat-nama').val(d.nama);
|
||||
if (d.provinsi_id) {
|
||||
let optionProv = new Option(d.nama_provinsi, d.provinsi_id, true, true);
|
||||
$('#edit-adat-provinsi').append(optionProv).trigger('change');
|
||||
}
|
||||
if (d.kabupaten_kota_id) {
|
||||
let optionKab = new Option(d.nama_kabupaten_kota, d.kabupaten_kota_id, true, true);
|
||||
$('#edit-adat-kabupaten').append(optionKab).prop('disabled', false).trigger('change');
|
||||
}
|
||||
if (d.kecamatan_id) {
|
||||
let optionKec = new Option(d.nama_kecamatan, d.kecamatan_id, true, true);
|
||||
$('#edit-adat-kecamatan').append(optionKec).prop('disabled', false).trigger('change');
|
||||
}
|
||||
if (d.desa_kelurahan_id) {
|
||||
let optionDesa = new Option(d.nama_desa_kelurahan, d.desa_kelurahan_id, true, true);
|
||||
$('#edit-adat-desa').append(optionDesa).prop('disabled', false).trigger('change');
|
||||
}
|
||||
offcanvasEdit.show();
|
||||
}
|
||||
}).fail(function(xhr) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Gagal!',
|
||||
text: 'Terjadi kesalahan saat mengambil data: ' + (xhr.responseJSON?.message || xhr.statusText)
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$('#editAdatForm').validate({
|
||||
rules: {
|
||||
desa_kelurahan_id: { required: true },
|
||||
nama: { required: true }
|
||||
},
|
||||
messages: {
|
||||
desa_kelurahan_id: { required: "Desa/Kelurahan wajib dipilih" },
|
||||
nama: { required: "Nama Adat wajib diisi" }
|
||||
},
|
||||
submitHandler: function (form, event) {
|
||||
event.preventDefault();
|
||||
const id = $('#edit-adat-id').val();
|
||||
$(form).find('select').prop('disabled', false);
|
||||
|
||||
$.ajax({
|
||||
url: `/adat/${id}`,
|
||||
type: 'PUT',
|
||||
data: $(form).serialize(),
|
||||
headers: { 'X-CSRF-TOKEN': csrfToken },
|
||||
success: function () {
|
||||
offcanvasEdit.hide();
|
||||
Swal.fire({ icon: 'success', title: 'Updated!', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
error: function(xhr) {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Gagal update data' });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.delete-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const name = $(this).data('nama');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Apakah Anda yakin?',
|
||||
text: `Adat "${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: `/adat/${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: function(xhr) {
|
||||
let errorMsg = 'Terjadi kesalahan sistem.';
|
||||
if (xhr.responseJSON && xhr.responseJSON.message) errorMsg = xhr.responseJSON.message;
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: errorMsg });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,40 @@
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasViewAdat" aria-labelledby="offcanvasViewAdatLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasViewAdatLabel" class="offcanvas-title">Detail Adat</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="viewAdatForm" class="pt-0" onsubmit="return false;">
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="view-adat-provinsi">Provinsi</label>
|
||||
<input type="text" class="form-control" id="view-adat-provinsi" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="view-adat-kabupaten">Kabupaten/Kota</label>
|
||||
<input type="text" class="form-control" id="view-adat-kabupaten" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="view-adat-kecamatan">Kecamatan</label>
|
||||
<input type="text" class="form-control" id="view-adat-kecamatan" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="view-adat-desa">Desa/Kelurahan</label>
|
||||
<input type="text" class="form-control" id="view-adat-desa" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-adat-nama">Nama Adat</label>
|
||||
<input type="text" class="form-control" id="view-adat-nama" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Tutup</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,55 @@
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddDesaKelurahan" aria-labelledby="offcanvasAddDesaKelurahanLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasAddDesaKelurahanLabel" class="offcanvas-title">Tambah Desa/Kelurahan</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form class="add-new-desakelurahan pt-0" id="addNewDesaKelurahanForm" action="{{ route('desakelurahan.store') }}" method="POST">
|
||||
@csrf
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="add-adat-provinsi">Provinsi</label>
|
||||
<select id="add-adat-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="mb-4">
|
||||
<label class="form-label" for="add-adat-kabupaten">Kabupaten/Kota</label>
|
||||
<select id="add-adat-kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota" disabled>
|
||||
<option value="">Pilih Kabupaten/Kota</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="add-adat-kecamatan">Kecamatan</label>
|
||||
<select id="add-adat-kecamatan" name="kecamatan_id" class="select2 form-select" data-placeholder="Pilih Kecamatan" disabled>
|
||||
<option value="">Pilih Kecamatan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-desa-code">Kode Desa/Kelurahan<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="add-desa-code" placeholder="1101012001" name="kode" maxlength="10" inputmode="numeric" pattern="[0-9]*" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-desa-name">Nama Desa/Kelurahan<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="add-desa-name" placeholder="Desa Suka Maju" name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-desa-path">Path (Koordinat)</label>
|
||||
<textarea class="form-control" id="add-desa-path" placeholder="[3.21, 97.21]" name="path" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,57 @@
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEditDesaKelurahan" aria-labelledby="offcanvasEditDesaKelurahanLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasEditDesaKelurahanLabel" class="offcanvas-title">Edit Desa/Kelurahan</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="editDesaKelurahanForm" class="pt-0">
|
||||
@csrf
|
||||
<input type="hidden" id="edit-desa-id" name="id">
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="edit-desa-provinsi">Provinsi<span class="text-danger">*</span></label>
|
||||
<select id="edit-desa-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="mb-4">
|
||||
<label class="form-label" for="edit-desa-kabupaten">Kabupaten/Kota<span class="text-danger">*</span></label>
|
||||
<select id="edit-desa-kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota" disabled>
|
||||
<option value="">Pilih Kabupaten/Kota</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="edit-desa-kecamatan">Kecamatan<span class="text-danger">*</span></label>
|
||||
<select id="edit-desa-kecamatan" name="kecamatan_id" class="select2 form-select" data-placeholder="Pilih Kecamatan" disabled>
|
||||
<option value="">Pilih Kecamatan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-desa-code">Kode Desa/Kelurahan<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="edit-desa-code" name="kode" maxlength="10" inputmode="numeric" pattern="[0-9]*" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-desa-name">Nama Desa/Kelurahan<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="edit-desa-name" name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-desa-path">Path (Koordinat)</label>
|
||||
<textarea class="form-control" id="edit-desa-path" name="path" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3">Update Data</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,324 @@
|
||||
@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 Desa/Kelurahan</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-bottom pt-4">
|
||||
<form method="GET" action="{{ route('desakelurahan.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>
|
||||
<option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</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 Desa/Kel..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-primary add-new" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddDesaKelurahan">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Kode Desa/Kel</th>
|
||||
<th>Nama Desa/Kelurahan</th>
|
||||
<th>Kecamatan</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($desakelurahan as $index => $desa)
|
||||
<tr>
|
||||
<td>{{ $desakelurahan->firstItem() + $index }}</td>
|
||||
<td><span class="text-heading fw-medium">{{ $desa->kode }}</span></td>
|
||||
<td>
|
||||
@php
|
||||
$words = explode(' ', $desa->nama);
|
||||
$initials = substr(implode('', array_map(fn($w) => strtoupper($w[0] ?? ''), $words)), 0, 2);
|
||||
$states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
$state = $states[array_rand($states)];
|
||||
@endphp
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar-wrapper me-3">
|
||||
<div class="avatar avatar-sm">
|
||||
<span class="avatar-initial rounded-circle bg-label-{{ $state }}">{{ $initials }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-heading">{{ $desa->nama }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-label-secondary">{{ $desa->kecamatan->nama ?? '-' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill edit-record" data-id="{{ $desa->id }}"><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="{{ $desa->id }}" data-nama="{{ $desa->nama }}"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill view-record" data-id="{{ $desa->id }}"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" 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">
|
||||
{{ $desakelurahan->appends(request()->query())->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('master.desakelurahan.add')
|
||||
@include('master.desakelurahan.view')
|
||||
@include('master.desakelurahan.edit')
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
$(document).ready(function () {
|
||||
$.validator.setDefaults({
|
||||
errorElement: 'div',
|
||||
errorPlacement: function (error, element) {
|
||||
error.addClass('invalid-feedback');
|
||||
if (element.hasClass('select2-hidden-accessible')) {
|
||||
error.insertAfter(element.next('span.select2'));
|
||||
} else {
|
||||
element.closest('.mb-6, .form-control-validation').append(error);
|
||||
}
|
||||
},
|
||||
highlight: function (element) {
|
||||
$(element).addClass('is-invalid');
|
||||
},
|
||||
unhighlight: function (element) {
|
||||
$(element).removeClass('is-invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('.select2').on('change', function() { $(this).valid(); });
|
||||
|
||||
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.select2');
|
||||
$kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').prop('disabled', true).trigger('change.select2');
|
||||
$desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change.select2');
|
||||
|
||||
if (provinsiId) {
|
||||
$.get(`/kabupatenkotabyprovinsi/${provinsiId}`, function (data) {
|
||||
$kabupaten.prop('disabled', false);
|
||||
$.each(data, function (key, val) {
|
||||
$kabupaten.append(`<option value="${val.id}">${val.nama}</option>`);
|
||||
});
|
||||
$kabupaten.trigger('change.select2');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(`#${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.select2');
|
||||
$desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change.select2');
|
||||
|
||||
if (kabupatenId) {
|
||||
$.get(`/kecamatanbykabupatenkota/${kabupatenId}`, function (data) {
|
||||
$kecamatan.prop('disabled', false);
|
||||
$.each(data, function (key, val) {
|
||||
$kecamatan.append(`<option value="${val.id}">${val.nama}</option>`);
|
||||
});
|
||||
$kecamatan.trigger('change.select2');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupCascadingDropdown('add-adat');
|
||||
setupCascadingDropdown('edit-adat');
|
||||
|
||||
const offcanvasAdd = new bootstrap.Offcanvas(document.getElementById('offcanvasAddDesaKelurahan'));
|
||||
$('#addNewDesaKelurahanForm').validate({
|
||||
rules: {
|
||||
kecamatan_id: { required: true },
|
||||
kode: { required: true, minlength: 10, maxlength: 10, digits: true },
|
||||
nama: { required: true }
|
||||
},
|
||||
messages: {
|
||||
kecamatan_id: { required: "Kecamatan wajib dipilih" },
|
||||
kode: { required: "Kode wajib diisi", minlength: "Kode harus 10 digit", maxlength: "Kode harus 10 digit", digits: "Hanya angka" },
|
||||
nama: { required: "Nama Desa/Kelurahan wajib diisi" }
|
||||
},
|
||||
submitHandler: function (form, event) {
|
||||
event.preventDefault();
|
||||
$(form).find('select').prop('disabled', false);
|
||||
$.ajax({
|
||||
url: $(form).attr('action'),
|
||||
type: 'POST',
|
||||
data: $(form).serialize(),
|
||||
success: function () {
|
||||
offcanvasAdd.hide();
|
||||
form.reset();
|
||||
$('.select2').val(null).trigger('change');
|
||||
Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Data disimpan', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
error: function (xhr) {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const offcanvasView = new bootstrap.Offcanvas(document.getElementById('offcanvasViewDesaKelurahan'));
|
||||
$(document).on('click', '.view-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const $btn = $(this).addClass('disabled');
|
||||
|
||||
$.get(`/desakelurahan/${id}`, function (res) {
|
||||
$btn.removeClass('disabled');
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
|
||||
$('#view-desa-provinsi').val(d.nama_provinsi || '-');
|
||||
$('#view-desa-kabupaten').val(d.nama_kabupaten_kota || '-');
|
||||
$('#view-desa-kecamatan').val(d.nama_kecamatan);
|
||||
$('#view-desa-code').val(d.kode);
|
||||
$('#view-desa-name').val(d.nama);
|
||||
$('#view-desa-path').val(d.path);
|
||||
offcanvasView.show();
|
||||
}
|
||||
}).fail(function() {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: 'Terjadi kesalahan saat mengambil data.' });
|
||||
});
|
||||
});
|
||||
|
||||
const offcanvasEdit = new bootstrap.Offcanvas(document.getElementById('offcanvasEditDesaKelurahan'));
|
||||
$(document).on('click', '.edit-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const editForm = $('#editDesaKelurahanForm');
|
||||
|
||||
editForm.validate().resetForm();
|
||||
editForm.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
$.get(`/desakelurahan/${id}`, function (res) {
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
$('#edit-desa-id').val(d.id);
|
||||
$('#edit-desa-code').val(d.kode);
|
||||
$('#edit-desa-name').val(d.nama);
|
||||
$('#edit-desa-path').val(d.path);
|
||||
if (d.provinsi_id) {
|
||||
let optionProv = new Option(d.nama_provinsi, d.provinsi_id, true, true);
|
||||
$('#edit-desa-provinsi').append(optionProv).trigger('change');
|
||||
}
|
||||
if (d.kabupaten_kota_id) {
|
||||
let optionKab = new Option(d.nama_kabupaten_kota, d.kabupaten_kota_id, true, true);
|
||||
$('#edit-desa-kabupaten').append(optionKab).prop('disabled', false).trigger('change');
|
||||
}
|
||||
if (d.kecamatan_id) {
|
||||
let optionKec = new Option(d.nama_kecamatan, d.kecamatan_id, true, true);
|
||||
$('#edit-desa-kecamatan').append(optionKec).prop('disabled', false).trigger('change');
|
||||
}
|
||||
offcanvasEdit.show();
|
||||
}
|
||||
}).fail(function(xhr) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Gagal!',
|
||||
text: 'Terjadi kesalahan saat mengambil data: ' + (xhr.responseJSON?.message || xhr.statusText)
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$('#editDesaKelurahanForm').validate({
|
||||
rules: {
|
||||
kecamatan_id: { required: true },
|
||||
kode: { required: true, minlength: 10, maxlength: 10, digits: true },
|
||||
nama: { required: true }
|
||||
},
|
||||
messages: {
|
||||
kecamatan_id: { required: "Kecamatan wajib dipilih" },
|
||||
kode: { required: "Kode wajib diisi", minlength: "Kode harus 10 digit", maxlength: "Kode harus 10 digit", digits: "Hanya angka" },
|
||||
nama: { required: "Nama Desa/Kelurahan wajib diisi" }
|
||||
},
|
||||
submitHandler: function (form, event) {
|
||||
event.preventDefault();
|
||||
const id = $('#edit-desa-id').val();
|
||||
$(form).find('select').prop('disabled', false);
|
||||
$.ajax({
|
||||
url: `/desakelurahan/${id}`,
|
||||
type: 'PUT',
|
||||
data: $(form).serialize(),
|
||||
success: function () {
|
||||
offcanvasEdit.hide();
|
||||
Swal.fire({ icon: 'success', title: 'Updated!', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
error: function(xhr) {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Gagal update data' });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.delete-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const name = $(this).data('nama');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Apakah Anda yakin?',
|
||||
text: `Desa/Kelurahan "${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: `/desakelurahan/${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,44 @@
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasViewDesaKelurahan" aria-labelledby="offcanvasViewDesaKelurahanLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasViewDesaKelurahanLabel" class="offcanvas-title">Detail Desa/Kelurahan</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="viewDesaKelurahanForm" class="pt-0" onsubmit="return false;">
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-desa-provinsi">Provinsi</label>
|
||||
<input type="text" class="form-control" id="view-desa-provinsi" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-desa-kabupaten">Kabupaten/Kota</label>
|
||||
<input type="text" class="form-control" id="view-desa-kabupaten" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-desa-kecamatan">Kecamatan</label>
|
||||
<input type="text" class="form-control" id="view-desa-kecamatan" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-desa-code">Kode Desa/Kelurahan</label>
|
||||
<input type="text" class="form-control" id="view-desa-code" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-desa-name">Nama Desa/Kelurahan</label>
|
||||
<input type="text" class="form-control" id="view-desa-name" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-desa-path">Path (Koordinat)</label>
|
||||
<textarea class="form-control" id="view-desa-path" rows="4" readonly></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Tutup</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,56 @@
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddKabupatenKota" aria-labelledby="offcanvasAddKabupatenKotaLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasAddKabupatenKotaLabel" class="offcanvas-title">Tambah Kabupaten/Kota</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form class="add-new-kabupatenkota pt-0" id="addNewKabupatenKotaForm" action="{{ route('kabupatenkota.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-kab-provinsi">Provinsi<span class="text-danger">*</span></label>
|
||||
<select id="add-kab-provinsi" name="provinsi_id" 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="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-kab-code">Kode Kabupaten/Kota<span class="text-danger">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="add-kab-code"
|
||||
placeholder="1101"
|
||||
name="kode"
|
||||
maxlength="4"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-kab-name">Nama Kabupaten/Kota<span class="text-danger">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="add-kab-name"
|
||||
placeholder="Kab. Aceh Selatan"
|
||||
name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-kab-path">Path (Koordinat)</label>
|
||||
<textarea class="form-control" id="add-kab-path" placeholder="[3.21, 97.21]" name="path" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,55 @@
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEditKabupatenKota" aria-labelledby="offcanvasEditKabupatenKotaLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasEditKabupatenKotaLabel" class="offcanvas-title">Edit Kabupaten/Kota</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="editKabupatenKotaForm" class="pt-0">
|
||||
@csrf
|
||||
<input type="hidden" id="edit-kabupatenkota-id" name="id">
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-kabupatenkota-provinsi">Provinsi<span class="text-danger">*</span></label>
|
||||
<select id="edit-kabupatenkota-provinsi" name="provinsi_id" 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="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-kabupatenkota-kode">Kode Kabupaten/Kota<span class="text-danger">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="edit-kabupatenkota-kode"
|
||||
name="kode"
|
||||
maxlength="4"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-kabupatenkota-nama">Nama Kabupaten/Kota<span class="text-danger">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="edit-kabupatenkota-nama"
|
||||
name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-kabupatenkota-path">Path (Koordinat)</label>
|
||||
<textarea class="form-control" id="edit-kabupatenkota-path" name="path" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3">Update Data</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,33 +1,263 @@
|
||||
@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">Filters</h5>
|
||||
<div class="d-flex justify-content-between align-items-center row pt-4 gap-4 gap-md-0">
|
||||
<div class="col-md-4 user_role"></div>
|
||||
<div class="col-md-4 user_plan"></div>
|
||||
<div class="col-md-4 user_status"></div>
|
||||
<div class="card-body border-bottom">
|
||||
<form method="GET" action="{{ route('kabupatenkota.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>
|
||||
<option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</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 Kab/Kota..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-primary add-new" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddKabupatenKota">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Kode Kab/Kota</th>
|
||||
<th>Nama Kabupaten/Kota</th>
|
||||
<th>Provinsi</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($kabupatenkota as $index => $kab)
|
||||
<tr>
|
||||
<td>{{ $kabupatenkota->firstItem() + $index }}</td>
|
||||
<td><span class="text-heading fw-medium">{{ $kab->kode }}</span></td>
|
||||
<td>
|
||||
@php
|
||||
$words = explode(' ', $kab->nama);
|
||||
$initials = substr(implode('', array_map(fn($w) => strtoupper($w[0] ?? ''), $words)), 0, 2);
|
||||
$states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
$state = $states[array_rand($states)];
|
||||
@endphp
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar-wrapper me-3">
|
||||
<div class="avatar avatar-sm">
|
||||
<span class="avatar-initial rounded-circle bg-label-{{ $state }}">{{ $initials }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-heading">{{ $kab->nama }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-label-secondary">{{ $kab->provinsi->nama ?? '-' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill edit-record" data-id="{{ $kab->id }}"><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="{{ $kab->id }}" data-nama="{{ $kab->nama }}"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill view-record" data-id="{{ $kab->id }}"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" 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">
|
||||
{{ $kabupatenkota->appends(request()->query())->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-datatable">
|
||||
<table class="datatables-users table">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th></th> <th>ID</th>
|
||||
<th>Kode Kabupaten Kota</th>
|
||||
<th>Nama Kabupaten Kota</th>
|
||||
<th>Nama Provinsi</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
@include('users.user.add')
|
||||
@include('master.kabupatenkota.add')
|
||||
@include('master.kabupatenkota.view')
|
||||
@include('master.kabupatenkota.edit')
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>var kabupatenKotaListUrl = "{{ route('kabupatenkota.list') }}";</script>
|
||||
<script src="{{ asset('assets/js/master-kabupatenkota.js') }}"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
$(document).ready(function () {
|
||||
$.validator.setDefaults({
|
||||
errorElement: 'div',
|
||||
errorPlacement: function (error, element) {
|
||||
error.addClass('invalid-feedback');
|
||||
if (element.hasClass('select2-hidden-accessible')) {
|
||||
error.insertAfter(element.next('span.select2'));
|
||||
} else {
|
||||
element.closest('.mb-6, .form-control-validation').append(error);
|
||||
}
|
||||
},
|
||||
highlight: function (element) {
|
||||
$(element).addClass('is-invalid');
|
||||
},
|
||||
unhighlight: function (element) {
|
||||
$(element).removeClass('is-invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('.select2').on('change', function() { $(this).valid(); });
|
||||
|
||||
const offcanvasAdd = new bootstrap.Offcanvas(document.getElementById('offcanvasAddKabupatenKota'));
|
||||
$('#addNewKabupatenKotaForm').validate({
|
||||
rules: {
|
||||
provinsi_id: { required: true },
|
||||
kode: { required: true, minlength: 4, maxlength: 4, digits: true },
|
||||
nama: { required: true }
|
||||
},
|
||||
messages: {
|
||||
provinsi_id: { required: "Provinsi wajib dipilih" },
|
||||
kode: { required: "Kode wajib diisi", minlength: "Kode harus 4 digit", maxlength: "Kode harus 4 digit", digits: "Hanya angka" },
|
||||
nama: { required: "Nama Kabupaten Kota wajib diisi" }
|
||||
},
|
||||
submitHandler: function (form, event) {
|
||||
event.preventDefault();
|
||||
$(form).find('select').prop('disabled', false);
|
||||
$.ajax({
|
||||
url: $(form).attr('action'),
|
||||
type: 'POST',
|
||||
data: $(form).serialize(),
|
||||
success: function () {
|
||||
offcanvasAdd.hide();
|
||||
form.reset();
|
||||
$('.select2').val(null).trigger('change');
|
||||
Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Data disimpan', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
error: function (xhr) {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const offcanvasView = new bootstrap.Offcanvas(document.getElementById('offcanvasViewKabupatenKota'));
|
||||
$(document).on('click', '.view-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const $btn = $(this).addClass('disabled');
|
||||
|
||||
$.get(`/kabupatenkota/${id}`, function (res) {
|
||||
$btn.removeClass('disabled');
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
$('#view-kabupatenkota-provinsi').val(d.nama_provinsi || '-');
|
||||
$('#view-kabupatenkota-code').val(d.kode);
|
||||
$('#view-kabupatenkota-name').val(d.nama);
|
||||
$('#view-kabupatenkota-path').val(d.path);
|
||||
offcanvasView.show();
|
||||
}
|
||||
}).fail(function() {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: 'Terjadi kesalahan saat mengambil data.' });
|
||||
});
|
||||
});
|
||||
|
||||
const offcanvasEdit = new bootstrap.Offcanvas(document.getElementById('offcanvasEditKabupatenKota'));
|
||||
$(document).on('click', '.edit-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const editForm = $('#editKabupatenKotaForm');
|
||||
|
||||
editForm.validate().resetForm();
|
||||
editForm.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
$.get(`/kabupatenkota/${id}`, function (res) {
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
$('#edit-kabupatenkota-id').val(d.id);
|
||||
$('#edit-kabupatenkota-code').val(d.kode);
|
||||
$('#edit-kabupatenkota-name').val(d.nama);
|
||||
$('#edit-kabupatenkota-path').val(d.path);
|
||||
if (d.provinsi_id) {
|
||||
let optionProv = new Option(d.nama_provinsi, d.provinsi_id, true, true);
|
||||
$('#edit-kabupatenkota-provinsi').append(optionProv).trigger('change');
|
||||
}
|
||||
offcanvasEdit.show();
|
||||
}
|
||||
}).fail(function(xhr) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Gagal!',
|
||||
text: 'Terjadi kesalahan saat mengambil data: ' + (xhr.responseJSON?.message || xhr.statusText)
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$('#editKabupatenKotaForm').validate({
|
||||
rules: {
|
||||
provinsi_id: { required: true },
|
||||
kode: { required: true, minlength: 4, maxlength: 4, digits: true },
|
||||
nama: { required: true }
|
||||
},
|
||||
messages: {
|
||||
provinsi_id: { required: "Provinsi wajib dipilih" },
|
||||
kode: { required: "Kode wajib diisi", minlength: "Kode harus 4 digit", maxlength: "Kode harus 4 digit", digits: "Hanya angka" },
|
||||
nama: { required: "Nama Kabupaten/Kota wajib diisi" }
|
||||
},
|
||||
submitHandler: function (form, event) {
|
||||
event.preventDefault();
|
||||
const id = $('#edit-kabupatenkota-id').val();
|
||||
$(form).find('select').prop('disabled', false);
|
||||
$.ajax({
|
||||
url: `/kabupatenkota/${id}`,
|
||||
type: 'PUT',
|
||||
data: $(form).serialize(),
|
||||
success: function () {
|
||||
offcanvasEdit.hide();
|
||||
Swal.fire({ icon: 'success', title: 'Updated!', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
error: function(xhr) {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Gagal update data' });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.delete-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const name = $(this).data('nama');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Apakah Anda yakin?',
|
||||
text: `Kabupaten/Kota "${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: `/kabupatenkota/${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,34 @@
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasViewKabupatenKota" aria-labelledby="offcanvasViewKabupatenKotaLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasViewKabupatenKotaLabel" class="offcanvas-title">Detail Kabupaten/Kota</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="viewKabupatenKotaForm" class="pt-0" onsubmit="return false;">
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-kabupatenkota-provinsi">Provinsi</label>
|
||||
<input type="text" class="form-control" id="view-kabupatenkota-provinsi" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-kabupatenkota-kode">Kode Kabupaten/Kota</label>
|
||||
<input type="text" class="form-control" id="view-kabupatenkota-kode" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-kabupatenkota-nama">Nama Kabupaten/Kota</label>
|
||||
<input type="text" class="form-control" id="view-kabupatenkota-nama" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-kabupatenkota-path">Path (Koordinat)</label>
|
||||
<textarea class="form-control" id="view-kabupatenkota-path" rows="4" readonly></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Tutup</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,49 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasAddKecamatan" aria-labelledby="offcanvasAddKecamatanLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasAddKecamatanLabel" class="offcanvas-title">Tambah Kecamatan</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form class="add-new-kecamatan pt-0" id="addNewKecamatanForm" action="{{ route('kecamatan.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="add-kec-provinsi">Provinsi</label>
|
||||
<select id="add-kec-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="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-kec-kabupaten">Kabupaten/Kota<span class="text-danger">*</span></label>
|
||||
<select id="add-kec-kabupaten" name="kabupaten_kota_id" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota" disabled>
|
||||
<option value="">Pilih Kabupaten/Kota</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-kec-code">Kode Kecamatan<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="add-kec-code" placeholder="110101" name="kode" maxlength="6" inputmode="numeric" pattern="[0-9]*" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-kec-name">Nama Kecamatan<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="add-kec-name" placeholder="Contoh: Kec. Tapaktuan" name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-kec-path">Path (Koordinat)</label>
|
||||
<textarea class="form-control" id="add-kec-path" placeholder="[3.21, 97.21]" name="path" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,50 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasEditKecamatan" aria-labelledby="offcanvasEditKecamatanLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasEditKecamatanLabel" class="offcanvas-title">Edit Kecamatan</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="editKecamatanForm" class="pt-0">
|
||||
@csrf
|
||||
<input type="hidden" id="edit-kecamatan-id" name="id">
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="edit-kec-provinsi">Provinsi</label>
|
||||
<select id="edit-kec-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="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-kec-kabupaten">Kabupaten/Kota<span class="text-danger">*</span></label>
|
||||
<select id="edit-kec-kabupaten" name="kabupaten_kota_id" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota" disabled>
|
||||
<option value="">Pilih Kabupaten/Kota</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-kec-code">Kode Kecamatan<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="edit-kec-code" name="kode" maxlength="6" inputmode="numeric" pattern="[0-9]*" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-kec-name">Nama Kecamatan<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="edit-kec-name" name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-kec-path">Path (Koordinat)</label>
|
||||
<textarea class="form-control" id="edit-kec-path" name="path" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3">Update Data</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,34 +1,321 @@
|
||||
@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">Filters</h5>
|
||||
<div class="d-flex justify-content-between align-items-center row pt-4 gap-4 gap-md-0">
|
||||
<div class="col-md-4 user_role"></div>
|
||||
<div class="col-md-4 user_plan"></div>
|
||||
<div class="col-md-4 user_status"></div>
|
||||
<div class="card-header border-bottom">
|
||||
<h5 class="card-title mb-0">Data Kecamatan</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-bottom pt-4">
|
||||
<form method="GET" action="{{ route('kecamatan.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>
|
||||
<option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</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 Kecamatan..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-primary add-new" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddKecamatan">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Kode Kecamatan</th>
|
||||
<th>Nama Kecamatan</th>
|
||||
<th>Kabupaten/Kota</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($kecamatan as $index => $kec)
|
||||
<tr>
|
||||
<td>{{ $kecamatan->firstItem() + $index }}</td>
|
||||
<td><span class="text-heading fw-medium">{{ $kec->kode }}</span></td>
|
||||
<td>
|
||||
@php
|
||||
$words = explode(' ', $kec->nama);
|
||||
$initials = substr(implode('', array_map(fn($w) => strtoupper($w[0] ?? ''), $words)), 0, 2);
|
||||
$states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
$state = $states[array_rand($states)];
|
||||
@endphp
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar-wrapper me-3">
|
||||
<div class="avatar avatar-sm">
|
||||
<span class="avatar-initial rounded-circle bg-label-{{ $state }}">{{ $initials }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-heading">{{ $kec->nama }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-label-secondary">{{ $kec->kabupatenkota->nama ?? '-' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill edit-record" data-id="{{ $kec->id }}"><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="{{ $kec->id }}" data-nama="{{ $kec->nama }}"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill view-record" data-id="{{ $kec->id }}"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" 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">
|
||||
{{ $kecamatan->appends(request()->query())->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-datatable">
|
||||
<table class="datatables-users table">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th></th> <th>ID</th>
|
||||
<th>Kode Kecamatan</th>
|
||||
<th>Nama Kecamatan</th>
|
||||
<th>Nama Kabupaten Kota</th>
|
||||
<th>Nama Provinsi</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
@include('users.user.add')
|
||||
|
||||
@include('master.kecamatan.add')
|
||||
@include('master.kecamatan.view')
|
||||
@include('master.kecamatan.edit')
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>var kecamatanListUrl = "{{ route('kecamatan.list') }}";</script>
|
||||
<script src="{{ asset('assets/js/master-kecamatan.js') }}"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
function setupCascadingDropdown(prefix) {
|
||||
$(`#${prefix}-provinsi`).on('change', function () {
|
||||
let provinsiId = $(this).val();
|
||||
let $kabupaten = $(`#${prefix}-kabupaten`);
|
||||
|
||||
$kabupaten.empty().append('<option value="">Pilih Kabupaten/Kota</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>`);
|
||||
});
|
||||
$kabupaten.trigger('change');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupCascadingDropdown('add-kec');
|
||||
setupCascadingDropdown('edit-kec');
|
||||
|
||||
const addForm = document.getElementById('addNewKecamatanForm');
|
||||
const offcanvasAdd = new bootstrap.Offcanvas(document.getElementById('offcanvasAddKecamatan'));
|
||||
|
||||
let fvAdd;
|
||||
if (addForm) {
|
||||
fvAdd = FormValidation.formValidation(addForm, {
|
||||
fields: {
|
||||
kabupaten_kota_id: { validators: { notEmpty: { message: 'Kabupaten/Kota wajib dipilih' } } },
|
||||
kode: {
|
||||
validators: {
|
||||
notEmpty: { message: 'Kode wajib diisi' },
|
||||
stringLength: { min: 6, max: 6, message: 'Kode harus 6 digit' },
|
||||
digits: { message: 'Hanya boleh berisi angka' }
|
||||
}
|
||||
},
|
||||
nama: { validators: { notEmpty: { message: 'Nama Kecamatan wajib diisi' } } }
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({ eleValidClass: '', rowSelector: '.form-control-validation' }),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
}).on('core.form.valid', function () {
|
||||
$(addForm).find('select').prop('disabled', false);
|
||||
$.ajax({
|
||||
url: addForm.action,
|
||||
type: 'POST',
|
||||
data: $(addForm).serialize(),
|
||||
success: function () {
|
||||
offcanvasAdd.hide();
|
||||
addForm.reset();
|
||||
fvAdd.resetForm();
|
||||
$('.select2').val(null).trigger('change');
|
||||
Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Data disimpan', timer: 1500, showConfirmButton: false })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
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' });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const editForm = document.getElementById('editKecamatanForm');
|
||||
const offcanvasEdit = new bootstrap.Offcanvas(document.getElementById('offcanvasEditKecamatan'));
|
||||
|
||||
let fvEdit;
|
||||
if (editForm) {
|
||||
fvEdit = FormValidation.formValidation(editForm, {
|
||||
fields: {
|
||||
kabupaten_kota_id: { validators: { notEmpty: { message: 'Kabupaten/Kota wajib dipilih' } } },
|
||||
kode: {
|
||||
validators: {
|
||||
notEmpty: { message: 'Kode wajib diisi' },
|
||||
stringLength: { min: 6, max: 6, message: 'Kode harus 6 digit' },
|
||||
digits: { message: 'Hanya boleh berisi angka' }
|
||||
}
|
||||
},
|
||||
nama: { validators: { notEmpty: { message: 'Nama Kecamatan wajib diisi' } } }
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({ eleValidClass: '', rowSelector: '.form-control-validation' }),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
}).on('core.form.valid', function () {
|
||||
const id = $('#edit-kecamatan-id').val();
|
||||
$(editForm).find('select').prop('disabled', false);
|
||||
|
||||
$.ajax({
|
||||
url: `/kecamatan/${id}`,
|
||||
type: 'PUT',
|
||||
data: $(editForm).serialize(),
|
||||
headers: { 'X-CSRF-TOKEN': csrfToken },
|
||||
success: function () {
|
||||
offcanvasEdit.hide();
|
||||
Swal.fire({ icon: 'success', title: 'Updated!', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
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: 'Oops...', text: xhr.responseJSON?.message || 'Terjadi kesalahan.' });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$('.select2').on('change', function() {
|
||||
const name = $(this).attr('name');
|
||||
if (name) {
|
||||
if (fvAdd && addForm.querySelector(`[name="${name}"]`)) fvAdd.revalidateField(name);
|
||||
if (fvEdit && editForm.querySelector(`[name="${name}"]`)) fvEdit.revalidateField(name);
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.edit-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const $btn = $(this).addClass('disabled');
|
||||
|
||||
$.get(`/kecamatan/${id}`, function (res) {
|
||||
$btn.removeClass('disabled');
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
$('#edit-kecamatan-id').val(d.id);
|
||||
$('#edit-kec-code').val(d.kode);
|
||||
$('#edit-kec-name').val(d.nama);
|
||||
$('#edit-kec-path').val(d.path);
|
||||
|
||||
if (d.provinsi_id) {
|
||||
let optionProv = new Option(d.nama_provinsi, d.provinsi_id, true, true);
|
||||
$('#edit-kec-provinsi').append(optionProv).trigger('change');
|
||||
}
|
||||
if (d.kabupaten_kota_id) {
|
||||
let optionKab = new Option(d.nama_kabupaten_kota, d.kabupaten_kota_id, true, true);
|
||||
$('#edit-kec-kabupaten').append(optionKab).prop('disabled', false).trigger('change');
|
||||
}
|
||||
|
||||
if (fvEdit) fvEdit.resetForm();
|
||||
offcanvasEdit.show();
|
||||
}
|
||||
}).fail(() => { $btn.removeClass('disabled'); Swal.fire('Gagal!', 'Terjadi kesalahan.', 'error'); });
|
||||
});
|
||||
|
||||
const offcanvasView = new bootstrap.Offcanvas(document.getElementById('offcanvasViewKecamatan'));
|
||||
$(document).on('click', '.view-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const $btn = $(this).addClass('disabled');
|
||||
|
||||
$.get(`/kecamatan/${id}`, function (res) {
|
||||
$btn.removeClass('disabled');
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
$('#view-kec-provinsi').val(d.nama_provinsi || '-');
|
||||
$('#view-kec-kabupaten').val(d.nama_kabupaten_kota || '-');
|
||||
$('#view-kec-code').val(d.kode || '-');
|
||||
$('#view-kec-name').val(d.nama || '-');
|
||||
$('#view-kec-path').val(d.path || '-');
|
||||
offcanvasView.show();
|
||||
}
|
||||
}).fail(() => { $btn.removeClass('disabled'); Swal.fire('Gagal!', 'Terjadi kesalahan.', 'error'); });
|
||||
});
|
||||
|
||||
$(document).on('click', '.delete-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const name = $(this).data('nama');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Apakah Anda yakin?',
|
||||
text: `Kecamatan "${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: `/kecamatan/${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,40 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasViewKecamatan" aria-labelledby="offcanvasViewKecamatanLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasViewKecamatanLabel" class="offcanvas-title">Detail Kecamatan</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="viewKecamatanForm" class="pt-0" onsubmit="return false;">
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="view-kec-provinsi">Provinsi</label>
|
||||
<input type="text" class="form-control" id="view-kec-provinsi" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="view-kec-kabupaten">Kabupaten/Kota</label>
|
||||
<input type="text" class="form-control" id="view-kec-kabupaten" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="view-kec-code">Kode Kecamatan</label>
|
||||
<input type="text" class="form-control" id="view-kec-code" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="view-kec-name">Nama Kecamatan</label>
|
||||
<input type="text" class="form-control" id="view-kec-name" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-kec-path">Path (Koordinat)</label>
|
||||
<textarea class="form-control" id="view-kec-path" rows="4" readonly></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Tutup</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,228 @@
|
||||
@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 Data Keluarga</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<form id="addKeluargaForm" action="{{ route('keluarga.store') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-id me-1"></i> Informasi Kartu Keluarga</h6>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4 form-control-validation">
|
||||
<label class="form-label">No. Kartu Keluarga (KK)<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" name="kk" placeholder="Masukkan 16 Digit No KK" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Wilayah & Adat</h6>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<label class="form-label">Provinsi</label>
|
||||
<select id="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">Kabupaten/Kota</label>
|
||||
<select id="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">Kecamatan</label>
|
||||
<select id="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">Desa/Kelurahan<span class="text-danger">*</span></label>
|
||||
<select id="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="row">
|
||||
<div class="col-md-6 mb-4 form-control-validation">
|
||||
<label class="form-label">Pilih Adat</label>
|
||||
<select id="adat" name="adat_id" class="select2 form-select" data-placeholder="Pilih Adat" disabled>
|
||||
<option value="">Pilih Adat</option>
|
||||
</select>
|
||||
<small class="text-muted d-block mt-1">Data adat otomatis difilter berdasarkan Desa/Kelurahan yang dipilih.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-upload me-1"></i> Dokumen</h6>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4 form-control-validation">
|
||||
<label class="form-label">Upload File KK</label>
|
||||
<input type="file" class="form-control" id="file_kk" name="file_kk" accept="image/*,.pdf" />
|
||||
|
||||
<div id="preview-container" class="mt-3 d-none">
|
||||
<img id="preview-image" 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" 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('keluarga.index') }}" class="btn btn-label-secondary me-2">Kembali</a>
|
||||
<button type="submit" class="btn btn-primary data-submit">Simpan Data</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
'use strict';
|
||||
$(document).ready(function () {
|
||||
$('.select2').select2();
|
||||
|
||||
$('#file_kk').on('change', function(event) {
|
||||
const file = event.target.files[0];
|
||||
const $container = $('#preview-container');
|
||||
const $image = $('#preview-image');
|
||||
const $pdf = $('#preview-pdf');
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
$('#provinsi').on('change', function () {
|
||||
let id = $(this).val();
|
||||
$('#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');
|
||||
$('#adat').empty().append('<option value="">Pilih Adat</option>').prop('disabled', true).trigger('change');
|
||||
if (id) {
|
||||
$.get(`/kabupatenkotabyprovinsi/${id}`, 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>`); });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#kabupaten').on('change', function () {
|
||||
let id = $(this).val();
|
||||
$('#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');
|
||||
$('#adat').empty().append('<option value="">Pilih Adat</option>').prop('disabled', true).trigger('change');
|
||||
if (id) {
|
||||
$.get(`/kecamatanbykabupatenkota/${id}`, 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>`); });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#kecamatan').on('change', function () {
|
||||
let id = $(this).val();
|
||||
$('#desa').empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change');
|
||||
$('#adat').empty().append('<option value="">Pilih Adat</option>').prop('disabled', true).trigger('change');
|
||||
if (id) {
|
||||
$.get(`/desakelurahanbykecamatan/${id}`, 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>`); });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#desa').on('change', function () {
|
||||
let id = $(this).val();
|
||||
$('#adat').empty().append('<option value="">Pilih Adat</option>').prop('disabled', true).trigger('change');
|
||||
if (id) {
|
||||
$.get(`/adatbydesa/${id}`, function (res) {
|
||||
$('#adat').prop('disabled', false);
|
||||
let dataList = Array.isArray(res) ? res : (res.data || []);
|
||||
$.each(dataList, function (key, val) { $('#adat').append(`<option value="${val.id}">${val.nama}</option>`); });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const addForm = document.getElementById('addKeluargaForm');
|
||||
let fvAdd = FormValidation.formValidation(addForm, {
|
||||
fields: {
|
||||
kk: { validators: { notEmpty: { message: 'Nomor KK wajib diisi' }, stringLength: { min: 16, max: 16, message: 'Nomor KK harus 16 digit' } } },
|
||||
desa_kelurahan_id: { validators: { notEmpty: { message: 'Desa/Kelurahan wajib dipilih' } } },
|
||||
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 (res) {
|
||||
Swal.fire({ icon: 'success', title: 'Berhasil!', text: res.message, timer: 1500, showConfirmButton: false })
|
||||
.then(() => window.location.href = "{{ route('keluarga.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,252 @@
|
||||
@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 Data Keluarga</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<form id="editKeluargaForm" action="{{ route('keluarga.update', $keluarga->id) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<input type="hidden" name="_method" value="PUT">
|
||||
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-id me-1"></i> Informasi Kartu Keluarga</h6>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4 form-control-validation">
|
||||
<label class="form-label">No. Kartu Keluarga (KK)<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" name="kk" value="{{ $keluarga->kk }}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Wilayah & Adat</h6>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<label class="form-label">Provinsi</label>
|
||||
<select id="provinsi" class="select2 form-select" data-placeholder="Pilih Provinsi">
|
||||
<option value="">Pilih Provinsi</option>
|
||||
@php
|
||||
$provId = $keluarga->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">Kabupaten/Kota</label>
|
||||
<select id="kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota">
|
||||
@if($keluarga->desakelurahan)
|
||||
<option value="{{ $keluarga->desakelurahan->kecamatan->kabupaten_kota_id }}" selected>
|
||||
{{ $keluarga->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">Kecamatan</label>
|
||||
<select id="kecamatan" class="select2 form-select" data-placeholder="Pilih Kecamatan">
|
||||
@if($keluarga->desakelurahan)
|
||||
<option value="{{ $keluarga->desakelurahan->kecamatan_id }}" selected>
|
||||
{{ $keluarga->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">Desa/Kelurahan<span class="text-danger">*</span></label>
|
||||
<select id="desa" name="desa_kelurahan_id" class="select2 form-select" data-placeholder="Pilih Desa/Kelurahan">
|
||||
@if($keluarga->desakelurahan)
|
||||
<option value="{{ $keluarga->desa_kelurahan_id }}" selected>
|
||||
{{ $keluarga->desakelurahan->nama }}
|
||||
</option>
|
||||
@else
|
||||
<option value="">Pilih Desa/Kelurahan</option>
|
||||
@endif
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4 form-control-validation">
|
||||
<label class="form-label">Pilih Adat</label>
|
||||
<select id="adat" name="adat_id" class="select2 form-select" data-placeholder="Pilih Adat">
|
||||
@if($keluarga->adat)
|
||||
<option value="{{ $keluarga->adat_id }}" selected>
|
||||
{{ $keluarga->adat->nama }}
|
||||
</option>
|
||||
@else
|
||||
<option value="">Pilih Adat</option>
|
||||
@endif
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-upload me-1"></i> Dokumen</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">Ganti File KK</label>
|
||||
<input type="file" class="form-control" id="file_kk" name="file_kk" accept="image/*,.pdf" />
|
||||
|
||||
@php
|
||||
$hasKk = !empty($keluarga->path_kk);
|
||||
$isKkPdf = $hasKk && strtolower(pathinfo($keluarga->path_kk, PATHINFO_EXTENSION)) === 'pdf';
|
||||
@endphp
|
||||
|
||||
<div id="preview-container" class="mt-3 {{ $hasKk ? '' : 'd-none' }}">
|
||||
<img id="preview-image" src="{{ $hasKk && !$isKkPdf ? asset('storage/' . $keluarga->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" 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('keluarga.index') }}" class="btn btn-label-secondary me-2">Batal</a>
|
||||
<button type="submit" class="btn btn-primary data-submit">Simpan Perubahan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
'use strict';
|
||||
$(document).ready(function () {
|
||||
$('.select2').select2();
|
||||
|
||||
$('#file_kk').on('change', function(event) {
|
||||
const file = event.target.files[0];
|
||||
const $container = $('#preview-container');
|
||||
const $image = $('#preview-image');
|
||||
const $pdf = $('#preview-pdf');
|
||||
|
||||
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)');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#provinsi').on('change', function () {
|
||||
let id = $(this).val();
|
||||
$('#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');
|
||||
$('#adat').empty().append('<option value="">Pilih Adat</option>').trigger('change');
|
||||
if (id) {
|
||||
$.get(`/kabupatenkotabyprovinsi/${id}`, function (res) {
|
||||
let dataList = Array.isArray(res) ? res : (res.data || []);
|
||||
$.each(dataList, function (key, val) { $('#kabupaten').append(`<option value="${val.id}">${val.nama}</option>`); });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#kabupaten').on('change', function () {
|
||||
let id = $(this).val();
|
||||
$('#kecamatan').empty().append('<option value="">Pilih Kecamatan</option>').trigger('change');
|
||||
$('#desa').empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');
|
||||
$('#adat').empty().append('<option value="">Pilih Adat</option>').trigger('change');
|
||||
if (id) {
|
||||
$.get(`/kecamatanbykabupatenkota/${id}`, function (res) {
|
||||
let dataList = Array.isArray(res) ? res : (res.data || []);
|
||||
$.each(dataList, function (key, val) { $('#kecamatan').append(`<option value="${val.id}">${val.nama}</option>`); });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#kecamatan').on('change', function () {
|
||||
let id = $(this).val();
|
||||
$('#desa').empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');
|
||||
$('#adat').empty().append('<option value="">Pilih Adat</option>').trigger('change');
|
||||
if (id) {
|
||||
$.get(`/desakelurahanbykecamatan/${id}`, function (res) {
|
||||
let dataList = Array.isArray(res) ? res : (res.data || []);
|
||||
$.each(dataList, function (key, val) { $('#desa').append(`<option value="${val.id}">${val.nama}</option>`); });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#desa').on('change', function () {
|
||||
let id = $(this).val();
|
||||
$('#adat').empty().append('<option value="">Pilih Adat</option>').trigger('change');
|
||||
if (id) {
|
||||
$.get(`/adatbydesa/${id}`, function (res) {
|
||||
let dataList = Array.isArray(res) ? res : (res.data || []);
|
||||
$.each(dataList, function (key, val) { $('#adat').append(`<option value="${val.id}">${val.nama}</option>`); });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const editForm = document.getElementById('editKeluargaForm');
|
||||
let fvEdit = FormValidation.formValidation(editForm, {
|
||||
fields: {
|
||||
kk: { validators: { notEmpty: { message: 'Nomor KK wajib diisi' }, stringLength: { min: 16, max: 16, message: 'Nomor KK harus 16 digit' } } },
|
||||
desa_kelurahan_id: { validators: { notEmpty: { message: 'Desa/Kelurahan wajib dipilih' } } },
|
||||
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 (res) {
|
||||
Swal.fire({ icon: 'success', title: 'Berhasil!', text: res.message, timer: 1500, showConfirmButton: false })
|
||||
.then(() => window.location.href = "{{ route('keluarga.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,117 @@
|
||||
@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 Master Keluarga</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-bottom pt-4">
|
||||
<form method="GET" action="{{ route('keluarga.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 No. KK..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||
</div>
|
||||
<a href="{{ route('keluarga.create') }}" class="btn btn-sm btn-primary">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah Data
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>No. KK</th>
|
||||
<th>Desa/Kelurahan</th>
|
||||
<th>Adat</th>
|
||||
<th>File KK</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($keluarga as $index => $item)
|
||||
<tr>
|
||||
<td>{{ $keluarga->firstItem() + $index }}</td>
|
||||
<td><span class="text-heading fw-medium">{{ $item->kk }}</span></td>
|
||||
<td>{{ $item->desakelurahan->nama ?? '-' }}</td>
|
||||
<td>{{ $item->adat->nama ?? '-' }}</td>
|
||||
<td>
|
||||
@if($item->path_kk)
|
||||
<span class="badge bg-label-success"><i class="ti tabler-check"></i> Ada</span>
|
||||
@else
|
||||
<span class="badge bg-label-danger"><i class="ti tabler-x"></i> Tidak Ada</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="{{ route('keluarga.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->kk }}"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="{{ route('keluarga.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">
|
||||
{{ $keluarga->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 (e) {
|
||||
e.preventDefault();
|
||||
const id = $(e.currentTarget).data('id');
|
||||
const name = $(e.currentTarget).data('nama');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus Data?',
|
||||
text: `Data KK "${name}" akan dihapus 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: `/keluarga/${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,92 @@
|
||||
@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 Data Keluarga</h5>
|
||||
<a href="{{ route('keluarga.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;">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-id me-1"></i> Informasi KK</h6>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">No. Kartu Keluarga</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $keluarga->kk }}" readonly />
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Lokasi Wilayah & Adat</h6>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Provinsi</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $keluarga->desakelurahan->kecamatan->kabupatenkota->provinsi->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Kabupaten/Kota</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $keluarga->desakelurahan->kecamatan->kabupatenkota->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Kecamatan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $keluarga->desakelurahan->kecamatan->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Desa/Kelurahan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $keluarga->desakelurahan->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Data Adat</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $keluarga->adat->nama ?? 'Tidak terikat adat' }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 mb-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-upload me-1"></i> Dokumen Fisik</h6>
|
||||
|
||||
@if($keluarga->path_kk)
|
||||
@php
|
||||
$isPdf = strtolower(pathinfo($keluarga->path_kk, PATHINFO_EXTENSION)) === 'pdf';
|
||||
@endphp
|
||||
|
||||
@if($isPdf)
|
||||
<div class="p-5 border rounded text-center bg-lighter">
|
||||
<i class="ti tabler-file-type-pdf text-danger mb-3" style="font-size: 4rem;"></i>
|
||||
<p class="mb-3 text-muted fw-medium">{{ $keluarga->file_kk }}</p>
|
||||
<a href="{{ asset('storage/' . $keluarga->path_kk) }}" target="_blank" class="btn btn-primary">
|
||||
<i class="ti tabler-external-link me-1"></i> Buka PDF
|
||||
</a>
|
||||
</div>
|
||||
@else
|
||||
<div class="border rounded p-2 text-center bg-lighter">
|
||||
<a href="{{ asset('storage/' . $keluarga->path_kk) }}" target="_blank" title="Klik untuk memperbesar">
|
||||
<img src="{{ asset('storage/' . $keluarga->path_kk) }}" alt="File KK" class="img-fluid rounded" style="max-height: 400px; object-fit: contain;">
|
||||
</a>
|
||||
</div>
|
||||
<small class="text-muted mt-2 d-block text-center fst-italic">*Klik gambar untuk melihat resolusi penuh</small>
|
||||
@endif
|
||||
@else
|
||||
<div class="p-5 border rounded text-center bg-lighter">
|
||||
<i class="ti tabler-photo-off text-muted mb-3" style="font-size: 4rem;"></i>
|
||||
<p class="mb-0 text-muted fst-italic">Belum ada dokumen KK yang diunggah.</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,19 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasAddKomoditas" aria-labelledby="offcanvasAddKomoditasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasAddKomoditasLabel" class="offcanvas-title">Tambah Komoditas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form class="add-new-record pt-0" id="addKomoditasForm" action="{{ route('komoditas.store') }}" method="POST">
|
||||
@csrf
|
||||
<div class="mb-4 form-control-validation">
|
||||
<label class="form-label" for="add-nama">Nama Komoditas<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="add-nama" name="nama" placeholder="Cth: Padi Sabrang" />
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Simpan</button>
|
||||
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Batal</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasEditKomoditas" aria-labelledby="offcanvasEditKomoditasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasEditKomoditasLabel" class="offcanvas-title">Edit Komoditas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="editKomoditasForm" class="pt-0" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="_method" value="PUT">
|
||||
<input type="hidden" id="edit-id" name="id">
|
||||
|
||||
<div class="mb-4 form-control-validation">
|
||||
<label class="form-label" for="edit-nama">Nama Komoditas<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="edit-nama" name="nama" />
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Update</button>
|
||||
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Batal</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,238 @@
|
||||
@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 Master Komoditas</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-bottom pt-4">
|
||||
<form method="GET" action="{{ route('komoditas.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>
|
||||
<option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</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 Komoditas..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddKomoditas">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Nama Komoditas</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($komoditas as $index => $item)
|
||||
<tr>
|
||||
<td>{{ $komoditas->firstItem() + $index }}</td>
|
||||
<td><span class="text-heading fw-medium">{{ $item->nama }}</span></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill edit-record" data-id="{{ $item->id }}"><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="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill view-record" data-id="{{ $item->id }}"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="3" class="text-center py-4">Tidak ada data komoditas ditemukan.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card-footer d-flex justify-content-center justify-content-md-end border-top">
|
||||
{{ $komoditas->appends(request()->query())->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('master.komoditas.add')
|
||||
@include('master.komoditas.edit')
|
||||
@include('master.komoditas.view')
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
'use strict';
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
const addForm = document.getElementById('addKomoditasForm');
|
||||
const offcanvasAdd = new bootstrap.Offcanvas(document.getElementById('offcanvasAddKomoditas'));
|
||||
|
||||
let fvAdd = FormValidation.formValidation(addForm, {
|
||||
fields: { nama: { validators: { notEmpty: { message: 'Nama komoditas wajib diisi' } } } },
|
||||
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) {
|
||||
offcanvasAdd.hide();
|
||||
addForm.reset();
|
||||
fvAdd.resetForm();
|
||||
Swal.fire({ icon: 'success', title: 'Berhasil!', text: res.message, timer: 1500, showConfirmButton: false })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
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 sistem' });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const offcanvasEdit = new bootstrap.Offcanvas(document.getElementById('offcanvasEditKomoditas'));
|
||||
$(document).on('click', '.edit-record', function (e) {
|
||||
e.preventDefault();
|
||||
const id = $(e.currentTarget).data('id');
|
||||
const $btn = $(e.currentTarget).addClass('disabled');
|
||||
|
||||
let url = "{{ route('komoditas.show', ':id') }}".replace(':id', id);
|
||||
|
||||
$.get(url, function (res) {
|
||||
$btn.removeClass('disabled');
|
||||
if (res.status === 'success') {
|
||||
$('#edit-id').val(res.data.id);
|
||||
$('#edit-nama').val(res.data.nama);
|
||||
if (typeof fvEdit !== 'undefined') fvEdit.resetForm();
|
||||
offcanvasEdit.show();
|
||||
}
|
||||
}).fail((xhr) => {
|
||||
$btn.removeClass('disabled');
|
||||
console.log(xhr.responseText);
|
||||
Swal.fire('Gagal!', 'Gagal mengambil data edit. Cek console.', 'error');
|
||||
});
|
||||
});
|
||||
|
||||
const offcanvasView = new bootstrap.Offcanvas(document.getElementById('offcanvasViewKomoditas'));
|
||||
$(document).on('click', '.view-record', function (e) {
|
||||
e.preventDefault();
|
||||
const id = $(e.currentTarget).data('id');
|
||||
const $btn = $(e.currentTarget).addClass('disabled');
|
||||
|
||||
let url = "{{ route('komoditas.show', ':id') }}".replace(':id', id);
|
||||
|
||||
$.get(url, function (res) {
|
||||
$btn.removeClass('disabled');
|
||||
if (res.status === 'success') {
|
||||
$('#view-nama').val(res.data.nama);
|
||||
offcanvasView.show();
|
||||
}
|
||||
}).fail((xhr) => {
|
||||
$btn.removeClass('disabled');
|
||||
console.log(xhr.responseText);
|
||||
Swal.fire('Gagal!', 'Gagal mengambil data view. Cek console.', 'error');
|
||||
});
|
||||
});
|
||||
|
||||
const editForm = document.getElementById('editKomoditasForm');
|
||||
let fvEdit = FormValidation.formValidation(editForm, {
|
||||
fields: { nama: { validators: { notEmpty: { message: 'Nama komoditas wajib diisi' } } } },
|
||||
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 () {
|
||||
const id = $('#edit-id').val();
|
||||
let formData = $(editForm).serialize();
|
||||
|
||||
let url = "{{ route('komoditas.update', ':id') }}".replace(':id', id);
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
success: function (res) {
|
||||
offcanvasEdit.hide();
|
||||
Swal.fire({ icon: 'success', title: 'Updated!', text: res.message, showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
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 || 'Terjadi kesalahan' });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.delete-record', function (e) {
|
||||
e.preventDefault();
|
||||
const id = $(e.currentTarget).data('id');
|
||||
const name = $(e.currentTarget).data('nama');
|
||||
|
||||
let url = "{{ route('komoditas.destroy', ':id') }}".replace(':id', id);
|
||||
|
||||
Swal.fire({
|
||||
title: 'Apakah Anda yakin?',
|
||||
text: `Komoditas "${name}" akan dihapus.`,
|
||||
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: url,
|
||||
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,17 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasViewKomoditas" aria-labelledby="offcanvasViewKomoditasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasViewKomoditasLabel" class="offcanvas-title">Detail Komoditas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form class="pt-0" id="viewKomoditasForm" onsubmit="return false;">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="view-nama">Nama Komoditas</label>
|
||||
<input type="text" class="form-control bg-lighter" id="view-nama" readonly />
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Tutup</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,118 @@
|
||||
@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 Lahan</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-bottom pt-4">
|
||||
<form method="GET" action="{{ route('lahan.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 Lahan / Pemilik..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||
</div>
|
||||
<!-- <a href="{{ route('lahan.create') }}" class="btn btn-sm btn-primary">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah Lahan
|
||||
</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 Lahan</th>
|
||||
<th>Pemilik</th>
|
||||
<th>Status</th>
|
||||
<th>Luas (Ha/m2)</th>
|
||||
<th>GeoJSON</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($lahan as $index => $item)
|
||||
<tr>
|
||||
<td>{{ $lahan->firstItem() + $index }}</td>
|
||||
<td><span class="text-heading fw-medium">{{ $item->nama }}</span></td>
|
||||
<td>{{ $item->profile->nama ?? '-' }}</td>
|
||||
<td><span class="badge bg-label-info">{{ $item->status_kepemilikan }}</span></td>
|
||||
<td>{{ $item->luas_lahan ?? '-' }}</td>
|
||||
<td>
|
||||
@if($item->path)
|
||||
<i class="ti tabler-check text-success"></i> Ada
|
||||
@else
|
||||
<i class="ti tabler-x text-danger"></i> Tidak Ada
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<!-- <a href="{{ route('lahan.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('lahan.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 lahan ditemukan.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-center justify-content-md-end border-top">
|
||||
{{ $lahan->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: 'Hapus Lahan?',
|
||||
text: `Lahan "${name}" beserta file mapping-nya akan dihapus 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: `/lahan/${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,212 @@
|
||||
@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 Lahan</h5>
|
||||
<a href="{{ route('lahan.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;">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-info-circle me-1"></i> Info Lahan</h6>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Nama Lahan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->nama }}" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Pemilik (Profile)</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->profile->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Status Kepemilikan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->status_kepemilikan }}" readonly />
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Luas Lahan (Ha/m2)</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->luas_lahan ?? '-' }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Lokasi Wilayah</h6>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Provinsi</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->desakelurahan->kecamatan->kabupatenkota->provinsi->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Kabupaten/Kota</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->desakelurahan->kecamatan->kabupatenkota->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Kecamatan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->desakelurahan->kecamatan->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Desa/Kelurahan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->desakelurahan->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($lahan->status_kepemilikan === 'Tanah Adat')
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-warning">Data Adat Pemilik</label>
|
||||
<input type="text" class="form-control bg-lighter border-warning" value="{{ $lahan->adat_pemilik_id ?? 'Tidak ada data adat' }}" readonly />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="text-primary mb-0"><i class="ti tabler-map me-1"></i> Visualisasi Peta Lahan</h6>
|
||||
|
||||
<div class="form-check form-switch mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="toggleTanaman">
|
||||
<label class="form-check-label text-nowrap fw-bold text-success" for="toggleTanaman"><i class="ti tabler-seeding me-1"></i>Tampilkan Tanaman</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="border rounded" style="height: 400px; width: 100%; background-color: #f8f9fa; z-index: 1;">
|
||||
<div id="map-fallback" class="d-flex align-items-center justify-content-center h-100 text-muted d-none">
|
||||
Memuat Peta...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="form-label">Raw Data Koordinat (JSON)</label>
|
||||
<textarea class="form-control bg-lighter font-monospace" rows="3" readonly>{{ $lahan->path ?? 'Tidak ada data koordinat' }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</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 rawData = {!! $lahan->path ? $lahan->path : '[]' !!};
|
||||
let dataTanaman = {!! json_encode($lahan->tanaman ?? []) !!};
|
||||
|
||||
let mapContainer = document.getElementById('map');
|
||||
let fallbackMsg = document.getElementById('map-fallback');
|
||||
|
||||
const colorPalette = [
|
||||
'#FF33A8', '#3357FF', '#F3FF33', '#FF5733', '#33FFF5',
|
||||
'#8A33FF', '#FF8F33', '#33FF8A', '#FF3333', '#33A8FF'
|
||||
];
|
||||
|
||||
if (Array.isArray(rawData) && rawData.length > 0) {
|
||||
|
||||
let map = L.map('map').setView([rawData[0][1], rawData[0][0]], 16);
|
||||
|
||||
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);
|
||||
|
||||
let latLngs = rawData.map(function(coord) {
|
||||
return [coord[1], coord[0]];
|
||||
});
|
||||
|
||||
let polygon = L.polygon(latLngs, {
|
||||
color: '#28c76f',
|
||||
fillColor: '#28c76f',
|
||||
fillOpacity: 0.3,
|
||||
weight: 2
|
||||
}).addTo(map);
|
||||
|
||||
polygon.bindPopup("<b>{{ $lahan->nama }}</b><br>Luas: {{ $lahan->luas_lahan ?? '-' }} Ha");
|
||||
map.fitBounds(polygon.getBounds(), { padding: [20, 20] });
|
||||
|
||||
let tanamanLayerGroup = L.layerGroup();
|
||||
|
||||
dataTanaman.forEach(function(tanaman) {
|
||||
if(tanaman.latitude && tanaman.longitude) {
|
||||
let komoditasId = tanaman.komoditas_id || 1;
|
||||
let markerColor = colorPalette[komoditasId % colorPalette.length];
|
||||
let komoditasNama = tanaman.komoditas ? tanaman.komoditas.nama : 'Unknown';
|
||||
|
||||
let badgeClass = 'bg-label-success';
|
||||
if (tanaman.kondisi_tanaman === 'sakit') badgeClass = 'bg-label-warning';
|
||||
if (tanaman.kondisi_tanaman === 'mati') badgeClass = 'bg-label-danger';
|
||||
|
||||
let customIcon = L.divIcon({
|
||||
className: 'custom-div-icon',
|
||||
html: `<div class="plant-marker" style="background-color:${markerColor}; width:16px; height:16px;"></div>`,
|
||||
iconSize: [16, 16],
|
||||
iconAnchor: [8, 8]
|
||||
});
|
||||
|
||||
let popupContent = `
|
||||
<div class="text-center" style="min-width: 120px;">
|
||||
<h6 class="mb-1 fw-bold">${tanaman.nama}</h6>
|
||||
<small class="text-muted d-block mb-1">${komoditasNama}</small>
|
||||
<hr class="my-1">
|
||||
<span class="badge ${badgeClass} w-100">Kondisi: ${tanaman.kondisi_tanaman.charAt(0).toUpperCase() + tanaman.kondisi_tanaman.slice(1)}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
L.marker([tanaman.latitude, tanaman.longitude], { icon: customIcon })
|
||||
.bindPopup(popupContent)
|
||||
.addTo(tanamanLayerGroup);
|
||||
}
|
||||
});
|
||||
|
||||
let toggleBtn = document.getElementById('toggleTanaman');
|
||||
toggleBtn.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
map.addLayer(tanamanLayerGroup);
|
||||
} else {
|
||||
map.removeLayer(tanamanLayerGroup);
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
fallbackMsg.classList.remove('d-none');
|
||||
fallbackMsg.innerHTML = '<div class="text-center"><i class="ti tabler-map-off mb-2" style="font-size: 2rem;"></i><br>Tidak ada data koordinat polygon untuk lahan ini.</div>';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,221 @@
|
||||
@extends('layout.main')
|
||||
|
||||
@push('style')
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
|
||||
<style>
|
||||
.plant-marker {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
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 Lahan</h5>
|
||||
<a href="{{ route('lahan.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;">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-info-circle me-1"></i> Info Lahan</h6>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Nama Lahan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->nama }}" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Pemilik (Profile)</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->profile->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Status Kepemilikan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->status_kepemilikan }}" readonly />
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Luas Lahan (Ha/m2)</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->luas_lahan ?? '-' }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Lokasi Wilayah</h6>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Provinsi</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->desakelurahan->kecamatan->kabupatenkota->provinsi->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Kabupaten/Kota</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->desakelurahan->kecamatan->kabupatenkota->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Kecamatan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->desakelurahan->kecamatan->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Desa/Kelurahan</label>
|
||||
<input type="text" class="form-control bg-lighter" value="{{ $lahan->desakelurahan->nama ?? '-' }}" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($lahan->status_kepemilikan === 'Tanah Adat')
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-warning">Data Adat Pemilik</label>
|
||||
<input type="text" class="form-control bg-lighter border-warning" value="{{ $lahan->adat_pemilik_id ?? 'Tidak ada data adat' }}" readonly />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="text-primary mb-0"><i class="ti tabler-map me-1"></i> Visualisasi Peta Lahan</h6>
|
||||
|
||||
<div class="form-check form-switch mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="toggleTanaman">
|
||||
<label class="form-check-label text-nowrap fw-bold text-success" for="toggleTanaman"><i class="ti tabler-seeding me-1"></i>Tampilkan Tanaman</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="border rounded" style="height: 400px; width: 100%; background-color: #f8f9fa; z-index: 1;">
|
||||
<div id="map-fallback" class="d-flex align-items-center justify-content-center h-100 text-muted d-none">
|
||||
Memuat Peta...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="form-label">Raw Data Koordinat (JSON)</label>
|
||||
<textarea class="form-control bg-lighter font-monospace" rows="3" readonly>{{ $lahan->path ?? 'Tidak ada data koordinat' }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</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 rawData = {!! $lahan->path ? $lahan->path : '[]' !!};
|
||||
let dataTanaman = {!! json_encode($lahan->tanaman ?? []) !!};
|
||||
|
||||
let mapContainer = document.getElementById('map');
|
||||
let fallbackMsg = document.getElementById('map-fallback');
|
||||
|
||||
const colorPalette = [
|
||||
'#FF33A8', '#3357FF', '#F3FF33', '#FF5733', '#33FFF5',
|
||||
'#8A33FF', '#FF8F33', '#33FF8A', '#FF3333', '#33A8FF'
|
||||
];
|
||||
|
||||
if (Array.isArray(rawData) && rawData.length > 0) {
|
||||
|
||||
let map = L.map('map').setView([rawData[0][1], rawData[0][0]], 16);
|
||||
|
||||
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);
|
||||
|
||||
let latLngs = rawData.map(function(coord) {
|
||||
return [coord[1], coord[0]];
|
||||
});
|
||||
|
||||
let polygon = L.polygon(latLngs, {
|
||||
color: '#28c76f',
|
||||
fillColor: '#28c76f',
|
||||
fillOpacity: 0.3,
|
||||
weight: 2
|
||||
}).addTo(map);
|
||||
|
||||
polygon.bindPopup("<b>{{ $lahan->nama }}</b><br>Luas: {{ $lahan->luas_lahan ?? '-' }} Ha");
|
||||
map.fitBounds(polygon.getBounds(), { padding: [20, 20] });
|
||||
|
||||
let tanamanLayerGroup = L.layerGroup();
|
||||
|
||||
dataTanaman.forEach(function(tanaman) {
|
||||
if(tanaman.latitude && tanaman.longitude) {
|
||||
let komoditasId = tanaman.komoditas_id || 1;
|
||||
|
||||
let markerColor = colorPalette[komoditasId % colorPalette.length];
|
||||
let komoditasNama = tanaman.komoditas ? tanaman.komoditas.nama : 'Unknown';
|
||||
|
||||
let badgeClass = 'bg-label-success';
|
||||
let borderColor = '#28c76f';
|
||||
|
||||
if (tanaman.kondisi_tanaman === 'sakit') {
|
||||
badgeClass = 'bg-label-warning';
|
||||
borderColor = '#ea5455';
|
||||
} else if (tanaman.kondisi_tanaman === 'mati') {
|
||||
badgeClass = 'bg-label-danger';
|
||||
borderColor = '#2f2f2f';
|
||||
}
|
||||
|
||||
let customIcon = L.divIcon({
|
||||
className: 'custom-div-icon',
|
||||
html: `<div class="plant-marker" style="background-color:${markerColor}; border-color:${borderColor}; width:16px; height:16px;"></div>`,
|
||||
iconSize: [16, 16],
|
||||
iconAnchor: [8, 8]
|
||||
});
|
||||
|
||||
let popupContent = `
|
||||
<div class="text-center" style="min-width: 120px;">
|
||||
<h6 class="mb-1 fw-bold">${tanaman.nama}</h6>
|
||||
<small class="text-muted d-block mb-1">${komoditasNama}</small>
|
||||
<hr class="my-1">
|
||||
<span class="badge ${badgeClass} w-100">Kondisi: ${tanaman.kondisi_tanaman.charAt(0).toUpperCase() + tanaman.kondisi_tanaman.slice(1)}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
L.marker([tanaman.latitude, tanaman.longitude], { icon: customIcon })
|
||||
.bindPopup(popupContent)
|
||||
.addTo(tanamanLayerGroup);
|
||||
}
|
||||
});
|
||||
|
||||
let toggleBtn = document.getElementById('toggleTanaman');
|
||||
toggleBtn.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
map.addLayer(tanamanLayerGroup);
|
||||
} else {
|
||||
map.removeLayer(tanamanLayerGroup);
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
fallbackMsg.classList.remove('d-none');
|
||||
fallbackMsg.innerHTML = '<div class="text-center"><i class="ti tabler-map-off mb-2" style="font-size: 2rem;"></i><br>Tidak ada data koordinat polygon untuk lahan ini.</div>';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -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,66 @@
|
||||
<div
|
||||
class="offcanvas offcanvas-end"
|
||||
tabindex="-1"
|
||||
id="offcanvasAddProvinsi"
|
||||
aria-labelledby="offcanvasAddProvinsiLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasAddProvinsiLabel" class="offcanvas-title">Add Provinsi</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close text-reset"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form class="add-new-provinsi pt-0" id="addNewProvinsiForm" action="{{ route('provinsi.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-provinsi-code">Kode Provinsi<span class="text-danger">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="add-provinsi-code"
|
||||
placeholder="11"
|
||||
name="kode"
|
||||
maxlength="2"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-provinsi-name">Provinsi Name<span class="text-danger">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="add-provinsi-name"
|
||||
placeholder="Aceh"
|
||||
name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-provinsi-path">Path</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="add-provinsi-path"
|
||||
placeholder="[1.9862099699142046,97.38631487313297]"
|
||||
name="path"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-provinsi-iso">ISO<span class="text-danger">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="add-provinsi-iso"
|
||||
class="form-control"
|
||||
placeholder="ID-AC"
|
||||
name="iso" />
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEditProvinsi" aria-labelledby="offcanvasEditProvinsiLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasEditProvinsiLabel" class="offcanvas-title">Edit Provinsi</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="editProvinsiForm" class="pt-0">
|
||||
@csrf
|
||||
<input type="hidden" id="edit-provinsi-id" name="id">
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-provinsi-code">Kode Provinsi<span class="text-danger">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="edit-provinsi-code"
|
||||
name="kode"
|
||||
maxlength="2"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-provinsi-name">Nama Provinsi<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="edit-provinsi-name" name="nama" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-provinsi-path">Path</label>
|
||||
<textarea class="form-control" id="edit-provinsi-path" name="path" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-provinsi-iso">ISO<span class="text-danger">*</span></label>
|
||||
<input type="text" id="edit-provinsi-iso" class="form-control" name="iso" />
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary me-3">Update Data</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,32 +1,237 @@
|
||||
@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">Filters</h5>
|
||||
<div class="d-flex justify-content-between align-items-center row pt-4 gap-4 gap-md-0">
|
||||
<div class="col-md-4 user_role"></div>
|
||||
<div class="col-md-4 user_plan"></div>
|
||||
<div class="col-md-4 user_status"></div>
|
||||
<div class="card-body border-bottom">
|
||||
<form method="GET" action="{{ route('provinsi.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>
|
||||
<option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</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="Search Provinsi..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-primary add-new" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddProvinsi">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Kode Provinsi</th>
|
||||
<th>Nama Provinsi</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($provinsi as $index => $prov)
|
||||
<tr>
|
||||
<td>{{ $provinsi->firstItem() + $index }}</td>
|
||||
<td><span class="text-heading">{{ $prov->kode }}</span></td>
|
||||
<td>
|
||||
@php
|
||||
$words = explode(' ', $prov->nama);
|
||||
$initials = substr(implode('', array_map(fn($w) => strtoupper($w[0]), $words)), 0, 2);
|
||||
$states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
$state = $states[array_rand($states)];
|
||||
@endphp
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar-wrapper me-3">
|
||||
<div class="avatar avatar-sm">
|
||||
<span class="avatar-initial rounded-circle bg-label-{{ $state }}">{{ $initials }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading">{{ $prov->nama }}</span>
|
||||
<small class="text-muted">{{ $prov->iso ?? '' }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill edit-record" data-id="{{ $prov->id }}"><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="{{ $prov->id }}" data-nama="{{ $prov->nama }}"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill view-record" data-id="{{ $prov->id }}"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" 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">
|
||||
{{ $provinsi->appends(request()->query())->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-datatable">
|
||||
<table class="datatables-users table">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th></th> <th>ID</th>
|
||||
<th>Kode Provinsi</th>
|
||||
<th>Nama Provinsi</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
@include('users.user.add')
|
||||
@include('master.provinsi.add')
|
||||
@include('master.provinsi.view')
|
||||
@include('master.provinsi.edit')
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>var provinsiListUrl = "{{ route('provinsi.list') }}";</script>
|
||||
<script src="{{ asset('assets/js/master-provinsi.js') }}"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
$.validator.setDefaults({
|
||||
errorElement: 'div',
|
||||
errorPlacement: function (error, element) {
|
||||
error.addClass('invalid-feedback');
|
||||
element.closest('.mb-6, .form-control-validation').append(error);
|
||||
},
|
||||
highlight: function (element) {
|
||||
$(element).addClass('is-invalid');
|
||||
},
|
||||
unhighlight: function (element) {
|
||||
$(element).removeClass('is-invalid');
|
||||
}
|
||||
});
|
||||
|
||||
const offcanvasAdd = new bootstrap.Offcanvas(document.getElementById('offcanvasAddProvinsi'));
|
||||
$('#addNewProvinsiForm').validate({
|
||||
rules: {
|
||||
kode: { required: true, minlength: 2, maxlength: 2 },
|
||||
nama: { required: true },
|
||||
iso: { required: true }
|
||||
},
|
||||
messages: {
|
||||
kode: { required: "Kode wajib diisi", minlength: "Harus 2 digit", maxlength: "Maksimal 2 digit" },
|
||||
nama: { required: "Nama provinsi wajib diisi" },
|
||||
iso: { required: "ISO wajib diisi" }
|
||||
},
|
||||
submitHandler: function (form) {
|
||||
$.ajax({
|
||||
url: $(form).attr('action'),
|
||||
type: 'POST',
|
||||
data: $(form).serialize(),
|
||||
success: function () {
|
||||
offcanvasAdd.hide();
|
||||
form.reset();
|
||||
Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
error: function (xhr) {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const offcanvasView = new bootstrap.Offcanvas(document.getElementById('offcanvasViewProvinsi'));
|
||||
const offcanvasEdit = new bootstrap.Offcanvas(document.getElementById('offcanvasEditProvinsi'));
|
||||
|
||||
$(document).on('click', '.view-record', function () {
|
||||
const id = $(this).data('id');
|
||||
$.get(`/provinsi/${id}`, function (res) {
|
||||
if (res.status === 'success') {
|
||||
$('#view-provinsi-code').val(res.data.kode);
|
||||
$('#view-provinsi-name').val(res.data.nama);
|
||||
$('#view-provinsi-path').val(res.data.path);
|
||||
$('#view-provinsi-iso').val(res.data.iso);
|
||||
offcanvasView.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.edit-record', function () {
|
||||
const id = $(this).data('id');
|
||||
|
||||
const editForm = $('#editProvinsiForm');
|
||||
editForm.validate().resetForm();
|
||||
editForm.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
$.get(`/provinsi/${id}`, function (res) {
|
||||
if (res.status === 'success') {
|
||||
$('#edit-provinsi-id').val(res.data.id);
|
||||
$('#edit-provinsi-code').val(res.data.kode);
|
||||
$('#edit-provinsi-name').val(res.data.nama);
|
||||
$('#edit-provinsi-path').val(res.data.path);
|
||||
$('#edit-provinsi-iso').val(res.data.iso);
|
||||
offcanvasEdit.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#editProvinsiForm').validate({
|
||||
rules: {
|
||||
kode: { required: true, minlength: 2, maxlength: 2 },
|
||||
nama: { required: true },
|
||||
iso: { required: true }
|
||||
},
|
||||
messages: {
|
||||
kode: { required: "Kode wajib diisi", minlength: "Harus 2 digit", maxlength: "Maksimal 2 digit" },
|
||||
nama: { required: "Nama provinsi wajib diisi" },
|
||||
iso: { required: "ISO wajib diisi" }
|
||||
},
|
||||
submitHandler: function (form) {
|
||||
const id = $('#edit-provinsi-id').val();
|
||||
$.ajax({
|
||||
url: `/provinsi/${id}`,
|
||||
type: 'PUT',
|
||||
data: $(form).serialize(),
|
||||
headers: { 'X-CSRF-TOKEN': csrfToken },
|
||||
success: function () {
|
||||
offcanvasEdit.hide();
|
||||
Swal.fire({ icon: 'success', title: 'Updated!', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
error: function(xhr) {
|
||||
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Gagal update data' });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.delete-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const name = $(this).data('nama');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus?',
|
||||
text: `Provinsi ${name} akan dihapus!`,
|
||||
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: `/provinsi/${id}`,
|
||||
type: 'DELETE',
|
||||
headers: { 'X-CSRF-TOKEN': csrfToken },
|
||||
success: function () {
|
||||
Swal.fire({ icon: 'success', title: 'Terhapus!', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,32 @@
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasViewProvinsi" aria-labelledby="offcanvasViewProvinsiLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasViewProvinsiLabel" class="offcanvas-title">Detail Provinsi</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="viewProvinsiForm" class="pt-0" onsubmit="return false;">
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-provinsi-code">Kode Provinsi</label>
|
||||
<input type="text" class="form-control" id="view-provinsi-code" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-provinsi-name">Nama Provinsi</label>
|
||||
<input type="text" class="form-control" id="view-provinsi-name" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-provinsi-path">Path</label>
|
||||
<textarea class="form-control" id="view-provinsi-path" rows="3" readonly></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-provinsi-iso">ISO</label>
|
||||
<input type="text" id="view-provinsi-iso" class="form-control" readonly />
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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
|
||||
@@ -0,0 +1,43 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasAddUserLabel" class="offcanvas-title">Tambah User</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form class="add-new-user pt-0" id="addNewUserForm" action="{{ route('users.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-user-name">Nama Lengkap<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="add-user-name" name="name" placeholder="John Doe" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-user-email">Email<span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="add-user-email" name="email" placeholder="john@example.com" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-user-role">Role<span class="text-danger">*</span></label>
|
||||
<select id="add-user-role" name="role" class="select2 form-select" data-placeholder="Pilih Role">
|
||||
<option value="">Pilih Role</option>
|
||||
<option value="super_admin">Super Admin</option>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="fasilitator">Fasilitator</option>
|
||||
<option value="petani">Petani</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-user-password">Password<span class="text-danger">*</span></label>
|
||||
<input type="password" class="form-control" id="add-user-password" name="password" placeholder="············" />
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasEditUser" aria-labelledby="offcanvasEditUserLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasEditUserLabel" class="offcanvas-title">Edit User</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="editUserForm" class="pt-0">
|
||||
@csrf
|
||||
<input type="hidden" id="edit-user-id" name="id">
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-user-name">Nama Lengkap<span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="edit-user-name" name="name" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-user-email">Email<span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="edit-user-email" name="email" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-user-role">Role<span class="text-danger">*</span></label>
|
||||
<select id="edit-user-role" name="role" class="select2 form-select" data-placeholder="Pilih Role">
|
||||
<option value="">Pilih Role</option>
|
||||
<option value="">Pilih Role</option>
|
||||
<option value="super_admin">Super Admin</option>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="fasilitator">Fasilitator</option>
|
||||
<option value="petani">Petani</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="edit-user-password">Password</label>
|
||||
<input type="password" class="form-control" id="edit-user-password" name="password" placeholder="Kosongkan jika tidak ingin ganti password" />
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="submit" class="btn btn-primary me-3">Update Data</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,303 @@
|
||||
@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 Users</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-bottom pt-4">
|
||||
<form method="GET" action="{{ route('users.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>
|
||||
<option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</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>
|
||||
<button type="button" class="btn btn-sm btn-primary add-new" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddUser">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive text-nowrap">
|
||||
<table class="table table-hover">
|
||||
<thead class="border-top">
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>User</th>
|
||||
<th>Role</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($users as $index => $item)
|
||||
<tr>
|
||||
<td>{{ $users->firstItem() + $index }}</td>
|
||||
<td>
|
||||
@php
|
||||
$words = explode(' ', $item->name);
|
||||
$initials = substr(implode('', array_map(fn($w) => strtoupper($w[0] ?? ''), $words)), 0, 2);
|
||||
$states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
$state = $states[array_rand($states)];
|
||||
@endphp
|
||||
<div class="d-flex justify-content-start align-items-center">
|
||||
<div class="avatar-wrapper me-3">
|
||||
<div class="avatar avatar-sm">
|
||||
<span class="avatar-initial rounded-circle bg-label-{{ $state }}">{{ $initials }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="text-heading fw-medium">{{ $item->name }}</span>
|
||||
<small class="text-muted">{{ $item->email }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-label-primary">{{ $item->role }}</span></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill edit-record" data-id="{{ $item->id }}"><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->name }}"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill view-record" data-id="{{ $item->id }}"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" 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">
|
||||
{{ $users->appends(request()->query())->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('master.users.add')
|
||||
@include('master.users.view')
|
||||
@include('master.users.edit')
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
// Fix Bug Select2 Offcanvas
|
||||
$('.select2').each(function () {
|
||||
var $this = $(this);
|
||||
$this.select2({
|
||||
dropdownParent: $this.closest('.offcanvas')
|
||||
});
|
||||
});
|
||||
|
||||
// =======================================================
|
||||
// 1. ADD RECORD
|
||||
// =======================================================
|
||||
const addForm = document.getElementById('addNewUserForm');
|
||||
const offcanvasAdd = new bootstrap.Offcanvas(document.getElementById('offcanvasAddUser'));
|
||||
|
||||
let fvAdd;
|
||||
if (addForm) {
|
||||
fvAdd = FormValidation.formValidation(addForm, {
|
||||
fields: {
|
||||
name: { validators: { notEmpty: { message: 'Nama wajib diisi' } } },
|
||||
email: { validators: { notEmpty: { message: 'Email wajib diisi' }, emailAddress: { message: 'Email tidak valid' } } },
|
||||
role: { validators: { notEmpty: { message: 'Role wajib dipilih' } } },
|
||||
password: { validators: { notEmpty: { message: 'Password wajib diisi' }, stringLength: { min: 6, message: 'Minimal 6 karakter' } } }
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({ eleValidClass: '', rowSelector: '.form-control-validation' }),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
}).on('core.form.valid', function () {
|
||||
$(addForm).find('select').prop('disabled', false);
|
||||
|
||||
$.ajax({
|
||||
url: addForm.action,
|
||||
type: 'POST',
|
||||
data: $(addForm).serialize(),
|
||||
success: function () {
|
||||
offcanvasAdd.hide();
|
||||
addForm.reset();
|
||||
fvAdd.resetForm();
|
||||
$('.select2').val(null).trigger('change');
|
||||
Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'User berhasil ditambahkan', timer: 1500, showConfirmButton: false })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
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' });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// =======================================================
|
||||
// 2. EDIT RECORD
|
||||
// =======================================================
|
||||
const editForm = document.getElementById('editUserForm');
|
||||
const offcanvasEdit = new bootstrap.Offcanvas(document.getElementById('offcanvasEditUser'));
|
||||
|
||||
let fvEdit;
|
||||
if (editForm) {
|
||||
fvEdit = FormValidation.formValidation(editForm, {
|
||||
fields: {
|
||||
name: { validators: { notEmpty: { message: 'Nama wajib diisi' } } },
|
||||
email: { validators: { notEmpty: { message: 'Email wajib diisi' }, emailAddress: { message: 'Email tidak valid' } } },
|
||||
role: { validators: { notEmpty: { message: 'Role wajib dipilih' } } },
|
||||
// Password tidak diwajibkan saat edit
|
||||
password: { validators: { stringLength: { min: 6, message: 'Minimal 6 karakter' } } }
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({ eleValidClass: '', rowSelector: '.form-control-validation' }),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
}).on('core.form.valid', function () {
|
||||
const id = $('#edit-user-id').val();
|
||||
$(editForm).find('select').prop('disabled', false);
|
||||
|
||||
$.ajax({
|
||||
url: `/users/${id}`,
|
||||
type: 'PUT',
|
||||
data: $(editForm).serialize(),
|
||||
headers: { 'X-CSRF-TOKEN': csrfToken },
|
||||
success: function () {
|
||||
offcanvasEdit.hide();
|
||||
Swal.fire({ icon: 'success', title: 'Updated!', showConfirmButton: false, timer: 1500 })
|
||||
.then(() => window.location.reload());
|
||||
},
|
||||
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: 'Oops...', text: xhr.responseJSON?.message || 'Terjadi kesalahan.' });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Revalidate Select2
|
||||
$('.select2').on('change', function() {
|
||||
const name = $(this).attr('name');
|
||||
if (name) {
|
||||
if (fvAdd && addForm.querySelector(`[name="${name}"]`)) fvAdd.revalidateField(name);
|
||||
if (fvEdit && editForm.querySelector(`[name="${name}"]`)) fvEdit.revalidateField(name);
|
||||
}
|
||||
});
|
||||
|
||||
// =======================================================
|
||||
// 3. GET DATA EDIT
|
||||
// =======================================================
|
||||
$(document).on('click', '.edit-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const $btn = $(this).addClass('disabled');
|
||||
|
||||
$.get(`/users/${id}`, function (res) {
|
||||
$btn.removeClass('disabled');
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
$('#edit-user-id').val(d.id);
|
||||
$('#edit-user-name').val(d.name);
|
||||
$('#edit-user-email').val(d.email);
|
||||
$('#edit-user-role').val(d.role).trigger('change');
|
||||
$('#edit-user-password').val(''); // Kosongkan password input
|
||||
|
||||
if (fvEdit) fvEdit.resetForm();
|
||||
offcanvasEdit.show();
|
||||
}
|
||||
}).fail(() => { $btn.removeClass('disabled'); Swal.fire('Gagal!', 'Terjadi kesalahan.', 'error'); });
|
||||
});
|
||||
|
||||
// =======================================================
|
||||
// 4. VIEW RECORD
|
||||
// =======================================================
|
||||
const offcanvasView = new bootstrap.Offcanvas(document.getElementById('offcanvasViewUser'));
|
||||
$(document).on('click', '.view-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const $btn = $(this).addClass('disabled');
|
||||
|
||||
$.get(`/users/${id}`, function (res) {
|
||||
$btn.removeClass('disabled');
|
||||
if (res.status === 'success') {
|
||||
const d = res.data;
|
||||
$('#view-user-name').val(d.name);
|
||||
$('#view-user-email').val(d.email);
|
||||
$('#view-user-role').val(d.role);
|
||||
offcanvasView.show();
|
||||
}
|
||||
}).fail(() => { $btn.removeClass('disabled'); Swal.fire('Gagal!', 'Terjadi kesalahan.', 'error'); });
|
||||
});
|
||||
|
||||
// =======================================================
|
||||
// 5. DELETE RECORD
|
||||
// =======================================================
|
||||
$(document).on('click', '.delete-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const name = $(this).data('nama');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Apakah Anda yakin?',
|
||||
text: `User "${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: `/users/${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,30 @@
|
||||
<div class="offcanvas offcanvas-end" id="offcanvasViewUser" aria-labelledby="offcanvasViewUserLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasViewUserLabel" class="offcanvas-title">Detail User</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form id="viewUserForm" class="pt-0" onsubmit="return false;">
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-user-name">Nama Lengkap</label>
|
||||
<input type="text" class="form-control" id="view-user-name" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-user-email">Email</label>
|
||||
<input type="text" class="form-control" id="view-user-email" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="form-label" for="view-user-role">Role</label>
|
||||
<input type="text" class="form-control" id="view-user-role" readonly />
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Tutup</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,597 +0,0 @@
|
||||
@extends('layout.main')
|
||||
@section('content')
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<h4 class="mb-1">Roles List</h4>
|
||||
|
||||
<p class="mb-6">
|
||||
A role provided access to predefined menus and features so that depending on <br />
|
||||
assigned role an administrator can have access to what user needs.
|
||||
</p>
|
||||
<!-- Role cards -->
|
||||
<div class="row g-6">
|
||||
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h6 class="fw-normal mb-0 text-body">Total 4 users</h6>
|
||||
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Vinnie Mostowy"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/5.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Allen Rieske"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/12.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Julee Rossignol"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/6.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Kaith D'souza"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/3.png" alt="Avatar" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div class="role-heading">
|
||||
<h5 class="mb-1">Administrator</h5>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#addRoleModal"
|
||||
class="role-edit-modal"
|
||||
><span>Edit Role</span></a
|
||||
>
|
||||
</div>
|
||||
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h6 class="fw-normal mb-0 text-body">Total 7 users</h6>
|
||||
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Jimmy Ressula"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/4.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="John Doe"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Kristi Lawker"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/2.png" alt="Avatar" />
|
||||
</li>
|
||||
<li class="avatar">
|
||||
<span
|
||||
class="avatar-initial rounded-circle pull-up"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="4 more"
|
||||
>+4</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div class="role-heading">
|
||||
<h5 class="mb-1">Manager</h5>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#addRoleModal"
|
||||
class="role-edit-modal"
|
||||
><span>Edit Role</span></a
|
||||
>
|
||||
</div>
|
||||
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h6 class="fw-normal mb-0 text-body">Total 5 users</h6>
|
||||
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Andrew Tye"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/6.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Rishi Swaat"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/9.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Rossie Kim"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/12.png" alt="Avatar" />
|
||||
</li>
|
||||
<li class="avatar">
|
||||
<span
|
||||
class="avatar-initial rounded-circle pull-up"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="2 more"
|
||||
>+2</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div class="role-heading">
|
||||
<h5 class="mb-1">Users</h5>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#addRoleModal"
|
||||
class="role-edit-modal"
|
||||
><span>Edit Role</span></a
|
||||
>
|
||||
</div>
|
||||
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h6 class="fw-normal mb-0 text-body">Total 3 users</h6>
|
||||
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Kim Karlos"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/3.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Katy Turner"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/9.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Peter Adward"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/4.png" alt="Avatar" />
|
||||
</li>
|
||||
<li class="avatar">
|
||||
<span
|
||||
class="avatar-initial rounded-circle pull-up"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="3 more"
|
||||
>+3</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div class="role-heading">
|
||||
<h5 class="mb-1">Support</h5>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#addRoleModal"
|
||||
class="role-edit-modal"
|
||||
><span>Edit Role</span></a
|
||||
>
|
||||
</div>
|
||||
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h6 class="fw-normal mb-0 text-body">Total 2 users</h6>
|
||||
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Kim Merchent"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/10.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Sam D'souza"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/13.png" alt="Avatar" />
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
title="Nurvi Karlos"
|
||||
class="avatar pull-up">
|
||||
<img class="rounded-circle" src="../../assets/img/avatars/5.png" alt="Avatar" />
|
||||
</li>
|
||||
<li class="avatar">
|
||||
<span
|
||||
class="avatar-initial rounded-circle pull-up"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="7 more"
|
||||
>+7</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div class="role-heading">
|
||||
<h5 class="mb-1">Restricted User</h5>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#addRoleModal"
|
||||
class="role-edit-modal"
|
||||
><span>Edit Role</span></a
|
||||
>
|
||||
</div>
|
||||
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="row h-100">
|
||||
<div class="col-sm-5">
|
||||
<div class="d-flex align-items-end h-100 justify-content-center mt-sm-0 mt-4">
|
||||
<img
|
||||
src="{{ asset('assets/img/illustrations/add-new-roles.png') }}"
|
||||
class="img-fluid"
|
||||
alt="Image"
|
||||
width="83" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<div class="card-body text-sm-end text-center ps-sm-0">
|
||||
<button
|
||||
data-bs-target="#addRoleModal"
|
||||
data-bs-toggle="modal"
|
||||
class="btn btn-sm btn-primary mb-4 text-nowrap add-new-role">
|
||||
Add New Role
|
||||
</button>
|
||||
<p class="mb-0">
|
||||
Add new role, <br />
|
||||
if it doesn't exist.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h4 class="mt-6 mb-1">Total users with their roles</h4>
|
||||
<p class="mb-0">Find all of your company’s administrator accounts and their associate roles.</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<!-- Role Table -->
|
||||
<div class="card">
|
||||
<div class="card-datatable">
|
||||
<table class="datatables-users table border-top">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th>User</th>
|
||||
<th>Role</th>
|
||||
<th>Plan</th>
|
||||
<th>Billing</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Role Table -->
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Role cards -->
|
||||
|
||||
<!-- Add Role Modal -->
|
||||
<!-- Add Role Modal -->
|
||||
<div class="modal fade" id="addRoleModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-simple modal-dialog-centered modal-add-new-role">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<div class="text-center mb-6">
|
||||
<h4 class="role-title">Add New Role</h4>
|
||||
<p class="text-body-secondary">Set role permissions</p>
|
||||
</div>
|
||||
<!-- Add role form -->
|
||||
<form id="addRoleForm" class="row g-3" onsubmit="return false">
|
||||
<div class="col-12 form-control-validation mb-3">
|
||||
<label class="form-label" for="modalRoleName">Role Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="modalRoleName"
|
||||
name="modalRoleName"
|
||||
class="form-control"
|
||||
placeholder="Enter a role name"
|
||||
tabindex="-1" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h5 class="mb-6">Role Permissions</h5>
|
||||
<!-- Permission table -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-flush-spacing">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium">
|
||||
Administrator Access
|
||||
<i
|
||||
class="icon-base ti tabler-info-circle icon-xs"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Allows a full access to the system"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="selectAll" />
|
||||
<label class="form-check-label" for="selectAll"> Select All </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium text-heading">User Management</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="userManagementRead" />
|
||||
<label class="form-check-label" for="userManagementRead"> Read </label>
|
||||
</div>
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="userManagementWrite" />
|
||||
<label class="form-check-label" for="userManagementWrite"> Write </label>
|
||||
</div>
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="userManagementCreate" />
|
||||
<label class="form-check-label" for="userManagementCreate"> Create </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium text-heading">Content Management</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="contentManagementRead" />
|
||||
<label class="form-check-label" for="contentManagementRead"> Read </label>
|
||||
</div>
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="contentManagementWrite" />
|
||||
<label class="form-check-label" for="contentManagementWrite"> Write </label>
|
||||
</div>
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="contentManagementCreate" />
|
||||
<label class="form-check-label" for="contentManagementCreate"> Create </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium text-heading">Disputes Management</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="dispManagementRead" />
|
||||
<label class="form-check-label" for="dispManagementRead"> Read </label>
|
||||
</div>
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="dispManagementWrite" />
|
||||
<label class="form-check-label" for="dispManagementWrite"> Write </label>
|
||||
</div>
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="dispManagementCreate" />
|
||||
<label class="form-check-label" for="dispManagementCreate"> Create </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium text-heading">Database Management</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="dbManagementRead" />
|
||||
<label class="form-check-label" for="dbManagementRead"> Read </label>
|
||||
</div>
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="dbManagementWrite" />
|
||||
<label class="form-check-label" for="dbManagementWrite"> Write </label>
|
||||
</div>
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="dbManagementCreate" />
|
||||
<label class="form-check-label" for="dbManagementCreate"> Create </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium text-heading">Financial Management</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="finManagementRead" />
|
||||
<label class="form-check-label" for="finManagementRead"> Read </label>
|
||||
</div>
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="finManagementWrite" />
|
||||
<label class="form-check-label" for="finManagementWrite"> Write </label>
|
||||
</div>
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="finManagementCreate" />
|
||||
<label class="form-check-label" for="finManagementCreate"> Create </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium text-heading">Reporting</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="reportingRead" />
|
||||
<label class="form-check-label" for="reportingRead"> Read </label>
|
||||
</div>
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="reportingWrite" />
|
||||
<label class="form-check-label" for="reportingWrite"> Write </label>
|
||||
</div>
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="reportingCreate" />
|
||||
<label class="form-check-label" for="reportingCreate"> Create </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium text-heading">API Control</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="apiRead" />
|
||||
<label class="form-check-label" for="apiRead"> Read </label>
|
||||
</div>
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="apiWrite" />
|
||||
<label class="form-check-label" for="apiWrite"> Write </label>
|
||||
</div>
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="apiCreate" />
|
||||
<label class="form-check-label" for="apiCreate"> Create </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium text-heading">Repository Management</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="repoRead" />
|
||||
<label class="form-check-label" for="repoRead"> Read </label>
|
||||
</div>
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="repoWrite" />
|
||||
<label class="form-check-label" for="repoWrite"> Write </label>
|
||||
</div>
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="repoCreate" />
|
||||
<label class="form-check-label" for="repoCreate"> Create </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-nowrap fw-medium text-heading">Payroll</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="payrollRead" />
|
||||
<label class="form-check-label" for="payrollRead"> Read </label>
|
||||
</div>
|
||||
<div class="form-check mb-0 me-4 me-lg-12">
|
||||
<input class="form-check-input" type="checkbox" id="payrollWrite" />
|
||||
<label class="form-check-label" for="payrollWrite"> Write </label>
|
||||
</div>
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="payrollCreate" />
|
||||
<label class="form-check-label" for="payrollCreate"> Create </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Permission table -->
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<button type="submit" class="btn btn-primary me-sm-4 me-1">Submit</button>
|
||||
<button
|
||||
type="reset"
|
||||
class="btn btn-label-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<!--/ Add role form -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Add Role Modal -->
|
||||
|
||||
<!-- / Add Role Modal -->
|
||||
</div>
|
||||
@endsection
|
||||
@@ -1,56 +0,0 @@
|
||||
<div
|
||||
class="offcanvas offcanvas-end"
|
||||
tabindex="-1"
|
||||
id="offcanvasAddUser"
|
||||
aria-labelledby="offcanvasAddUserLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 id="offcanvasAddUserLabel" class="offcanvas-title">Add User</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close text-reset"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
|
||||
<form class="add-new-user pt-0" id="addNewUserForm" action="{{ route('auth.createAccount') }}" method="POST" onsubmit="return false;">
|
||||
@csrf
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-user-fullname">User Name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="add-user-name"
|
||||
placeholder="john"
|
||||
name="name"
|
||||
aria-label="john" />
|
||||
</div>
|
||||
<div class="mb-6 form-control-validation">
|
||||
<label class="form-label" for="add-user-email">Email</label>
|
||||
<input
|
||||
type="text"
|
||||
id="add-user-email"
|
||||
class="form-control"
|
||||
placeholder="john.doe@example.com"
|
||||
aria-label="john.doe@example.com"
|
||||
name="email" />
|
||||
</div>
|
||||
<div class="mb-6 form-password-toggle form-control-validation">
|
||||
<label class="form-label" for="add-user-password">Password</label>
|
||||
<div class="input-group input-group-merge">
|
||||
<input
|
||||
type="password"
|
||||
id="add-user-password"
|
||||
class="form-control"
|
||||
name="password"
|
||||
placeholder="Enter password" />
|
||||
<span class="input-group-text cursor-pointer">
|
||||
<i class="bx bx-hide"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
|
||||
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user