sekolah_adiwiyata/resources/views/modules/profile/profile.blade.php

325 lines
19 KiB
PHP

@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<style>
#map { height: 60vh; min-height: 400px; }
</style>
@endsection
@section('breadcrumbs')
<ol class="breadcrumb page-breadcrumb">
@foreach($breadcrumbs as $dataBread)
<li class="breadcrumb-item {{@$dataBread['active'] == true ? 'active' : ''}}">
@if(@$dataBread['url'])
<a href="{{@$dataBread['url']}}">{{$dataBread['name']}}</a>
@else
{{$dataBread['name']}}
@endif
</li>
@endforeach
</ol>
@endsection
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<i class="fal fa-align-justify"></i> {{$title}}
</div>
<form action="{{url('profile-store')}}" method="POST" class="">
{{csrf_field()}}
<div class="card-body">
<div class="row">
<div class="col-md-12">
<input type="hidden" name="secure_id" value="{{@$keyId}}">
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="fname">NPSN</label>
<div class="col-12 pr-1">
<input maxlength="8" type="text" disabled value="{{@$item->username ? @$item->username : old('npsn')}}" name="npsn" class="form-control @error('npsn') is-invalid @enderror numberInput" placeholder="Masukan NPSN Sekolah" required>
@error('npsn')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
<small class="text-primary"><i>Pastikan NPSN Telah Sesuai</i></small>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="fname">Nama Sekolah</label>
<div class="col-12 pr-1">
<input type="text" value="{{@$item->name ? @$item->name : old('name')}}" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="Masukan Nama Sekolah" required>
@error('name')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="fname">Tingkat Sekolah</label>
<div class="col-12 pr-1">
<select name="tingkat_sekolah" class="form-control @error('tingkat_sekolah') is-invalid @enderror">
<option value="" data-select2-id="3">-Pilih Tingkat Sekolah-</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 1 ? 'selected' : ''}} value="1" data-select2-id="11">SD</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 2 ? 'selected' : ''}} value="2" data-select2-id="12">SMP</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 3 ? 'selected' : ''}} value="3" data-select2-id="13">SMA</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 4 ? 'selected' : ''}} value="4" data-select2-id="14">SMK</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 5 ? 'selected' : ''}} value="5" data-select2-id="15">MI</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 6 ? 'selected' : ''}} value="6" data-select2-id="16">MTs</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 7 ? 'selected' : ''}} value="7" data-select2-id="17">MA</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 8 ? 'selected' : ''}} value="8" data-select2-id="18">SD LB</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 9 ? 'selected' : ''}} value="9" data-select2-id="19">SMP LB</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 10 ? 'selected' : ''}} value="10" data-select2-id="20">SMA LM</option>
<option {{@$item->profile->ms_tingkat_sekolah_id == 11 ? 'selected' : ''}} value="11" data-select2-id="21">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-12 mb-3">
<div class="form-group">
<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 @error('status_sekolah') is-invalid @enderror" required>
<option value="" data-select2-id="3">-Pilih Status Sekolah-</option>
<option {{@$item->profile->status_sekolah == 'Negeri' ? 'selected' : ''}} value="Negeri">Negeri</option>
<option {{@$item->profile->status_sekolah == 'Swasta' ? 'selected' : ''}} 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-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Alamat Sekolah</label>
<div class="col-12 pr-1">
<input type="text" value="{{@$item->profile->alamat_sekolah ? @$item->profile->alamat_sekolah : old('alamat_sekolah')}}" name="alamat_sekolah" class="form-control @error('alamat_sekolah') is-invalid @enderror" placeholder="Masukan Alamat Sekolah, Nama Jalan / Dusun / RT-RW" required>
@error('alamat_sekolah')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Kontak Person</label>
<div class="col-12 pr-1">
<input type="text" value="{{@$item->profile->kontak_person ? @$item->profile->kontak_person : old('kontak_person')}}" name="kontak_person" class="form-control @error('kontak_person') is-invalid @enderror" placeholder="Masukan Kontak Person" required>
@error('kontak_person')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="row">
<div class="col-12">
<div id="map" class="rounded-md border mb-3"></div>
<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>
<div class="col-12">
<div class="row">
<div class="col-6 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Latitude</label>
<div class="col-12 pr-1">
<input type="text" id="latInput" value="{{@$item->profile->lat ? @$item->profile->lat : old('lat')}}" name="lat" class="form-control @error('lat') is-invalid @enderror" placeholder="Masukan Latitude">
@error('lat')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-6 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Longitude</label>
<div class="col-12 pr-1">
<input type="text" id="lngInput" value="{{@$item->profile->long ? @$item->profile->long : old('long')}}" name="long" class="form-control @error('long') is-invalid @enderror" placeholder="Masukan longitude">
@error('long')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Telp/WA</label>
<div class="col-12 pr-1">
<input type="text" value="{{@$item->profile->telp ? @$item->profile->telp : old('telp')}}" name="telp" class="form-control @error('telp') is-invalid @enderror numberInput" maxlength="16" placeholder="Masukan Telp/WA" required>
@error('telp')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Email</label>
<div class="col-12 pr-1">
<input type="email" name="email" disabled value="{{@$item->email}}" id="emailverify" class="form-control @error('email') is-invalid @enderror" placeholder="Masukan Email Aktif" required>
@error('email')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
<small class="text-primary">* Pastikan email benar dan aktif, akses aplikasi akan dikirim ke email yang didaftarkan.</small>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label">Password Baru</label>
<div class="col-12 pr-1">
<div class="input-group">
<input type="password" id="password" autocomplete="new-password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Masukan Password Minimm 8 characters">
<div class="input-group-append">
<button class="btn btn-default waves-effect waves-themed" type="button" id="togglePassword"><i class="fal fa-eye"></i></button>
</div>
</div>
@error('password')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
<div class="help-block">
Kata Sandi harus mengandung Minimal 8 karakter, maksimal 15 karakter, <br>setidaknya 1 huruf kecil dan huruf besar, angka dan simbol
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<a href="{{url('dashboard')}}" class="btn btn-danger"><i class="fal fa-times"></i> Batal</a>
<button type="submit" class="btn btn-success"><i class="fal fa-save"></i> Simpan</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@endsection
@section('page-js')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// ===== Inisialisasi peta =====
const defaultLat = '{{(@$item->profile->lat ? @$item->profile->lat : "-6.200000")}}' ;
const defaultLng = '{{(@$item->profile->long ? @$item->profile->long : "106.816666")}}';
const defaultZoom = 15;
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 = '{{(@$item->profile->lat ? @$item->profile->lat : "")}}';
lngInput.value = '{{(@$item->profile->long ? @$item->profile->long : "")}}';
// Opsional: jika mau isi input dengan koordinat awal marker:
// setInputs(defaultLat, defaultLng);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.numberInput').on('input', function() {
this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
});
$('#togglePassword').on('click', function() {
let passwordField = $('#password');
let icon = $(this).find('i');
// Cek apakah input saat ini bertipe password
if (passwordField.attr('type') === 'password') {
passwordField.attr('type', 'text'); // Ubah ke teks
icon.removeClass('fa-eye').addClass('fa-eye-slash'); // Ganti ikon
} else {
passwordField.attr('type', 'password'); // Ubah ke password
icon.removeClass('fa-eye-slash').addClass('fa-eye'); // Kembalikan ikon
}
});
});
</script>
@endsection