226 lines
14 KiB
PHP
226 lines
14 KiB
PHP
@extends('layouts.master')
|
|
|
|
@section('page-css')
|
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datagrid/datatables/datatables.bundle.css')}}">
|
|
@endsection
|
|
@section('content')
|
|
|
|
<div class="row">
|
|
<div class="col-12 mb-3">
|
|
<div class="d-flex flex-row justify-content-between">
|
|
<div class="d-flex align-items-center">
|
|
<div class="subheader mb-0">
|
|
<h1 class="subheader-title">
|
|
{{$title}}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="align-items-end">
|
|
<div class="card">
|
|
<div class="card-body p-2">
|
|
<div class="d-flex flex-row gap-3 justify-content-center align-items-center">
|
|
<div class="p-2 bg-secondary rounded">
|
|
<i class="fal fa-home"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="fw-700 mb-1">{{session('name')}}</h5>
|
|
<p class="mb-0">NPSN: {{session('npsn')}}</p>
|
|
</div>
|
|
<div class="d-flex flex-column gap-1">
|
|
<span class="badge bg-primary-light text-primary">{{session('tingkat_sekolah')}}</span>
|
|
<span class="badge bg-success-light text-success">{{session('status_sekolah')}}</span>
|
|
<span class="badge bg-info-light text-info">Level {{levelAdiwiyata(session('npsn'))}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger">
|
|
<ul>
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="max-w-xl mx-auto shadow-md">
|
|
<div class="mb-6 d-flex flex-row gap-3 justify-between">
|
|
<div class="p-2 rounded step-indicator bg-primary-light text-primary font-semibold">Data Jumlah</div>
|
|
<div class="p-2 rounded step-indicator text-secondary">Penghematan Air</div>
|
|
<div class="p-2 rounded step-indicator text-secondary">Penghematan Listrik</div>
|
|
</div>
|
|
</div>
|
|
<form id="form" action="{{route($route.'.store')}}" method="POST">
|
|
{{csrf_field()}}
|
|
<!-- Step 1 -->
|
|
<div class="step" id="step1">
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="fw-500">Jumlah Peserta Didik</label>
|
|
<input name="jumlah_peserta_didik" value="{{@$jumlah_peserta_didik ? @$jumlah_peserta_didik : old('jumlah_peserta_didik')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah peserta didik">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Jumlah Tenaga Pendidik</label>
|
|
<input name="jumlah_tenaga_pendidik" value="{{@$jumlah_tenaga_pendidik ? @$jumlah_tenaga_pendidik : old('jumlah_tenaga_pendidik')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah tenaga pendidik">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Jumlah Tenaga kependidikan</label>
|
|
<input name="jumlah_tenaga_kependidikan" value="{{@$jumlah_tenaga_kependidikan ? @$jumlah_tenaga_kependidikan : old('jumlah_tenaga_kependidikan')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah tenaga kependidikan">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Jumlah Warga Sekolah Lainnya</label>
|
|
<input name="jumlah_warga_sekolah_lainnya" value="{{@$jumlah_warga_sekolah_lainnya ? @$jumlah_warga_sekolah_lainnya : old('jumlah_warga_sekolah_lainnya')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah warga lainnya (cont:petugas kebersihan, petugas keamanan, petugas kantin, dll)">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="fw-500">Jumlah Biopori</label>
|
|
<input name="jumlah_biopori" value="{{@$jumlah_biopori ? @$jumlah_biopori : old('jumlah_biopori')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah biopori">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Jumlah Sumur Resapan</label>
|
|
<input name="jumlah_sumur_resapan" value="{{@$jumlah_sumur_resapan ? @$jumlah_sumur_resapan : old('jumlah_sumur_resapan')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah sumur resapan">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Jumlah Pohon/Tanaman yang ditanam dan tumbuh</label>
|
|
<input name="jumlah_pohon" value="{{@$jumlah_pohon ? @$jumlah_pohon : old('jumlah_pohon')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah pohon tanaman">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-3">
|
|
<button type="button" class="next btn btn-primary text-white rounded">Selanjutnya <i class="fal fa-arrow-right"></i></button>
|
|
</div>
|
|
</div>
|
|
<!-- Step 2 -->
|
|
<div class="step d-none" id="step2">
|
|
<div class="alert bg-primary-light">
|
|
<p class="mb-0 text-primary">Penghematan air sebelum dan setelah melaksanakan gerakan PBLHS</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Sebelum melaksanakan gerakan PBLHS <small class="text-warning">(Meter Kubik/Bulan)</small></label>
|
|
<input name="air_sebelum_pblhs" value="{{@$air_sebelum_pblhs ? @$air_sebelum_pblhs : old('air_sebelum_pblhs')}}" type="text" class="numberInput form-control is-required" placeholder="rata-rata per bulan dalam meter kubik">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Setelah melaksanakan gerakan PBLHS <small class="text-warning">(Meter Kubik/Bulan dalam Tahun ajaran 2022/2023)</small></label>
|
|
<input name="air_setelah_pblhs" value="{{@$air_setelah_pblhs ? @$air_setelah_pblhs : old('air_setelah_pblhs')}}" type="text" class="numberInput form-control is-required" placeholder="rata-rata per bulan dalam meter kubik">
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<button type="button" class="prev btn btn-secondary text-black px-4 py-2 rounded"><i class="fal fa-arrow-left"></i> Kembali</button>
|
|
<button type="button" class="next btn btn-primary text-white px-4 py-2 rounded">Selanjutnya <i class="fal fa-arrow-right"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="step d-none" id="step3">
|
|
<div class="alert bg-primary-light">
|
|
<p class="mb-0 text-primary">Penghematan listrik sebelum dan setelah melaksanakan gerakan PBLHS</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="fw-500">Sebelum melaksanakan gerakan PBLHS <small class="text-warning">(KWH/Bulan)</small></label>
|
|
<input name="listrik_sebelum_pblhs" value="{{@$listrik_sebelum_pblhs ? @$listrik_sebelum_pblhs : old('listrik_sebelum_pblhs')}}" type="text" class="numberInput form-control is-required" placeholder="rata-rata per bulan dalam kwh">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Setelah melaksanakan gerakan PBLHS <small class="text-warning">(KWH/Bulan dalam Tahun ajaran 2022/2023)</small></label>
|
|
<input name="listrik_setelah_pblhs" value="{{@$listrik_setelah_pblhs ? @$listrik_setelah_pblhs : old('listrik_setelah_pblhs')}}" type="text" class="numberInput form-control is-required" placeholder="rata-rata per bulan dalam kwh">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Luas ruangan ber AC</label>
|
|
<input name="luas_ruangan_ac" value="{{@$luas_ruangan_ac ? @$luas_ruangan_ac : old('luas_ruangan_ac')}}" type="text" class="numberInput form-control is-required" placeholder="dalam satuan meter persegi">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="fw-500">Luas ruangan non AC</label>
|
|
<input name="luas_ruangan_non_ac" value="{{@$luas_ruangan_non_ac ? @$luas_ruangan_non_ac : old('luas_ruangan_non_ac')}}" type="text" class="numberInput form-control is-required" placeholder="dalam satuan meter persegi">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw-500">Jumlah Kader</label>
|
|
<input name="jumlah_kader" value="{{@$jumlah_kader ? @$jumlah_kader : old('jumlah_kader')}}" type="text" class="numberInput form-control is-required" placeholder="jml kader yang dibentuk dan diberdayakan selama pelaksanaan gerakan PBLHS">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between mt-3">
|
|
<button type="button" class="prev btn btn-secondary text-black px-4 py-2 rounded"><i class="fal fa-arrow-left"></i> Kembali</button>
|
|
<button type="submit" class="submit btn btn-success text-white px-4 py-2 rounded"><i class="fal fa-save"></i> Simpan Data</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@section('page-js')
|
|
<script>
|
|
const steps = document.querySelectorAll(".step");
|
|
const indicators = document.querySelectorAll(".step-indicator");
|
|
let currentStep = 0;
|
|
|
|
function showStep(index) {
|
|
steps.forEach((step, i) => {
|
|
step.classList.toggle("d-none", i !== index);
|
|
indicators[i].classList.toggle("bg-primary-light", i === index);
|
|
indicators[i].classList.toggle("text-primary", i === index);
|
|
indicators[i].classList.toggle("text-secondary", i !== index);
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll(".next").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
if (currentStep < steps.length - 1) {
|
|
currentStep++;
|
|
showStep(currentStep);
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".prev").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
if (currentStep > 0) {
|
|
currentStep--;
|
|
showStep(currentStep);
|
|
}
|
|
});
|
|
});
|
|
|
|
document.getElementById("form").addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
|
|
let isValid = true; // Flag validasi
|
|
|
|
$('.is-required').each(function () {
|
|
|
|
let value = $(this).val()?.trim();
|
|
if (!value) {
|
|
isValid = false;
|
|
$(this).addClass("is-invalid");
|
|
} else {
|
|
$(this).removeClass("is-invalid");
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
toastr.error("Harap isi semua field yang wajib diisi", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
|
|
// alert(".");
|
|
return;
|
|
}else{
|
|
form.submit();
|
|
}
|
|
});
|
|
|
|
// Initialize first step
|
|
showStep(currentStep);
|
|
</script>
|
|
@endsection |