update
Ilham Wara Nugroho
parent
6724b02ad5
commit
a0fef38211
|
|
@ -33,6 +33,7 @@ class Handler extends ExceptionHandler
|
||||||
protected $dontFlash = [
|
protected $dontFlash = [
|
||||||
'current_password',
|
'current_password',
|
||||||
'password',
|
'password',
|
||||||
|
'register',
|
||||||
'password_confirmation',
|
'password_confirmation',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,8 @@ class CustomLoginController extends Controller
|
||||||
if(Auth::check()){
|
if(Auth::check()){
|
||||||
return redirect('dashboard');
|
return redirect('dashboard');
|
||||||
}
|
}
|
||||||
return view('auth.login');
|
$data['title'] = 'Login';
|
||||||
|
return view('auth.login',$data);
|
||||||
}
|
}
|
||||||
public function post_login(Request $request)
|
public function post_login(Request $request)
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,10 @@ class CustomRegisterController extends Controller
|
||||||
{
|
{
|
||||||
public function index()
|
public function index()
|
||||||
{
|
{
|
||||||
|
if(Auth::check()){
|
||||||
|
return redirect('dashboard');
|
||||||
|
}
|
||||||
|
$data['title'] = 'Register';
|
||||||
$data['provinsi'] = Provinsi::where('kode_wilayah','010000')->get();
|
$data['provinsi'] = Provinsi::where('kode_wilayah','010000')->get();
|
||||||
return view('auth.register',$data);
|
return view('auth.register',$data);
|
||||||
}
|
}
|
||||||
|
|
@ -145,10 +149,12 @@ class CustomRegisterController extends Controller
|
||||||
|
|
||||||
DB::commit();
|
DB::commit();
|
||||||
|
|
||||||
return redirect('dashboard')->with([
|
return response()->json(['status' => true,'message' => 'Daftar Sekolah Berhasil','type' => 'success']);
|
||||||
'message' => trans('Selamat datang kembali'),
|
|
||||||
'type' => "success"
|
// return redirect('dashboard')->with([
|
||||||
]);
|
// 'message' => trans('Selamat datang kembali'),
|
||||||
|
// 'type' => "success"
|
||||||
|
// ]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ use App\Models\Kuesioner;
|
||||||
|
|
||||||
class FrontController extends Controller
|
class FrontController extends Controller
|
||||||
{
|
{
|
||||||
function index() {
|
function indexOld() {
|
||||||
$data['side_kegiatan'] = Kegiatan::orderBy('KegiatanId','DESC')->limit(5)->get();
|
$data['side_kegiatan'] = Kegiatan::orderBy('KegiatanId','DESC')->limit(5)->get();
|
||||||
$data['kegiatan'] = Kegiatan::orderBy('KegiatanId','DESC')->limit(8)->get();
|
$data['kegiatan'] = Kegiatan::orderBy('KegiatanId','DESC')->limit(8)->get();
|
||||||
$data['usulan'] = [
|
$data['usulan'] = [
|
||||||
|
|
@ -24,7 +24,7 @@ class FrontController extends Controller
|
||||||
$data['title'] = 'Beranda';
|
$data['title'] = 'Beranda';
|
||||||
return view('index',$data);
|
return view('index',$data);
|
||||||
}
|
}
|
||||||
function indexNew() {
|
function index() {
|
||||||
$data['side_kegiatan'] = Kegiatan::orderBy('KegiatanId','DESC')->limit(3)->get();
|
$data['side_kegiatan'] = Kegiatan::orderBy('KegiatanId','DESC')->limit(3)->get();
|
||||||
$data['kegiatan'] = Kegiatan::orderBy('KegiatanId','DESC')->limit(8)->get();
|
$data['kegiatan'] = Kegiatan::orderBy('KegiatanId','DESC')->limit(8)->get();
|
||||||
$data['usulan'] = [
|
$data['usulan'] = [
|
||||||
|
|
|
||||||
|
|
@ -1,138 +1,191 @@
|
||||||
<!DOCTYPE html>
|
@extends('layouts.appNew')
|
||||||
<html lang="en">
|
@section('content')
|
||||||
<head>
|
<main class="min-h-screen pt-24 pb-12 flex flex-col lg:flex-row relative overflow-hidden">
|
||||||
<meta charset="utf-8">
|
<!-- Background Decor -->
|
||||||
<title>
|
<div class="absolute top-0 right-0 w-1/2 h-full -z-10 opacity-10">
|
||||||
Login - SIDIA Jakarta
|
<div class="w-full h-full bg-emerald-500 rounded-l-full blur-3xl transform translate-x-1/2"></div>
|
||||||
</title>
|
</div>
|
||||||
<meta name="description" content="Login">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
||||||
<meta name="msapplication-tap-highlight" content="no">
|
|
||||||
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/vendors.bundle.css')}}">
|
|
||||||
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/app.bundle.css')}}">
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
|
|
||||||
<link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
|
|
||||||
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/fa-brands.css')}}">
|
|
||||||
<style type="text/css">
|
|
||||||
.bg-login{
|
|
||||||
background-image: url("{{('assets/bg-login.png')}}");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-login">
|
|
||||||
<div class=" d-flex align-items-center justify-content-center min-vh-100">
|
|
||||||
<div class="container py-4 py-lg-5 px-4 px-sm-0">
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-sm-12 col-md-12 col-lg-8 col-xl-8">
|
|
||||||
@include('include.alert')
|
|
||||||
<div class="card pr-4 rounded-plus bg-faded" style="border:none;">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-7">
|
|
||||||
<div class="text-center">
|
|
||||||
<img src="{{asset('assets/background.png')}}" class="img-fluid rounded-plus" style="border-top-right-radius:0px; border-bottom-right-radius:0px;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-5 p-4 d-flex flex-column justify-content-center align-items-center gap-3">
|
|
||||||
<!-- <h1 class="text-left mb-3">Login</h1>
|
|
||||||
<br> -->
|
|
||||||
<div class="">
|
|
||||||
<div class="d-flex flex-column gap-3 align-items-center justify-content-center mb-5">
|
|
||||||
<div>
|
|
||||||
{{-- <img src="{{asset('assets/logo-dinas.ico')}}" width="50"> --}}
|
|
||||||
<img src="{{asset('assets/logo.png')}}" width="95">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5 class="fw-500">SIDIA Jakarta</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<form id="js-login" method="POST" action="{{url('login')}}">
|
|
||||||
{{csrf_field()}}
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Email</label>
|
|
||||||
<input type="text" required name="email" class="form-control" placeholder="Masukan Email/NPSN anda">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Kata Sandi</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="password" required id="password" name="password" class="form-control" placeholder="Masukan Kata Sandi">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label"><a href="{{ url('forgotpass') }}">Lupa Kata Sandi ?</a></label>
|
|
||||||
</div>
|
|
||||||
<div class="row no-gutters">
|
|
||||||
<div class="col-lg-12 pr-lg-1 my-2">
|
|
||||||
<button type="submit" class="btn btn-primary btn-block">Masuk</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-12 pl-lg-1 my-2 text-center">
|
|
||||||
OR
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-12 pl-lg-1 my-2">
|
|
||||||
<a href="{{url('register')}}" class="btn btn-success btn-block">Registrasi Sekolah</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<p class="text-muted mt-auto text-center mb-0 pt-3" style="font-size:12px;">
|
|
||||||
{{date('Y')}} © Dinas Lingkungan Hidup Provinsi DKI Jakarta
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<!-- Left Section: Information & Hero -->
|
||||||
<div class="text-center mt-3 text-black">
|
<div class="flex-1 px-6 lg:px-16 flex hidden md:block flex-col justify-center py-10">
|
||||||
|
<div class="max-w-xl">
|
||||||
|
<span class="inline-block px-3 py-1 bg-emerald-100 text-emerald-700 text-xs font-bold rounded-full mb-4">
|
||||||
|
PROGRAM ADIWIYATA 2025/2026
|
||||||
|
</span>
|
||||||
|
<h2 class="text-4xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">
|
||||||
|
Mewujudkan Sekolah <span class="text-emerald-600">Ramah Lingkungan</span> di Jakarta.
|
||||||
|
</h2>
|
||||||
|
<p class="text-slate-600 text-lg mb-8 leading-relaxed">
|
||||||
|
Akses portal digital resmi penilaian Adiwiyata. Bergabunglah dengan 979+ sekolah yang berkomitmen menjaga kelestarian lingkungan hidup dan edukasi iklim.
|
||||||
|
<a href="https://en.antaranews.com/news/396088/minister-asks-sekolah-rakyat-schools-to-adopt-climate-aware-education" target="_blank" class="text-emerald-600 inline-block align-middle ml-1">
|
||||||
|
<span class="material-symbols-outlined text-sm">link</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
</div>
|
<!-- Achievement Stats -->
|
||||||
|
<div class="grid grid-cols-3 gap-4 mb-10">
|
||||||
|
<div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
||||||
|
<p class="text-2xl font-bold text-emerald-600">46</p>
|
||||||
|
<p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Award 2025</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
||||||
|
<p class="text-2xl font-bold text-emerald-600">28K+</p>
|
||||||
|
<p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Nasional</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
||||||
|
<p class="text-2xl font-bold text-emerald-600">100%</p>
|
||||||
|
<p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Digital</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Latest News Ticker -->
|
||||||
|
<div class="p-4 bg-emerald-50 border-l-4 border-emerald-500 rounded-r-lg flex items-center gap-4">
|
||||||
|
<span class="material-symbols-outlined text-emerald-600">campaign</span>
|
||||||
|
<div class="text-sm text-emerald-900 overflow-hidden whitespace-nowrap">
|
||||||
|
<span class="font-bold">TERBARU:</span> 979 Sekolah raih penghargaan Adiwiyata Nasional 2025 dari KLH.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
|
<!-- Right Section: Login Card -->
|
||||||
<script src="{{asset('assets/js/app.bundle.js')}}"></script>
|
<div class="flex-1 flex items-center justify-center p-6">
|
||||||
<script>
|
<div class="w-full max-w-md">
|
||||||
$(document).ready(function() {
|
<div class="bg-white rounded-[2.5rem] p-8 custom-shadow border border-slate-100 relative overflow-hidden">
|
||||||
$('#togglePassword').on('click', function() {
|
<!-- Decor Circles -->
|
||||||
let passwordField = $('#password');
|
<div class="absolute -top-10 -right-10 w-32 h-32 bg-emerald-50 rounded-full -z-0"></div>
|
||||||
let icon = $(this).find('i');
|
|
||||||
|
|
||||||
// Cek apakah input saat ini bertipe password
|
<div class="relative z-10">
|
||||||
if (passwordField.attr('type') === 'password') {
|
<div class="flex flex-col items-center mb-8">
|
||||||
passwordField.attr('type', 'text'); // Ubah ke teks
|
<div class="w-16 h-16 bg-emerald-100 rounded-2xl flex items-center justify-center text-emerald-600 mb-4 floating">
|
||||||
icon.removeClass('fa-eye').addClass('fa-eye-slash'); // Ganti ikon
|
<span class="material-symbols-outlined text-3xl">lock_open</span>
|
||||||
} else {
|
</div>
|
||||||
passwordField.attr('type', 'password'); // Ubah ke password
|
<h3 class="text-2xl font-bold text-slate-800">Masuk ke Portal</h3>
|
||||||
icon.removeClass('fa-eye-slash').addClass('fa-eye'); // Kembalikan ikon
|
<p class="text-slate-400 text-sm">Silakan gunakan akun sekolah Anda</p>
|
||||||
}
|
</div>
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#js-login-btn").click(function(event)
|
<!-- Login Form -->
|
||||||
{
|
<form id="loginForm" method="POST" action="{{ url('login') }}" class="space-y-5" onsubmit="handleLogin(event)">
|
||||||
|
{{ csrf_field() }}
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Username / NPSN</label>
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xl">account_circle</span>
|
||||||
|
<input type="text" name="email" id="username" required="" placeholder="Masukkan NPSN Sekolah" class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all placeholder:text-slate-300">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
// Fetch form to apply custom Bootstrap validation
|
<div>
|
||||||
var form = $("#js-login")
|
<label class="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Kata Sandi</label>
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xl">key</span>
|
||||||
|
<input type="password" name="password" id="password" required="" placeholder="••••••••" class="w-full pl-12 pr-12 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all placeholder:text-slate-300">
|
||||||
|
<button type="button" onclick="togglePassword()" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-emerald-600">
|
||||||
|
<span id="pass-icon" class="material-symbols-outlined">visibility</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
if (form[0].checkValidity() === false)
|
<div class="flex items-center justify-between text-sm px-1">
|
||||||
{
|
<label class="flex items-center gap-2 text-slate-500 cursor-pointer">
|
||||||
event.preventDefault()
|
<input type="checkbox" class="w-4 h-4 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
|
||||||
event.stopPropagation()
|
Ingat Saya
|
||||||
}
|
</label>
|
||||||
|
{{-- <a href="{{ url('forgotpass') }}" class="text-emerald-600 font-bold hover:underline">Lupa Sandi?</a> --}}
|
||||||
|
</div>
|
||||||
|
|
||||||
form.addClass('was-validated');
|
<button type="submit" id="submitBtn" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-4 rounded-2xl shadow-lg shadow-emerald-200 transition-all flex items-center justify-center gap-2 group">
|
||||||
// Perform ajax submit here...
|
<span id="btnText">Masuk Sekarang</span>
|
||||||
});
|
<span id="btnIcon" class="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
<div class="px-8 py-6 bg-slate-50 border-t border-slate-100 text-center">
|
||||||
|
<p class="text-sm text-slate-500">Belum memiliki akun? <a href="{{ url('register') }}" class="text-emerald-600 font-bold hover:underline">Daftar di sini</a></p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
</script>
|
<!-- Error Message Container -->
|
||||||
</body>
|
@include('include.alertNew')
|
||||||
</html>
|
|
||||||
|
|
||||||
|
<!-- Help Footer -->
|
||||||
|
<div class="mt-8 pt-8 border-t border-slate-100 flex items-center justify-center gap-6">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-xs text-slate-400 font-medium mb-2">Butuh Bantuan?</p>
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
<a href="https://api.whatsapp.com/send/?phone=6285212436339" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-emerald-50 hover:text-emerald-600 transition-all">
|
||||||
|
<span class="material-symbols-outlined text-lg">support_agent</span>
|
||||||
|
</a>
|
||||||
|
{{-- <a href="#" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-emerald-50 hover:text-emerald-600 transition-all">
|
||||||
|
<span class="material-symbols-outlined text-lg">description</span>
|
||||||
|
</a> --}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
@endsection
|
||||||
|
@section('js')
|
||||||
|
<script>
|
||||||
|
|
||||||
|
function switchTab(type) {
|
||||||
|
const schoolBtn = document.getElementById('tab-school');
|
||||||
|
const adminBtn = document.getElementById('tab-admin');
|
||||||
|
const usernameInput = document.getElementById('username');
|
||||||
|
|
||||||
|
if (type === 'school') {
|
||||||
|
schoolBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg bg-white text-emerald-700 shadow-sm transition-all';
|
||||||
|
adminBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg text-slate-500 hover:text-slate-700 transition-all';
|
||||||
|
usernameInput.placeholder = 'Masukkan NPSN Sekolah';
|
||||||
|
} else {
|
||||||
|
adminBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg bg-white text-emerald-700 shadow-sm transition-all';
|
||||||
|
schoolBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg text-slate-500 hover:text-slate-700 transition-all';
|
||||||
|
usernameInput.placeholder = 'Masukkan Username Admin';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePassword() {
|
||||||
|
const passInput = document.getElementById('password');
|
||||||
|
const passIcon = document.getElementById('pass-icon');
|
||||||
|
if (passInput.type === 'password') {
|
||||||
|
passInput.type = 'text';
|
||||||
|
passIcon.textContent = 'visibility_off';
|
||||||
|
} else {
|
||||||
|
passInput.type = 'password';
|
||||||
|
passIcon.textContent = 'visibility';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleLogin(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const btn = document.getElementById('submitBtn');
|
||||||
|
const btnText = document.getElementById('btnText');
|
||||||
|
const btnIcon = document.getElementById('btnIcon');
|
||||||
|
// const errorMsg = document.getElementById('errorMessage');
|
||||||
|
|
||||||
|
// Feedback loop for UI
|
||||||
|
btn.disabled = true;
|
||||||
|
btn.classList.add('opacity-70', 'cursor-not-allowed');
|
||||||
|
btnText.textContent = 'Memverifikasi...';
|
||||||
|
btnIcon.textContent = 'sync';
|
||||||
|
btnIcon.classList.add('animate-spin');
|
||||||
|
// errorMsg.classList.add('hidden');
|
||||||
|
|
||||||
|
document.getElementById('loginForm').submit();
|
||||||
|
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// // Mock failure to demonstrate interactivity
|
||||||
|
// btn.disabled = false;
|
||||||
|
// btn.classList.remove('opacity-70', 'cursor-not-allowed');
|
||||||
|
// btnText.textContent = 'Masuk Sekarang';
|
||||||
|
// btnIcon.textContent = 'arrow_forward';
|
||||||
|
// btnIcon.classList.remove('animate-spin');
|
||||||
|
// errorMsg.classList.remove('hidden');
|
||||||
|
// }, 1500);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
@endsection
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>
|
||||||
|
Login - SIDIA Jakarta
|
||||||
|
</title>
|
||||||
|
<meta name="description" content="Login">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="msapplication-tap-highlight" content="no">
|
||||||
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/vendors.bundle.css')}}">
|
||||||
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/app.bundle.css')}}">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
|
||||||
|
<link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
|
||||||
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/fa-brands.css')}}">
|
||||||
|
<style type="text/css">
|
||||||
|
.bg-login{
|
||||||
|
background-image: url("{{('assets/bg-login.png')}}");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-login">
|
||||||
|
<div class=" d-flex align-items-center justify-content-center min-vh-100">
|
||||||
|
<div class="container py-4 py-lg-5 px-4 px-sm-0">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-sm-12 col-md-12 col-lg-8 col-xl-8">
|
||||||
|
@include('include.alert')
|
||||||
|
<div class="card pr-4 rounded-plus bg-faded" style="border:none;">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-7">
|
||||||
|
<div class="text-center">
|
||||||
|
<img src="{{asset('assets/background.png')}}" class="img-fluid rounded-plus" style="border-top-right-radius:0px; border-bottom-right-radius:0px;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-5 p-4 d-flex flex-column justify-content-center align-items-center gap-3">
|
||||||
|
<!-- <h1 class="text-left mb-3">Login</h1>
|
||||||
|
<br> -->
|
||||||
|
<div class="">
|
||||||
|
<div class="d-flex flex-column gap-3 align-items-center justify-content-center mb-5">
|
||||||
|
<div>
|
||||||
|
{{-- <img src="{{asset('assets/logo-dinas.ico')}}" width="50"> --}}
|
||||||
|
<img src="{{asset('assets/logo.png')}}" width="95">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="fw-500">SIDIA Jakarta</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<form id="js-login" method="POST" action="{{url('login')}}">
|
||||||
|
{{csrf_field()}}
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Email</label>
|
||||||
|
<input type="text" required name="email" class="form-control" placeholder="Masukan Email/NPSN anda">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Kata Sandi</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="password" required id="password" name="password" class="form-control" placeholder="Masukan Kata Sandi">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label"><a href="{{ url('forgotpass') }}">Lupa Kata Sandi ?</a></label>
|
||||||
|
</div>
|
||||||
|
<div class="row no-gutters">
|
||||||
|
<div class="col-lg-12 pr-lg-1 my-2">
|
||||||
|
<button type="submit" class="btn btn-primary btn-block">Masuk</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-12 pl-lg-1 my-2 text-center">
|
||||||
|
OR
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-12 pl-lg-1 my-2">
|
||||||
|
<a href="{{url('register')}}" class="btn btn-success btn-block">Registrasi Sekolah</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<p class="text-muted mt-auto text-center mb-0 pt-3" style="font-size:12px;">
|
||||||
|
{{date('Y')}} © Dinas Lingkungan Hidup Provinsi DKI Jakarta
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-3 text-black">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
|
||||||
|
<script src="{{asset('assets/js/app.bundle.js')}}"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('#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
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#js-login-btn").click(function(event)
|
||||||
|
{
|
||||||
|
|
||||||
|
// Fetch form to apply custom Bootstrap validation
|
||||||
|
var form = $("#js-login")
|
||||||
|
|
||||||
|
if (form[0].checkValidity() === false)
|
||||||
|
{
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addClass('was-validated');
|
||||||
|
// Perform ajax submit here...
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,494 +1,419 @@
|
||||||
<!DOCTYPE html>
|
@extends('layouts.appNew')
|
||||||
<html lang="en">
|
@section('css')
|
||||||
<head>
|
<style>
|
||||||
<meta charset="utf-8">
|
#result {
|
||||||
<title>
|
border: 1px solid #ccc;
|
||||||
Register - SIDIA Jakarta
|
display: none;
|
||||||
</title>
|
max-height: 200px;
|
||||||
<meta name="description" content="Login">
|
overflow-y: auto;
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
background: #fff;
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
|
position: absolute;
|
||||||
<!-- Call App Mode on ios devices -->
|
width: 80%;
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
z-index: 999;
|
||||||
<!-- Remove Tap Highlight on Windows Phone IE -->
|
padding-left: 0px;
|
||||||
<meta name="msapplication-tap-highlight" content="no">
|
}
|
||||||
<!-- base css -->
|
#result li {
|
||||||
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/vendors.bundle.css')}}">
|
padding: 10px;
|
||||||
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/app.bundle.css')}}">
|
list-style: none;
|
||||||
<!-- Place favicon.ico in the root directory -->
|
cursor: pointer;
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
|
}
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
|
#result li:hover {
|
||||||
<link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
|
background: #f0f0f0;
|
||||||
<!-- Optional: page related CSS-->
|
}
|
||||||
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/fa-brands.css')}}">
|
</style>
|
||||||
<link rel="stylesheet" href="{{asset('assets/css/formplugins/select2/select2.bundle.css')}}">
|
@endsection
|
||||||
<style type="text/css">
|
@section('content')
|
||||||
.bg-login{
|
<main class="max-w-7xl mx-auto px-6 py-10 lg:py-16 grid lg:grid-cols-12 gap-12 items-start">
|
||||||
background-image: url("{{('assets/bg-login.png')}}");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
#result {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
display: none;
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: #fff;
|
|
||||||
position: absolute;
|
|
||||||
width: 80%;
|
|
||||||
z-index: 999;
|
|
||||||
padding-left: 0px;
|
|
||||||
}
|
|
||||||
#result li {
|
|
||||||
padding: 10px;
|
|
||||||
list-style: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#result li:hover {
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-login">
|
|
||||||
<div class="d-flex align-items-center justify-content-center min-vh-100">
|
|
||||||
<div class="container py-4 py-lg-5 px-4 px-sm-0">
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
|
|
||||||
@include('include.alert')
|
|
||||||
<div class="card pr-4 rounded-plus bg-faded" style="border:none;">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-7 d-flex flex-column text-center">
|
|
||||||
<div class="text-center">
|
|
||||||
<img src="{{asset('assets/background.png')}}" class="img-fluid rounded-plus" style="border-top-right-radius:0px; border-bottom-right-radius:0px;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-5 p-4 d-flex flex-column justify-content-center align-items-center gap-3">
|
|
||||||
<div class="d-flex flex-column gap-3 align-items-center justify-content-center mb-5">
|
|
||||||
<div>
|
|
||||||
{{-- <img src="{{asset('assets/logo-dinas.ico')}}" width="50"> --}}
|
|
||||||
<img src="{{asset('assets/logo.png')}}" width="95">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5 class="fw-500">SIDIA Jakarta</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<form method="POST" action="{{url('register')}}">
|
|
||||||
{{csrf_field()}}
|
|
||||||
<div class="row">
|
|
||||||
<div id="loading-spinner" style="display: none; text-align: center;">
|
|
||||||
<img src="{{ asset('assets/spinner.gif') }}" alt="Loading..." width="20">
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 d-none">
|
|
||||||
<div class="form-group row d-none">
|
|
||||||
<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 class="form-group row d-none">
|
|
||||||
<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 class="form-group row d-none">
|
|
||||||
<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-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>
|
|
||||||
<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" readonly value="{{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 class="form-group">
|
|
||||||
<label class="form-label" for="emailverify">Kontak Person</label>
|
|
||||||
<input type="text" value="{{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>
|
<!-- Right Content: Interactive Form Card -->
|
||||||
|
<div class="lg:col-span-12 bg-white rounded-[2.5rem] shadow-2xl shadow-emerald-100 overflow-hidden border border-emerald-50">
|
||||||
|
<div class="text-center my-16">
|
||||||
|
<h3 class="text-3xl font-extrabold text-slate-900 mb-4">Daftar Sebagai Sekolah Adiwiyata</h3>
|
||||||
|
</div>
|
||||||
|
<!-- Progress Stepper -->
|
||||||
|
<div class="bg-slate-50 px-8 py-6 border-b border-emerald-100">
|
||||||
|
<div class="flex justify-between items-center mb-6">
|
||||||
|
<h3 class="text-xl font-bold text-slate-800" id="step-title">Identitas Sekolah</h3>
|
||||||
|
<span class="text-sm font-bold text-emerald-600 bg-emerald-50 px-3 py-1 rounded-lg" id="step-counter">Langkah 1 dari 4</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 w-full bg-slate-200 rounded-full overflow-hidden">
|
||||||
|
<div id="progress-bar" class="progress-bar h-full bg-emerald-500 w-1/4"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between mt-3">
|
||||||
|
<div class="flex flex-col items-center"><div class="w-3 h-3 rounded-full bg-emerald-500"></div></div>
|
||||||
|
<div class="flex flex-col items-center"><div class="w-3 h-3 rounded-full bg-slate-300 transition-colors duration-500" id="dot-2"></div></div>
|
||||||
|
<div class="flex flex-col items-center"><div class="w-3 h-3 rounded-full bg-slate-300 transition-colors duration-500" id="dot-3"></div></div>
|
||||||
|
<div class="flex flex-col items-center"><div class="w-3 h-3 rounded-full bg-slate-300 transition-colors duration-500" id="dot-4"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6">
|
<!-- Form Content -->
|
||||||
|
<form id="register-form" class="p-8 lg:p-10">
|
||||||
|
{{ csrf_field() }}
|
||||||
|
<!-- STEP 1: Identification -->
|
||||||
|
<div id="step-1" class="step-transition block space-y-6">
|
||||||
|
<select name="tingkat_sekolah" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:ring-4 focus:ring-emerald-100 focus:border-emerald-500 transition-all outline-none font-medium text-lg tracking-wider 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>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block text-sm font-bold text-slate-700">NPSN (Nomor Pokok Sekolah Nasional) <span class="text-red-500">*</span></label>
|
||||||
|
<div class="relative group">
|
||||||
|
|
||||||
<div class="form-group row">
|
<input maxlength="8" autocomplete="off" type="text" value="{{old('npsn')}}" name="npsn" id="npsn" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:ring-4 focus:ring-emerald-100 focus:border-emerald-500 transition-all outline-none font-medium text-lg tracking-wider npsn @error('npsn') is-invalid @enderror numberInput npsn" placeholder="Masukan NPSN">
|
||||||
<label class="col-xl-12 form-label" for="fname">NPSN</label>
|
<ul id="result"></ul>
|
||||||
<div class="col-12 pr-1">
|
|
||||||
<input maxlength="8" autocomplete="off" type="text" value="{{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 class="form-group d-none row">
|
{{-- <input type="text" id="npsn" maxlength="8" placeholder="Masukkan 8 digit NPSN" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:ring-4 focus:ring-emerald-100 focus:border-emerald-500 transition-all outline-none font-medium text-lg tracking-wider"> --}}
|
||||||
<label class="col-xl-12 form-label" for="fname">Status Sekolah</label>
|
{{-- <button type="button" onclick="fetchSchoolData()" id="btn-fetch" class="absolute right-2 top-2 bottom-2 bg-emerald-600 text-white px-6 rounded-xl font-bold text-sm hover:bg-emerald-700 active:scale-95 transition-all flex items-center gap-2">
|
||||||
<div class="col-12 pr-1">
|
<span class="material-symbols-outlined text-sm">search</span> Cari
|
||||||
<select name="status_sekolah" class="form-control @error('status_sekolah') is-invalid @enderror">
|
</button> --}}
|
||||||
<option value="" data-select2-id="3">-Pilih Status Sekolah-</option>
|
</div>
|
||||||
<option value="Negeri">Negeri</option>
|
<p class="text-xs text-slate-400 mt-2">Data nama dan tingkat sekolah akan terisi otomatis dari Dapodik/EMIS.</p>
|
||||||
<option value="Swasta">Swasta</option>
|
</div>
|
||||||
</select>
|
|
||||||
@error('status_sekolah')
|
|
||||||
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
||||||
@enderror
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label" for="emailverify">Alamat Sekolah</label>
|
|
||||||
<input type="text" value="{{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 class="form-group">
|
<div id="auto-fill-data" class="hidden space-y-4 animate-[fadeIn_0.5s_ease-in-out]">
|
||||||
<label class="form-label" for="emailverify">Telp/WA</label>
|
<div class="p-4 bg-emerald-50 rounded-2xl border border-emerald-100">
|
||||||
<input type="text" value="{{old('telp')}}" name="telp" class="form-control @error('telp') is-invalid @enderror numberInput" maxlength="16" placeholder="Masukan Telp/WA" required>
|
<label class="text-xs font-bold text-emerald-600 uppercase tracking-widest">Sekolah Terdeteksi</label>
|
||||||
@error('telp')
|
<h4 id="display-school-name" class="text-xl font-extrabold text-emerald-900 mt-1">SDN MENTENG 01</h4>
|
||||||
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
<p id="display-school-type" class="text-emerald-700 font-medium">Sekolah Dasar (SD) • Negeri</p>
|
||||||
@enderror
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-12 mt-3">
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label" for="emailverify">Email</label>
|
|
||||||
<input type="email" name="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 class="form-group">
|
|
||||||
<label class="form-label">Password</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="password" id="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Masukan Password Minimm 8 characters" required>
|
|
||||||
<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 class="form-group">
|
|
||||||
<input type="checkbox" name="check" required> Dengan ini menyatakan bahwa isian registrasi diatas sudah benar.
|
|
||||||
@error('check')
|
|
||||||
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
||||||
@enderror
|
|
||||||
</div>
|
|
||||||
<div class="row no-gutters">
|
|
||||||
<div class="col-md-12 ml-auto text-right">
|
|
||||||
<button id="js-login-btn" type="submit" class="btn btn-block btn-primary btn-lg mt-3">Registrasi</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group text-center mt-3">
|
|
||||||
<span class="">
|
|
||||||
Sudah punya akun? <a href="{{url('login')}}">Login</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group row d-none">
|
|
||||||
<label class="col-xl-12 form-label" for="fname">Sekolah</label>
|
|
||||||
<div class="col-12 pr-1">
|
|
||||||
<select name="sekolah" class="form-control select2 @error('sekolah') sekolah is-invalid @enderror" id="sekolah" required>
|
|
||||||
<option value="0">- PILIH SEKOLAH -</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<p class="text-muted mt-auto text-center mb-0 pt-3">
|
|
||||||
{{date('Y')}} © Dinas Lingkungan Hidup Provinsi DKI Jakarta
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- STEP 2: Basic Info -->
|
||||||
|
<div id="step-2" class="step-transition hidden space-y-6">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block text-sm font-bold text-slate-700">Nama Sekolah</label>
|
||||||
|
<div class="col-12 pr-1">
|
||||||
|
<input type="text" readonly value="{{old('name')}}" name="name" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none 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 class="space-y-1">
|
||||||
|
<label class="block text-sm font-bold text-slate-700">Alamat Lengkap</label>
|
||||||
|
<textarea rows="3" name="alamat_sekolah" placeholder="Nama Jalan, RT/RW, Kelurahan, Kecamatan" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none resize-none"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- STEP 3: Contact Details -->
|
||||||
|
<div id="step-3" class="step-transition hidden space-y-6">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block text-sm font-bold text-slate-700">Nama Kontak Person (PIC)</label>
|
||||||
|
<input type="text" placeholder="Masukkan nama lengkap penanggung jawab" name="kontak_person" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none">
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block text-sm font-bold text-slate-700">Nomor WhatsApp / Telp</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="bg-slate-100 px-4 py-4 rounded-2xl font-bold flex items-center border-2 border-slate-100">+62</span>
|
||||||
|
<input type="tel" name="telp" placeholder="812xxxxxx" class="flex-1 px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{-- <div class="p-4 bg-blue-50 rounded-2xl border border-blue-100 flex gap-3">
|
||||||
|
<span class="material-symbols-outlined text-blue-500">upload_file</span>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-sm font-bold text-blue-900 leading-tight">Siapkan SK Tim Adiwiyata</h5>
|
||||||
|
<p class="text-xs text-blue-700 mt-1">Anda akan diminta mengunggah dokumen SK ini setelah login untuk verifikasi awal.</p>
|
||||||
|
</div>
|
||||||
|
</div> --}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- STEP 4: Account Setup -->
|
||||||
|
<div id="step-4" class="step-transition hidden space-y-6">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block text-sm font-bold text-slate-700">Email Sekolah (Aktif)</label>
|
||||||
|
<input type="email" name="email" placeholder="contoh: sdn.menteng01@jakarta.go.id" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none">
|
||||||
|
<p class="text-xs text-slate-400">Pastikan email benar. Akses login akan dikirim melalui email ini.</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block text-sm font-bold text-slate-700">Kata Sandi</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input type="password" id="password" name="password" placeholder="Minimal 8 karakter" oninput="checkStrength()" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none pr-12">
|
||||||
|
<span class="material-symbols-outlined absolute right-4 top-4 text-slate-400 cursor-pointer" id="toggle-pwd" onclick="togglePassword()">visibility</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-1.5 w-full bg-slate-100 rounded-full mt-3 overflow-hidden">
|
||||||
|
<div id="strength-bar" class="h-full bg-slate-300 w-0 transition-all duration-300"></div>
|
||||||
|
</div>
|
||||||
|
<p id="strength-text" class="text-xs font-bold text-slate-400 mt-1 uppercase tracking-tighter">Sandi Sangat Lemah</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3 p-4 bg-slate-50 rounded-2xl">
|
||||||
|
<input type="checkbox" id="terms" name="check" class="mt-1 w-5 h-5 accent-emerald-600 rounded">
|
||||||
|
<label for="terms" class="text-sm text-slate-600">
|
||||||
|
Saya menyatakan bahwa data yang diisi adalah benar dan sekolah berkomitmen menjalankan Gerakan PBLHS sesuai <a href="https://kemenlh.go.id/contents/15/Adiwiyata" target="_blank" class="text-emerald-600 font-bold hover:underline">Permen LH No. 5 Tahun 2025</a>.
|
||||||
|
<p></p>
|
||||||
|
</label></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="errorMessage" class="hidden mt-4 p-3 bg-red-50 border border-red-100 rounded-xl flex items-center gap-2 text-red-600 text-sm font-medium">
|
||||||
|
<span class="material-symbols-outlined text-lg">error</span>
|
||||||
|
<span class="message">Username atau password salah. Silakan coba lagi.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Buttons -->
|
||||||
|
<div class="flex items-center justify-between pt-10">
|
||||||
|
<button type="button" id="prev-btn" onclick="prevStep()" class="hidden px-8 py-4 bg-slate-100 text-slate-600 rounded-2xl font-bold hover:bg-slate-200 transition-all flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined">arrow_back</span> Kembali
|
||||||
|
</button>
|
||||||
|
<div class="flex-1"></div>
|
||||||
|
<button type="button" id="next-btn" onclick="nextStep()" class="px-10 py-4 bg-emerald-600 text-white rounded-2xl font-extrabold shadow-xl shadow-emerald-200 hover:bg-emerald-700 active:scale-95 transition-all flex items-center gap-2">
|
||||||
|
Lanjut <span class="material-symbols-outlined">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
<button type="submit" id="submit-btn" class="hidden px-12 py-4 bg-emerald-600 text-white rounded-2xl font-extrabold shadow-xl shadow-emerald-200 hover:bg-emerald-700 active:scale-95 transition-all">
|
||||||
|
Daftar Sekarang
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="px-8 py-6 bg-slate-50 border-t border-slate-100 text-center">
|
||||||
|
<p class="text-sm text-slate-500">Sudah memiliki akun? <a href="{{ url('login') }}" class="text-emerald-600 font-bold hover:underline">Masuk di sini</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
|
</main>
|
||||||
<script src="{{asset('assets/js/app.bundle.js')}}"></script>
|
<div id="success-modal" class="fixed inset-0 z-[100] hidden flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm">
|
||||||
<script src="{{asset('assets/js/formplugins/select2/select2.bundle.js')}}"></script>
|
<div class="bg-white rounded-[3rem] p-10 max-w-lg w-full text-center shadow-2xl animate-[zoomIn_0.3s_ease-out] relative overflow-hidden">
|
||||||
<script>
|
<div class="absolute top-0 left-0 w-full h-2 bg-emerald-500"></div>
|
||||||
$(document).ready(function() {
|
<div class="w-24 h-24 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
$('.select2').select2();
|
<span class="material-symbols-outlined text-5xl">task_alt</span>
|
||||||
$('.numberInput').on('input', function() {
|
</div>
|
||||||
this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
|
<h3 class="text-3xl font-extrabold text-slate-900 mb-4">Registrasi Berhasil!</h3>
|
||||||
});
|
<p class="text-slate-600 mb-8">Data pendaftaran sekolah Anda telah diterima. Silakan cek email Anda untuk instruksi verifikasi dan login.</p>
|
||||||
$('#togglePassword').on('click', function() {
|
<button onclick="window.location.reload()" class="w-full py-4 bg-emerald-600 text-white rounded-2xl font-bold hover:bg-emerald-700 transition-all">Selesai</button>
|
||||||
let passwordField = $('#password');
|
</div>
|
||||||
let icon = $(this).find('i');
|
</div>
|
||||||
|
@endsection
|
||||||
|
@section('js')
|
||||||
|
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
|
||||||
|
{{-- <script src="{{asset('assets/js/app.bundle.js')}}"></script> --}}
|
||||||
|
<script>
|
||||||
|
$('.npsn').on('keyup', function(){
|
||||||
|
var query = $(this).val();
|
||||||
|
var tingkat_sekolah = $('.tingkat_sekolah').find(':selected').val();
|
||||||
|
if(query.length > 0) {
|
||||||
|
$.ajax({
|
||||||
|
url: "{{ url('sekolahNpsn') }}",
|
||||||
|
type: "POST",
|
||||||
|
xhrFields: {
|
||||||
|
withCredentials: true
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
query: query,
|
||||||
|
_token: '{{csrf_token()}}',
|
||||||
|
tingkat_sekolah:tingkat_sekolah
|
||||||
|
},
|
||||||
|
success: function(data) {
|
||||||
|
$('#result').html('');
|
||||||
|
if(data.length > 0) {
|
||||||
|
$('#result').show();
|
||||||
|
$.each(data, function(index, data){
|
||||||
|
$('#result').append('<li data-npsn="'+data.npsn+'">' + data.nama_sekolah + '</li>');
|
||||||
|
});
|
||||||
|
|
||||||
// Cek apakah input saat ini bertipe password
|
} else {
|
||||||
if (passwordField.attr('type') === 'password') {
|
$('.nama_sekolah').removeAttr('readonly');
|
||||||
passwordField.attr('type', 'text'); // Ubah ke teks
|
$('#result').hide();
|
||||||
icon.removeClass('fa-eye').addClass('fa-eye-slash'); // Ganti ikon
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$('#result').hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Saat klik pada hasil pencarian, isi input dan sembunyikan daftar
|
||||||
|
$(document).on('click', '#result li', function(){
|
||||||
|
var npsn = $(this).attr('data-npsn');
|
||||||
|
|
||||||
|
$('.npsn').val(npsn);
|
||||||
|
$('.nama_sekolah').attr('readonly',true);
|
||||||
|
$('.nama_sekolah').val($(this).text());
|
||||||
|
$('#result').hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Klik di luar input atau hasil pencarian untuk menyembunyikan daftar
|
||||||
|
$(document).on('click', function(e) {
|
||||||
|
if (!$(e.target).closest('.npsn, #result').length) {
|
||||||
|
$('#result').hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let currentStep = 1;
|
||||||
|
const totalSteps = 4;
|
||||||
|
const form = document.getElementById('register-form');
|
||||||
|
const progressBar = document.getElementById('progress-bar');
|
||||||
|
const stepTitle = document.getElementById('step-title');
|
||||||
|
const stepCounter = document.getElementById('step-counter');
|
||||||
|
|
||||||
|
const stepTitles = [
|
||||||
|
"NPSN Sekolah",
|
||||||
|
"Data Alamat Sekolah",
|
||||||
|
"Kontak Person",
|
||||||
|
"Pengaturan Akun"
|
||||||
|
];
|
||||||
|
|
||||||
|
function updateUI() {
|
||||||
|
// Hide all steps
|
||||||
|
for (let i = 1; i <= totalSteps; i++) {
|
||||||
|
document.getElementById(`step-${i}`).classList.add('hidden');
|
||||||
|
const dot = document.getElementById(`dot-${i}`);
|
||||||
|
if (dot) {
|
||||||
|
if (i <= currentStep) {
|
||||||
|
dot.classList.add('bg-emerald-500');
|
||||||
|
dot.classList.remove('bg-slate-300');
|
||||||
} else {
|
} else {
|
||||||
passwordField.attr('type', 'password'); // Ubah ke password
|
dot.classList.remove('bg-emerald-500');
|
||||||
icon.removeClass('fa-eye-slash').addClass('fa-eye'); // Kembalikan ikon
|
dot.classList.add('bg-slate-300');
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
$('.npsn').on('keyup', function(){
|
|
||||||
var query = $(this).val();
|
|
||||||
var tingkat_sekolah = $('.tingkat_sekolah').find(':selected').val();
|
|
||||||
if(query.length > 0) {
|
|
||||||
$.ajax({
|
|
||||||
url: "{{ url('sekolahNpsn') }}",
|
|
||||||
type: "POST",
|
|
||||||
xhrFields: {
|
|
||||||
withCredentials: true
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
query: query,
|
|
||||||
_token: '{{csrf_token()}}',
|
|
||||||
tingkat_sekolah:tingkat_sekolah
|
|
||||||
},
|
|
||||||
success: function(data) {
|
|
||||||
$('#result').html('');
|
|
||||||
if(data.length > 0) {
|
|
||||||
$('#result').show();
|
|
||||||
$.each(data, function(index, data){
|
|
||||||
$('#result').append('<li data-npsn="'+data.npsn+'">' + data.nama_sekolah + '</li>');
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
$('.nama_sekolah').removeAttr('readonly');
|
|
||||||
$('#result').hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
$('#result').hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Saat klik pada hasil pencarian, isi input dan sembunyikan daftar
|
|
||||||
$(document).on('click', '#result li', function(){
|
|
||||||
var npsn = $(this).attr('data-npsn');
|
|
||||||
|
|
||||||
$('.npsn').val(npsn);
|
|
||||||
$('.nama_sekolah').attr('readonly',true);
|
|
||||||
$('.nama_sekolah').val($(this).text());
|
|
||||||
$('#result').hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Klik di luar input atau hasil pencarian untuk menyembunyikan daftar
|
|
||||||
$(document).on('click', function(e) {
|
|
||||||
if (!$(e.target).closest('.npsn, #result').length) {
|
|
||||||
$('#result').hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$("#js-login-btn").click(function(event)
|
|
||||||
{
|
|
||||||
|
|
||||||
// Fetch form to apply custom Bootstrap validation
|
|
||||||
var form = $("#js-login")
|
|
||||||
|
|
||||||
if (form[0].checkValidity() === false)
|
|
||||||
{
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
form.addClass('was-validated');
|
|
||||||
// Perform ajax submit here...
|
|
||||||
});
|
|
||||||
|
|
||||||
function clear(elementId) {
|
|
||||||
$('#' + elementId).empty();
|
|
||||||
$('#' + elementId).select2();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#sekolah').on('select2:select', function(e) {
|
// Show current
|
||||||
let npsn = $(this).find(':selected').attr('data-npsn');
|
document.getElementById(`step-${currentStep}`).classList.remove('hidden');
|
||||||
$('.npsn').val(npsn);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
// Progress Bar
|
||||||
|
progressBar.style.width = `${(currentStep / totalSteps) * 100}%`;
|
||||||
|
|
||||||
$('select').on("select2:selecting", function(e) {
|
// Text
|
||||||
var selectorOrigin = this.id;
|
stepTitle.innerText = stepTitles[currentStep - 1];
|
||||||
var id = e.params.args.data.id;
|
stepCounter.innerText = `Langkah ${currentStep} dari ${totalSteps}`;
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
document.getElementById('prev-btn').classList.toggle('hidden', currentStep === 1);
|
||||||
|
document.getElementById('next-btn').classList.toggle('hidden', currentStep === totalSteps);
|
||||||
|
document.getElementById('submit-btn').classList.toggle('hidden', currentStep !== totalSteps);
|
||||||
|
}
|
||||||
|
|
||||||
if(selectorOrigin=='provinsi'){
|
function nextStep() {
|
||||||
$('#loading-spinner').show();
|
if (currentStep < totalSteps) {
|
||||||
clear('kabupaten');
|
// Mock validation for Step 1
|
||||||
selector = 'kabupaten';
|
if (currentStep === 1) {
|
||||||
url_to = 'kabupaten';
|
const npsn = document.getElementById('npsn').value;
|
||||||
getSelect(id, selector, url_to);
|
if (npsn.length < 8) {
|
||||||
}
|
alert("Mohon masukkan 8 digit NPSN yang valid.");
|
||||||
|
return;
|
||||||
if(selectorOrigin=='kabupaten'){
|
|
||||||
$('#loading-spinner').show();
|
|
||||||
clear('kecamatan');
|
|
||||||
selector = 'kecamatan';
|
|
||||||
url_to = 'kecamatan';
|
|
||||||
getSelect(id, selector, url_to);
|
|
||||||
}
|
|
||||||
if(selectorOrigin=='kecamatan'){
|
|
||||||
$('#loading-spinner').show();
|
|
||||||
clear('sekolah');
|
|
||||||
selector = 'sekolah';
|
|
||||||
url_to = 'sekolah';
|
|
||||||
getSelect(id, selector, url_to);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function getSelect(id, selectTo, urlTo, selected = "") {
|
|
||||||
id = id;
|
|
||||||
var base_url = "{{url('/')}}";
|
|
||||||
//alert(id);
|
|
||||||
destino = "#" + selectTo;
|
|
||||||
valor = $('#' + id).find(":selected").val();
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
method: "POST",
|
|
||||||
url: base_url + "/get/" + urlTo,
|
|
||||||
data: {
|
|
||||||
_token: '{{csrf_token()}}',
|
|
||||||
id: id
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.done(function(msg) {
|
|
||||||
obj = msg.data;
|
|
||||||
|
|
||||||
if (obj.length > 0) {
|
|
||||||
//Clear the current options
|
|
||||||
$(destino).empty();
|
|
||||||
|
|
||||||
if(selectTo=='kabupaten'){
|
|
||||||
$(destino).append('<option value="">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$.each(obj, function(index) {
|
|
||||||
value = obj[index].id;
|
|
||||||
text = obj[index].name;
|
|
||||||
$(destino).append('<option value=' + value + '>' + text + '</option>');
|
|
||||||
});
|
|
||||||
console.log(selected)
|
|
||||||
if (selected) {
|
|
||||||
$(destino).val(selected).trigger('change');
|
|
||||||
selected = "";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
if(selectTo=='kecamatan'){
|
currentStep++;
|
||||||
$(destino).append('<option value="">-PILIH KECAMATAN-</option>').select2("val", "0");
|
updateUI();
|
||||||
|
|
||||||
$.each(obj, function(index) {
|
|
||||||
value = obj[index].id;
|
|
||||||
text = obj[index].name;
|
|
||||||
$(destino).append('<option value=' + value + '>' + text + '</option>');
|
|
||||||
});
|
|
||||||
console.log(selected)
|
|
||||||
if (selected) {
|
|
||||||
$(destino).val(selected).trigger('change');
|
|
||||||
selected = "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(selectTo=='sekolah'){
|
|
||||||
$(destino).append('<option value="">-PILIH SEKOLAH-</option>').select2("val", "0");
|
|
||||||
|
|
||||||
$.each(obj, function(index) {
|
|
||||||
value = obj[index].id;
|
|
||||||
text = obj[index].name;
|
|
||||||
npsn = obj[index].npsn;
|
|
||||||
$(destino).append('<option data-npsn="'+npsn+'" value=' + value + '>' + text + '</option>');
|
|
||||||
});
|
|
||||||
console.log(selected)
|
|
||||||
if (selected) {
|
|
||||||
$(destino).val(selected).trigger('change');
|
|
||||||
selected = "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
if(selectTo=='provinsi'){
|
|
||||||
$(destino).empty().append('<option value="0">-PILIH PROVINSI-</option>').select2("val", "0");
|
|
||||||
}
|
|
||||||
if(selectTo=='kabupaten'){
|
|
||||||
$(destino).empty().append('<option value="0">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");
|
|
||||||
}
|
|
||||||
if(selectTo=='kecamatan'){
|
|
||||||
$(destino).empty().append('<option value="0">-PILIH KECAMATAN-</option>').select2("val", "0");
|
|
||||||
}
|
|
||||||
if(selectTo=='sekolah'){
|
|
||||||
$(destino).empty().append('<option value="0">-PILIH SEKOLAH-</option>').select2("val", "0");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
$('#loading-spinner').hide();
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
function prevStep() {
|
||||||
</body>
|
if (currentStep > 1) {
|
||||||
</html>
|
currentStep--;
|
||||||
|
updateUI();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchSchoolData() {
|
||||||
|
const npsn = document.getElementById('npsn').value;
|
||||||
|
const btn = document.getElementById('btn-fetch');
|
||||||
|
const autoFill = document.getElementById('auto-fill-data');
|
||||||
|
|
||||||
|
if (npsn.length === 8) {
|
||||||
|
btn.innerHTML = `<span class="material-symbols-outlined animate-spin">sync</span> Tunggu...`;
|
||||||
|
btn.disabled = true;
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
setTimeout(() => {
|
||||||
|
autoFill.classList.remove('hidden');
|
||||||
|
btn.innerHTML = `<span class="material-symbols-outlined">check_circle</span> Terdata`;
|
||||||
|
btn.classList.replace('bg-emerald-600', 'bg-blue-600');
|
||||||
|
|
||||||
|
// Specific Mock Data for Jakarta
|
||||||
|
const names = ["SDN MENTENG 01", "SMP NEGERI 1 JAKARTA", "SMA NEGERI 8 JAKARTA", "SMK NEGERI 26 JAKARTA"];
|
||||||
|
const levels = ["Sekolah Dasar (SD) • Negeri", "Menengah Pertama (SMP) • Negeri", "Menengah Atas (SMA) • Negeri", "Kejuruan (SMK) • Negeri"];
|
||||||
|
const idx = Math.floor(Math.random() * names.length);
|
||||||
|
|
||||||
|
document.getElementById('display-school-name').innerText = names[idx];
|
||||||
|
document.getElementById('display-school-type').innerText = levels[idx];
|
||||||
|
}, 1200);
|
||||||
|
} else {
|
||||||
|
alert("NPSN harus 8 digit.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkStrength() {
|
||||||
|
const pwd = document.getElementById('password').value;
|
||||||
|
const bar = document.getElementById('strength-bar');
|
||||||
|
const text = document.getElementById('strength-text');
|
||||||
|
|
||||||
|
if (pwd.length === 0) {
|
||||||
|
bar.style.width = '0%';
|
||||||
|
text.innerText = 'Sandi Kosong';
|
||||||
|
text.className = 'text-xs font-bold text-slate-400 mt-1 uppercase tracking-tighter';
|
||||||
|
} else if (pwd.length < 6) {
|
||||||
|
bar.style.width = '30%';
|
||||||
|
bar.className = 'h-full bg-red-500 transition-all';
|
||||||
|
text.innerText = 'Sandi Lemah';
|
||||||
|
text.className = 'text-xs font-bold text-red-500 mt-1 uppercase tracking-tighter';
|
||||||
|
} else if (pwd.length < 10) {
|
||||||
|
bar.style.width = '60%';
|
||||||
|
bar.className = 'h-full bg-amber-500 transition-all';
|
||||||
|
text.innerText = 'Sandi Sedang';
|
||||||
|
text.className = 'text-xs font-bold text-amber-500 mt-1 uppercase tracking-tighter';
|
||||||
|
} else {
|
||||||
|
bar.style.width = '100%';
|
||||||
|
bar.className = 'h-full bg-emerald-500 transition-all';
|
||||||
|
text.innerText = 'Sandi Sangat Kuat';
|
||||||
|
text.className = 'text-xs font-bold text-emerald-500 mt-1 uppercase tracking-tighter';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePassword() {
|
||||||
|
const input = document.getElementById('password');
|
||||||
|
const icon = document.getElementById('toggle-pwd');
|
||||||
|
if (input.type === 'password') {
|
||||||
|
input.type = 'text';
|
||||||
|
icon.innerText = 'visibility_off';
|
||||||
|
} else {
|
||||||
|
input.type = 'password';
|
||||||
|
icon.innerText = 'visibility';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
form.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!document.getElementById('terms').checked) {
|
||||||
|
alert("Mohon setujui Syarat & Ketentuan.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$.ajax({
|
||||||
|
url: "{{ url('register') }}",
|
||||||
|
type: "POST",
|
||||||
|
xhrFields: {
|
||||||
|
withCredentials: true
|
||||||
|
},
|
||||||
|
data: $(form).serialize(), // 🔥 serialize di sini
|
||||||
|
success: function(response) {
|
||||||
|
$('#errorMessage').addClass('hidden');
|
||||||
|
document.getElementById('success-modal').classList.remove('hidden');
|
||||||
|
},error:function(xhr){
|
||||||
|
let res = xhr.responseJSON;
|
||||||
|
$('#errorMessage').removeClass('hidden');
|
||||||
|
$('.message').html(res.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Styles for animations
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
@keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
</script>
|
||||||
|
@endsection
|
||||||
|
|
@ -0,0 +1,494 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>
|
||||||
|
Register - SIDIA Jakarta
|
||||||
|
</title>
|
||||||
|
<meta name="description" content="Login">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
|
||||||
|
<!-- Call App Mode on ios devices -->
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<!-- Remove Tap Highlight on Windows Phone IE -->
|
||||||
|
<meta name="msapplication-tap-highlight" content="no">
|
||||||
|
<!-- base css -->
|
||||||
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/vendors.bundle.css')}}">
|
||||||
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/app.bundle.css')}}">
|
||||||
|
<!-- Place favicon.ico in the root directory -->
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
|
||||||
|
<link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
|
||||||
|
<!-- Optional: page related CSS-->
|
||||||
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/fa-brands.css')}}">
|
||||||
|
<link rel="stylesheet" href="{{asset('assets/css/formplugins/select2/select2.bundle.css')}}">
|
||||||
|
<style type="text/css">
|
||||||
|
.bg-login{
|
||||||
|
background-image: url("{{('assets/bg-login.png')}}");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
#result {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
display: none;
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
width: 80%;
|
||||||
|
z-index: 999;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
#result li {
|
||||||
|
padding: 10px;
|
||||||
|
list-style: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#result li:hover {
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-login">
|
||||||
|
<div class="d-flex align-items-center justify-content-center min-vh-100">
|
||||||
|
<div class="container py-4 py-lg-5 px-4 px-sm-0">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
|
||||||
|
@include('include.alert')
|
||||||
|
<div class="card pr-4 rounded-plus bg-faded" style="border:none;">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-7 d-flex flex-column text-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<img src="{{asset('assets/background.png')}}" class="img-fluid rounded-plus" style="border-top-right-radius:0px; border-bottom-right-radius:0px;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-5 p-4 d-flex flex-column justify-content-center align-items-center gap-3">
|
||||||
|
<div class="d-flex flex-column gap-3 align-items-center justify-content-center mb-5">
|
||||||
|
<div>
|
||||||
|
{{-- <img src="{{asset('assets/logo-dinas.ico')}}" width="50"> --}}
|
||||||
|
<img src="{{asset('assets/logo.png')}}" width="95">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="fw-500">SIDIA Jakarta</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<form method="POST" action="{{url('register')}}">
|
||||||
|
{{csrf_field()}}
|
||||||
|
<div class="row">
|
||||||
|
<div id="loading-spinner" style="display: none; text-align: center;">
|
||||||
|
<img src="{{ asset('assets/spinner.gif') }}" alt="Loading..." width="20">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12 d-none">
|
||||||
|
<div class="form-group row d-none">
|
||||||
|
<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 class="form-group row d-none">
|
||||||
|
<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 class="form-group row d-none">
|
||||||
|
<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-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>
|
||||||
|
<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" readonly value="{{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 class="form-group">
|
||||||
|
<label class="form-label" for="emailverify">Kontak Person</label>
|
||||||
|
<input type="text" value="{{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 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="{{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 class="form-group d-none 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 @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 class="form-group">
|
||||||
|
<label class="form-label" for="emailverify">Alamat Sekolah</label>
|
||||||
|
<input type="text" value="{{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 class="form-group">
|
||||||
|
<label class="form-label" for="emailverify">Telp/WA</label>
|
||||||
|
<input type="text" value="{{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 class="col-md-12 mt-3">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label" for="emailverify">Email</label>
|
||||||
|
<input type="email" name="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 class="form-group">
|
||||||
|
<label class="form-label">Password</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="password" id="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Masukan Password Minimm 8 characters" required>
|
||||||
|
<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 class="form-group">
|
||||||
|
<input type="checkbox" name="check" required> Dengan ini menyatakan bahwa isian registrasi diatas sudah benar.
|
||||||
|
@error('check')
|
||||||
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
||||||
|
@enderror
|
||||||
|
</div>
|
||||||
|
<div class="row no-gutters">
|
||||||
|
<div class="col-md-12 ml-auto text-right">
|
||||||
|
<button id="js-login-btn" type="submit" class="btn btn-block btn-primary btn-lg mt-3">Registrasi</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group text-center mt-3">
|
||||||
|
<span class="">
|
||||||
|
Sudah punya akun? <a href="{{url('login')}}">Login</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group row d-none">
|
||||||
|
<label class="col-xl-12 form-label" for="fname">Sekolah</label>
|
||||||
|
<div class="col-12 pr-1">
|
||||||
|
<select name="sekolah" class="form-control select2 @error('sekolah') sekolah is-invalid @enderror" id="sekolah" required>
|
||||||
|
<option value="0">- PILIH SEKOLAH -</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<p class="text-muted mt-auto text-center mb-0 pt-3">
|
||||||
|
{{date('Y')}} © Dinas Lingkungan Hidup Provinsi DKI Jakarta
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('.select2').select2();
|
||||||
|
$('.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
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.npsn').on('keyup', function(){
|
||||||
|
var query = $(this).val();
|
||||||
|
var tingkat_sekolah = $('.tingkat_sekolah').find(':selected').val();
|
||||||
|
if(query.length > 0) {
|
||||||
|
$.ajax({
|
||||||
|
url: "{{ url('sekolahNpsn') }}",
|
||||||
|
type: "POST",
|
||||||
|
xhrFields: {
|
||||||
|
withCredentials: true
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
query: query,
|
||||||
|
_token: '{{csrf_token()}}',
|
||||||
|
tingkat_sekolah:tingkat_sekolah
|
||||||
|
},
|
||||||
|
success: function(data) {
|
||||||
|
$('#result').html('');
|
||||||
|
if(data.length > 0) {
|
||||||
|
$('#result').show();
|
||||||
|
$.each(data, function(index, data){
|
||||||
|
$('#result').append('<li data-npsn="'+data.npsn+'">' + data.nama_sekolah + '</li>');
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$('.nama_sekolah').removeAttr('readonly');
|
||||||
|
$('#result').hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$('#result').hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Saat klik pada hasil pencarian, isi input dan sembunyikan daftar
|
||||||
|
$(document).on('click', '#result li', function(){
|
||||||
|
var npsn = $(this).attr('data-npsn');
|
||||||
|
|
||||||
|
$('.npsn').val(npsn);
|
||||||
|
$('.nama_sekolah').attr('readonly',true);
|
||||||
|
$('.nama_sekolah').val($(this).text());
|
||||||
|
$('#result').hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Klik di luar input atau hasil pencarian untuk menyembunyikan daftar
|
||||||
|
$(document).on('click', function(e) {
|
||||||
|
if (!$(e.target).closest('.npsn, #result').length) {
|
||||||
|
$('#result').hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
$("#js-login-btn").click(function(event)
|
||||||
|
{
|
||||||
|
|
||||||
|
// Fetch form to apply custom Bootstrap validation
|
||||||
|
var form = $("#js-login")
|
||||||
|
|
||||||
|
if (form[0].checkValidity() === false)
|
||||||
|
{
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addClass('was-validated');
|
||||||
|
// Perform ajax submit here...
|
||||||
|
});
|
||||||
|
|
||||||
|
function clear(elementId) {
|
||||||
|
$('#' + elementId).empty();
|
||||||
|
$('#' + elementId).select2();
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#sekolah').on('select2:select', function(e) {
|
||||||
|
let npsn = $(this).find(':selected').attr('data-npsn');
|
||||||
|
$('.npsn').val(npsn);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$('select').on("select2:selecting", function(e) {
|
||||||
|
var selectorOrigin = this.id;
|
||||||
|
var id = e.params.args.data.id;
|
||||||
|
|
||||||
|
|
||||||
|
if(selectorOrigin=='provinsi'){
|
||||||
|
$('#loading-spinner').show();
|
||||||
|
clear('kabupaten');
|
||||||
|
selector = 'kabupaten';
|
||||||
|
url_to = 'kabupaten';
|
||||||
|
getSelect(id, selector, url_to);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(selectorOrigin=='kabupaten'){
|
||||||
|
$('#loading-spinner').show();
|
||||||
|
clear('kecamatan');
|
||||||
|
selector = 'kecamatan';
|
||||||
|
url_to = 'kecamatan';
|
||||||
|
getSelect(id, selector, url_to);
|
||||||
|
}
|
||||||
|
if(selectorOrigin=='kecamatan'){
|
||||||
|
$('#loading-spinner').show();
|
||||||
|
clear('sekolah');
|
||||||
|
selector = 'sekolah';
|
||||||
|
url_to = 'sekolah';
|
||||||
|
getSelect(id, selector, url_to);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function getSelect(id, selectTo, urlTo, selected = "") {
|
||||||
|
id = id;
|
||||||
|
var base_url = "{{url('/')}}";
|
||||||
|
//alert(id);
|
||||||
|
destino = "#" + selectTo;
|
||||||
|
valor = $('#' + id).find(":selected").val();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
method: "POST",
|
||||||
|
url: base_url + "/get/" + urlTo,
|
||||||
|
data: {
|
||||||
|
_token: '{{csrf_token()}}',
|
||||||
|
id: id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.done(function(msg) {
|
||||||
|
obj = msg.data;
|
||||||
|
|
||||||
|
if (obj.length > 0) {
|
||||||
|
//Clear the current options
|
||||||
|
$(destino).empty();
|
||||||
|
|
||||||
|
if(selectTo=='kabupaten'){
|
||||||
|
$(destino).append('<option value="">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$.each(obj, function(index) {
|
||||||
|
value = obj[index].id;
|
||||||
|
text = obj[index].name;
|
||||||
|
$(destino).append('<option value=' + value + '>' + text + '</option>');
|
||||||
|
});
|
||||||
|
console.log(selected)
|
||||||
|
if (selected) {
|
||||||
|
$(destino).val(selected).trigger('change');
|
||||||
|
selected = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(selectTo=='kecamatan'){
|
||||||
|
$(destino).append('<option value="">-PILIH KECAMATAN-</option>').select2("val", "0");
|
||||||
|
|
||||||
|
$.each(obj, function(index) {
|
||||||
|
value = obj[index].id;
|
||||||
|
text = obj[index].name;
|
||||||
|
$(destino).append('<option value=' + value + '>' + text + '</option>');
|
||||||
|
});
|
||||||
|
console.log(selected)
|
||||||
|
if (selected) {
|
||||||
|
$(destino).val(selected).trigger('change');
|
||||||
|
selected = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(selectTo=='sekolah'){
|
||||||
|
$(destino).append('<option value="">-PILIH SEKOLAH-</option>').select2("val", "0");
|
||||||
|
|
||||||
|
$.each(obj, function(index) {
|
||||||
|
value = obj[index].id;
|
||||||
|
text = obj[index].name;
|
||||||
|
npsn = obj[index].npsn;
|
||||||
|
$(destino).append('<option data-npsn="'+npsn+'" value=' + value + '>' + text + '</option>');
|
||||||
|
});
|
||||||
|
console.log(selected)
|
||||||
|
if (selected) {
|
||||||
|
$(destino).val(selected).trigger('change');
|
||||||
|
selected = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if(selectTo=='provinsi'){
|
||||||
|
$(destino).empty().append('<option value="0">-PILIH PROVINSI-</option>').select2("val", "0");
|
||||||
|
}
|
||||||
|
if(selectTo=='kabupaten'){
|
||||||
|
$(destino).empty().append('<option value="0">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");
|
||||||
|
}
|
||||||
|
if(selectTo=='kecamatan'){
|
||||||
|
$(destino).empty().append('<option value="0">-PILIH KECAMATAN-</option>').select2("val", "0");
|
||||||
|
}
|
||||||
|
if(selectTo=='sekolah'){
|
||||||
|
$(destino).empty().append('<option value="0">-PILIH SEKOLAH-</option>').select2("val", "0");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
$('#loading-spinner').hide();
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
@if(session()->get('type')=='error')
|
||||||
|
<div id="errorMessage" class="mt-4 p-3 bg-red-50 border border-red-100 rounded-xl flex items-center gap-2 text-red-600 text-sm font-medium">
|
||||||
|
<span class="material-symbols-outlined text-lg">error</span>
|
||||||
|
<span>Username atau password salah. Silakan coba lagi.</span>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
@ -145,7 +145,7 @@
|
||||||
<a href="{{ url('/kegiatan') }}" class="text-sm font-semibold hover:text-emerald-600 transition">Kegiatan Sekolah Adiwiyata</a>
|
<a href="{{ url('/kegiatan') }}" class="text-sm font-semibold hover:text-emerald-600 transition">Kegiatan Sekolah Adiwiyata</a>
|
||||||
<a href="{{ url('/galeri') }}" class="text-sm font-semibold hover:text-emerald-600 transition">Galeri</a>
|
<a href="{{ url('/galeri') }}" class="text-sm font-semibold hover:text-emerald-600 transition">Galeri</a>
|
||||||
<div class="h-6 w-[1px] bg-slate-200"></div>
|
<div class="h-6 w-[1px] bg-slate-200"></div>
|
||||||
<a href="{{ url('login') }}" target="_blank" class="px-6 py-2.5 flex items-center gap-2 rounded-full green-gradient text-white text-sm font-bold shadow-lg shadow-emerald-200 hover:shadow-emerald-300 transform hover:scale-105 transition">Masuk <span class="material-symbols-outlined text-lg">login</span></a>
|
<a href="{{ url('login') }}" class="px-6 py-2.5 flex items-center gap-2 rounded-full green-gradient text-white text-sm font-bold shadow-lg shadow-emerald-200 hover:shadow-emerald-300 transform hover:scale-105 transition">Masuk <span class="material-symbols-outlined text-lg">login</span></a>
|
||||||
</div>
|
</div>
|
||||||
<button class="md:hidden text-slate-600"><span class="material-symbols-outlined">menu</span></button>
|
<button class="md:hidden text-slate-600"><span class="material-symbols-outlined">menu</span></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,147 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.appNew')
|
||||||
@section('title',@$title)
|
@section('title',@$title)
|
||||||
@section('css')
|
@section('css')
|
||||||
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-table.min.css')}}">
|
|
||||||
@endsection
|
@endsection
|
||||||
@section('content')
|
@section('content')
|
||||||
<section id="section4" class="container mx-auto p-12 md:py-12">
|
<section id="directory" class="py-20 bg-white">
|
||||||
<div class="flex justify-between mb-15">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<h4 class="text-lg md:text-2xl font-extrabold text-black">{{@$title}}</h4>
|
<div class="text-center mb-16">
|
||||||
</div>
|
<h3 class="text-3xl font-extrabold text-slate-900 mb-4">Direktori Sekolah Adiwiyata</h3>
|
||||||
<div class="w-full h-100">
|
<p class="text-slate-500 max-w-2xl mx-auto">Cari dan filter sekolah-sekolah di Jakarta yang telah berhasil meraih predikat Adiwiyata.</p>
|
||||||
<table class="table"
|
</div>
|
||||||
data-search="false"
|
|
||||||
data-toggle="table"
|
<!-- Filters -->
|
||||||
data-pagination="true"
|
<div class="bg-slate-50 p-6 rounded-3xl mb-10 flex flex-col lg:flex-row gap-4 items-center">
|
||||||
data-toolbar="#toolbar"
|
<div class="flex-1 w-full relative">
|
||||||
data-show-refresh="false"
|
<span class="absolute left-4 top-1/2 -translate-y-1/2 material-symbols-outlined text-slate-400">search</span>
|
||||||
data-url="{{url('data/sekolah')}}"
|
<input type="text" id="schoolSearch" placeholder="Cari nama sekolah (contoh: SMAN 62)..." class="w-full pl-12 pr-4 py-3.5 bg-white border border-slate-200 rounded-2xl focus:ring-2 focus:ring-emerald-500 outline-none">
|
||||||
data-ajax-options='{"xhrFields": {"withCredentials": true}}'
|
</div>
|
||||||
data-sort-name="ids"
|
<div class="flex gap-4 w-full lg:w-auto">
|
||||||
data-sort-order="desc"
|
<select id="filterCity" class="flex-1 lg:w-48 px-4 py-3.5 bg-white border border-slate-200 rounded-2xl outline-none">
|
||||||
data-page-size="10"
|
<option value="All">Semua Kota</option>
|
||||||
data-id-field="id"
|
<option value="Jakarta Timur">Jakarta Timur</option>
|
||||||
id="grid-data">
|
<option value="Jakarta Pusat">Jakarta Pusat</option>
|
||||||
<thead class="bg-success text-white text-center border border-[#eaeaea] px-3 py-3">
|
<option value="Jakarta Selatan">Jakarta Selatan</option>
|
||||||
<tr>
|
<option value="Jakarta Utara">Jakarta Utara</option>
|
||||||
<th class="text-center border border-[#eaeaea] px-3 py-2" data-field="no">No</th>
|
<option value="Jakarta Barat">Jakarta Barat</option>
|
||||||
<th class="border border-[#eaeaea] px-3 py-2" data-field="sekolah">Sekolah</th>
|
</select>
|
||||||
<th class="border border-[#eaeaea] px-3 py-2" data-field="kota">Kota</th>
|
<select id="filterLevel" class="flex-1 lg:w-48 px-4 py-3.5 bg-white border border-slate-200 rounded-2xl outline-none">
|
||||||
<th class="text-center border border-[#eaeaea] px-3 py-2" data-field="tahun">Tahun</th>
|
<option value="All">Semua Jenjang</option>
|
||||||
<th class="text-center border border-[#eaeaea] px-3 py-2" data-field="skor">Skor</th>
|
<option value="Provinsi">Provinsi</option>
|
||||||
</tr>
|
<option value="Nasional">Nasional</option>
|
||||||
</thead>
|
<option value="Mandiri">Mandiri</option>
|
||||||
<tbody></tbody>
|
<option value="Kota">Kota</option>
|
||||||
</table>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
|
<!-- School Grid -->
|
||||||
|
<div id="schoolGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
|
||||||
|
Nasional
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 62 JAKARTA</h4>
|
||||||
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-100 text-blue-700">
|
||||||
|
Provinsi
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 9 JAKARTA</h4>
|
||||||
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-emerald-100 text-emerald-700">
|
||||||
|
Kota
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SDS Merpati</h4>
|
||||||
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Pusat
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
|
||||||
|
Nasional
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg text-slate-800 mb-1">MAN 4 JAKARTA</h4>
|
||||||
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Selatan
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-indigo-100 text-indigo-700">
|
||||||
|
Mandiri
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SDN Rambutan 03 Pagi</h4>
|
||||||
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-100 text-blue-700">
|
||||||
|
Provinsi
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMPN 23 JAKARTA</h4>
|
||||||
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Utara
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
|
||||||
|
Nasional
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 42 JAKARTA</h4>
|
||||||
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-emerald-100 text-emerald-700">
|
||||||
|
Kota
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SDN 01 Grogol</h4>
|
||||||
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Barat
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-100 text-blue-700">
|
||||||
|
Provinsi
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 1 JAKARTA</h4>
|
||||||
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Pusat
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<button class="px-8 py-3 bg-slate-100 text-slate-600 rounded-full font-bold hover:bg-slate-200 transition-colors">Tampilkan Lebih Banyak</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@endsection
|
@endsection
|
||||||
@section('js')
|
@section('js')
|
||||||
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
|
|
||||||
<script type="text/javascript" src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
@extends('layouts.app')
|
||||||
|
@section('title',@$title)
|
||||||
|
@section('css')
|
||||||
|
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-table.min.css')}}">
|
||||||
|
@endsection
|
||||||
|
@section('content')
|
||||||
|
<section id="section4" class="container mx-auto p-12 md:py-12 d-none">
|
||||||
|
<div class="flex justify-between mb-15">
|
||||||
|
<h4 class="text-lg md:text-2xl font-extrabold text-black">{{@$title}}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-100">
|
||||||
|
<table class="table"
|
||||||
|
data-search="false"
|
||||||
|
data-toggle="table"
|
||||||
|
data-pagination="true"
|
||||||
|
data-toolbar="#toolbar"
|
||||||
|
data-show-refresh="false"
|
||||||
|
data-url="{{url('data/sekolah')}}"
|
||||||
|
data-ajax-options='{"xhrFields": {"withCredentials": true}}'
|
||||||
|
data-sort-name="ids"
|
||||||
|
data-sort-order="desc"
|
||||||
|
data-page-size="10"
|
||||||
|
data-id-field="id"
|
||||||
|
id="grid-data">
|
||||||
|
<thead class="bg-success text-white text-center border border-[#eaeaea] px-3 py-3">
|
||||||
|
<tr>
|
||||||
|
<th class="text-center border border-[#eaeaea] px-3 py-2" data-field="no">No</th>
|
||||||
|
<th class="border border-[#eaeaea] px-3 py-2" data-field="sekolah">Sekolah</th>
|
||||||
|
<th class="border border-[#eaeaea] px-3 py-2" data-field="kota">Kota</th>
|
||||||
|
<th class="text-center border border-[#eaeaea] px-3 py-2" data-field="tahun">Tahun</th>
|
||||||
|
<th class="text-center border border-[#eaeaea] px-3 py-2" data-field="skor">Skor</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
@endsection
|
||||||
|
@section('js')
|
||||||
|
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
|
||||||
|
<script type="text/javascript" src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
|
||||||
|
@endsection
|
||||||
|
|
@ -51,7 +51,7 @@ Route::middleware([Session::class])->name('modules.')->group(function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
Route::get('/',[FrontController::class,'index'])->name('index');
|
Route::get('/',[FrontController::class,'index'])->name('index');
|
||||||
Route::get('/new',[FrontController::class,'indexNew'])->name('indexNew');
|
// Route::get('/new',[FrontController::class,'indexNew'])->name('indexNew');
|
||||||
Route::get('/sekolah',[FrontController::class,'sekolah'])->name('sekolah');
|
Route::get('/sekolah',[FrontController::class,'sekolah'])->name('sekolah');
|
||||||
Route::get('/kegiatan',[FrontController::class,'kegiatan'])->name('kegiatan');
|
Route::get('/kegiatan',[FrontController::class,'kegiatan'])->name('kegiatan');
|
||||||
Route::get('/kegiatan/{slug}',[FrontController::class,'kegiatan_detail'])->name('kegiatan_detail');
|
Route::get('/kegiatan/{slug}',[FrontController::class,'kegiatan_detail'])->name('kegiatan_detail');
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue