499 lines
		
	
	
		
			21 KiB
		
	
	
	
		
			PHP
		
	
	
			
		
		
	
	
			499 lines
		
	
	
		
			21 KiB
		
	
	
	
		
			PHP
		
	
	
| @extends('layouts.master')
 | |
| 
 | |
| @section('page-css')
 | |
| <link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datagrid/datatables/datatables.bundle.css')}}">
 | |
| <style type="text/css">
 | |
|     /* The actual timeline (the vertical ruler) */
 | |
| .main-timeline {
 | |
|   position: relative;
 | |
| }
 | |
| 
 | |
| /* The actual timeline (the vertical ruler) */
 | |
| .main-timeline::after {
 | |
|   content: '';
 | |
|   position: absolute;
 | |
|   width: 6px;
 | |
|   background-color: #939597;
 | |
|   top: 0;
 | |
|   bottom: 0;
 | |
|   left: 50%;
 | |
|   margin-left: -3px;
 | |
| }
 | |
| 
 | |
| /* Container around content */
 | |
| .timeline {
 | |
|   position: relative;
 | |
|   background-color: inherit;
 | |
|   width: 50%;
 | |
| }
 | |
| 
 | |
| /* The circles on the timeline */
 | |
| .timeline::after {
 | |
|   content: '';
 | |
|   position: absolute;
 | |
|   width: 25px;
 | |
|   height: 25px;
 | |
|   right: -13px;
 | |
|   background-color: #939597;
 | |
|   border: 5px solid #F5DF4D;
 | |
|   top: 15px;
 | |
|   border-radius: 50%;
 | |
|   z-index: 1;
 | |
| }
 | |
| 
 | |
| /* Place the container to the left */
 | |
| .left {
 | |
|   padding: 0px 40px 20px 0px;
 | |
|   left: 0;
 | |
| }
 | |
| 
 | |
| /* Place the container to the right */
 | |
| .right {
 | |
|   padding: 0px 0px 20px 40px;
 | |
|   left: 50%;
 | |
| }
 | |
| 
 | |
| /* Add arrows to the left container (pointing right) */
 | |
| .left::before {
 | |
|   content: " ";
 | |
|   position: absolute;
 | |
|   top: 18px;
 | |
|   z-index: 1;
 | |
|   right: 30px;
 | |
|   border: medium solid white;
 | |
|   border-width: 10px 0 10px 10px;
 | |
|   border-color: transparent transparent transparent white;
 | |
| }
 | |
| 
 | |
| /* Add arrows to the right container (pointing left) */
 | |
| .right::before {
 | |
|   content: " ";
 | |
|   position: absolute;
 | |
|   top: 18px;
 | |
|   z-index: 1;
 | |
|   left: 30px;
 | |
|   border: medium solid white;
 | |
|   border-width: 10px 10px 10px 0;
 | |
|   border-color: transparent white transparent transparent;
 | |
| }
 | |
| 
 | |
| /* Fix the circle for containers on the right side */
 | |
| .right::after {
 | |
|   left: -12px;
 | |
| }
 | |
| 
 | |
| /* Media queries - Responsive timeline on screens less than 600px wide */
 | |
| @media screen and (max-width: 600px) {
 | |
|   /* Place the timelime to the left */
 | |
|   .main-timeline::after {
 | |
|     left: 31px;
 | |
|   }
 | |
| 
 | |
|   /* Full-width containers */
 | |
|   .timeline {
 | |
|     width: 100%;
 | |
|     padding-left: 70px;
 | |
|     padding-right: 25px;
 | |
|   }
 | |
| 
 | |
|   /* Make sure that all arrows are pointing leftwards */
 | |
|   .timeline::before {
 | |
|     left: 60px;
 | |
|     border: medium solid white;
 | |
|     border-width: 10px 10px 10px 0;
 | |
|     border-color: transparent white transparent transparent;
 | |
|   }
 | |
| 
 | |
|   /* Make sure all circles are at the same spot */
 | |
|   .left::after, .right::after {
 | |
|     left: 18px;
 | |
|   }
 | |
| 
 | |
|   .left::before {
 | |
|     right: auto;
 | |
|   }
 | |
| 
 | |
|   /* Make all right containers behave like the left ones */
 | |
|   .right {
 | |
|     left: 0%;
 | |
|   }
 | |
| }
 | |
| 
 | |
|     .listItem{
 | |
|         list-style: none;
 | |
|         margin: 0;
 | |
|         padding: 0;
 | |
|     }
 | |
|     .listItem > li{
 | |
|         display: inline-block;
 | |
|         margin: 10px;
 | |
|     }
 | |
|     .listItem > li:hover{
 | |
|         cursor: pointer;
 | |
|     }
 | |
|     .listItem > li .number{
 | |
|         font-size: 14px;
 | |
|         color: #fff;
 | |
|         background: #0ba360 !important;
 | |
|         padding: 10px;
 | |
|         border-radius: 10%;
 | |
|     }
 | |
|     .level{
 | |
|         float: right;
 | |
|         color: #fff;
 | |
|         text-align: center;
 | |
|         width: 100px;
 | |
|     }
 | |
|     .nav-link{
 | |
|         border-radius: 0px!important;
 | |
|     }
 | |
|     .pageNumber{ list-style:none; padding:0px; margin: 0px;}
 | |
|     .pageNumber > li{ display: inline-block; padding: 12px; background: rgba(255, 255, 255, 0.5); margin: 5px 1px;}
 | |
|     .pageNumber > li:hover{cursor: pointer;}
 | |
|     .pageNumber > li.active {
 | |
|         background-color: #007bff; /* Warna biru */
 | |
|         color: white;
 | |
|         font-weight: bold;
 | |
|     }
 | |
| </style>
 | |
| @endsection
 | |
| @section('content')
 | |
| <div class="subheader">
 | |
|     <h1 class="subheader-title">
 | |
|         <i class='subheader-icon fal fa-edit'></i> {{$title}}
 | |
|     </h1>
 | |
| </div>
 | |
| <div class="row">
 | |
|     <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
 | |
|         <form method="POST" id="form">
 | |
|         {{csrf_field()}}
 | |
|             <div class="card">
 | |
|                 <div class="card-body">
 | |
|                     <div class="row">
 | |
|                         <div class="col-md-12 p-3">
 | |
|                             <table class="" border="0" style="width:100%">
 | |
|                                 <tr>
 | |
|                                     <td rowspan="5" width="5" style="vertical-align: middle; padding-right: 10px;">
 | |
|                                         <i class="fal fa-building fa-5x"></i>
 | |
|                                     </td>
 | |
|                                 </tr>
 | |
|                                 <tr>
 | |
|                                     <td colspan="2"><h5 class="text-success">NPSN: {{session('npsn')}}</h5></td>
 | |
|                                 </tr>
 | |
|                                 <tr>
 | |
|                                     <td colspan="2"><h4><b>{{session('name')}}</b></h4></td>
 | |
|                                 </tr>
 | |
|                                 <tr>
 | |
|                                     <td colspan="2"><span class="badge badge-primary">{{session('tingkat_sekolah')}}</span> <span class="badge badge-success">{{session('status_sekolah')}}</span></td>
 | |
|                                 </tr>
 | |
|                                 <tr>
 | |
|                                     <td colspan="2"><p>{{session('alamat_sekolah')}}</p></td>
 | |
|                                 </tr>
 | |
|                             </table>
 | |
|                         </div>
 | |
|                         <div class="col-md-12">
 | |
|                             <div class="alert alert-warning">
 | |
|                                 <p class="mb-0"><i class="fal fa-info-circle"></i> Anda Belum Melakukan Finalisasi Proses Data Kriteria</p>
 | |
|                                 <p class="mb-0"><i class="fal fa-info-circle"></i> Klik <b class="text-danger">Progress Usulan</b> untuk melakukan Finalisasi Proses Data Kriteria</p>
 | |
|                             </div>
 | |
|                         </div>
 | |
|                         <div class="col-md-12 mb-4" style="background: rgba(23, 162, 184, 0.2) !important;">
 | |
|                             <ul class="pageNumber">
 | |
|                                 <li class="back"><i class="fal fa-arrow-left"></i></li>
 | |
|                                 <li class="resume">Resume</li>
 | |
|                                 <li class="progress_usulan active">Progress Usulan</li>
 | |
|                             </ul>
 | |
|                         </div>
 | |
|                         <div class="col-md-12 bodyInput">
 | |
|                             <section style="background-color: #F0F2F5;">
 | |
|                                   <div class="container py-5">
 | |
|                                     <div class="main-timeline">
 | |
|                                     @foreach($log as $logs)
 | |
|                                       <div class="timeline left d-none">
 | |
|                                         <div class="card">
 | |
|                                           <div class="card-body p-4">
 | |
|                                             <h3><b>{{\Str::title(str_replace('_',' ',$logs->step))}}</b></h3>
 | |
|                                             <p class="mb-0">Oleh : {{user($logs->created_by)->name}} <span class="badge badge-primary">{{group($logs->created_by)->name}}</span></p>
 | |
|                                             <p class="mb-0">Tanggal : {{$logs->created_at}}</p>
 | |
|                                           </div>
 | |
|                                         </div>
 | |
|                                       </div>
 | |
|                                       @endforeach
 | |
| 
 | |
|                                     <div class="timeline left">
 | |
|                                         <div class="card">
 | |
|                                           <div class="card-body p-4">
 | |
|                                             <h3><b>Status Usulan</b></h3>
 | |
|                                             <?php
 | |
|                                                 if(($kuesioner->level+1) == 1){
 | |
|                                                     $jenis_usulan = 'Kabupaten/Kota';
 | |
|                                                 }elseif(($kuesioner->level+1) == 2){
 | |
|                                                     $jenis_usulan = 'Provinsi';
 | |
|                                                 }elseif(($kuesioner->level+1) == 3){
 | |
|                                                     $jenis_usulan = 'Nasional';
 | |
|                                                 }elseif(($kuesioner->level+1) == 4){
 | |
|                                                     $jenis_usulan = 'Mandiri';
 | |
|                                                 }
 | |
|                                             ?>
 | |
|                                             <p class="">
 | |
|                                                 Sekolah diusulan untuk menjadi CSA (Calon Sekolah Adiwiyata) <b>{{$jenis_usulan}}</b><br>
 | |
|                                             </p>
 | |
|                                             <span class="text-primary">Silahkan lengkapi data pada menu Usulan Adiwiyata. </span>
 | |
|                                           </div>
 | |
|                                         </div>
 | |
|                                       </div>
 | |
|                                      
 | |
|                                       <div class="timeline right">
 | |
|                                         <div class="card">
 | |
|                                           <div class="card-body p-4">
 | |
|                                             <h3><b>
 | |
|                                                 @if($kuesioner->status == 3)
 | |
|                                                 <span class="badge badge-success"><i class="fal fa-check"></i></span> 
 | |
|                                                 @endif
 | |
|                                                 Kirim Kelengkapan Data
 | |
|                                             </b></h3>
 | |
|                                             <p>Kab/Kota akan melakukan validasi, jika data sekolah lengkap akan diproses. apabila data belum lengkap akan dikembalikan ke sekolah untuk melakukan perbaikan. </p>
 | |
|                                             <p class="text-primary">Pastikan NPSN, Profile, Dok Adminstrasi dan Pemenuhan Kriteria sudah sesuai.</p>
 | |
|                                             <ul>
 | |
|                                                 <li>
 | |
|                                                     Dokumen Administrasi 
 | |
|                                                     @if(@$dok)
 | |
|                                                         @if(@$dok->status == 1)
 | |
|                                                             <span class="badge badge-success">Dokumen Sudah Di Verifikasi</span>
 | |
|                                                         @elseif(@$dok->status == 2)
 | |
|                                                             <span class="badge badge-danger">Dokumen Ditolak</span>
 | |
|                                                         @else
 | |
|                                                             <span class="badge badge-warning">Menunggu Verifikasi Dokumen</span>
 | |
|                                                         @endif
 | |
|                                                     @else
 | |
|                                                         <span class="badge badge-danger">Belum Upload Dokumen</span>
 | |
|                                                     @endif
 | |
|                                                 </li>
 | |
|                                                 <li>Pemenuhan Kriteria {{count(@$penilaian)}} / {{count(@$page)}} 
 | |
|                                                     @if(count(@$penilaian) == count(@$page))
 | |
|                                                     <span class="badge badge-success">Sudah Lengkap</span>
 | |
|                                                     @else
 | |
|                                                     <span class="badge badge-danger">Belum Lengkap</span>
 | |
|                                                     @endif
 | |
|                                                 </li>
 | |
|                                             </ul>
 | |
|                                             @if(session('group_alias') == 'sekolah')
 | |
|                                                 @if(($kuesioner->status == 1) || ($kuesioner->status == 5))
 | |
|                                                     <div class="custom-control custom-checkbox m-2">
 | |
|                                                         <input type="checkbox" class="custom-control-input is-required check" id="true" value="1" name="check">
 | |
|                                                         <label class="custom-control-label" for="true">Dengan ini menyatakan bahwa kelengkapan data sudah benar.</label>
 | |
|                                                     </div>
 | |
|                                                     <button class="btn btn-success btnSend">Kirim Data</button>
 | |
| 
 | |
|                                                     @if(@$kuesioner->status == 5)
 | |
