@extends('siswa.layouts.app')
@section('content')
<div class="row">
<div class="col-md-12">
<form action="{{ route('siswa.biodata.update') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Ubah Biodata</h4>
<p>Anda hanya diperkenankan mengubah biodata sebelum status data dan
berkas diverifikasi
</p>
</div>
<div class="row">
<div class="col-md-12">
<ul class="d-flex nav nav-pills mb-0 text-center biodata-tab" data-toggle="slider-tab"
id="biodata-pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active show" data-bs-toggle="tab" href="#biodata-tab" role="tab"
aria-selected="false">Biodata</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#berkas-tab" role="tab"
aria-selected="false">Berkas</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body table-responsive">
<div class="row">
<div class="col-md-12">
<div class="profile-content tab-content">
<div id="biodata-tab" class="tab-pane fade active show">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-sm-6 ">
<div class="form-group">
<label>Nama Lengkap <span class="red-dot"> *</span>:</label>
<input required name="nama" type="text"
class="form-control" placeholder="masukan nama lengkap"
value="{{ old('nama', $siswa->nama) }}">
</div>
<div class="form-group">
<label>Tempat Lahir <span class="red-dot"> *</span>:</label>
<input required name="tempat_lahir" type="text"
class="form-control" placeholder="masukan tempat lahir"
value="{{ old('tempat_lahir', $siswa->tempat_lahir) }}">
</div>
</div>
<div class="col-sm-6 ">
<div class="form-group">
<label>Jenis Kelamin <span class="red-dot">*</span>:</label>
<div class="form-control">
<input required id="laki-laki" name="jenis_kelamin"
value="L" type="radio"
@if (old('jenis_kelamin', $siswa->jenis_kelamin) == 'L') checked @endif>
<label for="laki-laki">Laki-Laki</label>
<input id="perempuan" name="jenis_kelamin" value="P"
type="radio"
@if (old('jenis_kelamin', $siswa->jenis_kelamin) == 'P') checked @endif>
<label for="perempuan">Perempuan</label>
</div>
</div>
<div class="form-group">
<label>Tanggal Lahir <span class="red-dot">*</span>:</label>
<input required name="tanggal_lahir" type="date"
class="form-control"
value="{{ old('tanggal_lahir', $siswa->tanggal_lahir) }}">
</div>
</div>
</div>
<div class="form-group">
<label>Koordinat <span class="red-dot">*</span>:</label>
<div style="height: 500px!important;width: 100%;" id="map1"></div>
<br>
<button type="button" class="btn btn-primary" id="btnGetLoc"><i class="fas fa-map-marker"></i> Lokasi
Saat Ini</button>
</div>
<div class="row">
<div class="col-sm-6 ">
<div class="form-group">
<label>Lintang <span class="red-dot" style="font-size: 11px;"> *
Terisi otomatis
dari
pilihan pada
map</span>:</label>
<input required readonly name="lintang" id="lat1"
type="text" class="form-control"
value="{{ old('lintang', $siswa->lintang) }}">
</div>
</div>
<div class="col-sm-6 ">
<div class="form-group">
<label>Bujur <span class="red-dot" style="font-size: 11px;"> *
Terisi otomatis
dari
pilihan pada
map</span>:</label>
<input required readonly name="bujur" id="lng1"
type="text" class="form-control"
value="{{ old('bujur', $siswa->bujur) }}">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 ">
<div class="form-group">
<label>Kabupaten/kota <span class="red-dot"> *</span>:</label>
<select required name="kabupaten_id" id="kabupaten_id"
class="form-control">
<option value="">Pilih Kabupaten/Kota</option>
@foreach ($kabupatens as $kabupaten)
<option value="{{ $kabupaten->id }}"
@if (old('kabupaten_id', $siswa->kelurahan->kecamatan->kabupaten_id) == $kabupaten->id) selected @endif>
{{ $kabupaten->nama_kabupaten }}
</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 ">
<div class="form-group">
<label>Kecamatan <span class="red-dot"> *</span>:</label>
<select required name="kecamatan_id" id="kecamatan_id"
class="form-control">
<option value="">Pilih Kecamatan</option>
@foreach ($siswa->kelurahan->kecamatan->kabupaten->kecamatans as $item)
<option
@if ($siswa->kelurahan->kecamatan_id == $item->id) selected @endif
value="{{ $item->id }}">
{{ $item->nama_kelurahan }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-sm-6 ">
<div class="form-group">
<label>kelurahan/Desa<span class="red-dot"> *</span>:</label>
<select required name="kelurahan_id" id="kelurahan_id"
class="form-control">
<option value="">Pilih Kelurahan</option>
@foreach ($siswa->kelurahan->kecamatan->kelurahan as $item)
<option
@if ($siswa->kelurahan_id == $item->id) selected @endif
value="{{ $item->id }}">
{{ $item->nama_kelurahan }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>Alamat <span class="red-dot" style="font-size: 11px;">
*</span>:</label>
<input required name="alamat" id="alamat" type="text"
class="form-control"
value="{{ old('alamat', $siswa->alamat) }}">
</div>
</div>
</div>
<div class="row ">
<div class="col-sm-4">
<div class="form-group">
<label>RT/RW <span class="red-dot"> *</span>:</label>
<div class="row">
<div class="col-sm-4">
<input required name="rt" type="number"
class="form-control col-sm-6" placeholder="RT"
value="{{ old('rt', $siswa->rt) }}">
</div>
<div class="col-sm-4">
<input name="rw" type="number"
class="form-control col-sm-6" placeholder="RW"
value="{{ old('rw', $siswa->rw) }}">
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-sm-12 ">
<div class="form-group">
<label>No.KK <span class="red-dot"> *</span>:</label>
<input required name="no_kk" type="number"
class="form-control" placeholder="masukan Nomor KK"
value="{{ old('no_kk', $siswa->no_kk) }}">
</div>
</div>
<div class="col-sm-12 mt-2">
<div class="form-group">
<label>Nama Orang Tua/Wali <span class="red-dot">
*</span>:</label>
<input required name="nama_ortu" type="text"
class="form-control" placeholder="masukan Nama"
value="{{ old('nama_ortu', $siswa->nama_ortu) }}">
</div>
<div class="form-group">
<label>No.Akta Kelahiran <span class="red-dot">
*</span>:</label>
<input required name="no_akta_kelahiran" type="number"
class="form-control" placeholder="masukan Nomor Akta"
maxlength="17"
value="{{ old('no_akta_kelahiran', $siswa->no_akta_kelahiran) }}">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="berkas-tab" class="tab-pane fade ">
<div class="row ">
<div class="col-md-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Kartu Keluarga <span class="red-dot"> *</span>:</label>
<input name="kartu_keluarga" type="file"
class="form-control" accept=".pdf,.jpeg,.png,.jpg"
alt="Berkas Kartu Keluarga">
@error('kartu_keluarga')
<span class="text-danger">{{ $message }}</span>
@enderror
@if ($siswa->hasMedia('kartu_keluargas'))
<a href="{{ $siswa->getFirstMediaUrl('kartu_keluargas') }}"
target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
Berkas</a>
@endif
</div>
<div class="form-group">
<label>Surat Keterangan Orang Tua/wali <span class="red-dot">
*</span>:</label>
<input name="surat_keterangan_ortu" type="file"
class="form-control" accept=".pdf,.jpeg,.png,.jpg"
alt="Berkas Surat Keterangan Orang Tua/wali">
@error('surat_keterangan_ortu')
<span class="text-danger">{{ $message }}</span>
@enderror
@if ($siswa->hasMedia('surat_keterangan_ortus'))
<a href="{{ $siswa->getFirstMediaUrl('surat_keterangan_ortus') }}"
target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
Berkas</a>
@endif
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Kartu Keluarga lama (jika terjadi perubahan) :</label>
<input name="kartu_keluarga_lama" type="file"
accept=".pdf,.jpeg,.png,.jpg" class="form-control">
@error('surat_keterangan_ortu')
<span class="text-danger">{{ $message }}</span>
@enderror
@if ($siswa->hasMedia('kartu_keluarga_lamas'))
<a href="{{ $siswa->getFirstMediaUrl('kartu_keluarga_lamas') }}"
target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
Berkas</a>
@endif
</div>
<div class="form-group">
<label>Surat Keterangan Panti Asuhan :</label>
<input name="surat_keterangan_panti" type="file"
accept=".pdf,.jpeg,.png,.jpg" class="form-control">
@error('surat_keterangan_panti')
<span class="text-danger">{{ $message }}</span>
@enderror
@if ($siswa->hasMedia('surat_keterangan_pantis'))
<a href="{{ $siswa->getFirstMediaUrl('surat_keterangan_pantis') }}"
target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
Berkas</a>
@endif
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Kartu Keluarga Sejahtera (KKS) :</label>
<input name="kartu_keluraga_sejahtera" type="file"
accept=".pdf,.jpeg,.png,.jpg" class="form-control">
@error('kartu_keluraga_sejahtera')
<span class="text-danger">{{ $message }}</span>
@enderror
@if ($siswa->hasMedia('kartu_keluraga_sejahteras'))
<a href="{{ $siswa->getFirstMediaUrl('kartu_keluraga_sejahteras') }}"
target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
Berkas</a>
@endif
</div>
<div class="form-group">
<label>Program Keluarga Harapan (PKH) :</label>
<input name="program_keluarga_harapan" type="file"
accept=".pdf,.jpeg,.png,.jpg" class="form-control">
@error('program_keluarga_harapan')
<span class="text-danger">{{ $message }}</span>
@enderror
@if ($siswa->hasMedia('program_keluarga_harapans'))
<a href="{{ $siswa->getFirstMediaUrl('program_keluarga_harapans') }}"
target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
Berkas</a>
@endif
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Kartu Indonesia Pintar (KIP) :</label>
<input name="kartu_indonesia_pintar" type="file"
accept=".pdf,.jpeg,.png,.jpg" class="form-control">
@error('kartu_indonesia_pintar')
<span class="text-danger">{{ $message }}</span>
@enderror
@if ($siswa->hasMedia('kartu_indonesia_pintars'))
<a href="{{ $siswa->getFirstMediaUrl('kartu_indonesia_pintars') }}"
target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
Berkas</a>
@endif
</div>
<div class="form-group">
<label>Surat Keterangan Pernyataan Bersedia Di Proses Secara Hukum
(apabila terbukti memalsukan
bukti keikutsertaan dalam program keluarga tidak mampu dari
Pemerintah Pusat atau Pemerinah
Daerah) : <span class="red-dot"> *</span></label>
<input
name="surat_keterangan_pernyataan_bersedia_di_proses_secara_hukum"
type="file" accept=".pdf,.jpeg,.png,.jpg"
class="form-control">
@error('surat_keterangan_pernyataan_bersedia_di_proses_secara_hukum')
<span class="text-danger">{{ $message }}</span>
@enderror
@if ($siswa->hasMedia('surat_keterangan_pernyataan_bersedia_di_proses_secara_hukums'))
<a href="{{ $siswa->getFirstMediaUrl('surat_keterangan_pernyataan_bersedia_di_proses_secara_hukums') }}"
target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
Berkas</a>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success"><i class="fas fa-save"></i> Simpan Data</button>
</div>
</div>
</form>
</div>
</div>
@endsection
@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
@endpush
@push('scripts')
<script>
(g => {
var h, a, k, p = "The Google Maps JavaScript API",
c = "google",
l = "importLibrary",
q = "__ib__",
m = document,
b = window;
b = b[c] || (b[c] = {});
var d = b.maps || (b.maps = {}),
r = new Set,
e = new URLSearchParams,
u = () => h || (h = new Promise(async (f, n) => {
await (a = m.createElement("script"));
e.set("libraries", [...r] + "");
for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
e.set("callback", c + ".maps." + q);
a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
d[q] = f;
a.onerror = () => h = n(Error(p + " could not load."));
a.nonce = m.querySelector("script[nonce]")?.nonce || "";
m.head.append(a)
}));
d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() =>
d[l](f, ...n))
})({
key: "AIzaSyCUZ860nY0z3XKAolxEBLXGSJM9p6Y04kM",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
let map;
let marker;
async function initMap() {
const {
Map
} = await google.maps.importLibrary("maps");
var myLatlng = new google.maps.LatLng({{ $siswa->lintang }}, {{ $siswa->bujur }});
map = new Map(document.getElementById("map1"), {
center: myLatlng,
zoom: 15,
});
marker = new google.maps.Marker({
position: myLatlng,
map,
title: "Hello World!",
});
//change marker on click
map.addListener("click", (mapsMouseEvent) => {
// Get the coordinates of the click
const lat = mapsMouseEvent.latLng.lat();
const lng = mapsMouseEvent.latLng.lng();
//change marker position
marker.setPosition(mapsMouseEvent.latLng);
//change input value
document.getElementById('lat1').value = lat;
document.getElementById('lng1').value = lng;
});
}
initMap();
//btnGetLoc get current location
document.getElementById('btnGetLoc').addEventListener('click', () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
//change marker position
marker.setPosition(pos);
//change input value
document.getElementById('lat1').value = pos.lat;
document.getElementById('lng1').value = pos.lng;
//change map center
map.setCenter(pos);
}, () => {
alert('Error: The Geolocation service failed.');
});
} else {
alert('Error: Your browser doesn\'t support geolocation.');
}
});
// Api Call Data Wilayah
$("#kabupaten_id").change(function(e) {
const kabupaten_id = $(this).val();
$.ajax({
type: "get",
url: "{{ url('api/kecamatan') }}" + "/" + kabupaten_id,
success: function(res) {
if (res.status == "success") {
let option = '<option value="">Pilih Kecamatan</option>';
res.data.forEach((data) => {
option +=
`<option value="${data.id}">${data.nama_kecamatan}</option>`;
});
$('select[id="kecamatan_id"]').html(option);
$('select[id="kelurahan_id"]').html(
`<option value="">Pilih Kecamatan Terlebih Dahulu</option>`);
} else {
alert("gagal.. : " + res.message);
}
}
});
});
$("#kecamatan_id").change(function(e) {
const kecamatan_id = $(this).val();
$.ajax({
type: "get",
url: "{{ url('api/kelurahan') }}" + "/" + kecamatan_id,
success: function(res) {
if (res.status == "success") {
let option = '<option value="">Pilih Kelurahan</option>';
res.data.forEach((data) => {
option +=
`<option value="${data.id}">${data.nama_kelurahan}</option>`;
});
$('select[id="kelurahan_id"]').html(option);
} else {
alert("gagal.. : " + res.message);
}
}
});
});
</script>
@endpush
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]