462 lines
24 KiB
PHP
462 lines
24 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Tambah Pengumuman Kegiatan';
|
|
$subTitle = 'Tambah Data Pengumuman Kegiatan';
|
|
$script = '<script>
|
|
// Form validation and date picker initialization
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Initialize date picker if using flatpickr
|
|
if (typeof flatpickr !== "undefined") {
|
|
flatpickr("#tanggal_mulai", {
|
|
dateFormat: "Y-m-d",
|
|
minDate: "today"
|
|
});
|
|
}
|
|
|
|
// Form validation
|
|
const form = document.getElementById("createForm");
|
|
if (form) {
|
|
form.addEventListener("submit", function(e) {
|
|
const requiredFields = form.querySelectorAll("[required]");
|
|
let isValid = true;
|
|
|
|
requiredFields.forEach(field => {
|
|
if (!field.value.trim()) {
|
|
isValid = false;
|
|
field.classList.add("is-invalid");
|
|
} else {
|
|
field.classList.remove("is-invalid");
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
alert("Mohon lengkapi semua field yang wajib diisi");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>';
|
|
@endphp
|
|
|
|
@section('content')
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4">
|
|
<div>
|
|
<h5 class="mb-0">Tambah Pengumuman Kegiatan</h5>
|
|
<p class="text-muted mb-0">Masukkan informasi lengkap mengenai kegiatan yang akan diumumkan</p>
|
|
</div>
|
|
<div>
|
|
<a href="{{ route('pengumuman.index') }}" class="btn btn-outline-primary">
|
|
<i class="ri-arrow-left-line"></i> Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="createForm" action="{{ route('pengumuman.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="row">
|
|
<!-- Left Column -->
|
|
<div class="col-md-8">
|
|
<!-- Basic Information -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-primary-subtle">
|
|
<h6 class="mb-0 text-primary">Informasi Dasar</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="jenis_dokumen" class="form-label">Jenis Dokumen <span class="text-danger">*</span></label>
|
|
<select class="form-select @error('jenis_dokumen') is-invalid @enderror"
|
|
id="jenis_dokumen" name="jenis_dokumen" required>
|
|
<option value="">Pilih Jenis Dokumen</option>
|
|
<option value="AMDAL" {{ old('jenis_dokumen') == 'AMDAL' ? 'selected' : '' }}>AMDAL</option>
|
|
<option value="Addendum" {{ old('jenis_dokumen') == 'Addendum' ? 'selected' : '' }}>Addendum</option>
|
|
<option value="UKL-UPL" {{ old('jenis_dokumen') == 'UKL-UPL' ? 'selected' : '' }}>UKL-UPL</option>
|
|
</select>
|
|
@error('jenis_dokumen')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="nama_kegiatan" class="form-label">Nama Kegiatan <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control @error('nama_kegiatan') is-invalid @enderror"
|
|
id="nama_kegiatan" name="nama_kegiatan" value="{{ old('nama_kegiatan') }}" required>
|
|
@error('nama_kegiatan')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="pemrakarsa" class="form-label">Pemrakarsa/Perusahaan <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control @error('pemrakarsa') is-invalid @enderror"
|
|
id="pemrakarsa" name="pemrakarsa" value="{{ old('pemrakarsa') }}" required>
|
|
@error('pemrakarsa')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="bidang_usaha" class="form-label">Bidang Usaha <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control @error('bidang_usaha') is-invalid @enderror"
|
|
id="bidang_usaha" name="bidang_usaha" value="{{ old('bidang_usaha') }}" required>
|
|
@error('bidang_usaha')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="deskripsi_kegiatan" class="form-label">Deskripsi Kegiatan <span class="text-danger">*</span></label>
|
|
<textarea class="form-control @error('deskripsi_kegiatan') is-invalid @enderror"
|
|
id="deskripsi_kegiatan" name="deskripsi_kegiatan" rows="4" required>{{ old('deskripsi_kegiatan') }}</textarea>
|
|
@error('deskripsi_kegiatan')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="dampak_potensial" class="form-label">Dampak Potensial <span class="text-danger">*</span></label>
|
|
<textarea class="form-control @error('dampak_potensial') is-invalid @enderror"
|
|
id="dampak_potensial" name="dampak_potensial" rows="3" required>{{ old('dampak_potensial') }}</textarea>
|
|
@error('dampak_potensial')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Information -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-primary-subtle">
|
|
<h6 class="mb-0 text-primary">Informasi Lokasi</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label for="kabupaten" class="form-label">Kabupaten <span class="text-danger">*</span></label>
|
|
<select class="form-select @error('kabupaten') is-invalid @enderror"
|
|
id="kabupaten" name="kabupaten" required onchange="loadKecamatan()">
|
|
<option value="">Pilih Kabupaten</option>
|
|
@foreach($kabupaten as $kab)
|
|
<option value="{{ $kab->KabupatenId }}" {{ old('kabupaten') == $kab->KabupatenId ? 'selected' : '' }}>
|
|
{{ $kab->NamaKabupaten }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('kabupaten')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="kecamatan" class="form-label">Kecamatan <span class="text-danger">*</span></label>
|
|
<select class="form-select @error('kecamatan') is-invalid @enderror"
|
|
id="kecamatan" name="kecamatan" required onchange="loadKelurahan()">
|
|
<option value="">Pilih Kecamatan</option>
|
|
</select>
|
|
@error('kecamatan')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="kelurahan" class="form-label">Kelurahan <span class="text-danger">*</span></label>
|
|
<select class="form-select @error('kelurahan') is-invalid @enderror"
|
|
id="kelurahan" name="kelurahan" required>
|
|
<option value="">Pilih Kelurahan</option>
|
|
</select>
|
|
@error('kelurahan')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="lokasi_kegiatan" class="form-label">Lokasi Kegiatan</label>
|
|
<textarea type="text" class="form-control @error('lokasi_kegiatan') is-invalid @enderror"
|
|
id="lokasi_kegiatan" name="lokasi_kegiatan" value="{{ old('lokasi_kegiatan') }}"></textarea>
|
|
@error('lokasi_kegiatan')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="deskripsi_lokasi" class="form-label">Deskripsi Lokasi <span class="text-danger">*</span></label>
|
|
<textarea class="form-control @error('deskripsi_lokasi') is-invalid @enderror"
|
|
id="deskripsi_lokasi" name="deskripsi_lokasi" rows="3" required>{{ old('deskripsi_lokasi') }}</textarea>
|
|
@error('deskripsi_lokasi')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="latitude" class="form-label">Latitude</label>
|
|
<input type="number" step="any" class="form-control @error('latitude') is-invalid @enderror"
|
|
id="latitude" name="latitude" value="{{ old('latitude') }}" placeholder="-6.2000000">
|
|
@error('latitude')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="longitude" class="form-label">Longitude</label>
|
|
<input type="number" step="any" class="form-control @error('longitude') is-invalid @enderror"
|
|
id="longitude" name="longitude" value="{{ old('longitude') }}" placeholder="106.8000000">
|
|
@error('longitude')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="col-md-4">
|
|
<!-- Settings -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-primary-subtle">
|
|
<h6 class="mb-0 text-primary">Pengaturan</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="tanggal_mulai" class="form-label">Tanggal Mulai Periode <span class="text-danger">*</span></label>
|
|
<input type="date" class="form-control @error('tanggal_mulai') is-invalid @enderror"
|
|
id="tanggal_mulai" name="tanggal_mulai" value="{{ old('tanggal_mulai') }}" required>
|
|
<small class="text-muted">Periode berakhir otomatis setelah 10 hari kerja</small>
|
|
@error('tanggal_mulai')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="skala_besaran" class="form-label">Skala/Besaran</label>
|
|
<input type="text" class="form-control @error('skala_besaran') is-invalid @enderror"
|
|
id="skala_besaran" name="skala_besaran" value="{{ old('skala_besaran') }}"
|
|
placeholder="1000 ton/tahun">
|
|
@error('skala_besaran')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="kewenangan" class="form-label">Kewenangan <span class="text-danger">*</span></label>
|
|
<select class="form-select @error('kewenangan') is-invalid @enderror"
|
|
id="kewenangan" name="kewenangan" required>
|
|
<option value="">Pilih Kewenangan</option>
|
|
<option value="Pusat" {{ old('kewenangan') == 'Pusat' ? 'selected' : '' }}>Pusat</option>
|
|
<option value="Provinsi" {{ old('kewenangan') == 'Provinsi' ? 'selected' : '' }}>Provinsi</option>
|
|
<option value="Daerah" {{ old('kewenangan') == 'Daerah' ? 'selected' : '' }}>Daerah</option>
|
|
</select>
|
|
@error('kewenangan')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Hidden status field with default value -->
|
|
<input type="hidden" name="status" value="aktif">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-primary-subtle">
|
|
<h6 class="mb-0 text-primary">Preview Periode</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="text-center">
|
|
<div class="text-muted small mb-2">Periode Pengumuman</div>
|
|
<div id="periode-preview" class="fw-bold text-primary">
|
|
Pilih tanggal mulai untuk melihat periode
|
|
</div>
|
|
<small class="text-muted">
|
|
*Menghitung 10 hari kerja (tidak termasuk sabtu, minggu, dan tanggal merah)
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="d-flex justify-content-end gap-2 mt-4">
|
|
<a href="{{ route('pengumuman.index') }}" class="btn btn-outline-secondary">
|
|
<i class="ri-close-line"></i> Batal
|
|
</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="ri-save-line"></i> Simpan Pengumuman
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Preview periode calculation
|
|
document.getElementById('tanggal_mulai').addEventListener('change', function() {
|
|
const startDate = this.value;
|
|
if (startDate) {
|
|
// You can implement AJAX call here to get calculated end date
|
|
// For now, just show a simple preview
|
|
const preview = document.getElementById('periode-preview');
|
|
const start = new Date(startDate);
|
|
const options = { day: 'numeric', month: 'short', year: 'numeric' };
|
|
const startFormatted = start.toLocaleDateString('id-ID', options);
|
|
|
|
preview.innerHTML = `${startFormatted} - <span class="text-muted">Menghitung...</span>`;
|
|
|
|
// AJAX call to calculate end date
|
|
fetch('/admin/pengumuman/calculate-period', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
|
},
|
|
body: JSON.stringify({ start_date: startDate })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
preview.innerHTML = data.periode;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
preview.innerHTML = `${startFormatted} - (Error calculating)`;
|
|
});
|
|
}
|
|
});
|
|
|
|
// Load kecamatan based on selected kabupaten
|
|
function loadKecamatan() {
|
|
const kabupatenSelect = document.getElementById('kabupaten');
|
|
const kecamatanSelect = document.getElementById('kecamatan');
|
|
const kelurahanSelect = document.getElementById('kelurahan');
|
|
|
|
if (!kabupatenSelect || !kecamatanSelect || !kelurahanSelect) {
|
|
console.error('Required select elements not found');
|
|
return;
|
|
}
|
|
|
|
const selectedKabupaten = kabupatenSelect.value;
|
|
|
|
// Clear kecamatan and kelurahan
|
|
kecamatanSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
|
|
kelurahanSelect.innerHTML = '<option value="">Pilih Kelurahan</option>';
|
|
|
|
if (selectedKabupaten) {
|
|
// Show loading state
|
|
kecamatanSelect.innerHTML = '<option value="">Loading...</option>';
|
|
|
|
// Get CSRF token
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]');
|
|
const token = csrfToken ? csrfToken.getAttribute('content') : '';
|
|
|
|
// Fetch kecamatan from database
|
|
const url = `/admin/pengumuman/get-kecamatan?kabupaten_id=${selectedKabupaten}`;
|
|
|
|
fetch(url, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-TOKEN': token
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.text().then(text => {
|
|
throw new Error(`HTTP ${response.status}: ${text}`);
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
kecamatanSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
|
|
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
data.forEach(kecamatan => {
|
|
const option = document.createElement('option');
|
|
option.value = kecamatan.KecamatanId;
|
|
option.textContent = kecamatan.NamaKecamatan;
|
|
kecamatanSelect.appendChild(option);
|
|
});
|
|
} else {
|
|
kecamatanSelect.innerHTML = '<option value="">No data available</option>';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading kecamatan:', error);
|
|
kecamatanSelect.innerHTML = '<option value="">Error loading data</option>';
|
|
});
|
|
}
|
|
}
|
|
|
|
// Load kelurahan based on selected kecamatan
|
|
function loadKelurahan() {
|
|
const kecamatanSelect = document.getElementById('kecamatan');
|
|
const kelurahanSelect = document.getElementById('kelurahan');
|
|
|
|
if (!kecamatanSelect || !kelurahanSelect) {
|
|
console.error('Required select elements not found');
|
|
return;
|
|
}
|
|
|
|
const selectedKecamatan = kecamatanSelect.value;
|
|
|
|
// Clear kelurahan
|
|
kelurahanSelect.innerHTML = '<option value="">Pilih Kelurahan</option>';
|
|
|
|
if (selectedKecamatan) {
|
|
// Show loading state
|
|
kelurahanSelect.innerHTML = '<option value="">Loading...</option>';
|
|
|
|
// Get CSRF token
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]');
|
|
const token = csrfToken ? csrfToken.getAttribute('content') : '';
|
|
|
|
// Fetch kelurahan from database
|
|
const url = `/admin/pengumuman/get-kelurahan?kecamatan_id=${selectedKecamatan}`;
|
|
|
|
fetch(url, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-TOKEN': token
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.text().then(text => {
|
|
throw new Error(`HTTP ${response.status}: ${text}`);
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
kelurahanSelect.innerHTML = '<option value="">Pilih Kelurahan</option>';
|
|
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
data.forEach(kelurahan => {
|
|
const option = document.createElement('option');
|
|
option.value = kelurahan.KelurahanId;
|
|
option.textContent = kelurahan.NamaKelurahan;
|
|
kelurahanSelect.appendChild(option);
|
|
});
|
|
} else {
|
|
kelurahanSelect.innerHTML = '<option value="">No data available</option>';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading kelurahan:', error);
|
|
kelurahanSelect.innerHTML = '<option value="">Error loading data</option>';
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
@endsection
|