|                                                     <div class="alert alert-danger mt-2">
 | |
|                                                         Status : {!!kuesionerLogStatus(@$kuesioner->KuesionerId)!!} <br>
 | |
|                                                         <p class="mb-0"><i>Pastikan isian sudah diperbaiki sebelum dikirim kembali</i></p>
 | |
|                                                     </div>
 | |
|                                                     @endif
 | |
|                                                 @endif
 | |
|                                             @endif
 | |
|                                           </div>
 | |
|                                         </div>
 | |
|                                         <div id="loading-spinner" style="display: none; text-align: center;">
 | |
|                                             <img src="{{ asset('assets/spinner.gif') }}" alt="Loading..." width="20">
 | |
|                                         </div>
 | |
|                                       </div>
 | |
|                                     </div>
 | |
|                                   </div>
 | |
|                                 </section>
 | |
|                         </div>
 | |
|                         
 | |
|                     </div>
 | |
|                 </div>
 | |
|                 
 | |
|             </div>
 | |
|         </form>
 | |
|     </div>
 | |
| </div>
 | |
| @endsection
 | |
| @section('page-js')
 | |
| <script type="text/javascript">
 | |
| 
 | |
|    $('.page').on('click',function(e){
 | |
|         e.preventDefault();
 | |
|         let number = $(this).data('number');
 | |
|         let base_url = "{{url('/')}}";
 | |
|         // Tambahkan kelas active dan hapus dari yang lain
 | |
|         $('.page').removeClass('active');
 | |
|         $(this).addClass('active');
 | |
| 
 | |
|         $.ajax({
 | |
|             url: base_url+'/getForm', // Ganti dengan URL API-mu
 | |
|             type: 'POST', // Bisa juga 'POST' kalau perlu
 | |
|             data: { 
 | |
|                 _token:'{{csrf_token()}}',
 | |
|                 page: number 
 | |
|             }, // Kirim number sebagai parameter
 | |
|             dataType: 'json', // Format respons JSON
 | |
|             beforeSend: function () {
 | |
|                 $('#loading-spinner').show(); // Menampilkan spinner
 | |
|                 $('.removeFormKriteria').remove();
 | |
|             },
 | |
|             success: function (response) {
 | |
|                 console.log('Response:', response);
 | |
|                 $('.changeForm').append(response.data);
 | |
|                 $('.changeTitle').html(response.title);
 | |
| 
 | |
|                 $('.numberInput').on('input', function() {
 | |
|                     this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
 | |
|                 });
 | |
|             },
 | |
|             error: function (xhr, status, error) {
 | |
|                 console.error('AJAX Error:', status, error);
 | |
|                 alert('Failed to fetch data!');
 | |
|             },
 | |
|             complete: function () {
 | |
|                 $('#loading-spinner').hide(); // Sembunyikan spinner setelah request selesai
 | |
|             }
 | |
|         });        
 | |
|    });
 | |
| 
 | |
|     $('.back').on('click',function(e){
 | |
|         window.location.href = "{{url('usulan/adiwiyata/kriteria')}}";
 | |
|     });
 | |
| 
 | |
|     $('.progress_usulan').on('click',function(e){
 | |
|         window.location.href = "{{url('usulan/adiwiyata/kriteria/progress/'.encode_id(session('sekolah_id')))}}";
 | |
|     });
 | |
| 
 | |
