2286 lines
117 KiB
PHP
2286 lines
117 KiB
PHP
@extends('layouts.master')
|
||
|
||
@section('title', 'Edit Mitigation')
|
||
|
||
@section('content')
|
||
<script>
|
||
window.sessionActivityForms = @json($sessionData['activity_forms'] ?? []);
|
||
</script>
|
||
|
||
@php
|
||
$user = Auth::user();
|
||
#scope = $user->getScope();
|
||
$isReadOnly = $readonly ?? false;
|
||
@endphp
|
||
|
||
<div class="card shadow-sm">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<h3 class="mb-0 font-weight-bold" style="color: #278074; font-size: 20px;">EDIT MITIGASI</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<br/><br/>
|
||
<form action="{{ route('mitigasi-form.update', $mitigation->id) }}" method="POST" onsubmit="return false;">
|
||
@csrf
|
||
|
||
<div class="ml-1 mt-4 d-flex justify-content-between align-items-center">
|
||
<p style="font-size: 15px; font-weight: 400; line-height: 100%; letter-spacing: 0%;">Langkah <b>1</b></p>
|
||
</div>
|
||
|
||
<div id="accordion" class="accordion">
|
||
<!-- Section 1 -->
|
||
<div class="card" style="border-bottom: 1px solid #C3C3C3;">
|
||
<div class="card-header" id="heading1">
|
||
<h5 class="mb-0">
|
||
<button class="btn d-flex justify-content-between w-100 align-items-center form-title-accordion" data-toggle="collapse" data-target="#collapse1" aria-expanded="true">
|
||
INFORMASI UMUM
|
||
<span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
|
||
<div id="collapse1" class="accordion-collapse collapse show" data-parent="#accordion">
|
||
<div class="card-body">
|
||
<p class="text-muted" style="font-size: 12px;">Silakan memilih jenis dan sektor pelaporan kegiatan mitigasi yang hendak dilaporkan.</p>
|
||
|
||
<div class="form-check">
|
||
<input class="form-check-input radio-button" type="radio" name="tipe_laporan" value="laporan" id="laporan" required {{ $mitigation->tipe_laporan === 'laporan' ? 'checked' : '' }}>
|
||
<label class="form-check-label required-label" for="laporan">
|
||
Aksi Carbon Daerah
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="required-label bold" for="tipe_kegiatan">
|
||
Tipe Kegiatan
|
||
</label>
|
||
<select class="form-control select-button" name="tipe_kegiatan" required>
|
||
@foreach(['inti','pendukung','prasyarat'] as $type)
|
||
<option value="{{ $type }}" {{ $mitigation->tipe_kegiatan === $type ? 'selected' : '' }}>{{ ucfirst($type) }}</option>
|
||
@endforeach
|
||
</select>
|
||
<p class="text-muted mt-1" style="font-size: 12px">Pilih tipe kegiatan Inti, Pendukung atau Prasyarat.</p>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="required-label bold" for="tahun_kegiatan">
|
||
Tahun Kegiatan
|
||
</label>
|
||
<select class="form-control select-button" name="tahun_kegiatan" required>
|
||
@foreach($years as $year)
|
||
<option value="{{ $year }}" {{ old('tahun_kegiatan', $mitigation->tahun_kegiatan) == $year ? 'selected' : '' }}>{{ $year }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="required-label bold" for="sektor">
|
||
Sektor
|
||
</label>
|
||
<select class="form-control select-button select2" name="sektor" id="sektor-dropdown" required data-placeholder="Pilih Sektor">
|
||
<option value="">Pilih Sektor</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="required-label bold" for="sub_sektor">
|
||
Sub-Sektor
|
||
</label>
|
||
<select class="form-control select-button select2" name="sub_sektor" id="subsektor-dropdown" required data-placeholder="Pilih Sub-Sektor">
|
||
<option value="">Pilih Sub-Sektor</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="required-label bold" for="kategori_perhitungan">
|
||
Aktivitas
|
||
</label>
|
||
<select class="form-control select-button select2" name="kategori_perhitungan" id="perhitungan-dropdown" required data-placeholder="Pilih Kategori">
|
||
<option value="">Pilih Kategori</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group mt-4" style="display: none;" id="sub_activity">
|
||
<label class="required-label bold" for="kategori_sub_aktivitas">
|
||
Sub-Aktivitas
|
||
</label>
|
||
<select class="form-control select-button select2" name="kategori_sub_aktivitas" id="subactivity-dropdown" required data-placeholder="Pilih Sub Kategori">
|
||
<option value="">Pilih Sub Kategori</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="mt-4 text-right">
|
||
<button type="button" class="btn btn-submit px-4 py-2" data-target="#collapse2">
|
||
Selanjutnya
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2 -->
|
||
<div class="card" style="border-bottom: 1px solid #C3C3C3;">
|
||
<div class="card-header" id="heading2">
|
||
<h5 class="mb-0">
|
||
<button class="btn d-flex justify-content-between w-100 align-items-center collapsed form-title-accordion" data-toggle="collapse" data-target="#collapse2">
|
||
DATA UMUM KEGIATAN MITIGASI
|
||
<span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
|
||
<div id="collapse2" class="accordion-collapse collapse" data-parent="#accordion">
|
||
<div class="card-body">
|
||
<p class="text-muted" style="font-size: 12px;">
|
||
Silakan mengisi informasi data umum kegiatan mitigasi sesuai dengan informasi yang ada pada dokumen pelaporan daerah (misal LAKIP/LKPJ).
|
||
</p>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="required-label bold" for="nama_kegiatan">
|
||
Nama Kegiatan
|
||
</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="nama_kegiatan"
|
||
placeholder="Masukkan Nama Kegiatan"
|
||
required
|
||
value="{{ isset($sessionData['nama_kegiatan']) ? $sessionData['nama_kegiatan'] : '' }}"
|
||
>
|
||
<p class="text-muted mt-1" style="font-size: 12px;">
|
||
Nama kegiatan berdasarkan dokumen laporan daerah (misal LAKIP/LKPJ)
|
||
</p>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="required-label bold" for="informasi_lokasi_kegiatan">
|
||
Informasi lokasi dan tingkat kedetailan data kegiatan
|
||
</label>
|
||
<select class="form-control select-button" name="informasi_lokasi_kegiatan" required>
|
||
<option value="">Pilih Jenis Kegiatan</option>
|
||
<option value="Kegiatan PRK di 1 lokasi kegiatan" {{ (isset($sessionData['informasi_lokasi_kegiatan']) && $sessionData['informasi_lokasi_kegiatan'] === 'Kegiatan PRK di 1 lokasi kegiatan') ? 'selected' : '' }}>Kegiatan PRK di 1 lokasi kegiatan</option>
|
||
<option value="Kegiatan PRK di multi lokasi - data teknis agregat" {{ (isset($sessionData['informasi_lokasi_kegiatan']) && $sessionData['informasi_lokasi_kegiatan'] === 'Kegiatan PRK di multi lokasi - data teknis agregat') ? 'selected' : '' }}>Kegiatan PRK di multi lokasi - data teknis agregat</option>
|
||
<option value="Kegiatan PRK di multi lokasi - data detail per lokasi" {{ (isset($sessionData['informasi_lokasi_kegiatan']) && $sessionData['informasi_lokasi_kegiatan'] === 'Kegiatan PRK di multi lokasi - data detail per lokasi') ? 'selected' : '' }}>Kegiatan PRK di multi lokasi - data detail per lokasi</option>
|
||
<option value="Lokasi tambahan kegiatan" {{ (isset($sessionData['informasi_lokasi_kegiatan']) && $sessionData['informasi_lokasi_kegiatan'] === 'Lokasi tambahan kegiatan') ? 'selected' : '' }}>Lokasi tambahan kegiatan</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="required-label bold" for="jenis_kegiatan">
|
||
Jenis Kegiatan
|
||
</label>
|
||
<div class="form-check">
|
||
<input
|
||
class="form-check-input radio-button"
|
||
type="radio"
|
||
name="jenis_kegiatan"
|
||
value="lokal"
|
||
id="jenis_lokal"
|
||
required
|
||
{{ (isset($sessionData['jenis_kegiatan']) && $sessionData['jenis_kegiatan'] === 'lokal') ? 'checked' : '' }}
|
||
>
|
||
<label class="form-check-label radio-label" for="jenis_lokal">
|
||
Dampak penurunan emisi hanya di tahun berjalan
|
||
</label>
|
||
</div>
|
||
<div class="form-check mt-1">
|
||
<input
|
||
class="form-check-input radio-button"
|
||
type="radio"
|
||
name="jenis_kegiatan"
|
||
value="berkelanjutan"
|
||
id="jenis_berkelanjutan"
|
||
{{ (isset($sessionData['jenis_kegiatan']) && $sessionData['jenis_kegiatan'] === 'berkelanjutan') ? 'checked' : '' }}
|
||
>
|
||
<label class="form-check-label radio-label" for="jenis_berkelanjutan">
|
||
Dampak penurunan emisi juga terjadi di tahun berikutnya
|
||
</label>
|
||
</div>
|
||
<p class="text-muted mt-1" style="font-size: 12px;">
|
||
Opsional. Pilih jenis kegiatan berdasarkan waktu pengukuran emisi.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="pelaksana_kegiatan">
|
||
Pelaksana Kegiatan
|
||
</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="pelaksana_kegiatan"
|
||
id="pelaksana_kegiatan"
|
||
placeholder="Masukkan Nama Pelaksana Kegiatan"
|
||
value="{{ isset($sessionData['pelaksana_kegiatan']) ? $sessionData['pelaksana_kegiatan'] : '' }}"
|
||
>
|
||
<p class="text-muted mt-1" style="font-size: 12px;">
|
||
Nama pelaksana/penanggung jawab kegiatan. Jika nama pelaksana/penanggung jawab kegiatan belum ada pada pilihan silakan tulis nama pada kolom catatan dan hubungi ADMIN Provinsi Anda untuk menambahkan nama tersebut.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="pelaksana_kegiatan_rad">
|
||
Tautan dengan aksi rendah karbon daerah
|
||
</label>
|
||
<select
|
||
class="form-control select-button select2"
|
||
name="pelaksana_kegiatan_rad"
|
||
id="rad-dropdown"
|
||
data-placeholder="Tambah kegiatan di luar RAD"
|
||
>
|
||
<option value="" {{ (!isset($sessionData['pelaksana_kegiatan_rad']) || $sessionData['pelaksana_kegiatan_rad'] == '') ? 'selected' : '' }}>Tambah kegiatan di luar RAD</option>
|
||
{{-- Jika ada pilihan lain dari session, kamu bisa tambahkan disini --}}
|
||
@if(isset($sessionData['pelaksana_kegiatan_rad']) && $sessionData['pelaksana_kegiatan_rad'] != '')
|
||
<option value="{{ $sessionData['pelaksana_kegiatan_rad'] }}" selected>{{ $sessionData['pelaksana_kegiatan_rad'] }}</option>
|
||
@endif
|
||
</select>
|
||
<p class="text-muted mt-1" style="font-size: 12px;">
|
||
Pilih tautan kegiatan aksi mitgasi dengan Rencana Aksi Daerah.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="nomenklatur_kemendagri">
|
||
Tautan Dengan Nomenklatur Kementerian Dalam Negeri
|
||
</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="nomenklatur_kemendagri"
|
||
value="{{ isset($sessionData['nomenklatur_kemendagri']) ? $sessionData['nomenklatur_kemendagri'] : '' }}"
|
||
/>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="form-group col-md-6">
|
||
<label class="required-label bold" for="target">
|
||
Target
|
||
</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="target"
|
||
id="target"
|
||
required
|
||
value="{{ isset($sessionData['target']) ? $sessionData['target'] : '' }}"
|
||
>
|
||
</div>
|
||
<div class="form-group col-md-6">
|
||
<label class="required-label bold" for="satuan">
|
||
Satuan
|
||
</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="satuan"
|
||
id="satuan"
|
||
required
|
||
value="{{ isset($sessionData['satuan']) ? $sessionData['satuan'] : '' }}"
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="realisasi">
|
||
Realisasi
|
||
</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="realisasi"
|
||
id="realisasi"
|
||
value="{{ isset($sessionData['realisasi']) ? $sessionData['realisasi'] : '' }}"
|
||
>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="sdg">
|
||
Kaitan terhadap SDG
|
||
</label>
|
||
<select
|
||
class="form-control select2-checkbox"
|
||
name="sdg[]"
|
||
id="sdg"
|
||
data-placeholder="Pilih kaitan SDG"
|
||
multiple
|
||
>
|
||
<option></option>
|
||
@php
|
||
// Ambil pilihan tersimpan dari session edit
|
||
$selectedSdg = isset($sessionData['sdg']) ? (array)$sessionData['sdg'] : [];
|
||
|
||
// Peta alias -> label kanonikal
|
||
$sdgCanonical = [
|
||
'no poverty' => 'No Poverty',
|
||
'zero hunger' => 'Zero Hunger',
|
||
'good health and well-being' => 'Good Health and Well-Being',
|
||
'good health and well being' => 'Good Health and Well-Being', // alias
|
||
'quality education' => 'Quality Education',
|
||
'gender equality' => 'Gender Equality',
|
||
'clean water and sanitation' => 'Clean Water and Sanitation',
|
||
'affordable and clean energy' => 'Affordable and Clean Energy',
|
||
'decent work and economic growth' => 'Decent Work and Economic Growth',
|
||
'industry, innovation and infrastructure' => 'Industry, Innovation and Infrastructure',
|
||
'reduced inequalities' => 'Reduced Inequalities',
|
||
'sustainable cities and communities' => 'Sustainable Cities and Communities',
|
||
'sustainable cities and economies' => 'Sustainable Cities and Communities', // alias
|
||
'responsible consumption and production' => 'Responsible Consumption and Production',
|
||
'climate action' => 'Climate Action',
|
||
'life below water' => 'Life Below Water',
|
||
'life on land' => 'Life on Land',
|
||
'peace, justice and strong institutions' => 'Peace, Justice and Strong Institutions',
|
||
'partnerships for the goals' => 'Partnerships for the Goals',
|
||
'partnership for the goals' => 'Partnerships for the Goals', // alias
|
||
];
|
||
|
||
// Normalizer
|
||
$normalize = function ($s) {
|
||
$s = strtolower(trim((string)$s));
|
||
$s = str_replace(['–','—'], '-', $s);
|
||
return preg_replace('/\s+/', ' ', $s);
|
||
};
|
||
|
||
// Set terpilih (support ejaan lama/alias)
|
||
$selectedSet = [];
|
||
foreach ($selectedSdg as $v) {
|
||
$norm = $normalize($v);
|
||
$canon = $sdgCanonical[$norm] ?? $v;
|
||
$selectedSet[$normalize($canon)] = true;
|
||
}
|
||
|
||
// 17 label resmi (urut)
|
||
$ordered = [
|
||
'No Poverty',
|
||
'Zero Hunger',
|
||
'Good Health and Well-Being',
|
||
'Quality Education',
|
||
'Gender Equality',
|
||
'Clean Water and Sanitation',
|
||
'Affordable and Clean Energy',
|
||
'Decent Work and Economic Growth',
|
||
'Industry, Innovation and Infrastructure',
|
||
'Reduced Inequalities',
|
||
'Sustainable Cities and Communities',
|
||
'Responsible Consumption and Production',
|
||
'Climate Action',
|
||
'Life Below Water',
|
||
'Life on Land',
|
||
'Peace, Justice and Strong Institutions',
|
||
'Partnerships for the Goals',
|
||
];
|
||
@endphp
|
||
|
||
@foreach ($ordered as $label)
|
||
@php $norm = $normalize($label); @endphp
|
||
<option value="{{ $label }}" {{ isset($selectedSet[$norm]) ? 'selected' : '' }}>
|
||
{{ $label }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="catatan">
|
||
Catatan Tambahan Kegiatan
|
||
</label>
|
||
<textarea
|
||
class="form-control"
|
||
name="catatan"
|
||
id="catatan"
|
||
rows="3"
|
||
placeholder="Masukkan tujuan aksi"
|
||
>{{ isset($sessionData['catatan']) ? $sessionData['catatan'] : '' }}</textarea>
|
||
</div>
|
||
|
||
<div class="mt-4 text-right">
|
||
<button type="button" class="btn btn-submit px-4 py-2" data-target="#collapse3">
|
||
Selanjutnya
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 3 -->
|
||
<div class="card" style="border-bottom: 1px solid #C3C3C3;">
|
||
<div class="card-header" id="heading3">
|
||
<h5 class="mb-0">
|
||
<button class="btn d-flex justify-content-between w-100 align-items-center collapsed form-title-accordion" data-toggle="collapse" data-target="#collapse3">
|
||
INFORMASI ALOKASI/REALISASI ANGGARAN
|
||
<span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
|
||
<div id="collapse3" class="collapse" data-parent="#accordion">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<p class="text-muted" style="font-size: 14px;">1.3.1 INFORMASI ALOKASI ANGGARAN</p>
|
||
<p class="text-muted mt-4" style="font-size: 12px;">Silakan tambahkan informasi alokasi anggaran kegiatan dalam rupiah.</p>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="alokasi_apbn">
|
||
APBN
|
||
</label>
|
||
<input type="text" class="form-control" name="alokasi_apbn" id="alokasi_apbn" value="{{ isset($sessionData['alokasi_apbn']) ? $sessionData['alokasi_apbn'] : '' }}">
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="alokasi_apbd">
|
||
APBD
|
||
</label>
|
||
<input type="text" class="form-control" name="alokasi_apbd" id="alokasi_apbd" value="{{ isset($sessionData['alokasi_apbd']) ? $sessionData['alokasi_apbd'] : '' }}">
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="alokasi_swasta">
|
||
SWASTA
|
||
</label>
|
||
<input type="text" class="form-control" name="alokasi_swasta" id="alokasi_swasta" value="{{ isset($sessionData['alokasi_swasta']) ? $sessionData['alokasi_swasta'] : '' }}">
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="alokasi_sumber_dana_lain">
|
||
LAIN-LAIN
|
||
</label>
|
||
<input type="text" class="form-control" name="alokasi_sumber_dana_lain" id="alokasi_sumber_dana_lain" value="{{ isset($sessionData['alokasi_sumber_dana_lain']) ? $sessionData['alokasi_sumber_dana_lain'] : '' }}">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<p class="text-muted" style="font-size: 14px;">1.3.2 INFORMASI REALISASI ANGGARAN</p>
|
||
<p class="text-muted mt-4" style="font-size: 12px;">Silakan tambahkan informasi realisasi anggaran kegiatan dalam rupiah.</p>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="realisasi_apbn">
|
||
APBN
|
||
</label>
|
||
<input type="text" class="form-control" name="realisasi_apbn" id="realisasi_apbn" value="{{ isset($sessionData['realisasi_apbn']) ? $sessionData['realisasi_apbn'] : '' }}">
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="realisasi_apbd">
|
||
APBD
|
||
</label>
|
||
<input type="text" class="form-control" name="realisasi_apbd" id="realisasi_apbd" value="{{ isset($sessionData['realisasi_apbd']) ? $sessionData['realisasi_apbd'] : '' }}">
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="realisasi_swasta">
|
||
SWASTA
|
||
</label>
|
||
<input type="text" class="form-control" name="realisasi_swasta" id="realisasi_swasta" value="{{ isset($sessionData['realisasi_swasta']) ? $sessionData['realisasi_swasta'] : '' }}">
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="realisasi_sumber_dana_lain">
|
||
LAIN-LAIN
|
||
</label>
|
||
<input type="text" class="form-control" name="realisasi_sumber_dana_lain" id="realisasi_sumber_dana_lain" value="{{ isset($sessionData['realisasi_sumber_dana_lain']) ? $sessionData['realisasi_sumber_dana_lain'] : '' }}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 text-right">
|
||
<button type="button" class="btn btn-submit px-4 py-2" data-target="#collapse4">
|
||
Selanjutnya
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ml-1 mt-4 d-flex justify-content-between align-items-center">
|
||
<p style="font-size: 15px; font-weight: 400; line-height: 100%; letter-spacing: 0%;">Langkah <b>2</b></p>
|
||
</div>
|
||
|
||
<div id="accordion-2" class="accordion">
|
||
<div class="card">
|
||
<div class="card-header" id="heading4">
|
||
<h5 class="mb-0">
|
||
<button class="btn d-flex justify-content-between w-100 align-items-center form-title-accordion collapsed" data-toggle="collapse" data-target="#collapse4" aria-expanded="false">
|
||
FORM SUMBER DATA
|
||
<span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
|
||
<div id="collapse4" class="collapse" data-parent="#accordion-2">
|
||
<div class="card-body">
|
||
<p class="text-muted ml-4" style="font-size: 12px;">
|
||
Silakan tambahkan informasi sumber data. Sumber data yang dapat ditambahkan jika pengguna mempunyai softcopy atau link ke tautan terkait.<br/>
|
||
Langkah ini dapat dilewatkan jika tidak mempunyai dokumen terkait.<br/>
|
||
Klik Tambah Sumber Data untuk menambahkan lebih dari satu sumber data.
|
||
</p>
|
||
|
||
<div id="sumberDataContainer">
|
||
@php
|
||
$sumberDataList = session('kegiatan_mitigasi.sumber_data', []);
|
||
@endphp
|
||
|
||
@if (!empty($sumberDataList))
|
||
@foreach ($sumberDataList as $index => $sumber)
|
||
<x-sumber-data-card
|
||
:number="$index + 1"
|
||
:title="$sumber['title'] ?? ''"
|
||
:yearSelected="$sumber['year'] ?? ''"
|
||
:link="$sumber['link'] ?? ''"
|
||
:years="$years"
|
||
/>
|
||
@endforeach
|
||
@else
|
||
<x-sumber-data-card :number="1" :years="$years" />
|
||
@endif
|
||
</div>
|
||
|
||
<template id="sumberDataTemplate">
|
||
{!! str_replace('__INDEX__', '${index}',
|
||
view('components.sumber-data-card', [
|
||
'number' => '__INDEX__',
|
||
'years' => $years,
|
||
'title' => '',
|
||
'yearSelected' => '',
|
||
'link' => '',
|
||
])->render()
|
||
) !!}
|
||
</template>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mt-4">
|
||
<button type="button" class="btn-add-data" onclick="addSumberData()">
|
||
Tambah sumber data
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mt-4 text-right">
|
||
<button type="button" class="btn btn-submit px-4 py-2" data-target="#collapse5">
|
||
Selanjutnya
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ml-1 mt-4 d-flex justify-content-between align-items-center">
|
||
<p style="font-size: 15px; font-weight: 400; line-height: 100%; letter-spacing: 0%;">Langkah <b>3</b></p>
|
||
</div>
|
||
|
||
<div id="accordion-3" class="accordion">
|
||
<div class="card">
|
||
<div class="card-header" id="heading5">
|
||
<h5 class="mb-0">
|
||
<button class="btn d-flex justify-content-between w-100 align-items-center form-title-accordion collapsed" data-toggle="collapse" data-target="#collapse5" aria-expanded="false">
|
||
FORM DATA LOKASI KEGIATAN MITIGASI
|
||
<span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
<div id="collapse5" class="collapse" data-parent="#accordion-3">
|
||
<div class="card-body">
|
||
<p class="text-muted ml-4" style="font-size: 12px;">
|
||
Silahkan tambahkan lokasi kegiatan mitigasi.
|
||
</p>
|
||
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="card sub-card" id="heading5-1">
|
||
<div class="card-header" id="heading-sub-location">
|
||
<p style="font-size: 15px; font-weight: 400;">Lokasi Kegiatan Mitigasi</p>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label class="label-title" for="kabupaten_kota_location">
|
||
Kabupaten Kota
|
||
</label>
|
||
<select class="form-control select2 select-button" name="kabupaten_kota_location" id="kabupaten" data-placeholder="Pilih Kabupaten Kota">
|
||
<option value="">Pilih Kabupaten Kota</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="kecamatan_location">
|
||
Kecamatan
|
||
</label>
|
||
<select class="form-control select2 select-button" name="kecamatan_location" id="kecamatan" data-placeholder="Pilih Kecamatan">
|
||
<option value="">Pilih Kecamatan</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group mt-4">
|
||
<label class="label-title" for="kelurahan_location">
|
||
Kelurahan
|
||
</label>
|
||
<select class="form-control select2 select-button" name="kelurahan_location" id="kelurahan" data-placeholder="Pilih Kelurahan">
|
||
<option value="">Pilih Kelurahan</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-6">
|
||
<label class="label-title" for="lat_location">
|
||
Lintang (LAT)
|
||
</label>
|
||
<input type="text" class="form-control" name="lat_location" id="lat_location" value="{{ old('lat_location', $mitigation->lat_location) }}">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="label-title" for="long_location">
|
||
Bujur (LON)
|
||
</label>
|
||
<input type="text" class="form-control" name="long_location" id="long_location" value="{{ old('long_location', $mitigation->long_location) }}">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4 mb-5">
|
||
<div class="col-12">
|
||
<div id="maps" style="height: 500px; width: 100%; border-radius: 10px;"></div>
|
||
</div>
|
||
<div class="col-12 d-flex justify-content-end mt-4">
|
||
<button id="btn-remove-location" class="button-action px-4 py-2">Hapus Lokasi</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 mb-4 text-right">
|
||
<button type="button" class="btn btn-submit px-4 py-2" data-target="#collapse6">
|
||
Submit
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="section4">
|
||
<div class="ml-1 mt-4 d-flex justify-content-between align-items-center">
|
||
<p style="font-size: 15px; font-weight: 400; line-height: 100%; letter-spacing: 0%;">Langkah <b>4</b></p>
|
||
</div>
|
||
|
||
<div id="accordion-4" class="accordion">
|
||
<p class="text-muted ml-1">Loading…</p>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
@endsection
|
||
|
||
@push('styles')
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
|
||
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
||
<link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.5.2/dist/select2-bootstrap4.min.css" rel="stylesheet" />
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
|
||
<style>
|
||
#maps {
|
||
/* Ensure map container has proper dimensions */
|
||
min-height: 600px;
|
||
}
|
||
|
||
/* Fix for potential parent element issues */
|
||
.leaflet-container {
|
||
background: #fff;
|
||
}
|
||
</style>
|
||
@endsection
|
||
|
||
@section('js')
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
|
||
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
|
||
<script>
|
||
// -------- MAP INITIALIZATION --------
|
||
let marker = null;
|
||
let map = null;
|
||
function initMap() {
|
||
$('#collapse5').on('shown.bs.collapse', function () {
|
||
if (map) {
|
||
map.invalidateSize(true);
|
||
return;
|
||
}
|
||
|
||
// 1) raw numeric injection from Blade
|
||
const initialLat = -6.2088;
|
||
const initialLng = 106.8456;
|
||
// const initialLat = {{ $mitigation->lat_location ?? 'null' }};
|
||
// const initialLng = {{ $mitigation->long_location ?? 'null' }};
|
||
const zoom = 12;
|
||
|
||
// 2) cast & fallback
|
||
const latNum = (initialLat !== null) ? Number(initialLat) : null;
|
||
const lngNum = (initialLng !== null) ? Number(initialLng) : null;
|
||
const center = (latNum !== null && lngNum !== null)
|
||
? [latNum, lngNum]
|
||
: [-6.2088, 106.8456];
|
||
|
||
map = L.map('maps').setView(center, (latNum !== null && lngNum !== null) ? zoom : 5);
|
||
|
||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
maxZoom: 19,
|
||
attribution: '© OpenStreetMap contributors'
|
||
}).addTo(map);
|
||
|
||
const customIcon = L.icon({
|
||
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
|
||
iconSize: [25, 41],
|
||
iconAnchor: [12, 41],
|
||
popupAnchor: [1, -34],
|
||
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
|
||
shadowSize: [41, 41]
|
||
});
|
||
|
||
function updateInputs(lat, lng) {
|
||
$('#lat_location').val(lat.toFixed(6));
|
||
$('#long_location').val(lng.toFixed(6));
|
||
}
|
||
|
||
function addOrMoveMarker(lat, lng) {
|
||
if (!marker) {
|
||
marker = L.marker([lat, lng], { icon: customIcon, draggable: true })
|
||
.addTo(map)
|
||
.on('moveend', e => {
|
||
const p = e.target.getLatLng();
|
||
updateInputs(p.lat, p.lng);
|
||
});
|
||
} else {
|
||
marker.setLatLng([lat, lng]);
|
||
}
|
||
updateInputs(lat, lng);
|
||
}
|
||
|
||
// place initial marker if we had real coords
|
||
if (latNum !== null && lngNum !== null) {
|
||
addOrMoveMarker(latNum, lngNum);
|
||
}
|
||
|
||
// click to add/move
|
||
map.on('click', e => addOrMoveMarker(e.latlng.lat, e.latlng.lng));
|
||
|
||
// manual input change
|
||
$('#lat_location, #long_location').on('input change', function () {
|
||
const lat = parseFloat($('#lat_location').val());
|
||
const lng = parseFloat($('#long_location').val());
|
||
if (!isNaN(lat) && !isNaN(lng)) {
|
||
addOrMoveMarker(lat, lng);
|
||
map.panTo([lat, lng]);
|
||
}
|
||
});
|
||
|
||
// invalidate size once
|
||
setTimeout(() => map.invalidateSize(true), 100);
|
||
});
|
||
}
|
||
|
||
function clearLocationData() {
|
||
if(marker && map) {
|
||
map.removeLayer(marker);
|
||
marker = null;
|
||
}
|
||
$('#lat_location').val('');
|
||
$('#long_location').val('');
|
||
|
||
$('#kabupaten').val(null).trigger('change');
|
||
$('#kecamatan').val(null).trigger('change');
|
||
$('#kelurahan').val(null).trigger('change');
|
||
|
||
map.setView([-6.2088, 106.8456], 12);
|
||
}
|
||
|
||
$('#btn-remove-location').on('click', function(e) {
|
||
e.preventDefault();
|
||
clearLocationData();
|
||
});
|
||
|
||
// -------- SUMBER DATA --------
|
||
let sumberDataCount = 1;
|
||
|
||
function addSumberData() {
|
||
sumberDataCount++;
|
||
const container = document.getElementById('sumberDataContainer');
|
||
const template = document.getElementById('sumberDataTemplate').innerHTML;
|
||
const newCard = template.replace(/\$\{index\}/g, sumberDataCount);
|
||
container.insertAdjacentHTML('beforeend', newCard);
|
||
|
||
updateDeleteButtons();
|
||
}
|
||
|
||
function removeSumberData(button) {
|
||
const cards = document.querySelectorAll('#sumberDataContainer .sumber-data-card');
|
||
if (cards.length <= 1) return; // JANGAN HAPUS kalau hanya 1
|
||
|
||
const card = button.closest('.sumber-data-card');
|
||
if (card) {
|
||
card.remove();
|
||
sumberDataCount--;
|
||
updateDeleteButtons();
|
||
}
|
||
}
|
||
|
||
function updateDeleteButtons() {
|
||
const cards = document.querySelectorAll('#sumberDataContainer .sumber-data-card');
|
||
const deleteButtons = document.querySelectorAll('.btn-delete');
|
||
|
||
if (cards.length <= 1) {
|
||
deleteButtons.forEach(btn => btn.style.display = 'none');
|
||
} else {
|
||
deleteButtons.forEach(btn => btn.style.display = '');
|
||
}
|
||
}
|
||
|
||
function formatCurrency(val) {
|
||
if (!val) return '';
|
||
// Tambahkan titik sebagai pemisah ribuan, contoh: 1234567 => 1.234.567
|
||
return val.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
|
||
}
|
||
|
||
function parseCurrencyToFloat(val) {
|
||
// Hapus titik (ribuan) dan ganti koma desimal jadi titik untuk parseFloat
|
||
if (!val) return 0;
|
||
const normalized = val.replace(/\./g, '').replace(',', '.');
|
||
return parseFloat(normalized) || 0;
|
||
}
|
||
|
||
function validateRealisasi() {
|
||
const targetRaw = $('#target').val();
|
||
const realisasiRaw = $('#realisasi').val();
|
||
|
||
const target = parseCurrencyToFloat(targetRaw);
|
||
const realisasi = parseCurrencyToFloat(realisasiRaw);
|
||
|
||
const $formGroup = $('#realisasi').closest('.form-group');
|
||
let $warning = $formGroup.find('.help-block.realisasi');
|
||
|
||
if (realisasi > target) {
|
||
if ($warning.length === 0) {
|
||
$formGroup.append(
|
||
'<p class="help-block mt-2 realisasi text-danger"><i class="ti ti-alert"></i> Nilai realisasi lebih besar dari target.</p>'
|
||
);
|
||
}
|
||
} else {
|
||
$warning.remove();
|
||
}
|
||
}
|
||
|
||
function isDigitKey(e) {
|
||
let charCode = e.which || e.keyCode;
|
||
if (charCode < 48 || charCode > 57) {
|
||
e.preventDefault();
|
||
return false;
|
||
}
|
||
|
||
const $input = $(e.target);
|
||
let val = $input.val().replace(/\D/g, '');
|
||
if (val.length >= 12) {
|
||
e.preventDefault();
|
||
return false;
|
||
}
|
||
}
|
||
|
||
function formatInput($input, callValidate = false) {
|
||
let val = $input.val().replace(/\D/g, '');
|
||
if (val.length > 12) {
|
||
val = val.slice(0, 12); // potong digit ke 13 dst
|
||
}
|
||
if (val === '') {
|
||
$input.val('');
|
||
return;
|
||
}
|
||
$input.val(formatCurrency(val));
|
||
if (callValidate) validateRealisasi();
|
||
}
|
||
|
||
function formatInputOnBlur($input) {
|
||
let val = $input.val().replace(/\D/g, '');
|
||
if (val.length > 12) {
|
||
val = val.slice(0, 12);
|
||
}
|
||
if (val === '') {
|
||
$input.val('');
|
||
return;
|
||
}
|
||
$input.val(formatCurrency(val) + ',00');
|
||
}
|
||
|
||
function attachNumberFormatting(selector, callValidate = false) {
|
||
const $el = $(selector);
|
||
|
||
$el.on('keypress', isDigitKey);
|
||
|
||
$el.on('keyup', function () {
|
||
formatInput($(this), callValidate);
|
||
});
|
||
|
||
$el.on('blur', function () {
|
||
formatInputOnBlur($(this));
|
||
});
|
||
}
|
||
|
||
// Jalankan saat awal halaman load
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
updateDeleteButtons();
|
||
});
|
||
|
||
// -------- DROPDOWN LOADING FUNCTIONS WITH PROMISE --------
|
||
function loadSektor(selectedValue = null) {
|
||
return $.get('/mitigasi/form-mitigasi-sector-dropdown', {})
|
||
.then(data => {
|
||
const $dropdown = $('#sektor-dropdown').empty();
|
||
$dropdown.append('<option value="">Pilih Sektor</option>')
|
||
data.forEach(item => {
|
||
const selected = item === selectedValue ? 'selected' : '';
|
||
$dropdown.append(`<option value="${item}" ${selected}>${item}</option>`);
|
||
});
|
||
})
|
||
.catch(() => alert('Gagal memuat data Sektor'));
|
||
}
|
||
|
||
function loadSubSektor(sector, selectedValue = null) {
|
||
return $.get('/mitigasi/form-mitigasi-subsector-dropdown', { sector })
|
||
.then(data => {
|
||
const $dropdown = $('#subsektor-dropdown').empty();
|
||
$dropdown.append('<option value="">Pilih Sub-Sektor</option>');
|
||
data.forEach(item => {
|
||
const selected = item === selectedValue ? 'selected' : '';
|
||
$dropdown.append(`<option value="${item}" ${selected}>${item}</option>`);
|
||
});
|
||
})
|
||
.catch(() => alert('Gagal memuat data Sub-Sektor'));
|
||
}
|
||
|
||
function loadPerhitungan(sector, subSector, selectedValue = null) {
|
||
return $.get('/mitigasi/form-mitigasi-perhitungan-dropdown', { sub_sector: subSector, sector: sector })
|
||
.then(data => {
|
||
const $dropdown = $('#perhitungan-dropdown').empty();
|
||
$dropdown.append('<option value="">Pilih Kategori/ Mode Perhitungan</option>');
|
||
data.forEach(item => {
|
||
const selected = item.activity_type === selectedValue ? 'selected' : '';
|
||
$dropdown.append(`<option value="${item.activity_type}" data-id="${item.id}" ${selected}>${item.activity_type}</option>`);
|
||
});
|
||
})
|
||
.catch(() => alert('Gagal memuat data Kategori/ Mode Perhitungan'));
|
||
}
|
||
|
||
function loadSubAktivitas(sector, subSector, perhitungan, selectedValue = null) {
|
||
return $.get('/mitigasi/form-mitigasi-subaktivitas-dropdown', { sub_sector: subSector, sector: sector, activity: perhitungan })
|
||
.then(data => {
|
||
const $dropdown = $('#subactivity-dropdown').empty();
|
||
$dropdown.append('<option value="">Pilih Sub-Aktivitas</option>');
|
||
let selectedDesc = '';
|
||
|
||
data.forEach(item => {
|
||
if (item.sub_activity && item.sub_activity.trim() && item.sub_activity) {
|
||
$('#sub_activity').show();
|
||
} else {
|
||
$('#sub_activity').hide();
|
||
}
|
||
const selected = item.sub_activity === selectedValue ? 'selected': '';
|
||
$dropdown.append(`<option value="${item.sub_activity}" data-id="${item.id}" data-desc="${item.sub_activity_desc || ''}" ${selected}>${item.sub_activity}</option>`);
|
||
if(selected) {
|
||
selectedDesc = item.sub_activity_desc || '';
|
||
}
|
||
});
|
||
|
||
showSubActivityDesc(selectedDesc);
|
||
})
|
||
.catch(() => alert('Gagal memuat data Sub-Aktivitas'));
|
||
}
|
||
|
||
function showSubActivityDesc(desc) {
|
||
let $container = $('#subactivity-dropdown').next('.select2-container');
|
||
let $desc = $('#sub_activity_desc');
|
||
if ($desc.length === 0) {
|
||
$desc = $('<div id="sub_activity_desc" class="text-muted mt-2" style="font-size: 13px;"></div>').insertAfter('#subactivity-dropdown');
|
||
$container.after($desc);
|
||
}
|
||
$desc.text(desc ? desc : '');
|
||
}
|
||
|
||
function loadRAD(subSector, selectedValue = null) {
|
||
return $.get('/mitigasi/form-mitigasi-aksi-rad', { sub_sector: subSector })
|
||
.then(data => {
|
||
const $dropdown = $('#rad-dropdown').empty();
|
||
$dropdown.append('<option value="">Tambah kegiatan di luar RAD</option>');
|
||
data.forEach(item => {
|
||
const selected = item === selectedValue ? 'selected' : '';
|
||
$dropdown.append(`<option value="${item}" ${selected}>${item}</option>`);
|
||
});
|
||
})
|
||
.catch(() => alert('Gagal memuat data RAD'));
|
||
}
|
||
|
||
function loadKabupaten(selectedValue = null) {
|
||
return $.get('/mitigasi/form-kabupaten', {})
|
||
.then(data => {
|
||
const $dropdown = $('#kabupaten').empty();
|
||
$dropdown.append('<option value="">Pilih Kabupaten Kota</option>');
|
||
data.forEach(item => {
|
||
const selected = item.kabkot_id == selectedValue ? 'selected' : '';
|
||
$dropdown.append(`<option value="${item.kabkot_id}" ${selected}>${item.kabkot_name}</option>`);
|
||
});
|
||
})
|
||
.catch(() => alert('Gagal memuat data Kabupaten'));
|
||
}
|
||
|
||
function loadKecamatan(kabkotId, selectedValue = null) {
|
||
return $.get('/mitigasi/form-kecamatan', {kabkot_id: kabkotId})
|
||
.then(data => {
|
||
const $dropdown = $('#kecamatan').empty();
|
||
$dropdown.append('<option value="">Pilih Kecamatan</option>');
|
||
data.forEach(item => {
|
||
const selected = item.kec_id == selectedValue ? 'selected' : '';
|
||
$dropdown.append(`<option value="${item.kec_id}" ${selected}>${item.kec_name}</option>`);
|
||
});
|
||
})
|
||
.catch(() => alert('Gagal memuat data Kecamatan'));
|
||
}
|
||
|
||
function loadKelurahan(kabkotId, kecId, selectedValue = null) {
|
||
return $.get('/mitigasi/form-kelurahan', {kabkot_id: kabkotId, kec_id: kecId})
|
||
.then(data => {
|
||
const $dropdown = $('#kelurahan').empty();
|
||
$dropdown.append('<option value="">Pilih Kelurahan</option>');
|
||
data.forEach(item => {
|
||
const selected = item.kel_id == selectedValue ? 'selected' : '';
|
||
$dropdown.append(`<option value="${item.kel_id}" ${selected}>${item.kel_name}</option>`);
|
||
});
|
||
})
|
||
.catch(() => alert('Gagal memuat data Kelurahan'));
|
||
}
|
||
|
||
// -------- FOR SECTION 4 --------
|
||
function checkData() {
|
||
const sektor = $('#sektor-dropdown').val();
|
||
const subSektor = $('#subsektor-dropdown').val();
|
||
const kategori = $('#perhitungan-dropdown').val();
|
||
const subKategori = $('#subactivity-dropdown').val();
|
||
|
||
const sessionSektor = "{{ $sessionData['sektor'] ?? '' }}";
|
||
const sessionSubSektor = "{{ $sessionData['sub_sektor'] ?? '' }}";
|
||
const sessionKategori = "{{ $sessionData['kategori_perhitungan'] ?? '' }}";
|
||
const sessionSubKategori = "{{ $sessionData['kategori_sub_aktivitas'] ?? '' }}";
|
||
|
||
return (sektor || sessionSektor) &&
|
||
(subSektor || sessionSubSektor) &&
|
||
(kategori || sessionKategori) ||
|
||
(subKategori || sessionSubKategori);
|
||
}
|
||
|
||
// function loadQuestion(mitigation_id) {
|
||
// $('#section4').show();
|
||
// $('#accordion-4').html('<p class="text-muted ml-1">Loading...</p>');
|
||
|
||
// $.get('/mitigasi/form-mitigasi-question', { mitigation_id })
|
||
// .done(data => {
|
||
// if (!data || !data.length) {
|
||
// $('#accordion-4').html(
|
||
// '<p class="text-muted ml-1" style="font-size:12px">Pertanyaan tidak tersedia.</p>'
|
||
// );
|
||
// return;
|
||
// }
|
||
// window.lastQuestionData = data;
|
||
|
||
// const answers = window.sessionActivityForms || {};
|
||
// const questionMap = {};
|
||
// const childMap = {};
|
||
// data.forEach(q => {
|
||
// questionMap[q.sequence] = q;
|
||
// if (q.ad_sequence) {
|
||
// if (!childMap[q.ad_sequence]) childMap[q.ad_sequence] = [];
|
||
// childMap[q.ad_sequence].push(q.sequence);
|
||
// }
|
||
// });
|
||
|
||
// function getAnswer(seq, idx = 0) {
|
||
// const arr = answers[`activity_data_${seq}`];
|
||
// return arr && arr.length > idx ? arr[idx] : '';
|
||
// }
|
||
// function getUnit(seq, idx = 0) {
|
||
// const arr = answers[`unit_${seq}`];
|
||
// if (Array.isArray(arr)) return arr.length > idx ? arr[idx] : '';
|
||
// return typeof arr === 'string' ? arr : '';
|
||
// }
|
||
|
||
// let multiQs = data.filter(q => q.is_multiple || q.group === 'MULTIPLE' || q.type === 'multiple');
|
||
|
||
// const methodQuestion = data.find(q => q.type === 'method');
|
||
// const methodSequence = methodQuestion?.sequence;
|
||
// let methodAnswer = '';
|
||
// if (methodSequence) {
|
||
// const methodAnswers = answers[`activity_data_${methodSequence}`];
|
||
// if (Array.isArray(methodAnswers) && methodAnswers.length > 0) {
|
||
// methodAnswer = methodAnswers[0];
|
||
// }
|
||
// }
|
||
|
||
// function makeRow(q, idx, showRemove, value) {
|
||
// let inputEl = "";
|
||
// value = value || '';
|
||
// if (q.type === 'text') {
|
||
// inputEl = `<input type="text"
|
||
// name="activity_data_${q.sequence}[${idx}]"
|
||
// class="form-control mb-2 w-95 question-input"
|
||
// data-sequence="${q.sequence}" data-parent="${q.ad_sequence || ''}"
|
||
// value="${value.replace(/"/g, '"')}"
|
||
// ${q.is_required ? 'required' : ''}>`;
|
||
// } else if (q.type === 'form' || q.type === 'method') {
|
||
// console.log(value);
|
||
// inputEl = `
|
||
// <select name="activity_data_${q.sequence}[${idx}]"
|
||
// class="form-control mb-2 w-95 question-input"
|
||
// data-sequence="${q.sequence}" data-parent="${q.ad_sequence || ''}"
|
||
// ${q.is_required ? 'required' : ''}>
|
||
// ${q.choices.map(c => {
|
||
// let selected = '';
|
||
// if (typeof value === 'string' && value.trim().toLowerCase() === c.form.trim().toLowerCase()) {
|
||
// selected = ' selected';
|
||
// }
|
||
// return `<option value="${c.form}"${selected}>${c.form}</option>`;
|
||
// }).join('')}
|
||
// </select>
|
||
// `;
|
||
// } else {
|
||
// console.log(value);
|
||
// console.log(typeof(value));
|
||
// console.log(q.choices);
|
||
// console.log(q.choices.map(c => value === c));
|
||
// inputEl = `<select name="activity_data_${q.sequence}[${idx}]"
|
||
// class="form-control mb-2 w-95 question-input"
|
||
// data-sequence="${q.sequence}" data-parent="${q.ad_sequence || ''}"
|
||
// ${q.is_required ? 'required' : ''}>
|
||
// ${q.choices.map(c => `<option${value === c ? ' selected' : ''}>${c}</option>`).join('')}
|
||
// </select>`;
|
||
// }
|
||
|
||
// const removeBtn = showRemove
|
||
// ? `<button type="button" class="btn btn-danger btn-sm ml-2 remove-row">Hapus</button>`
|
||
// : `<button type="button" class="btn btn-danger btn-sm ml-2 remove-row d-none">Hapus</button>`;
|
||
|
||
// return `
|
||
// <div class="mb-2 row-input question-row"
|
||
// data-sequence="${q.sequence}" data-parent="${q.ad_sequence || ''}" data-question-plus="${q.question_plus || ''}">
|
||
// ${inputEl}
|
||
// ${removeBtn}
|
||
// </div>`;
|
||
// }
|
||
|
||
// let allHtml = '';
|
||
// data.forEach((q, idx) => {
|
||
// let unitOrDesc = '';
|
||
// let unitVal = getUnit(q.sequence);
|
||
|
||
// if (q.type === 'form' || q.type === 'method') {
|
||
// unitOrDesc = `
|
||
// <div class="form-desc-list mt-1" data-sequence="${q.sequence}">
|
||
// ${q.choices.map(c => `
|
||
// <p class="form-desc" data-form="${c.form}" style="display:none;font-size:12px;margin-bottom:0;">
|
||
// ${c.desc}
|
||
// </p>
|
||
// `).join('')}
|
||
// </div>`;
|
||
// } else if (q.units && q.units.length === 1) {
|
||
// unitOrDesc = `<input type="hidden" name="unit_${q.sequence}" value="${q.units[0]}">
|
||
// <span class="text-muted small ml-1">${q.units[0]}</span>`;
|
||
// } else if (q.units && q.units.length > 1) {
|
||
// unitOrDesc = `<select name="unit_${q.sequence}"
|
||
// class="form-control-sm d-inline-block w-auto unit-select mt-2" required>
|
||
// ${q.units.map(u => `<option${unitVal === u ? ' selected' : ''}>${u}</option>`).join('')}
|
||
// </select>`;
|
||
// }
|
||
|
||
// if (!q.is_multiple) {
|
||
// const val = getAnswer(q.sequence, 0);
|
||
// allHtml += `
|
||
// <div class="form-group question-group" id="group-${q.sequence}"
|
||
// data-question-plus="${q.question_plus || ''}" ${q.ad_sequence ? 'data-ad-sequence="1"' : ''}>
|
||
// <label class="${q.is_required ? 'required-label' : ''} font-weight-bold">
|
||
// ${q.activity_data}
|
||
// </label>
|
||
// ${makeRow(q, 0, false, val)}
|
||
// ${unitOrDesc ? `<div class="mt-2">${unitOrDesc}</div>` : ''}
|
||
// </div>`;
|
||
// }
|
||
// });
|
||
|
||
// function makeMultipleCard(idx) {
|
||
// let title = '';
|
||
// const rowsHtml = multiQs.map((q) => {
|
||
// title = q.title_group || title || 'Data';
|
||
// let unitOrDesc = '';
|
||
// let unitVal = getUnit(q.sequence, idx);
|
||
|
||
// if (q.type === 'form' || q.type === 'method') {
|
||
// unitOrDesc = `
|
||
// <div class="form-desc-list mt-1" data-sequence="${q.sequence}">
|
||
// ${q.choices.map(c => `
|
||
// <p class="form-desc" data-form="${c.form}" style="display:none;font-size:12px;margin-bottom:0;">
|
||
// ${c.desc}
|
||
// </p>
|
||
// `).join('')}
|
||
// </div>`;
|
||
// } else if (q.units && q.units.length === 1) {
|
||
// unitOrDesc = `<input type="hidden" name="unit_${q.sequence}" value="${q.units[0]}">
|
||
// <span class="text-muted small ml-1">${q.units[0]}</span>`;
|
||
// } else if (q.units && q.units.length > 1) {
|
||
// unitOrDesc = `<select name="unit_${q.sequence}"
|
||
// class="form-control-sm d-inline-block w-auto unit-select mt-2" required>
|
||
// ${q.units.map(u => `<option${unitVal === u ? ' selected' : ''}>${u}</option>`).join('')}
|
||
// </select>`;
|
||
// }
|
||
|
||
// const val = getAnswer(q.sequence, idx);
|
||
// return `
|
||
// <div class="form-group question-group" id="group-${q.sequence}-${idx}"
|
||
// data-question-plus="${q.question_plus || ''}" ${q.ad_sequence ? 'data-ad-sequence="1"' : ''}>
|
||
// <label class="${q.is_required ? 'required-label' : ''} font-weight-bold">
|
||
// ${q.activity_data}
|
||
// </label>
|
||
// <div class="multiple-input-group" data-sequence="${q.sequence}">
|
||
// ${makeRow(q, idx, false, val)}
|
||
// </div>
|
||
// ${unitOrDesc ? `<div class="mt-2">${unitOrDesc}</div>` : ''}
|
||
// </div>`;
|
||
// }).join('');
|
||
|
||
// return `
|
||
// <div class="card multiple-card" data-index="${idx}">
|
||
// <div class="card-header d-flex justify-content-between align-items-center">
|
||
// <strong>${title}</strong>
|
||
// <button type="button" class="btn btn-delete btn-sm remove-card">
|
||
// Hapus Data
|
||
// </button>
|
||
// </div>
|
||
// <div class="card-body">
|
||
// ${rowsHtml}
|
||
// </div>
|
||
// </div>`;
|
||
// }
|
||
|
||
// let multipleLayout = '';
|
||
// let multiCardQuestionPlus = '';
|
||
// if (multiQs.length > 0) {
|
||
// let maxGroup = 1;
|
||
// multiQs.forEach(q => {
|
||
// const arr = answers[`activity_data_${q.sequence}`];
|
||
// if (Array.isArray(arr)) maxGroup = Math.max(maxGroup, arr.length);
|
||
// });
|
||
// if (maxGroup < 1) maxGroup = 1;
|
||
// multiCardQuestionPlus = multiQs[0]?.question_plus || '';
|
||
// multipleLayout = `
|
||
// <div id="card-data-1-wrapper"
|
||
// data-question-plus="${multiCardQuestionPlus}">
|
||
// <div id="multiple-container">
|
||
// ${Array.from({ length: maxGroup }).map((_, idx) => makeMultipleCard(idx)).join('')}
|
||
// </div>
|
||
// <button type="button" id="add-group" class="btn btn-add-data add-row btn-sm mt-2">
|
||
// Tambah Data
|
||
// </button>
|
||
// </div>`;
|
||
// }
|
||
|
||
// const html = `
|
||
// <div class="card">
|
||
// <div class="card-header">
|
||
// <h5 class="mb-0">
|
||
// <button class="btn d-flex justify-content-between w-100 align-items-center form-title-accordion collapsed"
|
||
// data-toggle="collapse" data-target="#collapse6">
|
||
// ${data[0].title.toUpperCase()}
|
||
// <span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
|
||
// </button>
|
||
// </h5>
|
||
// </div>
|
||
// <div id="collapse6" class="collapse" data-parent="#accordion-4">
|
||
// <div class="card-body">
|
||
// <p class="text-muted small">${data[0].activity_desc}</p>
|
||
// ${allHtml}
|
||
// ${multipleLayout}
|
||
// <div class="mt-4 text-right">
|
||
// <button type="submit" id="final-submit" class="btn btn-submit px-4 py-2">
|
||
// Submit
|
||
// </button>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// `;
|
||
|
||
// $('#accordion-4').html(html);
|
||
// updateConditionalQuestions();
|
||
|
||
// function refreshRemoveButtons() {
|
||
// const cards = $('#multiple-container .multiple-card');
|
||
// if (cards.length === 1) {
|
||
// cards.find('.remove-card').addClass('d-none');
|
||
// } else {
|
||
// cards.find('.remove-card').removeClass('d-none');
|
||
// }
|
||
// }
|
||
|
||
// if (multiQs.length > 0) {
|
||
// $('#accordion-4').off('click', '#add-group').on('click', '#add-group', function() {
|
||
// const idx = $('#multiple-container .multiple-card').length;
|
||
// $('#multiple-container').append(makeMultipleCard(idx));
|
||
// refreshRemoveButtons();
|
||
// updateConditionalQuestions();
|
||
// });
|
||
// $('#accordion-4').off('click', '.remove-card').on('click', '.remove-card', function() {
|
||
// $(this).closest('.multiple-card').remove();
|
||
// refreshRemoveButtons();
|
||
// updateConditionalQuestions();
|
||
// });
|
||
// }
|
||
|
||
// $('#accordion-4').on('change', 'select.question-input', function() {
|
||
// const $select = $(this);
|
||
// const val = $select.val();
|
||
// $select.closest('.question-group').find('.form-desc').hide();
|
||
// $select.closest('.question-group').find(`.form-desc[data-form="${val}"]`).show();
|
||
|
||
// updateConditionalQuestions();
|
||
// });
|
||
|
||
// function checkShowCardData1() {
|
||
// if (multiQs.length === 0) return;
|
||
// if (!methodSequence) return;
|
||
// const methodVal = $(`[name="activity_data_${methodSequence}[0]"]`).val();
|
||
// if (!methodVal || methodVal === '') {
|
||
// $('#card-data-1-wrapper').hide();
|
||
// $('#add-group').hide();
|
||
// } else {
|
||
// $('#card-data-1-wrapper').show();
|
||
// $('#add-group').show();
|
||
// }
|
||
// }
|
||
|
||
// if (multiQs.length > 0 && methodSequence) {
|
||
// $('#accordion-4').on('change', `select[name="activity_data_${methodSequence}[0]"]`, function() {
|
||
// checkShowCardData1();
|
||
// updateConditionalQuestions();
|
||
// });
|
||
// }
|
||
|
||
// function updateConditionalQuestions(selectedValue = false) {
|
||
// let currentMethod = '';
|
||
// if (methodSequence) {
|
||
// currentMethod = $(`[name="activity_data_${methodSequence}[0]"]`).val() || '';
|
||
// }
|
||
|
||
// $('.question-group').each(function() {
|
||
// const seq = $(this).find('.question-row').data('sequence');
|
||
// const q = questionMap[seq];
|
||
// let show = true;
|
||
// if (q && q.question_plus !== undefined && q.question_plus !== null && q.question_plus !== '') {
|
||
// if (String(q.question_plus) !== String(currentMethod)) show = false;
|
||
// }
|
||
// if (q && q.ad_sequence) {
|
||
// let parentVal = $(`[name="activity_data_${q.ad_sequence}[0]"]`).val();
|
||
// if (typeof parentVal === "undefined") parentVal = '';
|
||
// if (String(parentVal) !== String(q.question_plus)) show = false;
|
||
// }
|
||
// // Paling galak, pake style.setProperty agar anti override
|
||
// if (show) {
|
||
// this.style.setProperty('display', 'block', 'important');
|
||
// } else {
|
||
// this.style.setProperty('display', 'none', 'important');
|
||
// }
|
||
// if (!show) {
|
||
// $(this).find('input,select').val('');
|
||
// $(this).find('.form-desc').hide();
|
||
// }
|
||
// });
|
||
|
||
// // Multiple card wrapper
|
||
// if (multiQs.length > 0) {
|
||
// const $multiCardWrapper = $('#card-data-1-wrapper');
|
||
// if ($multiCardWrapper.length) {
|
||
// const wrapperQPlus = $multiCardWrapper.data('question-plus');
|
||
// let show = true;
|
||
// if (wrapperQPlus && String(wrapperQPlus) !== String(currentMethod)) show = false;
|
||
// $multiCardWrapper[0].style.setProperty('display', show ? 'block' : 'none', 'important');
|
||
// // Extra hack untuk mengantisipasi Bootstrap collapse/accordion
|
||
// $multiCardWrapper.css({
|
||
// opacity: show ? 1 : 0,
|
||
// 'pointer-events': show ? 'auto' : 'none',
|
||
// height: show ? '' : '0',
|
||
// 'min-height': show ? '' : '0',
|
||
// 'max-height': show ? '' : '0',
|
||
// overflow: show ? '' : 'hidden'
|
||
// });
|
||
// }
|
||
// }
|
||
|
||
// // Multiple card (child)
|
||
// if (multiQs.length > 0) {
|
||
// $('#multiple-container .multiple-card').each(function(cardIdx) {
|
||
// $(this).find('.question-group').each(function() {
|
||
// const seq = $(this).find('.question-row').data('sequence');
|
||
// const q = questionMap[seq];
|
||
// let show = true;
|
||
// if (q && q.question_plus !== undefined && q.question_plus !== null && q.question_plus !== '') {
|
||
// if (String(q.question_plus) !== String(currentMethod)) show = false;
|
||
// }
|
||
// if (q && q.ad_sequence) {
|
||
// let parentVal = $(`[name="activity_data_${q.ad_sequence}[${cardIdx}]"]`).val();
|
||
// if(!parentVal) parentVal = $(`[name="activity_data_${q.ad_sequence}[0]"]`).val();
|
||
// if (String(parentVal) !== String(q.question_plus)) show = false;
|
||
// }
|
||
// if (show) {
|
||
// this.style.setProperty('display', 'block', 'important');
|
||
// } else {
|
||
// this.style.setProperty('display', 'none', 'important');
|
||
// }
|
||
// if (!show) {
|
||
// $(this).find('input,select').val('');
|
||
// $(this).find('.form-desc').hide();
|
||
// }
|
||
// });
|
||
// });
|
||
// }
|
||
|
||
// checkShowCardData1();
|
||
// }
|
||
|
||
// window.updateConditionalQuestions = updateConditionalQuestions;
|
||
|
||
// // Observer agar auto hidden walaupun ada re-render/collapse
|
||
// if (window.__mitigationObserver) {
|
||
// window.__mitigationObserver.disconnect();
|
||
// }
|
||
// window.__mitigationObserver = new MutationObserver(function(mutations) {
|
||
// const wrapper = document.getElementById('card-data-1-wrapper');
|
||
// if(wrapper) {
|
||
// const wrapperQPlus = $(wrapper).data('question-plus');
|
||
// let currentMethod = '';
|
||
// if (methodSequence) {
|
||
// currentMethod = $(`[name="activity_data_${methodSequence}[0]"]`).val() || '';
|
||
// }
|
||
// let show = true;
|
||
// if (wrapperQPlus && String(wrapperQPlus) !== String(currentMethod)) show = false;
|
||
// wrapper.style.setProperty('display', show ? 'block' : 'none', 'important');
|
||
// }
|
||
// });
|
||
// window.__mitigationObserver.observe(document.getElementById('accordion-4'), {childList: true, subtree: true});
|
||
|
||
// $('.form-desc-list').each(function() {
|
||
// $(this).find('.form-desc').hide();
|
||
// const $select = $(this).closest('.question-group').find('select.question-input');
|
||
// const val = $select.val();
|
||
// if (val) {
|
||
// $(this).find(`.form-desc[data-form="${val}"]`).show();
|
||
// }
|
||
// });
|
||
// if (multiQs.length > 0) refreshRemoveButtons();
|
||
// updateConditionalQuestions();
|
||
|
||
// $('#accordion-4').on('change', '.question-input', function() {
|
||
// updateConditionalQuestions(true);
|
||
// });
|
||
|
||
// // (Tambahan) Bootstrap collapse event agar update selalu fresh
|
||
// $('#collapse6').on('shown.bs.collapse hide.bs.collapse', function () {
|
||
// updateConditionalQuestions();
|
||
// });
|
||
// })
|
||
// .fail((xhr, status, error) => {
|
||
// console.error('Gagal mengambil pertanyaan:', status, error);
|
||
// $('#accordion-4').html(
|
||
// '<p class="text-danger small">Terjadi kesalahan saat memuat pertanyaan.</p>'
|
||
// );
|
||
// });
|
||
// }
|
||
|
||
function loadQuestion(mitigation_id) {
|
||
$('#section4').show();
|
||
$('#accordion-4').html('<p class="text-muted ml-1">Loading...</p>');
|
||
|
||
$.get('/mitigasi/form-mitigasi-question', { mitigation_id })
|
||
.done(data => {
|
||
if (!data || !data.length) {
|
||
$('#accordion-4').html(
|
||
'<p class="text-muted ml-1" style="font-size:12px">Pertanyaan tidak tersedia.</p>'
|
||
);
|
||
return;
|
||
}
|
||
window.lastQuestionData = data;
|
||
|
||
const answers = window.sessionActivityForms || {};
|
||
const questionMap = {};
|
||
data.forEach(q => {
|
||
questionMap[q.sequence] = q;
|
||
});
|
||
|
||
// --- MultiQs logic
|
||
let multiQs = data.filter(q => q.is_multiple || q.group === 'MULTIPLE' || q.type === 'multiple');
|
||
|
||
// --- Get method info
|
||
const methodQuestion = data.find(q => q.type === 'method');
|
||
const methodSequence = methodQuestion?.sequence;
|
||
let allowedMethodValue;
|
||
|
||
function getAnswer(seq, idx = 0) {
|
||
const arr = answers[`activity_data_${seq}`];
|
||
return arr && arr.length > idx ? arr[idx] : '';
|
||
}
|
||
function getUnit(seq, idx = 0) {
|
||
const arr = answers[`unit_${seq}`];
|
||
if (Array.isArray(arr)) return arr.length > idx ? arr[idx] : '';
|
||
return typeof arr === 'string' ? arr : '';
|
||
}
|
||
|
||
// --- Build HTML for single questions
|
||
let allHtml = '';
|
||
data.forEach((q, idx) => {
|
||
let unitOrDesc = '';
|
||
let unitVal = getUnit(q.sequence);
|
||
|
||
if (q.type === 'form' || q.type === 'method') {
|
||
unitOrDesc = `
|
||
<div class="form-desc-list mt-1" data-sequence="${q.sequence}">
|
||
${q.choices.map(c => `
|
||
<p class="form-desc" data-form="${c.form}" style="display:none;font-size:12px;margin-bottom:0;">
|
||
${c.desc}
|
||
</p>
|
||
`).join('')}
|
||
</div>`;
|
||
} else if (q.units && q.units.length === 1) {
|
||
unitOrDesc = `<input type="hidden" name="unit_${q.sequence}" value="${q.units[0]}">
|
||
<span class="text-muted small ml-1">${q.units[0]}</span>
|
||
${q.keterangan ? `<p class="text-muted ml-1 mt-2">${q.keterangan}</p>` : ''}`;
|
||
} else if (q.units && q.units.length > 1) {
|
||
unitOrDesc = `<select name="unit_${q.sequence}"
|
||
class="form-control-sm d-inline-block w-auto unit-select mt-2" required>
|
||
${q.units.map(u => `<option${unitVal === u ? ' selected' : ''}>${u}</option>`).join('')}
|
||
</select>`;
|
||
}
|
||
|
||
if (!q.is_multiple) {
|
||
const val = getAnswer(q.sequence, 0);
|
||
allHtml += `
|
||
<div class="form-group question-group" id="group-${q.sequence}"
|
||
data-question-plus="${q.question_plus || ''}" ${q.ad_sequence ? 'data-ad-sequence="1"' : ''}>
|
||
<label class="${q.is_required ? 'required-label' : ''} font-weight-bold">
|
||
${q.activity_data}
|
||
</label>
|
||
${makeRow(q, 0, false, val)}
|
||
${unitOrDesc ? `<div class="mt-2">${unitOrDesc}</div>` : ''}
|
||
</div>`;
|
||
}
|
||
});
|
||
|
||
function makeRow(q, idx, showRemove, value) {
|
||
let inputEl = "";
|
||
value = value || '';
|
||
if (q.type === 'text') {
|
||
inputEl = `<input type="text"
|
||
name="activity_data_${q.sequence}[${idx}]"
|
||
class="form-control mb-2 w-95 question-input"
|
||
data-sequence="${q.sequence}" data-parent="${q.ad_sequence || ''}"
|
||
value="${value.replace(/"/g, '"')}"
|
||
${q.is_required ? 'required' : ''}>`;
|
||
} else if (q.type === 'form' || q.type === 'method') {
|
||
inputEl = `
|
||
<select name="activity_data_${q.sequence}[${idx}]"
|
||
class="form-control mb-2 w-95 question-input"
|
||
data-sequence="${q.sequence}" data-parent="${q.ad_sequence || ''}"
|
||
${q.is_required ? 'required' : ''}>
|
||
${q.choices.map(c => {
|
||
let selected = '';
|
||
if (typeof value === 'string' && value.trim().toLowerCase() === c.form.trim().toLowerCase()) {
|
||
selected = ' selected';
|
||
}
|
||
return `<option value="${c.form}"${selected}>${c.form}</option>`;
|
||
}).join('')}
|
||
</select>
|
||
`;
|
||
} else {
|
||
inputEl = `<select name="activity_data_${q.sequence}[${idx}]"
|
||
class="form-control mb-2 w-95 question-input"
|
||
data-sequence="${q.sequence}" data-parent="${q.ad_sequence || ''}"
|
||
${q.is_required ? 'required' : ''}>
|
||
${q.choices.map(c => `<option${value === c ? ' selected' : ''}>${c}</option>`).join('')}
|
||
</select>`;
|
||
}
|
||
const removeBtn = showRemove
|
||
? `<button type="button" class="btn btn-danger btn-sm ml-2 remove-row">Hapus</button>`
|
||
: `<button type="button" class="btn btn-danger btn-sm ml-2 remove-row d-none">Hapus</button>`;
|
||
return `
|
||
<div class="mb-2 row-input question-row"
|
||
data-sequence="${q.sequence}" data-parent="${q.ad_sequence || ''}" data-question-plus="${q.question_plus || ''}">
|
||
${inputEl}
|
||
${removeBtn}
|
||
</div>`;
|
||
}
|
||
|
||
// --- Build Multiple Card Layout
|
||
let multipleLayout = '';
|
||
if (multiQs.length > 0) {
|
||
let maxGroup = 1;
|
||
multiQs.forEach(q => {
|
||
const arr = answers[`activity_data_${q.sequence}`];
|
||
if (Array.isArray(arr)) maxGroup = Math.max(maxGroup, arr.length);
|
||
});
|
||
if (maxGroup < 1) maxGroup = 1;
|
||
|
||
multipleLayout = `
|
||
<div id="card-data-1-wrapper">
|
||
<div id="multiple-container">
|
||
${Array.from({ length: maxGroup }).map((_, idx) => makeMultipleCard(idx)).join('')}
|
||
</div>
|
||
<button type="button" id="add-group" class="btn btn-add-data add-row btn-sm mt-2">
|
||
Tambah Data
|
||
</button>
|
||
</div>`;
|
||
}
|
||
|
||
function makeMultipleCard(idx) {
|
||
// --- DYNAMIC TITLE PER CARD: pilih berdasar parent value!
|
||
// Misal, card punya parent method (atau question_plus)
|
||
let currentMethod = '';
|
||
if (methodSequence) {
|
||
// Untuk multiple, per idx, pakai jawaban ke-idx
|
||
const methodAnswers = answers[`activity_data_${methodSequence}`];
|
||
if (Array.isArray(methodAnswers)) {
|
||
currentMethod = methodAnswers[idx] || methodAnswers[0] || '';
|
||
}
|
||
}
|
||
// Cari judul yang match
|
||
let cardTitle = '';
|
||
let found = multiQs.find(q =>
|
||
q.title_group &&
|
||
String(q.question_plus) === String(currentMethod)
|
||
);
|
||
if (found) cardTitle = found.title_group;
|
||
if (!cardTitle) {
|
||
const fallback = multiQs.find(q => q.title_group);
|
||
cardTitle = fallback ? fallback.title_group : 'Data';
|
||
}
|
||
|
||
const rowsHtml = multiQs.map((q) => {
|
||
let unitOrDesc = '';
|
||
let unitVal = getUnit(q.sequence, idx);
|
||
|
||
if (q.type === 'form' || q.type === 'method') {
|
||
unitOrDesc = `
|
||
<div class="form-desc-list mt-1" data-sequence="${q.sequence}">
|
||
${q.choices.map(c => `
|
||
<p class="form-desc" data-form="${c.form}" style="display:none;font-size:12px;margin-bottom:0;">
|
||
${c.desc}
|
||
</p>
|
||
`).join('')}
|
||
</div>`;
|
||
} else if (q.units && q.units.length === 1) {
|
||
unitOrDesc = `<input type="hidden" name="unit_${q.sequence}" value="${q.units[0]}">
|
||
<span class="text-muted small ml-1">${q.units[0]}</span>
|
||
${q.keterangan ? `<p class="text-muted ml-1 mt-2">${q.keterangan}</p>` : ''}`;
|
||
} else if (q.units && q.units.length > 1) {
|
||
unitOrDesc = `<select name="unit_${q.sequence}"
|
||
class="form-control-sm d-inline-block w-auto unit-select mt-2" required>
|
||
${q.units.map(u => `<option${unitVal === u ? ' selected' : ''}>${u}</option>`).join('')}
|
||
</select>`;
|
||
}
|
||
|
||
const val = getAnswer(q.sequence, idx);
|
||
return `
|
||
<div class="form-group question-group" id="group-${q.sequence}-${idx}"
|
||
data-question-plus="${q.question_plus || ''}" ${q.ad_sequence ? 'data-ad-sequence="1"' : ''}>
|
||
<label class="${q.is_required ? 'required-label' : ''} font-weight-bold">
|
||
${q.activity_data}
|
||
</label>
|
||
<div class="multiple-input-group" data-sequence="${q.sequence}">
|
||
${makeRow(q, idx, false, val)}
|
||
</div>
|
||
${unitOrDesc ? `<div class="mt-2">${unitOrDesc}</div>` : ''}
|
||
</div>`;
|
||
}).join('');
|
||
|
||
return `
|
||
<div class="card multiple-card" data-index="${idx}">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<strong class="card-title">${cardTitle}</strong>
|
||
<button type="button" class="btn btn-delete btn-sm remove-card">
|
||
Hapus Data
|
||
</button>
|
||
</div>
|
||
<div class="card-body">
|
||
${rowsHtml}
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
// --- Render Final
|
||
const html = `
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="mb-0">
|
||
<button class="btn d-flex justify-content-between w-100 align-items-center form-title-accordion collapsed"
|
||
data-toggle="collapse" data-target="#collapse6">
|
||
${data[0].title.toUpperCase()}
|
||
<span class="arrow mr-2"><i class="ti ti-angle-right"></i></span>
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
<div id="collapse6" class="collapse" data-parent="#accordion-4">
|
||
<div class="card-body">
|
||
${data[0].activity_desc ? `<p class="text-muted small">${data[0].activity_desc}</p>` : ''}
|
||
${allHtml}
|
||
${multipleLayout}
|
||
<div class="mt-4 text-right">
|
||
<button type="submit" id="final-submit" class="btn btn-submit px-4 py-2">
|
||
Submit
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
$('#accordion-4').html(html);
|
||
|
||
// --- Add/Remove group handler
|
||
function refreshRemoveButtons() {
|
||
const cards = $('#multiple-container .multiple-card');
|
||
if (cards.length === 1) {
|
||
cards.find('.remove-card').addClass('d-none');
|
||
} else {
|
||
cards.find('.remove-card').removeClass('d-none');
|
||
}
|
||
}
|
||
if (multiQs.length > 0) {
|
||
$('#accordion-4').off('click', '#add-group').on('click', '#add-group', function() {
|
||
const idx = $('#multiple-container .multiple-card').length;
|
||
$('#multiple-container').append(makeMultipleCard(idx));
|
||
refreshRemoveButtons();
|
||
updateConditionalQuestions();
|
||
});
|
||
$('#accordion-4').off('click', '.remove-card').on('click', '.remove-card', function() {
|
||
$(this).closest('.multiple-card').remove();
|
||
refreshRemoveButtons();
|
||
updateConditionalQuestions();
|
||
});
|
||
}
|
||
|
||
// --- Form-desc auto show/hide
|
||
$('#accordion-4').on('change', 'select.question-input', function() {
|
||
const $select = $(this);
|
||
const val = $select.val();
|
||
$select.closest('.question-group').find('.form-desc').hide();
|
||
$select.closest('.question-group').find(`.form-desc[data-form="${val}"]`).show();
|
||
updateConditionalQuestions();
|
||
});
|
||
|
||
// --- Logic tampil/hide Card Data 1.
|
||
function checkShowCardData1() {
|
||
const methodVal = $(`[name="activity_data_${methodSequence}[0]"]`).val();
|
||
if(methodVal) {
|
||
if (methodVal && multiQs.find(q => q.question_plus == String(allowedMethodValue)) && String(methodVal) === String(allowedMethodValue)) {
|
||
$('#card-data-1-wrapper').show();
|
||
$('#add-group').show();
|
||
return
|
||
} else {
|
||
$('#card-data-1-wrapper').hide();
|
||
$('#add-group').hide();
|
||
return
|
||
}
|
||
} else {
|
||
if (multiQs.find(q => q.title_group && q.title_group !== null && q.title_group !== "")) {
|
||
$('#card-data-1-wrapper').show();
|
||
$('#add-group').show();
|
||
return
|
||
} else {
|
||
$('#card-data-1-wrapper').hide();
|
||
$('#add-group').hide();
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
if (multiQs.length > 0 && methodSequence) {
|
||
$('#accordion-4').on('change', `select[name="activity_data_${methodSequence}[0]"]`, function() {
|
||
checkShowCardData1();
|
||
updateConditionalQuestions();
|
||
});
|
||
}
|
||
|
||
// --- Update title on any change (EDIT mode)
|
||
function updateConditionalQuestions() {
|
||
// Untuk single (bukan multiple-card)
|
||
$('.question-group').each(function() {
|
||
const seq = $(this).find('.question-row').data('sequence');
|
||
const q = questionMap[seq];
|
||
let show = true;
|
||
let currentMethod = '';
|
||
if (methodSequence) {
|
||
currentMethod = $(`[name="activity_data_${methodSequence}[0]"]`).val() || '';
|
||
}
|
||
if (q && q.question_plus !== undefined && q.question_plus !== null && q.question_plus !== '') {
|
||
if (String(q.question_plus) !== String(currentMethod)) show = false;
|
||
}
|
||
if (q && q.ad_sequence) {
|
||
let parentVal = $(`[name="activity_data_${q.ad_sequence}[0]"]`).val();
|
||
if (typeof parentVal === "undefined") parentVal = '';
|
||
allowedMethodValue = String(parentVal);
|
||
if (String(parentVal) !== String(q.question_plus)) show = false;
|
||
}
|
||
if (show) {
|
||
this.style.setProperty('display', 'block', 'important');
|
||
} else {
|
||
this.style.setProperty('display', 'none', 'important');
|
||
$(this).find('input,select').val('');
|
||
$(this).find('.form-desc').hide();
|
||
}
|
||
});
|
||
|
||
// --- UPDATE TITLE for Multiple Card
|
||
if (multiQs.length > 0) {
|
||
$('#multiple-container .multiple-card').each(function(cardIdx) {
|
||
let currentMethod = '';
|
||
if (methodSequence) {
|
||
const methodAnswers = answers[`activity_data_${methodSequence}`];
|
||
if (Array.isArray(methodAnswers)) {
|
||
currentMethod = methodAnswers[cardIdx] || methodAnswers[0] || '';
|
||
}
|
||
}
|
||
|
||
// Show/hide questions in the card as usual
|
||
$(this).find('.question-group').each(function() {
|
||
const seq = $(this).find('.question-row').data('sequence');
|
||
const q = questionMap[seq];
|
||
let show = true;
|
||
if (q && q.question_plus !== undefined && q.question_plus !== null && q.question_plus !== '') {
|
||
if (String(q.question_plus) !== String(currentMethod)) show = false;
|
||
}
|
||
if (q && q.ad_sequence) {
|
||
let parentVal = $(`[name="activity_data_${q.ad_sequence}[${cardIdx}]"]`).val();
|
||
if(!parentVal) parentVal = $(`[name="activity_data_${q.ad_sequence}[0]"]`).val();
|
||
if (String(parentVal) !== String(q.question_plus)) show = false;
|
||
}
|
||
if (show) {
|
||
let cardTitle = '';
|
||
let found = multiQs.find(q =>
|
||
q.title_group &&
|
||
String(q.question_plus) === String(currentMethod)
|
||
);
|
||
if (found) cardTitle = found.title_group;
|
||
if (!cardTitle) {
|
||
const fallback = multiQs.find(q => q.title_group);
|
||
cardTitle = fallback ? fallback.title_group : 'Data';
|
||
}
|
||
$(this).find('.card-title').text(cardTitle);
|
||
|
||
this.style.setProperty('display', 'block', 'important');
|
||
} else {
|
||
this.style.setProperty('display', 'none', 'important');
|
||
$(this).find('input,select').val('');
|
||
$(this).find('.form-desc').hide();
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
checkShowCardData1();
|
||
}
|
||
|
||
window.updateConditionalQuestions = updateConditionalQuestions;
|
||
|
||
// --- Initial setup
|
||
$('.form-desc-list').each(function() {
|
||
$(this).find('.form-desc').hide();
|
||
const $select = $(this).closest('.question-group').find('select.question-input');
|
||
const val = $select.val();
|
||
if (val) {
|
||
$(this).find(`.form-desc[data-form="${val}"]`).show();
|
||
}
|
||
});
|
||
if (multiQs.length > 0) refreshRemoveButtons();
|
||
updateConditionalQuestions();
|
||
|
||
$('#accordion-4').on('change', '.question-input', function() {
|
||
updateConditionalQuestions();
|
||
});
|
||
|
||
$('#collapse6').on('shown.bs.collapse hide.bs.collapse', function () {
|
||
updateConditionalQuestions();
|
||
});
|
||
})
|
||
.fail((xhr, status, error) => {
|
||
console.error('Gagal mengambil pertanyaan:', status, error);
|
||
$('#accordion-4').html(
|
||
'<p class="text-danger small">Terjadi kesalahan saat memuat pertanyaan.</p>'
|
||
);
|
||
});
|
||
}
|
||
|
||
function isFormReadyUntilStep6() {
|
||
// Step 1
|
||
const step1 = $('#sektor-dropdown').val() && $('#subsektor-dropdown').val() && $('#perhitungan-dropdown').val();
|
||
|
||
// Step 2
|
||
const step2 = $('[name="nama_kegiatan"]').val() && $('[name="jenis_kegiatan"]:checked').val();
|
||
|
||
// Step 6
|
||
let filledActivityData = true;
|
||
// $('[name^="activity_data_"]').each(function () {
|
||
// if (!$(this).val()) filledActivityData = false;
|
||
// });
|
||
|
||
return step1 && step2 && filledActivityData;
|
||
}
|
||
|
||
// -------- DOCUMENT READY --------
|
||
$(document).ready(async function() {
|
||
let mitigationId;
|
||
const kegiatanId = "{{ $mitigation->id }}";
|
||
const dataSektor = "{{ $mitigation->sektor }}";
|
||
const dataSubSektor = "{{ $mitigation->sub_sektor }}";
|
||
const dataKategori = "{{ $mitigation->kategori_perhitungan }}";
|
||
const dataSubActivity = "{{ $mitigation->kategori_sub_aktivitas }}";
|
||
|
||
const dataRAD = "{{ $mitigation->pelaksana_kegiatan_rad }}";
|
||
const dataKabkotId = "{{ $mitigation->kabupaten_kota_location }}";
|
||
const dataKecId = "{{ $mitigation->kecamatan_location }}";
|
||
const dataKelId = "{{ $mitigation->kelurahan_location }}";
|
||
const mitigation_id = "{{ $mitigation->mitigation_id }}";
|
||
mitigationId = mitigation_id;
|
||
|
||
const sessionSektor = "{{ $sessionData['sektor'] ?? '' }}";
|
||
const sessionSubSektor = "{{ $sessionData['sub_sektor'] ?? '' }}";
|
||
const sessionKategori = "{{ $sessionData['kategori_perhitungan'] ?? '' }}";
|
||
const sessionSubActivity = "{{ $sessionData['kategori_sub_aktivitas'] ?? '' }}";
|
||
|
||
const sessionRAD = "{{ $sessionData['pelaksana_kegiatan_rad'] ?? '' }}";
|
||
const sessionKabkotId = "{{ $sessionData['kabupaten_kota_location'] ?? '' }}";
|
||
const sessionKecId = "{{ $sessionData['kecamatan_location'] ?? '' }}";
|
||
const sessionKelId = "{{ $sessionData['kelurahan_location'] ?? '' }}";
|
||
const sessionMitigationId = "{{ $sessionData['mitigation_id'] ?? '' }}";
|
||
|
||
if(sessionMitigationId) {
|
||
mitigationId = sessionMitigationId;
|
||
}
|
||
|
||
initMap();
|
||
loadQuestion(mitigation_id);
|
||
loadKabupaten(dataKabkotId);
|
||
loadKecamatan(dataKabkotId, dataKecId);
|
||
loadKelurahan(dataKabkotId, dataKecId, dataKelId);
|
||
|
||
attachNumberFormatting('#target');
|
||
attachNumberFormatting('#realisasi', true);
|
||
attachNumberFormatting('#alokasi_apbn');
|
||
attachNumberFormatting('#alokasi_apbd');
|
||
attachNumberFormatting('#alokasi_swasta');
|
||
attachNumberFormatting('#alokasi_sumber_dana_lain');
|
||
attachNumberFormatting('#realisasi_apbn');
|
||
attachNumberFormatting('#realisasi_apbd');
|
||
attachNumberFormatting('#realisasi_swasta');
|
||
attachNumberFormatting('#realisasi_sumber_dana_lain');
|
||
|
||
// Initialize Select2 with Bootstrap 4 theme
|
||
$('.select2').select2({
|
||
width: '100%',
|
||
theme: 'bootstrap4',
|
||
placeholder: function() {
|
||
return $(this).data('placeholder');
|
||
}
|
||
});
|
||
|
||
$('.select2-checkbox').select2({
|
||
placeholder: "Pilih kaitan SDG",
|
||
closeOnSelect: false,
|
||
width: '100%',
|
||
templateResult: function (data) {
|
||
if (!data.id) return data.text;
|
||
return $('<span>' + data.text + '</span>');
|
||
},
|
||
templateSelection: function (data) {
|
||
return data.text;
|
||
}
|
||
});
|
||
|
||
$('.select2-checkbox').on('select2:open', function () {
|
||
setTimeout(function () {
|
||
$('.select2-dropdown').addClass('select2-checkbox');
|
||
}, 0);
|
||
});
|
||
|
||
await loadSektor(dataSektor);
|
||
|
||
if(dataSektor) {
|
||
$('#sektor-dropdown').val(dataSektor).trigger('change');
|
||
await loadSubSektor(dataSektor, dataSubSektor);
|
||
if(dataSubSektor) {
|
||
$('#subsektor-dropdown').val(dataSubSektor).trigger('change');
|
||
await loadPerhitungan(dataSektor, dataSubSektor, dataKategori);
|
||
if(dataKategori) {
|
||
$('#perhitungan-dropdown').val(dataKategori).trigger('change');
|
||
await loadSubAktivitas(dataSektor, dataSubSektor, dataKategori, dataSubActivity);
|
||
|
||
if (dataSubActivity && dataSubActivity !== "null") {
|
||
$('#sub_activity').show();
|
||
$('#subactivity-dropdown').val(dataSubActivity).trigger('change');
|
||
await loadRAD(dataSubSektor, dataRAD);
|
||
if(checkData()) {
|
||
loadQuestion(mitigation_id);
|
||
window.updateConditionalQuestions(true)
|
||
}
|
||
} else {
|
||
$('#sub_activity').hide();
|
||
await loadRAD(dataSubSektor, dataRAD);
|
||
if(checkData()) {
|
||
loadQuestion(mitigation_id);
|
||
window.updateConditionalQuestions(true)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
let sector = sessionSektor;
|
||
let subSector = sessionSubSektor;
|
||
$('#sektor-dropdown').on('change', async function() {
|
||
sector = $(this).val();
|
||
$('#perhitungan-dropdown').empty().append('<option value="">Pilih Kategori/ Mode Perhitungan</option>');
|
||
if(sector){
|
||
await loadSubSektor(sector);
|
||
} else {
|
||
$('#subsektor-dropdown').empty().append('<option value="">Pilih Sub-Sektor</option>');
|
||
}
|
||
});
|
||
|
||
$('#subsektor-dropdown').on('change', async function() {
|
||
subSector = $(this).val();
|
||
if(subSector){
|
||
await loadRAD(subSector);
|
||
await loadPerhitungan(sector, subSector);
|
||
} else {
|
||
$('#rad-dropdown').empty().append('<option value="">Tambah kegiatan di luar RAD</option>');
|
||
$('#perhitungan-dropdown').empty().append('<option value="">Pilih Kategori/ Mode Perhitungan</option>');
|
||
}
|
||
});
|
||
|
||
$('#perhitungan-dropdown').on('change', async function() {
|
||
const activity = $(this).val();
|
||
if(activity) {
|
||
await loadSubAktivitas(sector, subSector, activity)
|
||
}
|
||
|
||
let selectedOption = $(this).find(':selected');
|
||
let mitigation_id = selectedOption.data('id');
|
||
mitigationId = mitigation_id;
|
||
if(checkData()) {
|
||
const sector = $('#sektor-dropdown').val() || sessionSektor;
|
||
const subSector = $('#subsektor-dropdown').val() || sessionSubSektor;
|
||
const category = $('#perhitungan-dropdown').val() || sessionKategori;
|
||
const subactivity = $('#subactivity-dropdown').val() || sessionSubActivity;
|
||
loadRAD(subSector);
|
||
loadQuestion(mitigation_id);
|
||
window.updateConditionalQuestions(true)
|
||
} else {
|
||
$('#section4').hide();
|
||
}
|
||
});
|
||
|
||
$('#subactivity-dropdown').on('change', function() {
|
||
let selectedOption = $(this).find(':selected');
|
||
|
||
showSubActivityDesc(selectedOption.data('desc'));
|
||
let mitigation_id = selectedOption.data('id');
|
||
mitigationId = mitigation_id;
|
||
|
||
if(checkData()) {
|
||
const sector = $('#sektor-dropdown').val() || sessionSektor;
|
||
const subSector = $('#subsektor-dropdown').val() || sessionSubSektor;
|
||
const category = $('#perhitungan-dropdown').val() || sessionKategori;
|
||
const subactivity = $('#subactivity-dropdown').val() || sessionSubActivity;
|
||
loadRAD(subSector);
|
||
loadQuestion(mitigation_id);
|
||
window.updateConditionalQuestions(true)
|
||
} else {
|
||
$('#section4').hide();
|
||
}
|
||
})
|
||
|
||
$('#kabupaten').on('change', function() {
|
||
const kabkot_id = $('#kabupaten').val() || sessionKabkotId;
|
||
loadKecamatan(kabkot_id);
|
||
});
|
||
|
||
$('#kecamatan').on('change', function() {
|
||
const kabkot_id = $('#kabupaten').val() || sessionKabkotId;
|
||
const kec_id = $('#kecamatan').val() || sessionKecId;
|
||
loadKelurahan(kabkot_id, kec_id);
|
||
});
|
||
|
||
// Handle partial save and accordion navigation
|
||
$('.btn-submit[data-target="#collapse2"]').on('click', function(e){
|
||
e.preventDefault();
|
||
|
||
let formData = $('#collapse1').find('input, select, textarea').serialize();
|
||
formData += '&mitigation_id=' + encodeURIComponent(mitigationId);
|
||
formData += '&_token=' + $('meta[name="csrf-token"]').attr('content');
|
||
|
||
$.post("{{ route('mitigasi-form.store-part1') }}", formData)
|
||
.done(response => {
|
||
if(response.success){
|
||
$('#collapse1').one('hidden.bs.collapse', () => {
|
||
$('#collapse2').collapse('show');
|
||
});
|
||
$('#collapse1').collapse('hide');
|
||
} else {
|
||
alert(response.message || 'Gagal Menyimpan data bagian Informasi Umum');
|
||
}
|
||
})
|
||
.fail(xhr => {
|
||
let msg = 'Terjadi kesalahan saat menyimpan data Informasi Umum';
|
||
if (xhr.responseJSON && xhr.responseJSON.message) {
|
||
msg = xhr.responseJSON.message;
|
||
}
|
||
alert(msg);
|
||
});
|
||
});
|
||
|
||
$('.btn-submit[data-target="#collapse3"]').click(function(e) {
|
||
e.preventDefault();
|
||
|
||
let formData = $('#collapse2').find('input, select, textarea').serialize();
|
||
formData += '&_token=' + $('meta[name="csrf-token"]').attr('content');
|
||
|
||
$.post("{{ route('mitigasi-form.store-part2') }}", formData)
|
||
.done(function(response) {
|
||
if (response.success) {
|
||
$('#collapse2').one('hidden.bs.collapse', () => {
|
||
$('#collapse3').collapse('show');
|
||
});
|
||
$('#collapse2').collapse('hide');
|
||
} else {
|
||
alert(response.message || 'Gagal menyimpan data bagian Data Umum Kegiatan Mitigasi');
|
||
}
|
||
})
|
||
.fail(function() {
|
||
alert('Terjadi kesalahan saat menyimpan Data Umum Kegiatan Mitigasi');
|
||
});
|
||
});
|
||
|
||
$('.btn-submit[data-target="#collapse4"]').click(function(e) {
|
||
e.preventDefault();
|
||
|
||
let formData = $('#collapse3').find('input, select, textarea').serialize();
|
||
formData += '&_token=' + $('meta[name="csrf-token"]').attr('content');
|
||
|
||
$.post("{{ route('mitigasi-form.store-part3') }}", formData)
|
||
.done(function(response) {
|
||
if (response.success) {
|
||
$('#collapse3').one('hidden.bs.collapse', () => {
|
||
$('#collapse4').collapse('show');
|
||
});
|
||
$('#collapse3').collapse('hide');
|
||
} else {
|
||
alert(response.message || 'Gagal menyimpan data bagian Informasi Alokasi/Realisasi Anggaran');
|
||
}
|
||
})
|
||
.fail(function() {
|
||
alert('Terjadi kesalahan saat menyimpan Informasi Alokasi/Realisasi Anggaran');
|
||
});
|
||
});
|
||
|
||
$('.btn-submit[data-target="#collapse5"]').click(function(e) {
|
||
e.preventDefault();
|
||
|
||
let formData = new URLSearchParams();
|
||
document.querySelectorAll('#collapse4 input, #collapse4 select, #collapse4 textarea').forEach(input => {
|
||
if (input.name) {
|
||
formData.append(input.name, input.value);
|
||
}
|
||
});
|
||
|
||
formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
|
||
|
||
fetch("{{ route('mitigasi-form.store-part4') }}", {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||
body: formData.toString()
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
$('#collapse4').one('hidden.bs.collapse', () => {
|
||
$('#collapse5').collapse('show');
|
||
});
|
||
$('#collapse4').collapse('hide');
|
||
} else {
|
||
alert(data.message || 'Gagal menyimpan data bagian Form Sumber Data');
|
||
}
|
||
})
|
||
.catch(() => {
|
||
alert('Terjadi kesalahan saat menyimpan Form Sumber Data');
|
||
});
|
||
});
|
||
|
||
$('.btn-submit[data-target="#collapse6"]').click(function(e) {
|
||
e.preventDefault();
|
||
|
||
let formData = $('#collapse5').find('input, select, textarea').serialize();
|
||
formData += '&_token=' + $('meta[name="csrf-token"]').attr('content');
|
||
|
||
$.post("{{ route('mitigasi-form.store-part5') }}", formData)
|
||
.done(function(response) {
|
||
if(response.success) {
|
||
$('#collapse5').one('hidden.bs.collapse', () => {
|
||
$('#collapse6').collapse('show');
|
||
});
|
||
$('#collapse5').collapse('hide');
|
||
} else {
|
||
alert(response.message || 'Gagal menyimpan data bagian Form Data Lokasi Kegiatan Mitigasi');
|
||
}
|
||
})
|
||
.fail(function() {
|
||
alert('Terjadi kesalahan saat menyimpan Form Data Lokasi Kegiatan Mitigasi');
|
||
});
|
||
});
|
||
|
||
$(document).on('click', '#final-submit', function() {
|
||
if (!isFormReadyUntilStep6()) {
|
||
alert('Harap lengkapi semua data sampai langkah ke-4 sebelum submit.');
|
||
return;
|
||
}
|
||
|
||
// Tambahkan & sebelum mitigation_id dan encodeURIComponent
|
||
const formData = $('form').serialize()
|
||
+ '&mitigation_id=' + encodeURIComponent(mitigationId)
|
||
+ '&_method=PUT';
|
||
|
||
$.ajax({
|
||
url: "/mitigasi/" + kegiatanId,
|
||
method: 'POST',
|
||
data: formData,
|
||
headers: {
|
||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
|
||
},
|
||
success(response) {
|
||
if (response.success) {
|
||
alert('Data berhasil disimpan!');
|
||
window.location.href = response.redirect;
|
||
} else {
|
||
alert(response.message || 'Gagal menyimpan data.');
|
||
}
|
||
},
|
||
error(xhr) {
|
||
console.error(xhr);
|
||
alert('Terjadi kesalahan saat menyimpan data.');
|
||
}
|
||
});
|
||
});
|
||
|
||
});
|
||
</script>
|
||
@endsection |