sekolah_adiwiyata/resources/views/modules/usulan/administrasi/index.blade.php

508 lines
22 KiB
PHP

@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datagrid/datatables/datatables.bundle.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
@endsection
@section('content')
<div class="subheader">
<h1 class="subheader-title">
<i class='subheader-icon fal fa-building'></i> {{$title}}
</h1>
</div>
<div class="row">
<div class="col-lg-12">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fal fa-filter"></i>&nbsp;Filter
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-md-12 mb-2">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="form-control select2">
<option value="">-- PILIH TINGKAT --</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>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="form-control select2">
<option value="">-- PILIH STATUS --</option>
<option value="Negeri">Negeri</option>
<option value="Swasta">Swasta</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="form-control select2">
<option value="">-- PILIH LEVEL --</option>
<option value="1"> LEVEL 1</option>
<option value="2"> LEVEL 2</option>
<option value="3"> LEVEL 3</option>
<option value="4"> LEVEL 4</option>
<option value="5"> LEVEL 5</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="form-control select2">
<option value="">-- PILIH JENIS USULAN --</option>
<option value="1">Kab/Kota</option>
<option value="2">Provinsi</option>
<option value="3">Nasional</option>
<option value="4">Mandiri</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 mb-2">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select name="provinsi" class="form-control select2" id="provinsi">
<option value="0">- PILIH PROVINSI -</option>
@foreach($provinsi as $datProv)
<option value="{{encode_id($datProv->MsProvinsiId)}}">{{$datProv->name}}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select name="kabupaten" class="form-control select2" id="kabupaten">
<option value="0">- PILIH KABUPATEN/KOTA -</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select name="kecamatan" class="form-control select2" id="kecamatan" required>
<option value="0">- PILIH KECAMATAN -</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<button class="btn btn-warning btn-block"><i class="fal fa-search"></i>&nbsp;Cari Data</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="panel-4" class="panel">
<div class="panel-container show">
<div class="panel-content">
<div id="toolbar"></div>
<table class="table table-bordered table-hover table-striped w-100"
data-search="true"
data-toggle="table"
data-pagination="true"
data-toolbar="#toolbar"
data-show-refresh="false"
data-url="{{route($route.'.grid')}}"
data-sort-name="ids"
data-sort-order="desc"
data-page-size="10"
data-id-field="id"
id="grid-data">
<thead class="text-white">
<tr class="table-primary">
<th data-field="action">#</th>
<th data-field="no">No</th>
<th data-field="tahun">Tahun</th>
<th data-field="jenis_usulan">Usulan CSA</th>
<th data-field="npsn">NPSN</th>
<th data-field="nama">Nama Sekolah</th>
<th data-field="wilayah">Wilayah</th>
<th data-field="labelDok">Status Dokumen</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- datatable end -->
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<form action="#" method="POST" enctype="multipart/form-data" id="form">
{{csrf_field()}}
<input type="hidden" name="secure_id" class="secure_id" value="">
<div class="modal-content">
<div class="modal-header">
<h5><b>{{$title}}</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<table class="table table-nobordered wrap">
<tr>
<td width="50%">
<div class="jenisusulan"></div>
<small class="text-primary">(Link Google Drive)</small>
</td>
<td>
<input type="text" class="form-control is-required" name="file" required>
<small class="text-primary">Contoh link : https://example.com</small>
<br>
<a href="#" class="btn btn-primary btn-xs link mt-2" style="display: none;" target="_blank"><i class="fal fa-link"></i>&nbsp;Link Lampiran</a>
</td>
</tr>
</table>
</div>
@if(session('group_alias') == 'sekolah')
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="btnSave">Simpan</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
</div>
@endif
</div>
</form>
</div>
</div>
@endsection
@section('page-js')
<script src="{{asset('assets/js/datagrid/datatables/datatables.bundle.js')}}"></script>
<script src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
<script type="text/javascript">
// <tr class="extra-row" style="display: none;">
// <td colspan="8">
// <strong>Detail Tambahan:</strong> Informasi tambahan lainnya.
// </td>
// </tr>
$("#grid-data").on("click", ".toggle-row", function() {
let btn = $(this);
let row = btn.closest("tr");
let icon = btn.find("i");
let jenis_usulan = $(this).attr('data-jenisusulan');
let link = $(this).attr('data-link');
if (row.next().hasClass("extra-row")) {
row.next().remove(); // Hapus jika sudah ada
icon.removeClass("btn-secondary").addClass("btn-secondary");
} else {
let newRow = `
<tr class="extra-row">
<td colspan="8">
${jenis_usulan} <br>`
if(link != ''){
newRow += `<a class="btn btn-primary btn-xs" href="${link}" target="_blank"><i class="fal fa-link"></i>&nbsp;Link Lampiran</a>`;
}
newRow += `</td>
</tr>
`;
row.after(newRow);
icon.removeClass("btn-secondary").addClass("btn-secondary");
}
});
$("#grid-data").on("click", ".tolak", function() {
var base_url = $(this).attr('data-href');
var id = $(this).attr('data-id');
swal({
title: "Tolak Dokumen!",
text: "Apa anda yakin ingin tolak Dokumen ini ?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#BF3131",
confirmButtonText: "Tolak Sekarang",
cancelButtonText: "Batal",
closeOnConfirm: true,
closeOnCancel: true
},
function(isConfirm) {
if(isConfirm){
request = $.ajax({
url: base_url,
type: "GET",
});
// Callback handler that will be called on success
request.done(function(response, textStatus, jqXHR){
console.log(response);
toastr.success("Berhasil Login", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
window.location.href = '{{url("/usulan/administrasi")}}';
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
toastr.error(
"Gagal "+textStatus, errorThrown
);
});
}
});
return false;
});
$("#grid-data").on("click", ".verifikasi", function() {
var base_url = $(this).attr('data-href');
var id = $(this).attr('data-id');
swal({
title: "Verifikasi Dokumen!",
text: "Apa anda yakin ingin verifikasi Dokumen ini ?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3F7D58",
confirmButtonText: "Approve Sekarang",
cancelButtonText: "Batal",
closeOnConfirm: true,
closeOnCancel: true
},
function(isConfirm) {
if(isConfirm){
request = $.ajax({
url: base_url,
type: "GET",
});
// Callback handler that will be called on success
request.done(function(response, textStatus, jqXHR){
console.log(response);
toastr.success("Berhasil Login", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
window.location.href = '{{url("/usulan/administrasi")}}';
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
toastr.error(
"Gagal "+textStatus, errorThrown
);
});
}
});
return false;
});
$('#grid-data').on('click',".btnModal", function(e) {
$('.jenisusulan').html($(this).attr('data-jenisusulan'));
$('.secure_id').val($(this).attr('data-secureid'));
var link = $(this).attr('data-link');
if(link != ''){
$('.link').show();
$('.link').attr('href',link);
}else{
$('.link').hide();
$('.link').attr('href','');
}
});
$('#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
// 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) {
if(response.status == true){
toastr.success("Berhasil menyimpan data", 'Success!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
}else{
toastr.warning(response.message, {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
}
});
});
$('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 clear(elementId) {
$('#' + elementId).empty();
$('#' + elementId).select2();
}
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 = "";
}
}
} 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");
}
}
$('#loading-spinner').hide();
});
return false;
}
</script>
@endsection