main
Ilham Wara Nugroho 2025-10-14 10:50:18 +07:00
parent a353cc2400
commit 4f8ace8130
1 changed files with 244 additions and 135 deletions

View File

@ -1,11 +1,13 @@
@extends('layouts.blank')
@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<style>
.bg-login{
background-image: url("{{asset('assets/bg-login.png')}}");
background-repeat: no-repeat;
background-size: cover;
}
#map { height: 60vh; min-height: 400px; }
</style>
@endsection
@section('content')
@ -54,146 +56,162 @@
<div id="loading-spinner" style="display: none; text-align: center;">
<img src="{{ asset('assets/spinner.gif') }}" alt="Loading..." width="20">
</div>
<div class="col-12 row mx-auto mt-3">
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Nama Sekolah</label>
<div class="col-12 pr-1">
<input type="text" value="{{$user->name ? $user->name : old('name')}}" name="name" class="form-control nama_sekolah @error('name') is-invalid @enderror" placeholder="Masukan Nama Sekolah">
@error('name')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
<div class="col-md-6">
<div class="card row mx-auto">
<div class="card-header">
<h5 class="mb-0"><b>Profile Sekolah</b></h5>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">NPSN</label>
<div class="col-12 pr-1">
<input maxlength="8" autocomplete="off" type="text" value="{{ $user->username ? $user->username : old('npsn')}}" name="npsn" class="form-control @error('npsn') is-invalid @enderror numberInput npsn" placeholder="Masukan NPSN">
<ul id="result"></ul>
@error('npsn')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
<div class="card-body">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Nama Sekolah</label>
<div class="col-12 pr-1">
<input type="text" value="{{$user->name ? $user->name : old('name')}}" name="name" class="form-control nama_sekolah @error('name') is-invalid @enderror" placeholder="Masukan Nama Sekolah">
@error('name')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">NPSN</label>
<div class="col-12 pr-1">
<input maxlength="8" autocomplete="off" type="text" value="{{ $user->username ? $user->username : old('npsn')}}" name="npsn" class="form-control @error('npsn') is-invalid @enderror numberInput npsn" placeholder="Masukan NPSN">
<ul id="result"></ul>
@error('npsn')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label">Tingkat Sekolah</label>
<div class="col-12 pr-1">
<select name="tingkat_sekolah" class="form-control tingkat_sekolah select2 @error('tingkat_sekolah') is-invalid @enderror">
<option value="">-Pilih Tingkat Sekolah-</option>
<option value="1">SD</option>
<option value="2">SMP</option>
<option value="3">SMA</option>
<option value="4">SMK</option>
<option value="5">MI</option>
<option value="6">MTs</option>
<option value="7">MA</option>
<option value="8">SD LB</option>
<option value="9">SMP LB</option>
<option value="10">SMA LM</option>
<option value="11">SLB Khusus</option>
</select>
@error('tingkat_sekolah')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Status Sekolah</label>
<div class="col-12 pr-1">
<select name="status_sekolah" class="form-control select2 @error('status_sekolah') is-invalid @enderror">
<option value="" data-select2-id="3">-Pilih Status Sekolah-</option>
<option value="Negeri">Negeri</option>
<option value="Swasta">Swasta</option>
</select>
@error('status_sekolah')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Provinsi</label>
<div class="col-12 pr-1">
<select name="provinsi" class="form-control select2 @error('provinsi') provinsi is-invalid @enderror" id="provinsi">
<option value="0">- PILIH PROVINSI -</option>
@foreach($provinsi as $datProv)
<option value="{{encode_id($datProv->MsProvinsiId)}}">{{$datProv->name}}</option>
@endforeach
</select>
@error('provinsi')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Kabupaten</label>
<div class="col-12 pr-1">
<select name="kabupaten" class="form-control select2 @error('kabupaten') kabupaten is-invalid @enderror" id="kabupaten" required>
<option value="0">- PILIH KABUPATEN/KOTA -</option>
</select>
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Kecamatan</label>
<div class="col-12 pr-1">
<select name="kecamatan" class="form-control select2 @error('kecamatan') kecamatan is-invalid @enderror" id="kecamatan" required>
<option value="0">- PILIH KECAMATAN -</option>
</select>
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Alamat Sekolah</label>
<div class="col-12 pr-1">
<textarea cols="10" rows="5" name="alamat_sekolah" class="form-control @error('alamat_sekolah') is-invalid @enderror" placeholder="Masukan Alamat Sekolah, Nama Jalan / Dusun / RT-RW" required>{{session('alamat_sekolah')}}</textarea>
@error('alamat_sekolah')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 row mx-auto mt-3">
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label">Tingkat Sekolah</label>
<div class="col-12 pr-1">
<select name="tingkat_sekolah" class="form-control tingkat_sekolah select2 @error('tingkat_sekolah') is-invalid @enderror">
<option value="">-Pilih Tingkat Sekolah-</option>
<option value="1">SD</option>
<option value="2">SMP</option>
<option value="3">SMA</option>
<option value="4">SMK</option>
<option value="5">MI</option>
<option value="6">MTs</option>
<option value="7">MA</option>
<option value="8">SD LB</option>
<option value="9">SMP LB</option>
<option value="10">SMA LM</option>
<option value="11">SLB Khusus</option>
</select>
@error('tingkat_sekolah')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
<div class="col-md-6">
<div class="card row mx-auto">
<div class="card-header">
<h5 class="mb-0"><b>Lokasi Sekolah</b></h5>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Status Sekolah</label>
<div class="col-12 pr-1">
<select name="status_sekolah" class="form-control select2 @error('status_sekolah') is-invalid @enderror">
<option value="" data-select2-id="3">-Pilih Status Sekolah-</option>
<option value="Negeri">Negeri</option>
<option value="Swasta">Swasta</option>
</select>
@error('status_sekolah')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
<div class="card-body">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label">Latitude</label>
<div class="col-12 pr-1">
<input type="text" id="latInput" value="{{ @$user->profile->lat ? @$user->profile->lat : old('lat')}}" name="lat" class="form-control @error('lat') is-invalid @enderror" placeholder="Masukan Latitude">
<ul id="result"></ul>
@error('lat')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 row mx-auto mt-3">
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label">Latitude</label>
<div class="col-12 pr-1">
<input type="text" value="{{ @$user->profile->lat ? @$user->profile->lat : old('lat')}}" name="lat" class="form-control @error('lat') is-invalid @enderror" placeholder="Masukan Latitude">
<ul id="result"></ul>
@error('lat')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label">Longitude</label>
<div class="col-12 pr-1">
<input id="lngInput" type="text" value="{{ @$user->profile->long ? @$user->profile->long : old('long')}}" name="long" class="form-control @error('long') is-invalid @enderror" placeholder="Masukan Longitude">
<ul id="result"></ul>
@error('long')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label">Longitude</label>
<div class="col-12 pr-1">
<input type="text" value="{{ @$user->profile->long ? @$user->profile->long : old('long')}}" name="long" class="form-control @error('long') is-invalid @enderror" placeholder="Masukan Longitude">
<ul id="result"></ul>
@error('long')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Provinsi</label>
<div class="col-12 pr-1">
<select name="provinsi" class="form-control select2 @error('provinsi') provinsi is-invalid @enderror" id="provinsi">
<option value="0">- PILIH PROVINSI -</option>
@foreach($provinsi as $datProv)
<option value="{{encode_id($datProv->MsProvinsiId)}}">{{$datProv->name}}</option>
@endforeach
</select>
@error('provinsi')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Kabupaten</label>
<div class="col-12 pr-1">
<select name="kabupaten" class="form-control select2 @error('kabupaten') kabupaten is-invalid @enderror" id="kabupaten" required>
<option value="0">- PILIH KABUPATEN/KOTA -</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12 row mx-auto mt-3">
<div class="col-md-12">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Kecamatan</label>
<div class="col-12 pr-1">
<select name="kecamatan" class="form-control select2 @error('kecamatan') kecamatan is-invalid @enderror" id="kecamatan" required>
<option value="0">- PILIH KECAMATAN -</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Alamat Sekolah</label>
<div class="col-12 pr-1">
<textarea cols="10" rows="5" name="alamat_sekolah" class="form-control @error('alamat_sekolah') is-invalid @enderror" placeholder="Masukan Alamat Sekolah, Nama Jalan / Dusun / RT-RW" required>{{session('alamat_sekolah')}}</textarea>
@error('alamat_sekolah')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
<div class="col-md-12 mt-3">
<button type="button" id="btnUseLocation" class="px-3 btn-primary border-0 mb-2 py-2 bg-blue-600 text-white rounded">Gunakan Lokasi Saya</button>
<button type="button" id="btnClear" class="px-3 btn-warning py-2 border-0 mb-2 rounded">Reset</button>
<div id="map" class="rounded-md border"></div>
</div>
</div>
</div>
@ -224,7 +242,98 @@
@section('js')
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
<script src="{{asset('assets/js/app.bundle.js')}}"></script>
<script src="{{asset('assets/js/formplugins/select2/select2.bundle.js')}}"></script>
<script src="{{asset('assets/js/formplugins/select2/select2.bundle.js')}}"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// ===== Inisialisasi peta =====
const defaultLat = -6.200000;
const defaultLng = 106.816666;
const defaultZoom = 12;
const map = L.map('map').setView([defaultLat, defaultLng], defaultZoom);
// Tile layer (OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
// Marker (dapat digerakkan)
let marker = L.marker([defaultLat, defaultLng], { draggable: true }).addTo(map);
// Element input
const latInput = document.getElementById('latInput');
const lngInput = document.getElementById('lngInput');
const btnUseLocation = document.getElementById('btnUseLocation');
const btnClear = document.getElementById('btnClear');
// Fungsi format untuk menampilkan lat/lng (6 desimal)
function fmt(n) {
return Number(n).toFixed(6);
}
// Set input berdasarkan koordinat
function setInputs(lat, lng) {
latInput.value = fmt(lat);
lngInput.value = fmt(lng);
}
// Ketika klik di map => pindah marker & isi input
map.addEventListener('click', function(e) {
const { lat, lng } = e.latlng;
marker.setLatLng([lat, lng]);
setInputs(lat, lng);
});
// Ketika marker di-drag selesai => update input
marker.addEventListener('moveend', function(e) {
const pos = e.target.getLatLng();
setInputs(pos.lat, pos.lng);
});
// Tombol: gunakan lokasi (geolocation)
btnUseLocation.addEventListener('click', function() {
if (!navigator.geolocation) {
alert('Geolocation tidak didukung oleh browser ini.');
return;
}
btnUseLocation.disabled = true;
btnUseLocation.textContent = 'Mencari lokasi...';
navigator.geolocation.getCurrentPosition(function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
map.setView([lat, lng], 15);
marker.setLatLng([lat, lng]);
setInputs(lat, lng);
btnUseLocation.disabled = false;
btnUseLocation.textContent = 'Gunakan Lokasi Saya';
}, function(err) {
alert('Gagal mendapatkan lokasi: ' + err.message);
btnUseLocation.disabled = false;
btnUseLocation.textContent = 'Gunakan Lokasi Saya';
}, {
enableHighAccuracy: true,
timeout: 10000
});
});
// Tombol reset: pindah kembali ke default dan clear input
btnClear.addEventListener('click', function() {
map.setView([defaultLat, defaultLng], defaultZoom);
marker.setLatLng([defaultLat, defaultLng]);
latInput.value = '';
lngInput.value = '';
});
// Inisialisasi input awal (kosong)
latInput.value = '';
lngInput.value = '';
// Opsional: jika mau isi input dengan koordinat awal marker:
// setInputs(defaultLat, defaultLng);
</script>
<script>
$(document).ready(function() {
$('.select2').select2();