1832 lines
85 KiB
PHP
1832 lines
85 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Jadwal Kelas')
|
|
|
|
@push('style')
|
|
<style>
|
|
.bg-light-secondary{
|
|
color: #5b5b5b;
|
|
background-color: #e0e0e0;
|
|
border-radius: 6px!important;
|
|
font-size: .8em;
|
|
}
|
|
.bg-light-danger{
|
|
color: #f64e60;
|
|
background-color: #ffe2e5;
|
|
border-radius: 6px!important;
|
|
font-size: .8em;
|
|
}
|
|
.bg-light-primary{
|
|
color: #5c96fc;
|
|
background-color: #ddeaff;
|
|
border-radius: 6px!important;
|
|
font-size: .8em;
|
|
}
|
|
.bg-light-warning{
|
|
color: #ffa800;
|
|
background-color: #fff4de;
|
|
border-radius: 6px!important;
|
|
font-size: .8em;
|
|
}
|
|
.bg-light-success{
|
|
color: #0bb783;
|
|
background-color: #d7f9ef;
|
|
border-radius: 6px!important;
|
|
/*font-size: .8em;*/
|
|
}
|
|
.bg-light-success:hover{
|
|
color: #0bb783;
|
|
background-color: #a4ecd9;
|
|
}
|
|
.capitalize-text {
|
|
text-transform: lowercase;
|
|
}
|
|
.capitalize-text:first-letter, .capitalize-text:first-line {
|
|
text-transform: capitalize;
|
|
}
|
|
.event h4{
|
|
font-size: 1.2em!important;
|
|
}
|
|
.event .card-body .detail-event p{
|
|
font-size: .9em;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.card-body .detail-event p i{
|
|
width: 20px;
|
|
}
|
|
.footer-event{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
}
|
|
.footer-event .harga{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.footer-event .harga del{
|
|
font-size: .8em;
|
|
color: rgb(239 68 68 / 80);
|
|
}
|
|
.card-header .image-container{
|
|
width: 100%;
|
|
aspect-ratio: 4/3;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
}
|
|
.card-header .image-container img{
|
|
width: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
border-radius: 4px;
|
|
transition: transform 500ms ease;
|
|
transform: scale(1);
|
|
}
|
|
.event:hover img{
|
|
transform: scale(1.12);
|
|
}
|
|
.nav-link{
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
.card-header.tab-list{
|
|
min-height: fit-content;
|
|
}
|
|
|
|
.wrap-image.detail-foto{
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 1/1;
|
|
object-fit: cover;
|
|
}
|
|
.wrap-image.detail-foto img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.wrap-image {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 4/3;
|
|
box-sizing: border-box;
|
|
border: solid 1px #E5E5E5;
|
|
border-radius: 8px;
|
|
background-color: #EEE;
|
|
font-size: 46px;
|
|
color: #00000030;
|
|
}
|
|
|
|
.wrap-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 4/3;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.wrap-image .btn {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
right: 12px;
|
|
background-color: #f3f6f9CC;
|
|
border-color: #f3f6f9CC;
|
|
border-radius: 13px;
|
|
padding: 0;
|
|
width: 35px;
|
|
height: 35px;
|
|
}
|
|
.wrap-bukti img{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.checkbox-wrapper-46 input[type="checkbox"] {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.checkbox-wrapper-46 .cbx {
|
|
margin: auto;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
.checkbox-wrapper-46 .cbx span {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
.checkbox-wrapper-46 .cbx span:first-child {
|
|
position: relative;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 3px;
|
|
transform: scale(1);
|
|
vertical-align: middle;
|
|
border: 1px solid #9098A9;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.checkbox-wrapper-46 .cbx span:first-child svg {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 2px;
|
|
fill: none;
|
|
stroke: #FFFFFF;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 16px;
|
|
stroke-dashoffset: 16px;
|
|
transition: all 0.3s ease;
|
|
transition-delay: 0.1s;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
.checkbox-wrapper-46 .cbx span:first-child:before {
|
|
content: "";
|
|
width: 150%;
|
|
height: 75%;
|
|
background: #506EEC;
|
|
display: block;
|
|
transform: scale(0);
|
|
opacity: 1;
|
|
border-radius: 50%;
|
|
}
|
|
.checkbox-wrapper-46 .cbx span:last-child {
|
|
padding-left: 8px;
|
|
}
|
|
.checkbox-wrapper-46 .cbx:hover span:first-child {
|
|
border-color: #506EEC;
|
|
}
|
|
|
|
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
|
|
background: #506EEC;
|
|
border-color: #506EEC;
|
|
animation: wave-46 0.4s ease;
|
|
}
|
|
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child:before {
|
|
transform: scale(3.5);
|
|
opacity: 0;
|
|
transition: all 0.6s ease;
|
|
margin-left: -6px;
|
|
margin-top: 2px;
|
|
}
|
|
@keyframes wave-46 {
|
|
50% {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
|
|
.detailModal{
|
|
cursor: pointer;
|
|
}
|
|
#Detail .modal-body,
|
|
#Create .modal-body,
|
|
#Edit .modal-body{
|
|
padding-bottom: 110px!important;
|
|
min-height: 67vh;
|
|
max-height: 80vh;
|
|
overflow-y: scroll;
|
|
}
|
|
#Detail .modal-footer,
|
|
#Create .modal-footer,
|
|
#Edit .modal-footer{
|
|
background: rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(5px);
|
|
-webkit-backdrop-filter: blur(5px);
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
}
|
|
.profile img{
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: cover;
|
|
border-radius: 50px;
|
|
border: 2px solid rgba(44, 44, 169, 0.3);
|
|
}
|
|
.preview-container, .preview-container-update{
|
|
margin-top: 15px;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.preview-container .image-box, .preview-container-update .image-box{
|
|
width: calc(33% - 10px);
|
|
aspect-ratio: 1/1;
|
|
position: relative;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.preview-container .image-box img,
|
|
.preview-container-update .image-box img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.preview-container .image-box .remove-btn,
|
|
.preview-container-update .image-box .remove-btn{
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.preview-container-update{
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1.5px solid #E5E5E5;
|
|
}
|
|
|
|
.foto-logbook{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
|
|
}
|
|
.foto-logbook-item{
|
|
width: calc(25% - 5px);
|
|
object-fit: cover;
|
|
aspect-ratio: 1/1;
|
|
border-radius: 4px;
|
|
}
|
|
.foto-logbook-item img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 5px;
|
|
}
|
|
.wrap-logbook-foto{
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.wrap-logbook-foto .detail-logbook-foto-item{
|
|
width: calc(33% - 10px);
|
|
aspect-ratio: 1/1;
|
|
position: relative;
|
|
}
|
|
|
|
.wrap-logbook-foto .detail-logbook-foto-item img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
.wrap-logbook-foto .detail-logbook-foto-item .hapus-foto-logbook{
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
border: 5px;
|
|
}
|
|
|
|
.schedule{
|
|
border-bottom: 1.3px solid #EFEFEF;
|
|
}
|
|
.schedule:last-child{
|
|
border: none;
|
|
}
|
|
.schedule .box-detail{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
.schedule .sched-detail-text{
|
|
display: inline-block;
|
|
height: 25px;
|
|
overflow-y: hidden;
|
|
margin-bottom: 3px;
|
|
}
|
|
.schedule .status{
|
|
font-weight: 400;
|
|
font-size: .8em;
|
|
padding: 4px 8px!important;
|
|
margin: 0;
|
|
width: fit-content;
|
|
}
|
|
|
|
.schedule .status i{
|
|
font-size: 1em;
|
|
}
|
|
.dropleft .dropdown-toggle::before{
|
|
display: none;
|
|
}
|
|
.dropleft i{
|
|
font-size: 22px;
|
|
}
|
|
.dropdown-menu {
|
|
margin-top: 10px;
|
|
border-radius: 10px;
|
|
border-color: #00000010;
|
|
box-shadow: 1px 2px 20px 5px #00000010;
|
|
padding: 5px;
|
|
}
|
|
|
|
.dropdown-menu li .dropdown-item,
|
|
.dropdown-menu li.dropdown-item {
|
|
font-size: 14px;
|
|
padding: 0 1rem;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-bottom: solid 1px #f6f6f6;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.dropdown-menu li:last-child .dropdown-item,
|
|
.dropdown-menu li.dropdown-item:last-child {
|
|
border: 0;
|
|
}
|
|
|
|
.dropdown-menu li i{
|
|
font-size: 20px!important;
|
|
}
|
|
|
|
.dropdown-item:focus, .dropdown-item:hover {
|
|
}
|
|
.live-circle {
|
|
display: inline-block;
|
|
background: #dc3545;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
box-shadow: 0px 0px 1px 1px #0000001a;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.live-circle.pulse {
|
|
animation: pulse-animation 1s infinite;
|
|
}
|
|
|
|
@keyframes pulse-animation {
|
|
0% {
|
|
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.detail-logbook-modal, .detailModalLogbook{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.accordion .card{
|
|
box-shadow: none!important;
|
|
border: 1px solid #dee2e6;
|
|
/*border-bottom: 1px solid #dee2e6!important;*/
|
|
margin-bottom: 0;
|
|
}
|
|
.accordion .card-header{
|
|
padding: 0;
|
|
}
|
|
.accordion .btn-link{
|
|
width: 100%;
|
|
height: 100%;
|
|
text-decoration: none;
|
|
color: #212529;
|
|
border-radius: 0!important;
|
|
min-height: 70px;
|
|
transition: .15s;
|
|
font-size: .95em;
|
|
font-weight: 500;
|
|
}
|
|
.accordion .btn-link:not(.collapsed)::before {
|
|
content: "-";
|
|
transition: .15s;
|
|
}
|
|
.accordion .btn-link::before {
|
|
content: "+ ";
|
|
transition: .15s;
|
|
font-size: 1.3em;
|
|
margin-right: 10px;
|
|
}
|
|
.accordion .btn-link:not(.collapsed) {
|
|
color: #0c63e4;
|
|
background-color: #e7f1ff!important;
|
|
transition: .15s;
|
|
}
|
|
.schedule-resume{
|
|
width: 400px;
|
|
}
|
|
.schedule-resume tr.bidang-studi{
|
|
vertical-align: top;
|
|
}
|
|
.schedule-resume tr td{
|
|
padding: 0 0 5px 0;
|
|
}
|
|
.schedule-resume tr td:nth-child(1){
|
|
width: 50%;
|
|
}
|
|
.schedule-resume tr td:nth-child(2){
|
|
width: 5%;
|
|
}
|
|
.schedule-resume tr td:nth-child(3){
|
|
width: 45%;
|
|
}
|
|
#DetailLogbook .modal-body,
|
|
#EditLogbook .modal-body
|
|
{
|
|
padding-bottom: 110px!important;
|
|
min-height: 67vh;
|
|
max-height: 80vh;
|
|
overflow-y: scroll;
|
|
}
|
|
#DetailLogbook .modal-footer,
|
|
#EditLogbook .modal-footer
|
|
{
|
|
background: rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(5px);
|
|
-webkit-backdrop-filter: blur(5px);
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
}
|
|
.switch2 {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 50px;
|
|
height: 25px;
|
|
border-radius: 20px;
|
|
background: #dfd9ea;
|
|
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
.switch2::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 2px;
|
|
width: 22px;
|
|
height: 22px;
|
|
background: #fafafa;
|
|
border-radius: 50%;
|
|
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.switch2:active::before {
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);
|
|
}
|
|
input:checked + .switch2 {
|
|
background: #6777ef;
|
|
}
|
|
input:checked + .switch2::before {
|
|
left: 27px;
|
|
background: #fff;
|
|
}
|
|
input:checked + .switch2:active::before {
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(103, 119, 239, 0.62);
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="{{ asset('library/lightbox/css/lightbox.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('library/selectric/public/selectric.css') }}">
|
|
@endpush
|
|
|
|
@section('main')
|
|
{{-- delete --}}
|
|
<div class="modal fade" id="Delete" tabindex="-1" role="dialog"
|
|
aria-labelledby="deleteUserModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteUserModalLabel"><i class="fa-solid fa-bolt p-1 bg-danger text-white" style="border-radius: 4px;"></i> Peringatan Hapus User</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Apakah anda yakin ingin menghapus event ini?</p>
|
|
<form id="FormDelete" method="POST" action="/admin/event-delete/">
|
|
@csrf
|
|
@method('DELETE')
|
|
<input type="hidden" name="id" value="" id="delete_id">
|
|
<div class="d-flex justify-content-end">
|
|
<button type="button" class="btn btn-secondary text-dark mr-2" data-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-danger delete-btn-event"><i class='bx bx-loader bx-spin d-none'></i> Hapus</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="DeletePeserta" tabindex="-1" role="dialog"
|
|
aria-labelledby="deleteUserModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteUserModalLabel"><i class="fa-solid fa-bolt p-1 bg-danger text-white" style="border-radius: 4px;"></i> Peringatan Hapus User</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Apakah anda yakin ingin menghapus peserta ini dari event?</p>
|
|
<form id="FormDeletePeserta" method="POST" action="">
|
|
@csrf
|
|
@method('DELETE')
|
|
<input type="hidden" name="id" value="" id="delete_peserta_id">
|
|
<div class="d-flex justify-content-end">
|
|
<button type="button" class="btn btn-secondary text-dark mr-2" data-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-danger delete-btn-peserta"><i class='bx bx-loader bx-spin d-none'></i> Hapus</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detail Data -->
|
|
|
|
<div class="modal fade" id="DetailLogbook" tabindex="-1" role="dialog" aria-labelledby="DetailLogbookModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editUserModalLabel">Detail Jadwal - <span style="font-size: .8em" class="badge bg-light-primary" id="detail-logbook-pertemuan"></span></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true" class="font-weight-normal">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label>Hari/Tanggal</label>
|
|
<h6 id="detail-logbook-tanggal">-</h6><span id="detail-logbook-waktu"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label>Materi</label>
|
|
<h6 id="detail-logbook-materi">-</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="mb-3">
|
|
<label>Pengajar</label>
|
|
<div id="detail-pengajar" class="d-flex flex-column gap-2">
|
|
<span class="text-muted">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="mb-3">
|
|
<label>Kegiatan Minggu Ini</label>
|
|
<h6 id="detail-kegiatan-minggu-ini" style="white-space: pre-line;">-</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="mb-3">
|
|
<label>Perkembangan Siswa</label>
|
|
<h6 id="detail-perkembangan-siswa" style="white-space: pre-line;">-</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="mb-3">
|
|
<label>Kendala dan Solusi</label>
|
|
<h6 id="detail-kendala-solusi" style="white-space: pre-line;">-</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="mb-3">
|
|
<label>Kebutuhan Minggu Depan</label>
|
|
<h6 id="detail-kebutuhan-minggu-depan" style="white-space: pre-line;">-</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="mb-3">
|
|
<label>Hal Baik (Opsional)</label>
|
|
<h6 id="detail-hal-baik" style="white-space: pre-line;">-</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="mb-3">
|
|
<label>Catatan Lainnya</label>
|
|
<h6 id="detail-logbook-catatan" style="white-space: pre-line;">-</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label>Foto</label>
|
|
<h6 id="detail-logbook-foto-text">-</h6>
|
|
<div class="wrap-logbook-foto" id="detail-logbook-foto"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary text-dark" data-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- edit logbook -->
|
|
<div class="modal fade" id="EditLogbook" tabindex="-1" role="dialog" aria-labelledby="editLogbookLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editUserModalLabel">Isi Logbook <span style="font-size: .65em; color: #f74eb3" id="edit-logbook-title"></span></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true" class="font-weight-normal">×</span>
|
|
</button>
|
|
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="FormEditLogbook" method="POST" action="" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
<input type="hidden" id="edit-logbook-kelasid" placeholder="" name="kelas_id" value="">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-group d-flex align-items-center">
|
|
<div class="mr-2">
|
|
<input type="checkbox" hidden="hidden" id="edit-logbook-libur" name="status_libur">
|
|
<label class="switch2" style="margin-bottom: 0!important" for="edit-logbook-libur"></label>
|
|
</div>
|
|
<label for="" class="mb-0">Tandai Sesi Sebagai Libur</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 libur-field-group d-none">
|
|
<div class="form-group">
|
|
<label for="edit-logbook-jenis-libur">Pilih Jenis Libur</label>
|
|
<select class="form-control" name="jenis_libur" id="edit-logbook-jenis-libur">
|
|
<option disabled>--silahkan pilih jenis libur--</option>
|
|
<option value="Libur Nasional">Libur Nasional</option>
|
|
<option value="Libur Ramadhan">Libur Ramadhan</option>
|
|
<option value="Libur Lainnya">Libur Lainnya</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 libur-field-group libur-lainnya-field d-none">
|
|
<div class="form-group">
|
|
<label for="edit-logbook-libur-lainnya" class="form-label">Libur Lainnya</label>
|
|
<input type="text" class="form-control" id="edit-logbook-libur-lainnya" placeholder="" name="jenis_libur_lainnya">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 non-libur-field-group">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Guru Pengajar</label>
|
|
<input type="hidden" name="guru_id" id="edit-logbook-guru-id">
|
|
<div class="p-3 bg-light rounded text-dark font-weight-bold" id="display-logbook-guru-nama" style="border: 1px solid #dcdfe6; font-size: 0.95rem; background-color: #f8fafc;">
|
|
-
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 non-libur-field-group">
|
|
<div class="form-group">
|
|
<label for="edit-logbook-materi" class="form-label">Materi</label>
|
|
<input type="text" class="form-control @error('materi') is-invalid @enderror" id="edit-logbook-materi" placeholder="Masukkan materi logbook" name="materi" value="{{ old('materi') }}">
|
|
@error('materi')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="col-12 non-libur-field-group">
|
|
<div class="form-group">
|
|
<label for="edit-kegiatan-minggu-ini">Kegiatan Minggu Ini</label>
|
|
<textarea class="form-control @error('kegiatan_minggu_ini') is-invalid @enderror" id="edit-kegiatan-minggu-ini" name="kegiatan_minggu_ini" style="height: 150px"
|
|
placeholder="Masukkan isi kegiatan minggu ini">{{ old('kegiatan_minggu_ini') }}</textarea>
|
|
@error('kegiatan_minggu_ini')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="col-12 non-libur-field-group">
|
|
<div class="form-group">
|
|
<label for="edit-perkembangan-siswa">Perkembangan Siswa</label>
|
|
<textarea class="form-control @error('perkembangan_siswa') is-invalid @enderror" id="edit-perkembangan-siswa" name="perkembangan_siswa" style="height: 150px"
|
|
placeholder="Masukkan perkembangan siswa">{{ old('perkembangan_siswa') }}</textarea>
|
|
@error('perkembangan_siswa')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="col-12 non-libur-field-group">
|
|
<div class="form-group">
|
|
<label for="edit-kendala-solusi">Kendala dan Solusi</label>
|
|
<textarea class="form-control @error('kendala_dan_solusi') is-invalid @enderror" id="edit-kendala-solusi" name="kendala_dan_solusi" style="height: 150px"
|
|
placeholder="Masukkan kendala dan solusi">{{ old('kendala_dan_solusi') }}</textarea>
|
|
@error('kendala_dan_solusi')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="col-12 non-libur-field-group">
|
|
<div class="form-group">
|
|
<label for="edit-kebutuhan-minggu-depan">Kebutuhan Minggu Depan</label>
|
|
<textarea class="form-control @error('kebutuhan_minggu_depan') is-invalid @enderror" id="edit-kebutuhan-minggu-depan" name="kebutuhan_minggu_depan" style="height: 150px"
|
|
placeholder="Masukkan isi kebutuhan minggu depan">{{ old('kebutuhan_minggu_depan') }}</textarea>
|
|
@error('kebutuhan_minggu_depan')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="col-12 non-libur-field-group">
|
|
<div class="form-group">
|
|
<label for="edit-hal-baik">Hal Baik (Opsional)</label>
|
|
<textarea class="form-control @error('hal_baik') is-invalid @enderror" id="edit-hal-baik" name="hal_baik" style="height: 150px"
|
|
placeholder="Masukkan hal baik pada pertemuan ini">{{ old('hal_baik') }}</textarea>
|
|
@error('hal_baik')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="col-12 non-libur-field-group">
|
|
<div class="form-group">
|
|
<label for="edit-logbook-catatan">Catatan Lainnya</label>
|
|
<textarea class="form-control @error('catatan') is-invalid @enderror" id="edit-logbook-catatan" name="catatan" style="height: 150px"
|
|
placeholder="Masukkan catatan tentang logbook">{{ old('catatan') }}</textarea>
|
|
@error('catatan')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 non-libur-field-group">
|
|
<div class="form-group">
|
|
<label for="logbook-foto-update" class="form-label">Tambah Foto</label>
|
|
<input type="file" accept="image/*" class="form-control" id="logbook-foto-update" placeholder="" name="fotos[]" multiple>
|
|
{{-- @error('fotos')--}}
|
|
{{-- <div class="invalid-feedback">--}}
|
|
{{-- {{ $message }}--}}
|
|
{{-- </div>--}}
|
|
{{-- @enderror--}}
|
|
|
|
<div id="preview-container-update" class="preview-container-update"></div>
|
|
|
|
<div class="wrap-logbook-foto" id="update-logbook-foto"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="edit_logbook_id">
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary text-dark" data-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-primary edit-logbook" form="FormEditLogbook"><i class='bx bx-loader bx-spin d-none'></i> Simpan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Delete Foto Logbook --}}
|
|
<div class="modal fade" id="DeleteLogbookFoto" tabindex="-1" role="dialog"
|
|
aria-labelledby="deleteLogbookFotoModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteUserModalLabel"><i class="fa-solid fa-bolt p-1 bg-danger text-white" style="border-radius: 4px;"></i> Peringatan Hapus Foto</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Apakah anda yakin ingin menghapus foto ini dari logbook ini?</p>
|
|
<form id="FormDeleteLogbookFoto" method="POST" action="">
|
|
@csrf
|
|
@method('DELETE')
|
|
<input type="hidden" name="id" value="" id="delete_logbook_foto_id">
|
|
<div class="d-flex justify-content-end">
|
|
<button type="button" class="btn btn-secondary text-dark mr-2" data-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-danger delete-btn-logbook-foto"><i class='bx bx-loader bx-spin d-none'></i> Hapus</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header" style="display: flex; justify-content: space-between; align-items: center">
|
|
<h1 class="d-flex align-items-center">Jadwal Kelas</h1>
|
|
<div class="action d-flex gap-2">
|
|
<a href="/admin/jadwal-mingguan" class="btn btn-primary mr-2" style="line-height: normal; border-radius: 6px;"><i class='bx bx-calendar-event mr-1'></i> Jadwal Grid Mingguan</a>
|
|
<!-- <a href="/admin/jadwal-calendar" class="btn bg-secondary text-dark" style="line-height: normal; border-radius: 6px;" title="Kalender Akademik (Backup)"><i style="font-size: 18px;" class='bx bx-calendar'></i></a> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card" id="id-table">
|
|
<div class="card-header tab-list">
|
|
<ul class="nav nav-pills" style="gap: 10px" id="pills-tab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" id="pills-hariini-tab" data-toggle="pill" data-target="#pills-hariini" role="tab" aria-controls="pills-hariini" aria-selected="true">Hari Ini</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" id="pills-rekap-tab" data-toggle="pill" data-target="#pills-rekap" role="tab" aria-controls="pills-rekap" aria-selected="false">Rekap Jadwal</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" id="pills-resume-tab" data-toggle="pill" data-target="#pills-resume" role="tab" aria-controls="pills-resume" aria-selected="false">Resume</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body py-2">
|
|
<div class="tab-content" id="pills-tabContent">
|
|
<div class="tab-pane fade show active" id="pills-hariini" role="tabpanel" aria-labelledby="pills-hariini-tab">
|
|
<div class="row" id="jadwal-hari-ini-container">
|
|
<div class="col-12 d-flex justify-content-center align-items-center pt-5 pb-5">
|
|
<div class="text-center">
|
|
<i class='bx bx-loader bx-spin' style="font-size: 40px; color: #5c96fc;"></i>
|
|
<p class="mt-3">Memuat jadwal hari ini...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-rekap" role="tabpanel" aria-labelledby="pills-rekap-tab">
|
|
<div id="jadwal-rekap-container">
|
|
<div class="d-flex justify-content-center align-items-center pt-5 pb-5">
|
|
<div class="text-center">
|
|
<i class='bx bx-loader bx-spin' style="font-size: 40px; color: #5c96fc;"></i>
|
|
<p class="mt-3">Memuat rekap jadwal...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-resume" role="tabpanel" aria-labelledby="pills-resume-tab">
|
|
<div id="jadwal-resume-container">
|
|
<div class="d-flex justify-content-center align-items-center pt-5 pb-5">
|
|
<div class="text-center">
|
|
<i class='bx bx-loader bx-spin' style="font-size: 40px; color: #5c96fc;"></i>
|
|
<p class="mt-3">Memuat resume jadwal...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- card jadwal besok --}}
|
|
<div class="card" id="jadwal-besok-container">
|
|
<div class="card-header">
|
|
<p class="m-0">Jadwal Besok</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row" id="jadwal-besok-items">
|
|
<div class="col-12 d-flex justify-content-center align-items-center pt-5 pb-5">
|
|
<div class="text-center">
|
|
<i class='bx bx-loader bx-spin' style="font-size: 40px; color: #5c96fc;"></i>
|
|
<p class="mt-3">Memuat jadwal besok...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="{{ asset('library/lightbox/js/lightbox.min.js') }}"></script>
|
|
<script src="{{ asset('library/selectric/public/jquery.selectric.min.js') }}"></script>
|
|
|
|
|
|
@if (session('success') === 'Data Event Berhasil Diubah')
|
|
<script>
|
|
$('#pills-edit-tab').trigger('click');
|
|
</script>
|
|
@endif
|
|
<script>
|
|
$('#pills-rekap-tab, #pills-resume-tab').on('click', ()=>{
|
|
$('#jadwal-besok-container').hide();
|
|
})
|
|
$('#pills-hariini-tab').on('click', ()=>{
|
|
$('#jadwal-besok-container').show();
|
|
})
|
|
|
|
const lazythumb = "{{ asset('img/bg-load.jpg') }}";
|
|
function lazyImgCheck(){
|
|
const lazyImages = $('img.lazy');
|
|
|
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const img = entry.target;
|
|
const src = $(img).attr('data-src');
|
|
|
|
if (src) {
|
|
$(img).attr('src', src).removeAttr('data-src');
|
|
$(img).on('load', function () {
|
|
$(img).addClass('loaded');
|
|
});
|
|
}
|
|
|
|
observer.unobserve(img);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Observasi semua gambar lazy
|
|
setTimeout(() => {
|
|
lazyImages.each(function () {
|
|
observer.observe(this);
|
|
});
|
|
}, 50);
|
|
}
|
|
|
|
// const options = {
|
|
// valueNames: ['no', 'nama', 'orangtua', 'nohp'],
|
|
// page: 10,
|
|
// pagination: true
|
|
// };
|
|
//
|
|
// const tableList = new List('id-table', options);
|
|
//
|
|
// document.getElementById('entries').addEventListener('change', function () {
|
|
// var perPage = parseInt(this.value, 10);
|
|
// tableList.page = perPage === -1 ? tableList.items.length : perPage;
|
|
// tableList.update();
|
|
// });
|
|
//
|
|
// checkEmptyData();
|
|
// $('.category').on('click', function() {
|
|
// const category = $(this).data('category');
|
|
//
|
|
// $('.category').removeClass('active');
|
|
// $(this).addClass('active');
|
|
//
|
|
// // console.info(category);
|
|
//
|
|
// if (category === 'Semua') {
|
|
// tableList.filter();
|
|
// } else {
|
|
// tableList.filter(function(item) {
|
|
// return item.values().status === category;
|
|
// });
|
|
// }
|
|
// checkEmptyData()
|
|
// });
|
|
//
|
|
// function checkEmptyData() {
|
|
// let num = $('.list tr').length;
|
|
//
|
|
// if (num === 0) {
|
|
// $('.not-found').show()
|
|
// } else {
|
|
// $('.not-found').hide()
|
|
// $('.list').show()
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
$(document).on('click', '.detail-logbook-modal', function(e) {
|
|
$('#DetailLogbook').modal('show');
|
|
let id = $(this).data('id');
|
|
let previewFoto = $('#detail-logbook-foto');
|
|
let previewFotoText = $('#detail-logbook-foto-text');
|
|
|
|
console.info('id ' + id);
|
|
$.ajax({
|
|
url: `/admin/kelas/logbook-get/${id}`,
|
|
method: 'GET',
|
|
success: function (response) {
|
|
let pertemuanView = ``;
|
|
if(response.pertemuan !== null){
|
|
pertemuanView = `Pertemuan ke ${response.pertemuan}`;
|
|
}else{
|
|
pertemuanView = `Belum diset`;
|
|
}
|
|
$('#detail-logbook-pertemuan').text(pertemuanView);
|
|
$('#detail-logbook-tanggal').text(response.tanggalparse ?? 'Tanggal Belum Diset');
|
|
$('#detail-logbook-waktu').text(response.start_parse ? `${response.start_parse} WIB - ${response.end_parse} WIB` : '-');
|
|
$('#detail-logbook-materi').text(response.materi ?? 'Materi Belum Diisi');
|
|
$('#detail-kegiatan-minggu-ini').text(response.kegiatan_minggu_ini ?? 'Belum Diisi');
|
|
$('#detail-perkembangan-siswa').text(response.perkembangan_siswa ?? 'Belum Diisi');
|
|
$('#detail-kendala-solusi').text(response.kendala_dan_solusi ?? 'Belum Diisi');
|
|
$('#detail-kebutuhan-minggu-depan').text(response.kebutuhan_minggu_depan ?? 'Belum Diisi');
|
|
$('#detail-hal-baik').text(response.hal_baik ?? 'Belum Diisi');
|
|
$('#detail-logbook-catatan').text(response.catatan ?? 'Belum Diisi');
|
|
$('#detail-logbook-edit-btn').attr('data-id', response.id);
|
|
|
|
// detail pengajar
|
|
let pengajarContainer = $('#detail-pengajar');
|
|
pengajarContainer.empty();
|
|
let no = 1;
|
|
|
|
if (response.pengajar && response.pengajar.length > 0) {
|
|
response.pengajar.forEach(item => {
|
|
let waNumber = item.no_hp
|
|
? item.no_hp.replace(/^0/, '62')
|
|
: null;
|
|
let waBtn = waNumber
|
|
? `<a href="https://wa.me/+62${waNumber}" target="_blank" class="bg-light-success" style="background: none;">
|
|
<i class="fab fa-whatsapp"></i>
|
|
</a>`
|
|
: `<span class="disabled">-</span>`;
|
|
let row = `
|
|
<div class="pengajar-item d-flex align-items-center">
|
|
<h6 class="pengajar-nama mb-0 mr-1">${no}. ${item.nama_guru}</h6>
|
|
${waBtn}
|
|
</div>
|
|
`;
|
|
|
|
pengajarContainer.append(row);
|
|
no++;
|
|
});
|
|
} else {
|
|
pengajarContainer.html(`<span class="text-muted">-</span>`);
|
|
}
|
|
|
|
// detail foto kegiatan
|
|
previewFoto.empty();
|
|
if (response.logbooks.length > 0) {
|
|
response.logbooks.forEach(logbook => {
|
|
const assetBaseUrl = "{{ asset('storage') }}/";
|
|
let foto = assetBaseUrl + logbook.foto;
|
|
|
|
let row = `
|
|
|
|
<a href="${foto}" data-lightbox="gallery" class="detail-logbook-foto-item">
|
|
<img class="lazy" src="${lazythumb}" data-src="${foto}">
|
|
</a>
|
|
`;
|
|
previewFoto.show();
|
|
previewFoto.append(row);
|
|
previewFotoText.hide();
|
|
});
|
|
lazyImgCheck();
|
|
} else {
|
|
previewFoto.hide();
|
|
previewFotoText.show();
|
|
}
|
|
},
|
|
error: function () {
|
|
alert('Gagal mengambil data. Silakan coba lagi.');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
$(document).on('click', '.edit-data-logbook', function(e) {
|
|
e.preventDefault();
|
|
let id = $(this).data('id');
|
|
let previewFotoUpdate = $('#update-logbook-foto');
|
|
|
|
$.ajax({
|
|
url: `/admin/kelas/logbook-get/${id}`,
|
|
method: 'GET',
|
|
success: function (response) {
|
|
$('#edit-logbook-catatan').val(response.catatan);
|
|
$('#edit_logbook_id').val(response.id);
|
|
$('#edit-logbook-kelasid').val(response.kelas_id);
|
|
$('#edit-logbook-materi').text(`(${response.materi})`);
|
|
$('#edit-kegiatan-minggu-ini').val(response.kegiatan_minggu_ini);
|
|
$('#edit-perkembangan-siswa').val(response.perkembangan_siswa);
|
|
$('#edit-kendala-solusi').val(response.kendala_dan_solusi);
|
|
$('#edit-kebutuhan-minggu-depan').val(response.kebutuhan_minggu_depan);
|
|
$('#edit-hal-baik').val(response.hal_baik);
|
|
|
|
// Set status libur dan jenis libur
|
|
let isLibur = false;
|
|
if(response.status == "libur"){
|
|
isLibur = true
|
|
}
|
|
$('#edit-logbook-libur').prop('checked', isLibur).trigger('change');
|
|
|
|
if(response.jenis_libur) {
|
|
$('#edit-logbook-jenis-libur').val(response.jenis_libur).trigger('change');
|
|
}
|
|
|
|
if(response.jenis_libur_lainnya) {
|
|
$('#edit-logbook-libur-lainnya').val(response.jenis_libur_lainnya);
|
|
}
|
|
|
|
let guruIdEdit = response.guru_id || (response.kelas ? response.kelas.guru_id : '');
|
|
let namaGuruEdit = response.nama_guru || response.guru || (response.kelas && response.kelas.guru ? response.kelas.guru.nama : '-');
|
|
$('#edit-logbook-guru-id').val(guruIdEdit);
|
|
$('#display-logbook-guru-nama').text(namaGuruEdit);
|
|
|
|
// edit foto kegiatan
|
|
previewFotoUpdate.empty();
|
|
if (response.logbooks.length > 0) {
|
|
response.logbooks.forEach(logbook => {
|
|
const assetBaseUrl = "{{ asset('storage') }}/";
|
|
let foto = assetBaseUrl + logbook.foto;
|
|
let row = `
|
|
|
|
<div class="detail-logbook-foto-item">
|
|
<img class="lazy" src="${lazythumb}" data-src="${foto}">
|
|
<button type="button" class="btn btn-danger hapus-foto-logbook" data-id="${logbook.id}" data-toggle="modal" data-target="#DeleteLogbookFoto">Hapus</button>
|
|
</div>
|
|
`;
|
|
previewFotoUpdate.show();
|
|
previewFotoUpdate.append(row);
|
|
});
|
|
lazyImgCheck();
|
|
} else {
|
|
previewFotoUpdate.hide();
|
|
}
|
|
},
|
|
error: function () {
|
|
alert('Gagal mengambil data. Silakan coba lagi.');
|
|
}
|
|
});
|
|
|
|
$("#FormEditLogbook").attr('action', `/admin/jadwal/isi-logbook/${id}`);
|
|
});
|
|
|
|
// Delete Foto Logbook
|
|
$(document).on('click', '.hapus-foto-logbook', function(e) {
|
|
let id = $(this).data('id');
|
|
$('#delete_logbook_foto_id').val(id);
|
|
$("#FormDeleteLogbookFoto").attr('action',
|
|
`/admin/jadwal/logbook-foto-delete/${id}`);
|
|
});
|
|
|
|
$(".edit-logbook").on("click", function () {
|
|
let $this = $(this);
|
|
let loader = $this.find(".bx-loader");
|
|
|
|
loader.removeClass("d-none");
|
|
|
|
$this.prop("disabled", true);
|
|
|
|
$("#FormEditLogbook").submit();
|
|
});
|
|
$(".delete-btn-logbook-foto").on("click", function () {
|
|
let $this = $(this);
|
|
let loader = $this.find(".bx-loader");
|
|
|
|
loader.removeClass("d-none");
|
|
|
|
$this.prop("disabled", true);
|
|
|
|
$("#FormDeleteLogbookFoto").submit();
|
|
});
|
|
|
|
let imageIndexupdate = 0
|
|
let fileListupdate = []
|
|
|
|
$('#logbook-foto-update').on('change', function(event) {
|
|
const files = event.target.files;
|
|
const currentFiles = files.length;
|
|
|
|
|
|
$.each(files, function(index, file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
fileListupdate.push({
|
|
file: file,
|
|
keterangan: ''
|
|
});
|
|
|
|
const imgBox = `
|
|
<div class="image-box" id="image_${imageIndexupdate}">
|
|
<img src="${e.target.result}" class="preview-img" alt="Preview Image" style="width:100%;">
|
|
<input type="text" class="form-control form-control-sm keterangan d-none" placeholder="Keterangan Gambar" data-index="${imageIndexupdate}">
|
|
<a class="remove-btn bg-danger text-white" style="padding:4px 8px; text-decoration: none; color:#fff!important;" data-index="${imageIndexupdate}">Batal</a>
|
|
</div>
|
|
`;
|
|
$('#preview-container-update').append(imgBox);
|
|
imageIndex++;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
})
|
|
// $(this).val('');
|
|
});
|
|
$(document).on('click', '.remove-btn', function() {
|
|
const index = $(this).data('index');
|
|
$(`#image_${index}`).remove();
|
|
});
|
|
|
|
$(document).on('click', '.tambah-peserta-banyak', function(e) {
|
|
checkDataSiswa()
|
|
});
|
|
|
|
|
|
// Toggle visibility untuk Edit Logbook Libur
|
|
$('#edit-logbook-libur').on('change', function(){
|
|
const isChecked = $(this).is(':checked');
|
|
const $liburFields = $('.libur-field-group').not('.libur-lainnya-field');
|
|
const $liburLainyaField = $('.libur-lainnya-field');
|
|
const $nonLiburFields = $('.non-libur-field-group');
|
|
|
|
if(isChecked) {
|
|
// Jika switch checked: tampilkan jenis libur, sembunyikan yang lain
|
|
$liburFields.removeClass('d-none');
|
|
$nonLiburFields.addClass('d-none');
|
|
// Reset jenis libur select
|
|
$('#edit-logbook-jenis-libur').val('');
|
|
// Sembunyikan libur lainnya field
|
|
$liburLainyaField.addClass('d-none');
|
|
} else {
|
|
// Jika unchecked: sembunyikan jenis libur & libur lainnya, tampilkan yang lain
|
|
$liburFields.add($liburLainyaField).addClass('d-none');
|
|
$nonLiburFields.removeClass('d-none');
|
|
}
|
|
});
|
|
|
|
// Toggle visibility untuk Libur Lainnya field berdasarkan select Jenis Libur
|
|
$('#edit-logbook-jenis-libur').on('change', function(){
|
|
const selectedValue = $(this).val();
|
|
const $liburLainyaField = $('.libur-lainnya-field');
|
|
|
|
if(selectedValue === 'Libur Lainnya') {
|
|
$liburLainyaField.removeClass('d-none');
|
|
} else {
|
|
$liburLainyaField.addClass('d-none');
|
|
// Clear input jika tidak memilih Libur Lainnya
|
|
$('#edit-logbook-libur-lainnya').val('');
|
|
}
|
|
});
|
|
|
|
// ============================================
|
|
// AJAX untuk load Jadwal Hari Ini
|
|
// ============================================
|
|
function loadJadwalHariIni() {
|
|
$.ajax({
|
|
url: '/admin/jadwal/ajax-hari-ini',
|
|
method: 'GET',
|
|
success: function(response) {
|
|
if (response.success && response.data.length > 0) {
|
|
renderJadwalHariIni(response.data);
|
|
} else {
|
|
$('#jadwal-hari-ini-container').html(`
|
|
<div class="col-12 schedule row d-flex align-items-center flex-column justify-content-center pt-2 pb-3">
|
|
<div class="bg-light-danger d-flex justify-content-center align-items-center mb-1" style="width: 60px; height: 60px"><i style="font-size: 27px" class="fas fa-calendar-xmark"></i></div>
|
|
<p class="text-center m-0">Tidak ada jadwal untuk hari ini</p>
|
|
</div>
|
|
`);
|
|
}
|
|
lazyImgCheck();
|
|
},
|
|
error: function() {
|
|
$('#jadwal-hari-ini-container').html(`
|
|
<div class="col-12 schedule row d-flex align-items-center flex-column justify-content-center pt-2 pb-3">
|
|
<div class="bg-light-danger d-flex justify-content-center align-items-center mb-1" style="width: 60px; height: 60px"><i style="font-size: 27px" class="fas fa-exclamation-triangle"></i></div>
|
|
<p class="text-center m-0">Gagal memuat jadwal hari ini</p>
|
|
</div>
|
|
`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderJadwalHariIni(data) {
|
|
let html = '';
|
|
let count = 0;
|
|
|
|
data.forEach(function(item) {
|
|
let statusBadge = getStatusBadge(item);
|
|
html += `
|
|
<div class="col-12 schedule row d-flex align-items-center pt-2 pb-3">
|
|
<div class="col-lg-2 col-xl-2 col-xxl-1">
|
|
<div class="box date d-flex align-items-center justify-content-center flex-wrap detail-logbook-modal" style="gap: 10px" data-id="${item.id}">
|
|
<div class="d-flex justify-content-center align-items-center flex-column">
|
|
<p class="m-0 text-black-50 text-center">${moment(item.tanggal).locale('id').format('dddd')}</p>
|
|
<h1 class="m-0 p-0 text-center">${moment(item.tanggal).locale('id').format('DD')}</h1>
|
|
${statusBadge}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-9 col-xl-9 col-xxl-8 d-flex align-items-center detail-logbook-modal" style="height: 100%" data-id="${item.id}">
|
|
<div class="box" style="width: 100%">
|
|
<div class="row row-cols-lg-2 row-cols-md-2">
|
|
<div class="box-detail">
|
|
<i class='bx bx-time-five text-muted'></i>
|
|
<span class="sched-detail-text">
|
|
${item.start ? moment(item.start, 'HH:mm:ss').format('HH:mm') : "Belum diset"} - ${item.end ? moment(item.end, 'HH:mm:ss').format('HH:mm') : "Belum diset"}
|
|
</span>
|
|
</div>
|
|
<div class="box-detail">
|
|
<i class="bx bx-package text-muted"></i> <span class="sched-detail-text">${item.kelas?.nama_kelas || '-'}</span>
|
|
</div>
|
|
<div class="box-detail">
|
|
<i class="bx bx-book text-muted"></i> <span class="sched-detail-text">${item.materi || "Materi belum didefinisikan"}</span>
|
|
</div>
|
|
<div class="box-detail">
|
|
<i class="bx bx-user-pin text-muted"></i> <span class="sched-detail-text">Guru: ${item.guru?.nama || item.kelas?.guru?.nama || "Belum ditentukan"}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-1 col-xl-1 col-xxl-3 d-flex justify-content-end">
|
|
<div class="btn-group dropleft">
|
|
<a href="" type="button" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
|
<i class='bx bx-dots-vertical-rounded'></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center" target="_blank" href="https://wa.me/62${item.guru?.no_hp || item.kelas?.guru?.no_hp || ''}">
|
|
<i class="bx bxl-whatsapp mr-1"></i><span>Hubungi Kordinator</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" type="button" class="dropdown-item d-flex align-items-center edit-data-logbook" data-id="${item.id}" data-toggle="modal" data-target="#EditLogbook">
|
|
<i class="bx bx-edit mr-1"></i><span>Isi Logbook</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" type="button" class="dropdown-item d-flex align-items-center copy-template-wa" data-id="${item.id}">
|
|
<i class='bx bx-send mr-1'></i><span>Kirim ke WA</span>
|
|
</a>
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
$('#jadwal-hari-ini-container').html(html);
|
|
}
|
|
|
|
// ============================================
|
|
// AJAX untuk load Jadwal Besok
|
|
// ============================================
|
|
function loadJadwalBesok() {
|
|
$.ajax({
|
|
url: '/admin/jadwal/ajax-besok',
|
|
method: 'GET',
|
|
success: function(response) {
|
|
if (response.success && response.data.length > 0) {
|
|
renderJadwalBesok(response.data);
|
|
} else {
|
|
$('#jadwal-besok-items').html(`
|
|
<div class="col-12 schedule row d-flex align-items-center flex-column justify-content-center pt-2 pb-3">
|
|
<div class="bg-light-danger d-flex justify-content-center align-items-center mb-1" style="width: 60px; height: 60px"><i style="font-size: 27px" class="fas fa-calendar-xmark"></i></div>
|
|
<p class="text-center m-0">Tidak ada jadwal untuk besok</p>
|
|
</div>
|
|
`);
|
|
}
|
|
lazyImgCheck();
|
|
},
|
|
error: function() {
|
|
$('#jadwal-besok-items').html(`
|
|
<div class="col-12 schedule row d-flex align-items-center flex-column justify-content-center pt-2 pb-3">
|
|
<div class="bg-light-danger d-flex justify-content-center align-items-center mb-1" style="width: 60px; height: 60px"><i style="font-size: 27px" class="fas fa-exclamation-triangle"></i></div>
|
|
<p class="text-center m-0">Gagal memuat jadwal besok</p>
|
|
</div>
|
|
`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderJadwalBesok(data) {
|
|
let html = '';
|
|
data.forEach(function(item) {
|
|
let guruNamaBesok = item.guru?.nama || item.kelas?.guru?.nama || "Belum ditentukan";
|
|
html += `
|
|
<div class="col-12 schedule row d-flex align-items-center pt-2 pb-3">
|
|
<div class="col-lg-2 col-xl-2 col-xxl-1">
|
|
<div class="box date d-flex align-items-center justify-content-center flex-wrap detail-logbook-modal" style="gap: 10px" data-id="${item.id}">
|
|
<div class="d-flex justify-content-center align-items-center flex-column">
|
|
<p class="m-0 text-black-50 text-center">${moment(item.tanggal).locale('id').format('dddd')}</p>
|
|
<h1 class="m-0 p-0 text-center">${moment(item.tanggal).locale('id').format('DD')}</h1>
|
|
<span class="badge bg-light-warning status"><i class="fas fa-rocket"></i> Sesi Besok</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-9 col-xl-9 col-xxl-8 d-flex align-items-center detail-logbook-modal" style="height: 100%" data-id="${item.id}">
|
|
<div class="box" style="width: 100%">
|
|
<div class="row row-cols-lg-2 row-cols-md-2">
|
|
<div class="box-detail">
|
|
<i class='bx bx-time-five text-muted'></i>
|
|
<span class="sched-detail-text">
|
|
${item.start ? moment(item.start, 'HH:mm:ss').format('HH:mm') : "Belum diset"} - ${item.end ? moment(item.end, 'HH:mm:ss').format('HH:mm') : "Belum diset"}
|
|
</span>
|
|
</div>
|
|
<div class="box-detail">
|
|
<i class="bx bx-package text-muted"></i> <span class="sched-detail-text">${item.kelas?.nama_kelas || '-'}</span>
|
|
</div>
|
|
<div class="box-detail">
|
|
<i class="bx bx-book text-muted"></i> <span class="sched-detail-text">${item.materi || "Materi belum didefinisikan"}</span>
|
|
</div>
|
|
<div class="box-detail">
|
|
<i class="bx bx-user-pin text-muted"></i> <span class="sched-detail-text">Guru: ${guruNamaBesok}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-1 col-xl-1 col-xxl-3 d-flex justify-content-end">
|
|
<div class="btn-group dropleft">
|
|
<a href="" type="button" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
|
<i class='bx bx-dots-vertical-rounded'></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center" target="_blank" href="https://wa.me/62${item.kelas?.guru?.no_hp || ''}">
|
|
<i class="bx bxl-whatsapp mr-1"></i><span>Hubungi Kordinator</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" type="button" class="dropdown-item d-flex align-items-center edit-data-logbook" data-id="${item.id}" data-toggle="modal" data-target="#EditLogbook">
|
|
<i class="bx bxs-edit mr-1"></i><span>Isi Logbook</span>
|
|
</a>
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
$('#jadwal-besok-items').html(html);
|
|
}
|
|
|
|
// ============================================
|
|
// AJAX untuk load Rekap Jadwal
|
|
// ============================================
|
|
function loadRekapJadwal() {
|
|
$.ajax({
|
|
url: '/admin/jadwal/ajax-logbook-data',
|
|
method: 'GET',
|
|
success: function(response) {
|
|
if (response.success) {
|
|
renderRekapJadwal(response.upcoming, response.past, response.summary);
|
|
} else {
|
|
$('#jadwal-rekap-container').html(`<p class="text-center text-muted">Gagal memuat data</p>`);
|
|
}
|
|
lazyImgCheck();
|
|
},
|
|
error: function() {
|
|
$('#jadwal-rekap-container').html(`<p class="text-center text-muted">Gagal memuat data rekap jadwal</p>`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderRekapJadwal(upcoming, past, summary) {
|
|
let html = `
|
|
<p class="mb-1" style="font-weight: 400">Logbook Saat Ini & Mendatang</p>
|
|
<div class="accordion" id="accordionUpcoming">
|
|
`;
|
|
|
|
let counter = 1;
|
|
Object.keys(upcoming).forEach(function(bulanTahun) {
|
|
const items = upcoming[bulanTahun];
|
|
html += `
|
|
<div class="card">
|
|
<div class="card-header p-0" id="heading-${counter}">
|
|
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-${counter}" aria-expanded="false">
|
|
${bulanTahun}
|
|
</button>
|
|
</div>
|
|
<div id="collapse-${counter}" class="collapse" aria-labelledby="heading-${counter}" data-parent="#accordionUpcoming">
|
|
<div class="card-body p-2">
|
|
<table class="table-striped table-md table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" width="5%" class="text-center">#</th>
|
|
<th scope="col" width="10%">Tanggal</th>
|
|
<th scope="col" width="13%">Kelas</th>
|
|
<th scope="col" width="14%">Materi</th>
|
|
<th scope="col" width="14%" class="hidden-sm">Catatan</th>
|
|
<th scope="col" width="11%" class="hidden-sm">Foto</th>
|
|
<th scope="col" width="8%">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list">
|
|
`;
|
|
|
|
items.forEach(function(item, idx) {
|
|
let tanggalStr = item.tanggal ? moment(item.tanggal).locale('id').format('DD MMM YYYY') : 'Belum diset';
|
|
let waktuStr = (item.start && item.end) ? `${moment(item.start, 'HH:mm:ss').format('HH:mm')} - ${moment(item.end, 'HH:mm:ss').format('HH:mm')}` : '--';
|
|
let statusBadge = getStatusBadgeForTable(item);
|
|
|
|
html += `
|
|
<tr class="detail-logbook-modal" data-id="${item.id}" style="cursor: pointer;">
|
|
<td valign="middle" class="no text-center" scope="row">${idx + 1}</td>
|
|
<td valign="middle">${tanggalStr}<br><span>${waktuStr}</span></td>
|
|
<td valign="middle">${item.kelas?.nama_kelas || '-'}<br>${item.kelas?.guru?.nama || '-'}</td>
|
|
<td valign="middle">${item.materi || '<span class="badge bg-light-danger">Materi belum diset</span>'}</td>
|
|
<td valign="middle" class="hidden-sm">${item.catatan || 'Belum diisi'}</td>
|
|
<td valign="middle" class="hidden-sm">
|
|
<div class="foto-logbook">
|
|
${item.foto_logbook?.map(foto => `<div class="foto-logbook-item"><img class="foto-logbook lazy" src="{{ asset('img/bg-load.jpg') }}" data-src="{{ asset('storage') }}/${foto.foto}"></div>`).join('') || '-'}
|
|
</div>
|
|
</td>
|
|
<td valign="middle">${statusBadge}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
html += `
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
counter++;
|
|
});
|
|
|
|
html += `</div><br><p class="mt-1 mb-1" style="font-weight: 400">Logbook Terdahulu</p>
|
|
<div class="accordion" id="accordionPast">
|
|
`;
|
|
|
|
Object.keys(past).forEach(function(bulanTahun) {
|
|
const items = past[bulanTahun];
|
|
html += `
|
|
<div class="card">
|
|
<div class="card-header p-0" id="heading-past-${counter}">
|
|
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-past-${counter}" aria-expanded="false">
|
|
${bulanTahun}
|
|
</button>
|
|
</div>
|
|
<div id="collapse-past-${counter}" class="collapse" aria-labelledby="heading-past-${counter}" data-parent="#accordionPast">
|
|
<div class="card-body p-2">
|
|
<table class="table-striped table-md table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" width="5%" class="text-center">#</th>
|
|
<th scope="col" width="10%">Tanggal</th>
|
|
<th scope="col" width="13%">Kelas</th>
|
|
<th scope="col" width="14%">Materi</th>
|
|
<th scope="col" width="14%" class="hidden-sm">Catatan</th>
|
|
<th scope="col" width="11%" class="hidden-sm">Foto</th>
|
|
<th scope="col" width="8%">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
items.forEach(function(item, idx) {
|
|
let tanggalStr = item.tanggal ? moment(item.tanggal).locale('id').format('DD MMM YYYY') : 'Belum diset';
|
|
let waktuStr = (item.start && item.end) ? `${moment(item.start, 'HH:mm:ss').format('HH:mm')} - ${moment(item.end, 'HH:mm:ss').format('HH:mm')}` : '--';
|
|
let statusBadge = getStatusBadgeForTable(item);
|
|
|
|
html += `
|
|
<tr class="detail-logbook-modal" data-id="${item.id}" style="cursor: pointer;">
|
|
<td valign="middle" class="no text-center" scope="row">${idx + 1}</td>
|
|
<td valign="middle">${tanggalStr}<br><span>${waktuStr}</span></td>
|
|
<td valign="middle">${item.kelas?.nama_kelas || '-'}<br>${item.kelas?.guru?.nama || '-'}</td>
|
|
<td valign="middle">${item.materi || '<span class="badge bg-light-danger">Materi belum diset</span>'}</td>
|
|
<td valign="middle" class="hidden-sm">${item.catatan || 'Belum diisi'}</td>
|
|
<td valign="middle" class="hidden-sm">
|
|
<div class="foto-logbook">
|
|
${item.foto_logbook?.map(foto => `<div class="foto-logbook-item"><img class="foto-logbook lazy" src="{{ asset('img/bg-load.jpg') }}" data-src="{{ asset('storage') }}/${foto.foto}"></div>`).join('') || '-'}
|
|
</div>
|
|
</td>
|
|
<td valign="middle">${statusBadge}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
html += `
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
counter++;
|
|
});
|
|
|
|
html += `</div>`;
|
|
|
|
$('#jadwal-rekap-container').html(html);
|
|
}
|
|
|
|
// ============================================
|
|
// AJAX untuk load Resume Jadwal
|
|
// ============================================
|
|
function loadResumeJadwal() {
|
|
$.ajax({
|
|
url: '/admin/jadwal/ajax-logbook-data',
|
|
method: 'GET',
|
|
success: function(response) {
|
|
if (response.success) {
|
|
renderResumeJadwal(response.upcoming, response.past, response.summary);
|
|
} else {
|
|
$('#jadwal-resume-container').html(`<p class="text-center text-muted">Gagal memuat data</p>`);
|
|
}
|
|
},
|
|
error: function() {
|
|
$('#jadwal-resume-container').html(`<p class="text-center text-muted">Gagal memuat data resume jadwal</p>`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderResumeJadwal(upcoming, past, summary) {
|
|
let html = `
|
|
<p class="mb-1" style="font-weight: 400">Rangkuman Logbook Saat Ini & Mendatang</p>
|
|
<div class="accordion" id="accordionUpcomingSummary">
|
|
`;
|
|
|
|
let counter = 1;
|
|
Object.keys(upcoming).forEach(function(bulanTahun) {
|
|
const stats = summary[bulanTahun] || {};
|
|
html += `
|
|
<div class="card">
|
|
<div class="card-header p-0" id="heading-resume-${counter}">
|
|
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-resume-${counter}" aria-expanded="false">
|
|
${bulanTahun}
|
|
</button>
|
|
</div>
|
|
<div id="collapse-resume-${counter}" class="collapse p-3" aria-labelledby="heading-resume-${counter}" data-parent="#accordionUpcomingSummary">
|
|
<table class="schedule-resume">
|
|
<tr>
|
|
<td>Jumlah Kelas</td>
|
|
<td>:</td>
|
|
<td>${stats['jumlah_kelas'] || 0} kelas</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jumlah Siswa</td>
|
|
<td>:</td>
|
|
<td>${stats['jumlah_siswa'] || 0} siswa</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jumlah Sesi</td>
|
|
<td>:</td>
|
|
<td>${stats['jumlah_sesi'] || 0} sesi</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jumlah Sesi Completed</td>
|
|
<td>:</td>
|
|
<td>${stats['jumlah_sesi_completed'] || 0} sesi</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
counter++;
|
|
});
|
|
|
|
html += `</div><br><p class="mt-1 mb-1" style="font-weight: 400">Rangkuman Logbook Terdahulu</p>
|
|
<div class="accordion" id="accordionPastSummary">
|
|
`;
|
|
|
|
Object.keys(past).forEach(function(bulanTahun) {
|
|
const stats = summary[bulanTahun] || {};
|
|
html += `
|
|
<div class="card">
|
|
<div class="card-header p-0" id="heading-resume-past-${counter}">
|
|
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-resume-past-${counter}" aria-expanded="false">
|
|
${bulanTahun}
|
|
</button>
|
|
</div>
|
|
<div id="collapse-resume-past-${counter}" class="collapse p-3" aria-labelledby="heading-resume-past-${counter}" data-parent="#accordionPastSummary">
|
|
<table class="schedule-resume">
|
|
<tr>
|
|
<td>Jumlah Kelas</td>
|
|
<td>:</td>
|
|
<td>${stats['jumlah_kelas'] || 0} kelas</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jumlah Siswa</td>
|
|
<td>:</td>
|
|
<td>${stats['jumlah_siswa'] || 0} siswa</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jumlah Sesi</td>
|
|
<td>:</td>
|
|
<td>${stats['jumlah_sesi'] || 0} sesi</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jumlah Sesi Completed</td>
|
|
<td>:</td>
|
|
<td>${stats['jumlah_sesi_completed'] || 0} sesi</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
counter++;
|
|
});
|
|
|
|
html += `</div>`;
|
|
|
|
$('#jadwal-resume-container').html(html);
|
|
}
|
|
|
|
// ============================================
|
|
// Helper Functions
|
|
// ============================================
|
|
function getStatusBadge(item) {
|
|
const now = moment();
|
|
const startTime = item.start ? moment(item.start, 'HH:mm:ss') : null;
|
|
const endTime = item.end ? moment(item.end, 'HH:mm:ss') : null;
|
|
|
|
if (item.status === "completed") {
|
|
return `<span class="badge bg-light-success status"><i class="fas fa-check"></i> Completed</span>`;
|
|
} else if (item.jenis_libur || item.catatan === "Libur" || item.catatan === "libur") {
|
|
return `<span class="badge bg-light-warning status"><i class="fas fa-ban"></i> Libur</span>`;
|
|
} else if (!item.start || !item.end) {
|
|
return `<span class="badge bg-light-danger status"><i class="fas fa-circle-exclamation"></i> Jam belum Diset</span>`;
|
|
} else if (endTime && endTime.isBefore(now)) {
|
|
return `<span class="badge bg-light-danger status"><i class="fas fa-circle-exclamation"></i> Perlu Diisi</span>`;
|
|
} else if (startTime && endTime && now.isBetween(startTime, endTime)) {
|
|
return `<span class="badge bg-light-secondary status"><span class="live-circle pulse"></span> Sedang Berjalan</span>`;
|
|
} else {
|
|
return `<span class="badge bg-light-warning status"><i class="fas fa-forward"></i> Jadwal Berikutnya</span>`;
|
|
}
|
|
}
|
|
|
|
function getStatusBadgeForTable(item) {
|
|
if (item.status === "completed") {
|
|
return `<span class="badge bg-light-success capitalize-text">${item.status}</span>`;
|
|
} else if (!item.start || !item.end) {
|
|
if (item.catatan === "Libur" || item.catatan === "libur") {
|
|
return `<span class="badge bg-light-secondary status">Libur</span>`;
|
|
} else {
|
|
return `<span class="badge bg-light-danger status">Jam belum Diset</span>`;
|
|
}
|
|
} else {
|
|
if (moment(item.tanggal).isBefore(moment(), 'day')) {
|
|
return `<span class="badge bg-light-danger">Perlu Diisi</span>`;
|
|
} else {
|
|
return `<span class="badge bg-light-secondary capitalize-text">${item.status}</span>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Load data on tab click
|
|
// ============================================
|
|
$(document).on('shown.bs.tab', '#pills-hariini-tab', function() {
|
|
loadJadwalHariIni();
|
|
});
|
|
|
|
$(document).on('shown.bs.tab', '#pills-rekap-tab', function() {
|
|
loadRekapJadwal();
|
|
});
|
|
|
|
$(document).on('shown.bs.tab', '#pills-resume-tab', function() {
|
|
loadResumeJadwal();
|
|
});
|
|
|
|
// Load jadwal hari ini on page load
|
|
$(document).ready(function() {
|
|
loadJadwalHariIni();
|
|
loadJadwalBesok();
|
|
});
|
|
</script>
|
|
|
|
<script src="{{ asset('js/copy_template_wa.js') }}"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/id.min.js"></script>
|
|
@endpush
|
|
|
|
|