453 lines
24 KiB
PHP
453 lines
24 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Kelas')
|
|
|
|
@push('style')
|
|
<style>
|
|
#edit .modal-dialog{
|
|
max-width: 800px!important;
|
|
}
|
|
.profile img{
|
|
width: 40px;
|
|
height: 40px;
|
|
/*object-fit: cover;*/
|
|
border-radius: 50px;
|
|
border: 2px solid rgba(44, 44, 169, 0.3);
|
|
}
|
|
table tbody td{
|
|
vertical-align: middle!important;
|
|
}
|
|
table thead th{
|
|
width: fit-content;
|
|
}
|
|
.openModal{
|
|
cursor: pointer;
|
|
}
|
|
.sorting{
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.category{
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: .95em;
|
|
}
|
|
.category span{
|
|
font-size: .8em;
|
|
padding: 5px 8px 3px 8px;
|
|
}
|
|
.category::after{
|
|
content: '';
|
|
width: 0;
|
|
height: 3px;
|
|
display: inline-block;
|
|
background-color: #6777ef;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
transition: .3s;
|
|
}
|
|
.category.active::after,
|
|
.category:hover::after{
|
|
width: 23px;
|
|
}
|
|
.detail-kelas{
|
|
cursor: pointer;
|
|
}
|
|
.btn-excel{
|
|
background-color: #1D6F42;
|
|
color: #fff;
|
|
}
|
|
.btn-excel:hover,
|
|
.btn-excel:focus,
|
|
.btn-excel:active{
|
|
background-color: #116538 !important;
|
|
color: #fff!important;
|
|
}
|
|
th, td{
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
@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 kelas ini?</p>
|
|
<form id="FormDelete" method="POST" action="">
|
|
@csrf
|
|
@method('DELETE')
|
|
<input type="hidden" name="id" id="delete_id">
|
|
<button type="submit" class="btn btn-danger">Hapus</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- modal export logbook kelas --}}
|
|
<div class="modal fade" id="ExportLogbookModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="exportLogbookModalLabel" 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="exportLogbookModalLabel"><i class="fa-solid fa-file-excel p-1 bg-success text-white" style="border-radius: 4px;"></i> Export Logbook Kelas (Format Laporan)</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form method="GET" action="/admin/kelas/export-logbook-filter">
|
|
<div class="modal-body">
|
|
<p class="text-muted small mb-3">Mengekspor laporan seluruh logbook pertemuan kelas ke dalam file Excel (Multi-Sheet per kelas).</p>
|
|
<div class="form-group">
|
|
<label for="exp_log_semester">Semester</label>
|
|
<select name="semester" id="exp_log_semester" class="form-control">
|
|
<option value="">Semua Semester</option>
|
|
@foreach($semesters as $s)
|
|
<option value="{{ $s }}">{{ $s }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exp_log_tahun">Tahun Ajaran</label>
|
|
<select name="tahun" id="exp_log_tahun" class="form-control">
|
|
<option value="">Semua Tahun Ajaran</option>
|
|
@foreach($years as $y)
|
|
<option value="{{ $y }}">{{ $y }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exp_log_is_ekstrakurikuler">Tipe Kelas</label>
|
|
<select name="is_ekstrakurikuler" id="exp_log_is_ekstrakurikuler" class="form-control">
|
|
<option value="">Semua Tipe</option>
|
|
<option value="0">Reguler</option>
|
|
<option value="1">Ekstrakurikuler</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exp_log_program_id">Program / Level</label>
|
|
<select name="program_id" id="exp_log_program_id" class="form-control">
|
|
<option value="">Semua Program</option>
|
|
@foreach($programs as $p)
|
|
<option value="{{ $p->id }}">{{ $p->kelas }} ({{ $p->level }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer text-right">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-success"><i class="fa fa-file-excel mr-1"></i> Download Logbook Excel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- modal export data kelas & siswa --}}
|
|
<div class="modal fade" id="ExportKelasSiswaModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="exportKelasSiswaModalLabel" 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="exportKelasSiswaModalLabel"><i class="fa-solid fa-users p-1 bg-primary text-white" style="border-radius: 4px;"></i> Export Data Kelas & Siswa</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form method="GET" action="/admin/kelas/export-siswa-filter">
|
|
<div class="modal-body">
|
|
<p class="text-muted small mb-3">Mengekspor daftar siswa & data peserta didik per kelas ke dalam file Excel.</p>
|
|
<div class="form-group">
|
|
<label for="exp_sis_semester">Semester</label>
|
|
<select name="semester" id="exp_sis_semester" class="form-control">
|
|
<option value="">Semua Semester</option>
|
|
@foreach($semesters as $s)
|
|
<option value="{{ $s }}">{{ $s }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exp_sis_tahun">Tahun Ajaran</label>
|
|
<select name="tahun" id="exp_sis_tahun" class="form-control">
|
|
<option value="">Semua Tahun Ajaran</option>
|
|
@foreach($years as $y)
|
|
<option value="{{ $y }}">{{ $y }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exp_sis_is_ekstrakurikuler">Tipe Kelas</label>
|
|
<select name="is_ekstrakurikuler" id="exp_sis_is_ekstrakurikuler" class="form-control">
|
|
<option value="">Semua Tipe</option>
|
|
<option value="0">Reguler</option>
|
|
<option value="1">Ekstrakurikuler</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exp_sis_program_id">Program / Level</label>
|
|
<select name="program_id" id="exp_sis_program_id" class="form-control">
|
|
<option value="">Semua Program</option>
|
|
@foreach($programs as $p)
|
|
<option value="{{ $p->id }}">{{ $p->kelas }} ({{ $p->level }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer text-right">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-primary"><i class="fa fa-file-excel mr-1"></i> Download Data Siswa Excel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- filter --}}
|
|
<div class="modal fade" id="FilterModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="filterModalLabel" 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="filterModalLabel"><i class="fa-solid fa-filter p-1 bg-info text-white" style="border-radius: 4px;"></i> Filter Data Kelas</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form action="/admin/kelas" method="GET">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="semester">Semester</label>
|
|
<select name="semester" id="semester" class="form-control">
|
|
<option value="">Semua Semester</option>
|
|
@foreach($semesters as $s)
|
|
<option value="{{ $s }}" {{ request('semester') == $s ? 'selected' : '' }}>{{ $s }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="tahun">Tahun Ajaran</label>
|
|
<select name="tahun" id="tahun" class="form-control">
|
|
<option value="">Semua Tahun</option>
|
|
@foreach($years as $y)
|
|
<option value="{{ $y }}" {{ request('tahun') == $y ? 'selected' : '' }}>{{ $y }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="is_ekstrakurikuler">Tipe Kelas</label>
|
|
<select name="is_ekstrakurikuler" id="is_ekstrakurikuler" class="form-control">
|
|
<option value="">Semua Tipe</option>
|
|
<option value="0" {{ request('is_ekstrakurikuler') === '0' ? 'selected' : '' }}>Reguler</option>
|
|
<option value="1" {{ request('is_ekstrakurikuler') === '1' ? 'selected' : '' }}>Ekstrakurikuler</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="program_id">Program</label>
|
|
<select name="program_id" id="program_id" class="form-control">
|
|
<option value="">Semua Program</option>
|
|
@foreach($programs as $p)
|
|
<option value="{{ $p->id }}" {{ request('program_id') == $p->id ? 'selected' : '' }}>{{ $p->kelas }} ({{ $p->level }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer text-right">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-info">Terapkan Filter</button>
|
|
</div>
|
|
</form>
|
|
</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>Kelas</h1>
|
|
<a href="/admin/kelas-tambah" class="btn btn-primary">Tambah Kelas</a>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card" id="id-table">
|
|
<div class="card-header d-flex justify-content-between">
|
|
<div class="d-flex gap-1 mb-2 mb-md-0">
|
|
{{-- <button type="button" class="btn btn-excel px-2 mr-2" data-toggle="modal" data-target="#ExportLogbookModal" style="border-radius: 4px"><i class="pr-1 fa-solid fa-file-excel"></i> Export Logbook Kelas</button>--}}
|
|
{{-- <button type="button" class="btn btn-primary px-2 mr-2" data-toggle="modal" data-target="#ExportKelasSiswaModal" style="border-radius: 4px"><i class="pr-1 fa-solid fa-users"></i> Export Rincian Siswa</button>--}}
|
|
<button type="button" class="btn btn-info px-2 mr-2" data-toggle="modal" data-target="#FilterModal" style="border-radius: 4px"><i class="pr-1 fa-solid fa-filter"></i> Filter</button>
|
|
@if(request()->anyFilled(['semester', 'tahun', 'is_ekstrakurikuler', 'program_id']))
|
|
<a href="/admin/kelas" class="btn btn-secondary px-2" style="border-radius: 4px"><i class="pr-1 fa-solid fa-rotate-left"></i> Reset</a>
|
|
@endif
|
|
</div>
|
|
<div class="card-header-form">
|
|
<form>
|
|
<div class="input-group">
|
|
<input type="search" class="search form-control" placeholder="Search">
|
|
<div class="input-group-btn">
|
|
<span class="btn bg-primary text-white" style="cursor: text; border-top-left-radius: 0; border-bottom-left-radius: 0"><i class="fas fa-search"></i></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="table-responsive table-hover">
|
|
<table class="table-striped table-md table" id="pesertaTable">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" width="5%" class="sort asc text-center" data-sort="no">#</th>
|
|
<th scope="col" width="22%" class="sort" data-sort="nama_kelas">Nama Kelas</th>
|
|
<th scope="col" width="13%" class="sort" data-sort="program">Program</th>
|
|
<th scope="col" width="15%" class="sort" data-sort="frekuensi_per_minggu">Frekuensi Perminggu</th>
|
|
<th scope="col" width="15%" class="sort" data-sort="jenis_kelas">Jumlah Sesi</th>
|
|
<th scope="col" width="10%" class="sort" data-sort="jumlah_siswa">Jumlah Siswa</th>
|
|
<th scope="col" width="10%" class="sort" data-sort="status_kelas">Status Kelas</th>
|
|
<th scope="col" width="10%" class="text-center">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list">
|
|
@foreach($data as $item)
|
|
<tr class="status-{{ str_replace(' ', '-', $item->status) }}">
|
|
<td valign="middle" class="no text-center detail-kelas" data-id="{{ $item->id }}" scope="row">{{ $loop->iteration }}</td>
|
|
<td valign="middle" class="nama_kelas detail-kelas" data-id="{{ $item->id }}" scope="row">{{ $item->nama_kelas }}</td>
|
|
<td valign="middle" class="program detail-kelas" data-id="{{ $item->id }}" scope="row">
|
|
@if ($item->Programs)
|
|
Level {{ optional($item->Programs)->level }} ({{ optional($item->Programs)->kelas }})
|
|
@else
|
|
-
|
|
@endif
|
|
</td>
|
|
<td valign="middle" class="frekuensi_per_minggu detail-kelas" data-id="{{ $item->id }}" scope="row">{{ $item->frekuensi_per_minggu ? $item->frekuensi_per_minggu . 'x per minggu' : '-' }}</td>
|
|
<td valign="middle" class="jenis_kelas detail-kelas" data-id="{{ $item->id }}" scope="row">{{ $item->jenis_kelas ?? '-' }}</td>
|
|
<td valign="middle" class="jumlah_siswa detail-kelas" data-id="{{ $item->id }}" scope="row">{{ $item->siswa_count }} Siswa</td>
|
|
<td valign="middle" class="status_kelas detail-kelas" data-id="{{ $item->id }}" scope="row">
|
|
@if($item->status == 'Aktif')
|
|
<span class="badge bg-light-primary">Aktif</span>
|
|
@elseif($item->status == 'Tidak Aktif')
|
|
<span class="badge bg-light-danger">Tidak Aktif</span>
|
|
@else
|
|
<span class="badge bg-light-secondary fst-italic">Status belum dipilih</span>
|
|
@endif
|
|
</td>
|
|
<td valign="middle" scope="row">
|
|
<div class="action d-flex justify-content-center align-items-center gap-1">
|
|
<a href="/admin/kelas/{{ $item->id }}" class="btn edit-data" data-id="{{ $item->id }}">
|
|
<i class="fa-regular fa-eye"></i>
|
|
</a>
|
|
<button type="button" class="btn delete-data" data-id="{{ $item->id }}" data-toggle="modal"
|
|
data-target="#Delete">
|
|
<i class="fa-regular fa-trash-can"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
<tbody class="not-found" style="">
|
|
<tr>
|
|
<td colspan="8" class="text-center">-- Data Kosong --</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<div class="d-flex gap-1">
|
|
<label for="entries">Tampilkan</label>
|
|
<select class="form-control p-0" id="entries" style="height: fit-content; width: fit-content">
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
<option value="-1">Semua</option>
|
|
</select> Data
|
|
</div>
|
|
<ul class="pagination"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="{{ asset('library/listjs/list.min.js') }}"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
const options = {
|
|
valueNames: ['no', 'nama_kelas', 'program', 'frekuensi_per_minggu', 'jenis_kelas'],
|
|
page: 25,
|
|
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').children().length
|
|
|
|
if (num === 0) {
|
|
$('.not-found').show()
|
|
$('.list').hide()
|
|
} else {
|
|
$('.not-found').hide()
|
|
$('.list').show()
|
|
}
|
|
}
|
|
|
|
$(document).on('click', '.delete-data', function(e) {
|
|
let id = $(this).data('id');
|
|
$('#delete_id').val(id);
|
|
$("#FormDelete").attr('action',
|
|
`/admin/kelas-delete/${id}`);
|
|
});
|
|
|
|
$('.list').on('click', '.detail-kelas', function(e) {
|
|
$('#Detail').modal('show');
|
|
let id = $(this).data('id');
|
|
let redirect = "/admin/kelas/" + id;
|
|
window.location.href = redirect;
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
|