@extends('layouts.app')
@push('styles')
<!-- DataTables -->
<link
href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}"
rel="stylesheet" type="text/css" />
<link
href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}"
rel="stylesheet" type="text/css" />
@endpush
@section('content')
<style>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 100%; /* Could be more or less, depending on screen size */
max-width: 1200px; /* Max width */
border-radius: 5px; /* Rounded corners */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<div class="page-content-wrapper">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-12 col-md-6">
{{-- <h4><a href="{{url('target_capaian')}}">Back</a> | Detail Capaian</h4> --}}
@if (isset($_GET['page']))
@if ($_GET['page'] == "target")
<h4>Target Capaian</h4>
@elseif ($_GET['page'] == "cat")
<h4>Hasil CAT Online</h4>
@elseif ($_GET['page'] == "review")
<h4>Review Progress</h4>
@endif
@else
<h4>Detail Capaian</h4>
@endif
<div id="myModal" class="modal">
<div class="modal-content">
<div class="d-flex justify-content-between">
<div class="p-1">
<h3>Detail Kegiatan</h3>
</div>
<div class="p-1"></div>
<div class="p-1">
<span class="close" id="closeModal">×</span>
</div>
</div>
<hr>
<span style="font-weight: bolder; font-size: 16px;">Kegiatan : </span><span style="font-size: 16px;" id="nama_kegiatan"></span><br>
<span style="font-weight: bolder; font-size: 16px;">Location : </span><span style="font-size: 16px;" id="location_kegiatan"></span><br>
<span style="font-weight: bolder; font-size: 16px;">Petugas : </span><span style="font-size: 16px;" id="petugas_kegiatan"></span><br>
<span style="font-weight: bolder; font-size: 16px;">Catatan : </span><span style="font-size: 16px;" id="catatan_kegiatan"></span><br>
<br>
<div style="overflow-x: scroll">
<table class="table table-bordered dt-responsive nowrap"
style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
<tr>
<th>Tanggal Kegiatan</th>
<th>Waktu Mulai Kegiatan</th>
<th>Waktu Selesai Kegiatan</th>
<th>Status</th>
<th>Feedback Orang Tua</th>
</tr>
</thead>
<tbody id="target_capaian_list">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<form action="">
<div class="d-flex justify-content-end">
<div class="p-1">
<select name="tahun" id="" class="form-control">
<option value="">Pilih Tahun</option>
@foreach ($tahun as $a)
<option value="{{$a->year}}" {{$tahun_get == $a->year ? "selected" : ""}}>{{$a->year}}</option>
@endforeach
</select>
</div>
<div class="p-1">
<button type="submit" class="btn btn-success">Cari</button>
<a href="{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=cetak" target="_blank" class="btn btn-primary">Cetak</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h2>{{$siswa->nama_siswa}}</h2>
</div>
</div>
<div class="row">
@if (!isset($_GET['page']))
<div class="col-md-6 col-sm-12">
<div class="card">
<div class="card-body">
<div class="card-title p-3">
<h3>Target Aktifitas Harian </h3>
</div>
<canvas id="KeseluruhanChart" style="width:100%;"></canvas>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="card">
<div class="card-body">
<div class="card-title p-3">
<div class="d-flex justify-content-between">
<div class="p-1"><h3>Target CAT </h3></div>
<div class="p-1">
<select name="ujian_cat" id="ujian_cat" class="form-control">
<option value="twk">TWK</option>
<option value="tiu">TIU</option>
<option value="tkp">TKP</option>
</select>
</div>
</div>
</div>
<canvas id="KeseluruhanCatChart" style="width:100%;"></canvas>
{{-- <canvas id="KeseluruhanChart" style="width:100%;"></canvas> --}}
</div>
</div>
</div>
@elseif(isset($_GET['page']) && $_GET['page'] == "cat")
<div class="col-md-12 col-sm-12">
<div class="card">
<div class="card-body">
<div class="card-title p-3">
<div class="d-flex justify-content-between">
<div class="p-1"><h3>Target CAT </h3></div>
<div class="p-1">
<select name="ujian_cat" id="ujian_cat" class="form-control">
<option value="twk">TWK</option>
<option value="tiu">TIU</option>
<option value="tkp">TKP</option>
</select>
</div>
</div>
</div>
<canvas id="KeseluruhanCatChart" style="width:100%;"></canvas>
{{-- <canvas id="KeseluruhanChart" style="width:100%;"></canvas> --}}
</div>
</div>
</div>
@elseif(isset($_GET['page']) && $_GET['page'] == "target")
<div class="col-md-12 col-sm-12">
<div class="card">
<div class="card-body">
<div class="card-title p-3">
<h3>Target Aktifitas Harian </h3>
</div>
<canvas id="KeseluruhanChart" style="width:100%;"></canvas>
</div>
</div>
</div>
@endif
</div>
<div class="card">
<div class="card-body">
<select name="type" class="form-control" onchange="navigateToPage()" id="type" {{isset($_GET['page']) ? 'hidden' : ''}}>
<option value="{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=cat" {{old('type', @$_GET['type']) == "cat" ? "selected" : "" }} >Hasil dari Ujian CAT</option>
<option value="{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=kegiatan" {{old('type', @$_GET['type']) == "kegiatan" ? "selected" : "" }}>Detail Jenis Kegiatan</option>
<option value="{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=review" {{old('type', @$_GET['type']) == "review" ? "selected" : "" }}>Progress Mingguan</option>
</select>
@if(!isset($_GET['type']) || $_GET['type'] == "cat")
<div class="card-title">
<br>
<h4>Hasil dari Ujian CAT</h4>
<div class="row">
<div class="col-sm-12 col-md-9" style="overflow-x: scroll">
<table class="table table-bordered">
<thead>
<tr>
<th>Tanggal Mulai</th>
<th>Tanggal Selesai</th>
<th>TWK</th>
<th>TIU</th>
<th>TKP</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
@php
$key = array_keys($cat);
// dd($key);
@endphp
@if ($key[0] == "error")
<tr>
<td colspan="6" style="text-align: center; color: red;">Belum Melaksanakan Ujian CAT</td>
</tr>
@else
@foreach($cat as $a)
<tr>
<th>{{$a['mulai']}}</th>
<th>{{$a['selesai']}}</th>
<th class="{{ ($a['twk'] < 100) ? 'text-danger' : (($a['twk'] < 110) ? 'text-warning' : 'text-success') }}">{{$a['twk']}}</th>
<th class="{{ ($a['tiu'] < 100) ? 'text-danger' : (($a['tiu'] < 110) ? 'text-warning' : 'text-success') }}">{{$a['tiu']}}</th>
<th class="{{ ($a['tkp'] < 200) ? 'text-danger' : (($a['tkp'] < 210) ? 'text-warning' : 'text-success') }}">{{$a['tkp']}}</th>
<th>{{ intval($a['total']) }}</th>
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
<div class="col-sm-12 col-md-3">
<fieldset>
<h3>Penilaian</h3>
<ul>
<li>TWK <br>
dibawah 100 = merah <br>
100 - 109 = kuning <br>
110 keatas = hijau <br><br>
</li>
<li>
TIU <br>
dibawah 100 = merah <br>
100 - 109 = kuning <br>
110 keatas = hijau <br> <br>
</li>
<li>
TKP <br>
dibawah 200 = merah <br>
200 - 209 = kuning <br>
210 = hijau <br><br>
</li>
</ul>
</fieldset>
</div>
</div>
</div>
@elseif(isset($_GET['type']) && $_GET['type'] == "kegiatan")
<div class="card-title">
<br>
<div class="d-flex">
<div class="p-1">
<h4>Detail Kegiatan</h4>
</div>
<div class="p-1">
<form action="" method="get" id="myForm">
@if (isset($_GET['siswa_id']))
<input type="hidden" name="siswa_id" value="{{$_GET['siswa_id']}}">
@endif
<input type="hidden" name="tahun" value="{{ isset($_GET['tahun']) ? $_GET['tahun'] : '' }}">
<input type="hidden" name="type" value="{{ isset($_GET['type']) ? $_GET['type'] : '' }}">
<input type="hidden" name="page" value="{{ isset($_GET['page']) ? $_GET['page'] : '' }}">
<select name="hari" class="form-control" onchange="document.getElementById('myForm').submit();" id="hari">
@foreach ($hari as $item)
<option value="{{ $item->hari_ke}}" {{ old('hari', $day) == $item->hari_ke ? 'selected' : ''}}>{{$item->hari}}</option>
@endforeach
</select>
</form>
</div>
</div>
<div style="overflow-x: auto">
<table class="table table-bordered dt-responsive nowrap"
style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
<tr>
<th>Kegiatan</th>
<th>Nama Siswa</th>
<th>Petugas</th>
<th>Lokasi</th>
<th>Tanggal Mulai</th>
<th>Tanggal Akhir</th>
<th>Notes</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($jadwal as $a)
<tr>
<td>{{$a->kegiatan}}</td>
<td>{{$a->jadwal->user->siswa->nama_siswa}}</td>
<td>{{$a->petugas->nama_petugas}}</td>
<td>{{$a->location}}</td>
<td>{{ date($a->all_day == 1 ? 'd F Y' : 'd F Y h:i:s', strtotime($a->start)) }}</td>
<td>{{ date($a->all_day == 1 ? 'd F Y' : 'd F Y h:i:s', strtotime($a->ends)) }}</td>
<td>{{ $a->notes == null ? '-' : $a->notes }}</td>
<td><button class="btn btn-primary openModal" id="{{$a->jadwal->id}}"><i class="fa fa-eye"> </i> Detail</button></td>
</tr>
@endforeach
</tbody>
</table>
</div>
@elseif(isset($_GET['type']) && $_GET['type'] == "review")
<div class="card-title">
<br>
@can('create '.$menu)
<div class="d-flex justify-content-between">
<div class="p-1"></div>
<div class="p-1"></div>
<div class="p-1">
<a href="{{url('progress_mingguan')}}/create?id={{$siswa->id}}" class="btn btn-success">+ Tambah Data</a>
</div>
</div>
@endcan
@can('view '.$menu)
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Tanggal</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach($review as $a)
<tr>
<td>{{$loop->iteration}}</td>
<td>{{$a->nama}}</td>
<td>{{$a->tanggal}}</td>
<td>
<form method="POST"
action="{{ route('progress_mingguan'.'.destroy', $a->id) }}">
{{ csrf_field() }}
<input type="hidden" name="_method" value="DELETE">
@can('view '.$menu)
<a href="{{ route('progress_mingguan'.'.show', $a->id) }}"
class="btn btn-sm btn-primary" target="_blank"><i class="fa fa-paper"> </i>Show</a>
@endcan
@can('edit '.$menu)
<a href="{{ route('progress_mingguan'.'.edit', $a->id) }}"
class="btn btn-sm btn-warning"><i class="fa fa-pen"> </i>Edit</a>
@endcan
@can('delete '.$menu)
<button type="submit" class="btn btn-sm btn-danger"
onclick="return hapus()"><i class="fa fa-trash"></i>
Hapus</button>
@endcan
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
@endcan
</div>
@endisset
</div>
</div>
{{-- <div class="row">
<div class="col-md-9">
<div class="card">
<div class="card-body">
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Jadwal Kegiatan</h2>
<div class="row">
<div class="col-md-6">
<div class="card mt-2" style="margin-bottom: 0.875rem;">
<div class="card-body" style="padding: 0.25rem 1.25rem !important;">
<span>Nama Siswa</span>
<h5 style="margin-bottom: 7px;" id="siswa-isi"></h5>
</div>
</div>
<div class="card" style="margin-bottom: 0.875rem;">
<div class="card-body" style="padding: 0.25rem 1.25rem !important;">
<span>Kegiatan</span>
<h5 style="margin-bottom: 7px;" id="kegiatan-isi"></h5>
</div>
</div>
<div class="card" style="margin-bottom: 0.875rem;">
<div class="card-body" style="padding: 0.25rem 1.25rem !important;">
<span>Lokasi</span>
<h5 style="margin-bottom: 7px;" id="location-isi"></h5>
</div>
</div>
<div class="card" style="margin-bottom: 0.875rem;">
<div class="card-body" style="padding: 0.25rem 1.25rem !important;">
<span>Waktu Mulai</span>
<h5 style="margin-bottom: 7px;" id="start-isi"></h5>
</div>
</div>
<div class="card" style="margin-bottom: 0.875rem;">
<div class="card-body" style="padding: 0.25rem 1.25rem !important;">
<span>Waktu Berakhir</span>
<h5 style="margin-bottom: 7px;" id="ends-isi"></h5>
</div>
</div>
<div class="card" style="margin-bottom: 0.875rem;">
<div class="card-body" style="padding: 0.25rem 1.25rem !important;">
<span>Catatan</span>
<h5 style="margin-bottom: 7px;" id="notes-isi"></h5>
</div>
</div>
</div>
<div class="col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Target Tercapai</th>
</tr>
</thead>
<tbody id="target_table">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id='calendar'></div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h3>Laporan Target Capaian kepada Orang Tua.</h3>
<form action="{{url('target_capaian')}}" class="" method="post">
@csrf
<div class="form-group p-1">
<select name="nomor_orang_tua" class="form-control" id="" required>
<option value="">Pilih Data Siswa</option>
@if ($type_user == "admin")
@foreach ($siswa as $siswa)
<option value="{{$siswa->id}}">{{$siswa->nama_siswa}}</option>
@endforeach
@elseif($type_user == "siswa")
<option value="{{$siswa->id}}" selected>{{$siswa->nama_siswa}}</option>
@endif
</select>
</div>
<div class="form-group p-1">
<select name="tahun" class="form-control" id="tahun">
<option disabled selected>Pilih Tahun</option>
@foreach ($tahun as $a)
<option value="{{$a->year}}" {{isset($_GET['tahun']) && $_GET['tahun'] == $a->year ? 'selected' : '' }}>{{$a->year}}</option>
@endforeach
</select>
</div>
<div class="form-group p-1">
<select name="bulan" class="form-control" id="bulan" onchange="updateDays()">
<option disabled selected>Pilih Bulan</option>
<option value="1" {{isset($_GET['bulan']) && $_GET['bulan'] == '1' ? 'selected' : '' }}>Januari</option>
<option value="2" {{isset($_GET['bulan']) && $_GET['bulan'] == '2' ? 'selected' : '' }}>Februari</option>
<option value="3" {{isset($_GET['bulan']) && $_GET['bulan'] == '3' ? 'selected' : '' }}>Maret</option>
<option value="4" {{isset($_GET['bulan']) && $_GET['bulan'] == '4' ? 'selected' : '' }}>April</option>
<option value="5" {{isset($_GET['bulan']) && $_GET['bulan'] == '5' ? 'selected' : '' }}>Mei</option>
<option value="6" {{isset($_GET['bulan']) && $_GET['bulan'] == '6' ? 'selected' : '' }}>Juni</option>
<option value="7" {{isset($_GET['bulan']) && $_GET['bulan'] == '7' ? 'selected' : '' }}>Juli</option>
<option value="8" {{isset($_GET['bulan']) && $_GET['bulan'] == '8' ? 'selected' : '' }}>Agustus</option>
<option value="9" {{isset($_GET['bulan']) && $_GET['bulan'] == '9' ? 'selected' : '' }}>September</option>
<option value="10" {{isset($_GET['bulan']) && $_GET['bulan'] == '10' ? 'selected' : '' }}>Oktober</option>
<option value="11" {{isset($_GET['bulan']) && $_GET['bulan'] == '11' ? 'selected' : '' }}>November</option>
<option value="12" {{isset($_GET['bulan']) && $_GET['bulan'] == '12' ? 'selected' : '' }}>Desember</option>
</select>
</div>
<div class="form-group p-1">
<select name="minggu" class="form-control" id="minggu">
<option disabled selected>Pilih Minggu</option>
</select>
</div>
<div class="form-group p-1">
<span id="tanggal_perkiraan"></span>
<input type="hidden" name="tanggal_awal" value="" id="tanggal_awal_value_spawn">
<input type="hidden" name="tanggal_akhir" id="tanggal_akhir_value_spawn">
</div>
<div class="form-group p-1" style="display: none">
<select name="hari" class="form-control" id="hari">
<option disabled selected>Pilih Hari</option>
</select>
</div>
<div class="form-group p-1">
<button type="submit" class="btn btn-primary">Kirim</button>
</div>
</form>
</div>
</div>
</div>
</div> --}}
</div>
@endsection
@push('scripts')
<!-- Chart JS -->
<script src=" {{ asset('assets/libs/chart.js/Chart.bundle.min.js') }} "></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("openModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
// btn.onclick = function() {
// modal.style.display = "block";
// }
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Optional: Add confirm and cancel button functionality
// document.getElementById("confirm").onclick = function() {
// alert("Confirmed!");
// modal.style.display = "none";
// }
// document.getElementById("cancel").onclick = function() {
// modal.style.display = "none";
// }
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: {
url: '{{url("target_capaian")}}?kalender=kalender',
color: '#3F8664',
textColor: 'white',
},
editable: true,
selectable: true,
eventClick: function(info) {
console.log(info.event.id);
$.ajax({
url: "{{url('target_capaian')}}?kalender=" + info.event.id,
type: "GET",
success: function(response) {
console.log(response);
document.getElementById('siswa-isi').innerHTML = response.data.user.siswa.nama_siswa;
document.getElementById('kegiatan-isi').innerHTML = response.data.kegiatan;
document.getElementById('location-isi').innerHTML = response.data.location;
// if(response.data.all_day == 0) {
// document.getElementById('all_day-isi').innerHTML = "Tidak";
// } else {
// document.getElementById('all_day-isi').innerHTML = "Ya";
// }
// if(response.data.target == 0) {
// document.getElementById('target-isi').innerHTML = "Belum Tercapai";
// } else {
// document.getElementById('target-isi').innerHTML = "Tercapai";
// }
const dateTimeStringStart = response.data.start;
const StartTime = dateTimeStringStart.split(' ')[1].slice(0, 5);
document.getElementById('start-isi').innerHTML = StartTime;
const dateTimeStringEnd = response.data.ends;
const EndTime = dateTimeStringEnd.split(' ')[1].slice(0, 5);
document.getElementById('ends-isi').innerHTML = EndTime;
document.getElementById('notes-isi').innerHTML = response.data.notes;
$('#target_table').html("");
$.each(response.data.target_capaian, function(index, item) {
var tr = `<tr>
<td>${index + 1}</td>
<td>${item.tanggal}</td>
<td>${item.capaian == 1 ? "Sudah Tercapai" : "Belum Tercapai"}</td>
</tr>`;
$('#target_table').append(tr);
});
// calendar.fullCalendar('refetchEvents');
// alert('Agenda berhasil dihapus!');
},
});
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
});
calendar.render();
});
</script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
{{-- <script>
var xValues = ["Target Tercapai", "Target Tidak Tercapai"];
var yValues = ["{{$target_tercapai}}", "{{$target_belum_tercapai}}"];
var barColors = [
"#b91d47",
"#00aba9",
];
new Chart("targetChart", {
type: "doughnut",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
title: {
display: true,
}
}
});
</script> --}}
<script>
let xValues2 = [];
let tercapai = [];
let belum_tercapai = [];
var index = 0;
@foreach ($keseluruhan_bulan as $b)
@php
$bulan = explode('-',$b->month);
@endphp
xValues2.push("{{$bulan[1]}}")
tercapai.push(0);
belum_tercapai.push(0);
@foreach ($keseluruhan_target_tercapai as $c)
@if ($bulan[0] == $c->month)
tercapai[index] = parseInt('{{$c->count}}');
@endif
@endforeach
@foreach ($keseluruhan_belum_target_tercapai as $c)
@if ($bulan[0] == $c->month)
belum_tercapai[index] = parseInt('{{$c->count}}');
@endif
@endforeach
index += 1;
@endforeach
// KeseluruhanCatChart
new Chart("KeseluruhanChart", {
type: "line",
data: {
labels: xValues2,
datasets: [{
label : "Belum Tercapai : {{$target_belum_tercapai}}",
data: belum_tercapai,
borderColor: "red",
fill: false
}, {
label : "Tercapai : {{$target_tercapai}}",
data: tercapai,
borderColor: "green",
fill: false
}]
},
options: {
legend: {display: true}
}
});
let YValuesCATBelumTWK = [];
let TotalCATBelumTWK = parseInt('{{$TotalChart[0]["twk_tidak_tercapai"] ?? 0}}');
let YValuesCATUdahTWK = [];
let TotalCATUdahTWK = parseInt('{{$TotalChart[0]["twk_tercapai"] ?? 0}}');
let YValuesCATBelumTIU = [];
let TotalCATBelumTIU = parseInt('{{$TotalChart[0]["tiu_tidak_tercapai"] ?? 0}}');
let YValuesCATUdahTIU = [];
let TotalCATUdahTIU = parseInt('{{$TotalChart[0]["tiu_tercapai"] ?? 0}}');
let YValuesCATBelumTKP = [];
let TotalCATBelumTKP = parseInt('{{$TotalChart[0]["tkp_tidak_tercapai"] ?? 0}}');
let YValuesCATUdahTKP = [];
let TotalCATUdahTKP = parseInt('{{$TotalChart[0]["tkp_tercapai"] ?? 0}}');
let XValuesCAT = [];
let indexCAT = 0;
@foreach ($CATChart as $c)
XValuesCAT[indexCAT] = '{{$c["bulan"]}}';
YValuesCATUdahTWK[indexCAT] = parseInt('{{$c["twk_tercapai"]}}');
YValuesCATBelumTWK[indexCAT] = parseInt('{{$c["twk_tidak_tercapai"]}}');
YValuesCATUdahTIU[indexCAT] = parseInt('{{$c["tiu_tercapai"]}}');
YValuesCATBelumTIU[indexCAT] = parseInt('{{$c["tiu_tidak_tercapai"]}}');
YValuesCATUdahTKP[indexCAT] = parseInt('{{$c["tkp_tercapai"]}}');
YValuesCATBelumTKP[indexCAT] = parseInt('{{$c["tkp_tidak_tercapai"]}}');
indexCAT += 1;
@endforeach
let KeseluruhanCatChart = new Chart("KeseluruhanCatChart", {
type: "line",
data: {
labels: XValuesCAT,
datasets: [{
label : "Belum Tercapai - TWK ["+TotalCATBelumTWK+"] ",
data: YValuesCATBelumTWK,
borderColor: "red",
fill: false
}, {
label : "Tercapai - TWK ["+TotalCATUdahTWK+"] ",
data: YValuesCATUdahTWK,
borderColor: "green",
fill: false
}]
},
options: {
legend: {display: true}
}
});
</script>
<script>
function navigateToPage() {
const selector = document.getElementById("type");
const selectedPage = selector.value; // Ambil nilai yang dipilih
if (selectedPage) {
window.location.href = selectedPage; // Arahkan ke halaman yang dipilih
}
}
function updateDays() {
const tahunSelect = document.getElementById('tahun');
const tahun = tahunSelect.value;
const bulan = document.getElementById('bulan').value;
const minggu = document.getElementById('minggu');
const hari = document.getElementById('hari');
const resultDiv = document.getElementById('result');
if (tahun && bulan) {
// Menghitung jumlah hari dalam bulan
const totalDays = new Date(tahun, bulan, 0).getDate();
// Membagi tanggal ke dalam minggu
const weeks = [];
for (let i = 1; i <= totalDays; i++) {
const weekIndex = Math.floor((i - 1) / 7);
if (!weeks[weekIndex]) {
weeks[weekIndex] = [];
}
weeks[weekIndex].push(i);
}
// Menampilkan hasil
let resultHtml = `<p>Total hari dalam bulan: ${totalDays}</p>`;
resultHtml += `<h3>Hari per Minggu:</h3>`;
minggu.innerHTML = '';
minggu.innerHTML = '<option value="" selected>Pilih Minggu</option>';
hari.innerHTML = '';
hari.innerHTML = '<option value="" selected>Pilih Hari</option>';
weeks.forEach((week, index) => {
const option = document.createElement('option');
option.value = `${week.join(', ')}`;
option.text = `Minggu ${index + 1}`;
minggu.appendChild(option);
// resultHtml += `<p>Minggu ${index + 1}: ${week.join(', ')}</p>`;
});
// resultDiv.innerHTML = resultHtml;
} else {
resultDiv.innerHTML = '';
}
}
function selectDay(value) {
const angkaString = value;
const angkaArray = angkaString.split(',').map(Number);
var tanggal_awal = 0;
var tanggal_akhir = 0;
$('#tanggal_perkiraan').html(``);
$('#hari').html(``);
$('#hari').append(`<option value="" selected>Pilih Hari</option>`);
for (let index = 0; index < angkaArray.length; index++) {
if(index == 0) {
tanggal_awal = angkaArray[index];
}
if(index == (angkaArray.length - 1)) {
tanggal_akhir = angkaArray[index];
}
$('#hari').append(`<option value='${angkaArray[index]}'>Hari ke-${angkaArray[index]}</option>`);
}
if(tanggal_awal < 10) {
tanggal_awal = "0" + tanggal_awal;
}
var bulan = document.getElementById('bulan').value;
if(bulan < 10) {
bulan = "0" + bulan;
}
if(tanggal_akhir < 10) {
tanggal_akhir = "0" + tanggal_akhir;
}
$('#tanggal_awal_value_spawn').val(`${document.getElementById('tahun').value}-${bulan}-${tanggal_awal}`);
$('#tanggal_akhir_value_spawn').val(`${document.getElementById('tahun').value}-${bulan}-${tanggal_akhir}`);
$('#tanggal_perkiraan').html(`${tanggal_awal}/${bulan}/${document.getElementById('tahun').value} - ${tanggal_akhir}/${bulan}/${document.getElementById('tahun').value}`);
}
$(document).ready(function () {
$('#minggu').change(function() {
selectDay($(this).val());
});
@if(Auth::user()->siswa?->status == 'pending')
// $('input[name="metode_pembayaran"]').change(function (e) {
// let metode = $(this).val()
// if (metode == 'transfer') {
// $('#upload-container').append(`
// <div class="mb-3">
// <label for="bukti_pembayaran"> Bukti Pembayaran : </label>
// <input type="file" name="bukti_pembayaran" class="form-control" required>
// </div>
// `)
// }else{
// $('#upload-container').html('');
// }
// });
@endif
});
</script>
@push('scripts')
<!-- Required datatable js -->
<script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}">
</script>
<script
src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}">
</script>
<!-- Buttons examples -->
<script
src="{{ asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}">
</script>
<script
src="{{ asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}">
</script>
<script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('assets/libs/pdfmake/build/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/libs/pdfmake/build/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js') }}">
</script>
<script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js') }}">
</script>
<script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js') }}">
</script>
<!-- Responsive examples -->
<script
src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}">
</script>
<script
src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}">
</script>
<!-- Datatable init js -->
<script src="{{ asset('assets/js/pages/datatables.init.js') }}"></script>
<script>
$(document).ready(function() {
// Open the modal
$('#ujian_cat').click(function() {
let selectedValue = this.value; // Ambil nilai select (twk, tiu, tkp)
let newBelumData, newUdahData, newLabel, newTotalUdahData, newTotalBelumData;
if (selectedValue === "twk") {
newBelumData = YValuesCATBelumTWK;
newUdahData = YValuesCATUdahTWK;
newTotalBelumData = TotalCATBelumTWK;
newTotalUdahData = TotalCATUdahTWK;
newLabel = "TWK";
} else if (selectedValue === "tiu") {
newBelumData = YValuesCATBelumTIU;
newUdahData = YValuesCATUdahTIU;
newTotalBelumData = TotalCATBelumTIU;
newTotalUdahData = TotalCATUdahTIU;
newLabel = "TIU";
} else {
newBelumData = YValuesCATBelumTKP;
newUdahData = YValuesCATUdahTKP;
newTotalBelumData = TotalCATBelumTKP;
newTotalUdahData = TotalCATUdahTKP;
newLabel = "TKP";
}
// Update dataset
KeseluruhanCatChart.data.datasets[0].label = "Belum Tercapai - " + newLabel + " ["+newTotalBelumData+"]";
KeseluruhanCatChart.data.datasets[0].data = newBelumData;
KeseluruhanCatChart.data.datasets[1].label = "Tercapai - " + newLabel + " ["+newTotalUdahData+"]";
KeseluruhanCatChart.data.datasets[1].data = newUdahData;
KeseluruhanCatChart.update(); // Perbarui chart
});
$('.openModal').click(function() {
// $('#jadwal').val($(this).data('jadwal'));
// $('#jenis_kegiatan').val($(this).data('jeniskegiatan'));
// $('#nama_kegiatan').val($(this).data('kegiatan'));
// $('#jadwal_kegiatan_harian_id').val($(this).data('id'));
// $('#target_tercapai').val($(this).data('targettercapai'));
// $('#keterangan').val($(this).data('keterangan'));
$.ajax({
url: `{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=detail_kegiatan&kegiatan_id=${$(this).attr('id')}`,
type: "GET",
cache: false,
success:function(response){
console.log(response);
console.log("berhasil");
var kegiatan = response.data;
$('#nama_kegiatan').text(kegiatan.kegiatan);
$('#location_kegiatan').text(kegiatan.location);
$('#petugas_kegiatan').text(kegiatan.petugas.nama_petugas);
$('#catatan_kegiatan').text(kegiatan.notes);
$('#target_capaian_list').html("");
$.each(kegiatan.target_capaian, function(index, item) {
//
var html = `
<tr>
<td>${item.tanggal}</td>
<td>${item.waktu_awal}</td>
<td>${item.waktu_akhir}</td>
<td>${item.capaian == 0 ? "Belum Tercapai" : "Sudah Tercapai" }</td>
<td>${item.feedback_orang_tua}</td>
</tr>
`;
$('#target_capaian_list').append(html);
// console.log(`Data ke-${index + 1}:`);
// console.log(`ID: ${item.id}`);
// console.log(`Tanggal: ${item.tanggal}`);
// console.log(`Waktu Awal: ${item.waktu_awal}`);
// console.log(`Waktu Akhir: ${item.waktu_akhir}`);
// console.log('-----------------------------');
});
$('#myModal').fadeIn();
},
error:function(error){
alert(error.responseJSON.content[0]);
}
});
});
// Close the modal when the close button is clicked
$('#closeModal').click(function() {
$('#myModal').fadeOut();
});
// Close the modal when clicking outside of the modal content
$(window).click(function(event) {
if ($(event.target).is('#myModal')) {
$('#myModal').fadeOut();
}
});
// Confirm button action
$('#confirm').click(function() {
alert('Confirmed!');
$('#myModal').fadeOut();
});
});
</script>
@endpush
@endpush
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell