306 lines
15 KiB
PHP
306 lines
15 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
<div class="page-header">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">Home</li>
|
|
<li class="breadcrumb-item"><a href="{{ route('subkriteria.index') }}">Data Sub Kriteria</a></li>
|
|
<li class="breadcrumb-item active">Tambah Sub Kriteria</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="row gutters">
|
|
<!-- KOLOM KIRI: FORM INPUT DINAMIS -->
|
|
<div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
|
|
<div class="card h-100 shadow-sm" style="border-radius: 12px; border: none;">
|
|
<div class="card-header bg-white py-3">
|
|
<div class="card-title mb-0" style="font-weight: 600; color: #333;">
|
|
<i class="icon-plus text-primary me-2"></i> Form Input Sub Kriteria
|
|
</div>
|
|
</div>
|
|
<div class="card-body" style="padding: 1.5rem 2rem;">
|
|
<form action="{{ route('subkriteria.store') }}" method="POST">
|
|
@csrf
|
|
|
|
<!-- Pilih Kriteria Induk -->
|
|
<div class="form-group mb-4">
|
|
<label class="font-weight-bold" style="color: #555;">Pilih Kriteria Induk</label>
|
|
<select name="kriteria_id" id="kriteria_select" class="form-control select2" required
|
|
style="height: 45px; border-radius: 8px; border: 1px solid #ddd;">
|
|
<option value="">-- Pilih Kriteria Utama --</option>
|
|
@foreach ($kriterias as $k)
|
|
<option value="{{ $k->id }}">{{ $k->kode }} - {{ $k->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
<small class="text-muted mt-2 d-block small italic">Sub-kriteria yang diinput akan dikelompokkan
|
|
ke dalam kriteria ini.</small>
|
|
</div>
|
|
|
|
<!-- AREA LIST SUB KRITERIA YANG SUDAH ADA -->
|
|
<div id="existing-subs-container" class="mb-4" style="display: none;">
|
|
<label class="small font-weight-bold text-primary">
|
|
<i class="icon-list"></i> Sub-Kriteria Terdaftar Saat Ini (Referensi Urutan):
|
|
</label>
|
|
<div id="existing-subs-list" class="p-3 bg-light"
|
|
style="border-radius: 8px; border: 1px dashed #4a90e2; max-height: 200px; overflow-y: auto;">
|
|
<!-- Data diisi via AJAX -->
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4" style="opacity: 0.1;">
|
|
|
|
<!-- Input Dinamis Sub Kriteria -->
|
|
<div class="form-group">
|
|
<label class="font-weight-bold" style="color: #555;">Daftar Nama Sub & Urutan
|
|
(Otomatis)</label>
|
|
<div id="dynamic-inputs">
|
|
<div class="input-group mb-3 dynamic-row">
|
|
<input type="text" name="nama_sub[]" class="form-control"
|
|
placeholder="Nama Kondisi (Contoh: Menumpang / 500rb - 1jt)" required
|
|
style="height: 45px; border-radius: 8px 0 0 8px;">
|
|
|
|
<!-- Nilai Acuan dibuat Readonly agar urutan konsisten -->
|
|
<input type="number" name="nilai_acuan[]" class="form-control next-urutan"
|
|
placeholder="Urutan" required readonly
|
|
style="height: 45px; max-width: 120px; border-left: none; background-color: #f8f9fa;">
|
|
|
|
<button class="btn btn-success add-btn px-3" type="button"
|
|
style="border-radius: 0 8px 8px 0;">
|
|
<i class="icon-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end mt-5 border-top pt-4">
|
|
<a href="{{ route('subkriteria.index') }}" class="btn btn-outline-secondary me-2"
|
|
style="border-radius: 8px; padding: 0.6rem 1.5rem;">Batal</a>
|
|
<button type="submit" class="btn btn-primary"
|
|
style="border-radius: 8px; padding: 0.6rem 2rem; background: #4a90e2; border: none; font-weight: 600;">
|
|
<i class="icon-save"></i> Simpan & Urutkan Kode
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KOLOM KANAN: PANDUAN PENGISIAN -->
|
|
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
|
|
<div class="card h-100 shadow-sm" style="border-radius: 12px; border: none; background: #ffffff;">
|
|
<div class="card-body p-4">
|
|
|
|
<div class="text-center mb-4">
|
|
<div class="bg-light-primary mb-3"
|
|
style="width: 60px; height: 60px; line-height: 60px; border-radius: 50%; margin: 0 auto;">
|
|
<i class="icon-help-with-circle text-primary" style="font-size: 24px;"></i>
|
|
</div>
|
|
<h5 class="font-weight-bold text-dark">Panduan Pengisian</h5>
|
|
<p class="text-muted small">Memahami alur input Nama & Urutan</p>
|
|
</div>
|
|
|
|
<!-- 1. PENJELASAN NAMA SUB -->
|
|
<div class="mb-4">
|
|
<h6 class="font-weight-bold text-dark" style="font-size: 14px;">
|
|
<i class="icon-tag text-primary me-2"></i> 1. Nama Sub Kriteria
|
|
</h6>
|
|
<p class="text-muted ps-4" style="font-size: 12px; line-height: 1.6;">
|
|
Berfungsi sebagai <strong>Label</strong>. Masukkan teks kondisi yang ingin ditampilkan.
|
|
<br><em>Contoh: Menumpang, Milik Sendiri, atau Rentang "500rb - 1jt".</em>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- TAMBAHAN: ATURAN TINGKATAN (HIERARKI) -->
|
|
<div class="alert border-0 shadow-none mb-4"
|
|
style="border-radius: 10px; background-color: #ebf5ff; border-left: 4px solid #007bff !important;">
|
|
<h6 class="font-weight-bold mb-1" style="color: #0056b3; font-size: 13px;">
|
|
<i class="icon-layers"></i> Aturan Tingkatan Kondisi:
|
|
</h6>
|
|
<p class="mb-0 text-dark" style="font-size: 11px; line-height: 1.6;">
|
|
Urutan angka menentukan <strong>Level Kondisi</strong> dalam perhitungan:
|
|
<br>• <strong>Urutan Terendah (1):</strong> Adalah kondisi <em>Default</em> atau Tingkat Paling
|
|
Rendah.
|
|
<br>• <strong>Urutan Selanjutnya (2, 3, dst):</strong> Melambangkan kenaikan level atau kondisi
|
|
yang lebih tinggi.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 2. PENJELASAN NILAI ACUAN -->
|
|
<div class="bg-light p-3 mb-4" style="border-radius: 10px; border-left: 4px solid #4a90e2;">
|
|
<h6 class="font-weight-bold" style="font-size: 14px; color: #4a90e2;">
|
|
<i class="icon-info"></i> 2. Fungsi Urutan
|
|
</h6>
|
|
<p class="mb-0 text-muted" style="font-size: 12px; line-height: 1.6;">
|
|
Sistem mengunci angka urutan ini secara **otomatis** untuk memastikan nomor kode (S.C1.1, S.C1.2, dst)
|
|
urut dan tidak ganda sesuai tingkatannya.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 3. STRATEGI INPUT -->
|
|
<div class="mb-4 px-2">
|
|
<h6 class="font-weight-bold text-dark" style="font-size: 13px;">
|
|
<i class="icon-edit text-success me-2"></i> Strategi Input Urutan:
|
|
</h6>
|
|
<p class="text-muted mb-2" style="font-size: 12px;">Data disimpan berdasarkan urutan baris:</p>
|
|
<div class="p-2 border mb-3" style="border-radius: 8px; background: #fafafa;">
|
|
<p class="small font-weight-bold mb-1 text-dark">Sistem Otomatis:</p>
|
|
<ul class="mb-0 text-muted" style="font-size: 11px; list-style: none; padding-left: 5px;">
|
|
<li class="mb-1">🔹 Baris Pertama <i class="icon-arrow-right"></i> Level awal
|
|
(melanjutkan data terakhir)</li>
|
|
<li class="mb-1">🔹 Klik Tombol (+) <i class="icon-arrow-right"></i> Menambah Level yang
|
|
lebih tinggi</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TIPS MENYISIPKAN DATA -->
|
|
<div class="alert border-0 shadow-none mb-4"
|
|
style="border-radius: 10px; background-color: #f4f7f6; border-left: 4px solid #2ecc71 !important;">
|
|
<h6 class="font-weight-bold mb-1" style="color: #27ae60; font-size: 12px;">
|
|
<i class="icon-shuffle"></i> Tips Mengubah Urutan:
|
|
</h6>
|
|
<p class="mb-0" style="font-size: 11px; color: #27ae60; line-height: 1.5;">
|
|
Jika ingin menyisipkan level di tengah, disarankan untuk **mengedit label** pada data lama agar
|
|
hierarki kode tetap konsisten.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 4. PERINGATAN BUKAN BOBOT -->
|
|
<div class="alert border-0 shadow-none mb-4"
|
|
style="border-radius: 10px; background-color: #fff9e6; border-left: 4px solid #ffc107 !important;">
|
|
<h6 class="font-weight-bold mb-1" style="color: #856404; font-size: 12px;">
|
|
<i class="icon-warning"></i> Penting: Ini Bukan Perbandingan!
|
|
</h6>
|
|
<p class="mb-0" style="font-size: 11px; color: #856404; line-height: 1.5;">
|
|
Angka urutan ini menentukan **posisi tingkatan**. Nilai kepentingan absolut/bobot antar level akan
|
|
dihitung melalui matriks F-AHP nanti.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
let currentLastUrutan = 0;
|
|
|
|
$('#kriteria_select').on('change', function() {
|
|
let kriteriaId = $(this).val();
|
|
let container = $('#existing-subs-container');
|
|
let list = $('#existing-subs-list');
|
|
|
|
if (kriteriaId) {
|
|
$.ajax({
|
|
url: "{{ url('subkriteria/get-by-kriteria') }}/" + kriteriaId,
|
|
type: "GET",
|
|
success: function(response) {
|
|
list.empty();
|
|
if (response.length > 0) {
|
|
currentLastUrutan = Math.max(...response.map(item => parseInt(item
|
|
.nilai_acuan)));
|
|
|
|
response.forEach(function(item) {
|
|
list.append(`
|
|
<div class="d-flex justify-content-between align-items-center mb-2 border-bottom pb-1">
|
|
<span class="small text-dark font-weight-bold">${item.kode} - ${item.nama_sub}</span>
|
|
<span class="badge badge-info" style="font-size: 10px;">Urutan: ${item.nilai_acuan}</span>
|
|
</div>
|
|
`);
|
|
});
|
|
} else {
|
|
currentLastUrutan = 0;
|
|
list.append(
|
|
'<div class="text-center small text-muted">Belum ada data sub-kriteria.</div>'
|
|
);
|
|
}
|
|
container.slideDown();
|
|
updateAllUrutan();
|
|
},
|
|
error: function() {
|
|
container.hide();
|
|
}
|
|
});
|
|
} else {
|
|
container.hide();
|
|
}
|
|
});
|
|
|
|
function updateAllUrutan() {
|
|
let start = currentLastUrutan;
|
|
$('.next-urutan').each(function(index) {
|
|
$(this).val(start + index + 1);
|
|
});
|
|
}
|
|
|
|
$(document).on('click', '.add-btn', function() {
|
|
$('#dynamic-inputs').append(`
|
|
<div class="input-group mb-3 dynamic-row slide-in">
|
|
<input type="text" name="nama_sub[]" class="form-control" placeholder="Nama Sub" required style="height: 45px; border-radius: 8px 0 0 8px;">
|
|
<input type="number" name="nilai_acuan[]" class="form-control next-urutan" readonly style="height: 45px; max-width: 120px; border-left: none; background-color: #f8f9fa;">
|
|
<button class="btn btn-danger remove-btn px-3" type="button" style="border-radius: 0 8px 8px 0;">
|
|
<i class="icon-minus"></i>
|
|
</button>
|
|
</div>
|
|
`);
|
|
updateAllUrutan();
|
|
});
|
|
|
|
$(document).on('click', '.remove-btn', function() {
|
|
$(this).closest('.dynamic-row').fadeOut(200, function() {
|
|
$(this).remove();
|
|
updateAllUrutan();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.bg-light-primary {
|
|
background-color: rgba(74, 144, 226, 0.1);
|
|
}
|
|
|
|
.text-primary {
|
|
color: #4a90e2 !important;
|
|
}
|
|
|
|
.badge-info {
|
|
background-color: #eef7ff;
|
|
color: #4a90e2;
|
|
border: 1px solid #4a90e2;
|
|
padding: 3px 10px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #4a90e2;
|
|
box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.1);
|
|
}
|
|
|
|
.slide-in {
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.ps-4 {
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.italic {
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
@endpush
|