|     $('.btnSend').on('click',function(e){
 | |
|         e.preventDefault();
 | |
| 
 | |
|         var check = $('.check');
 | |
|         if (!check.is(':checked')) {
 | |
|             toastr.error("Harap isi semua field yang wajib diisi", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | |
|             // alert(".");
 | |
|             return;
 | |
|         }
 | |
| 
 | |
|         $.ajax({
 | |
|             url: "{{url('usulan/adiwiyata/kriteria/kirimData/'.@$secure_id.'/'.encode_id(@$kuesioner->KuesionerId))}}", // Ganti dengan URL API-mu
 | |
|             type: 'POST', // Bisa juga 'POST' kalau perlu
 | |
|             data: { 
 | |
|                 _token:'{{csrf_token()}}',
 | |
|             }, // Kirim number sebagai parameter
 | |
|             dataType: 'json', // Format respons JSON
 | |
|             beforeSend: function () {
 | |
|                 $('#loading-spinner').show(); // Menampilkan spinner
 | |
|             },
 | |
|             success: function (response) {
 | |
|                 if(response.type == 'error'){
 | |
|                     toastr.error(response.message, 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | |
|                 }else{
 | |
|                     // console.log('Response:', response);
 | |
|                     toastr.success("Berhasil menyimpan data", 'Success!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | |
|                     location.reload();
 | |
|                 }
 | |
|                 
 | |
|             },
 | |
|             error: function (xhr, status, error) {
 | |
|                 toastr.error("Maaf Terjadi Kesalahan Menyimpan Data", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | |
|             },
 | |
|             complete: function () {
 | |
|                 $('#loading-spinner').hide(); // Sembunyikan spinner setelah request selesai
 | |
|             }
 | |
|         });
 | |
|     });
 | |
| 
 | |
|     $('#btnSave').on('click',function(e){
 | |
|         e.preventDefault();
 | |
|         let currentForm = $("#form").serializeArray();
 | |
|         console.log(currentForm);
 | |
| 
 | |
|         let formData = {};
 | |
|         let allData = {};
 | |
|         let isValid = true; // Flag validasi
 | |
| 
 | |
|         currentForm.forEach(field => {
 | |
|             let name = field.name.replace(/\[\]$/, ''); // Hapus "[]" di akhir nama input
 | |
| 
 | |
|             if (allData[name]) {
 | |
|                 if (!Array.isArray(allData[name])) {
 | |
|                     allData[name] = [allData[name]];
 | |
|                 }
 | |
|                 allData[name].push(field.value);
 | |
|             } else {
 | |
|                 allData[name] = field.value;
 | |
|             }
 | |
|         });
 | |
| 
 | |
|         $('.is-required').each(function () {
 | |
|             let type = $(this).attr('type');
 | |
|             let name = $(this).attr('name');
 | |
|             let value = $(this).val()?.trim(); // Pastikan nilai di-trim untuk menghindari spasi kosong
 | |
| 
 | |
|             if (type === 'radio' || type === 'checkbox') {
 | |
|                 // Validasi radio: setidaknya satu opsi harus dipilih
 | |
|                 if ($(`input[name="${name}"]:checked`).length === 0) {
 | |
|                     isValid = false;
 | |
|                     $(`input[name="${name}"]`).closest('.custom-control-input').addClass("is-invalid");
 | |
|                 } else {
 | |
|                     $(`input[name="${name}"]`).closest('.custom-control-input').removeClass("is-invalid");
 | |
|                 }
 | |
|             } else {
 | |
|                 // Validasi input teks atau lainnya
 | |
|                 if (!value) {
 | |
|                     isValid = false;
 | |
|                     $(this).addClass("is-invalid");
 | |
|                 } else {
 | |
|                     $(this).removeClass("is-invalid");
 | |
|                 }
 | |
|             }
 | |
|         });
 | |
| 
 | |
|         // Jika validasi gagal, hentikan submit
 | |
|         if (!isValid) {
 | |
|             toastr.error("Harap isi semua field yang wajib diisi", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | |
|             // alert(".");
 | |
|             return;
 | |
|         }
 | |
| 
 | |
|         $.ajax({
 | |
|             url: "{{route($route.'.store')}}", // Ganti dengan URL API-mu
 | |
|             type: 'POST', // Bisa juga 'POST' kalau perlu
 | |
|             data: { 
 | |
|                 _token:'{{csrf_token()}}',
 | |
|                 data: allData 
 | |
|             }, // Kirim number sebagai parameter
 | |
|             dataType: 'json', // Format respons JSON
 | |
|             beforeSend: function () {
 | |
|                 $('#loading-spinner').show(); // Menampilkan spinner
 | |
|             },
 | |
|             success: function (response) {
 | |
|                 // console.log('Response:', response);
 | |
|                 toastr.success("Berhasil menyimpan data", 'Success!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | |
| 
 | |
|                 
 | |
|                 $('.page').closest('.active').addClass('bg-success');
 | |
|                 $('.page').closest('.active').addClass('text-white');
 | |
|                 $('.page').removeClass('active');
 | |
|                 // (checkPenilaian($hal) == true ? 'bg-success text-white' : '' )
 | |
|             },
 | |
|             error: function (xhr, status, error) {
 | |
|                 // console.error('AJAX Error:', status, error);
 | |
|                 // alert('Failed to fetch data!');
 | |
|                 toastr.error("Maaf Terjadi Kesalahan Menyimpan Data", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | |
|             },
 | |
|             complete: function () {
 | |
|                 $('#loading-spinner').hide(); // Sembunyikan spinner setelah request selesai
 | |
|             }
 | |
|         });
 | |
| 
 | |
|    });
 | |
| </script>
 | |
| @endsection
 |