658 lines
28 KiB
PHP
658 lines
28 KiB
PHP
@extends('pages.index')
|
|
@section('admin_content')
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<style>
|
|
.container {
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.grade-title {
|
|
color: rgb(87, 87, 87);
|
|
font-weight: 700;
|
|
font-size: 2rem;
|
|
margin-bottom: 2rem;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.class-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
color: #334155;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
height: 280px;
|
|
cursor: pointer;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 4px 20px rgba(54, 92, 245, 0.08);
|
|
}
|
|
|
|
.class-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 30px rgba(54, 92, 245, 0.15);
|
|
border-color: #365CF5;
|
|
}
|
|
|
|
.class-card.tkj {
|
|
background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
|
|
color: white;
|
|
}
|
|
|
|
.class-card.tav {
|
|
background: linear-gradient(135deg, #059669 0%, #34d399 100%);
|
|
color: white;
|
|
}
|
|
|
|
.class-card.multimedia {
|
|
background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
|
|
color: white;
|
|
}
|
|
|
|
.class-card.akuntansi {
|
|
background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
|
|
color: white;
|
|
}
|
|
|
|
.class-card.grade-10 {
|
|
background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
|
|
color: white;
|
|
}
|
|
.class-card.grade-11 {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
|
|
color: white;
|
|
}
|
|
.class-card.grade-12 {
|
|
background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
|
|
color: white;
|
|
}
|
|
|
|
.class-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.class-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -30%;
|
|
left: -30%;
|
|
width: 60%;
|
|
height: 60%;
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.card-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.class-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: rgba(255,255,255,0.15);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1rem;
|
|
backdrop-filter: blur(10px);
|
|
border: 2px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.class-icon i {
|
|
font-size: 2rem;
|
|
color: white;
|
|
}
|
|
|
|
.class-number {
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
margin-bottom: 0.5rem;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.class-name {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.major-name {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
background: rgba(255,255,255,0.15);
|
|
padding: 0.3rem 1rem;
|
|
border-radius: 20px;
|
|
display: inline-block;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.status-badge {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background: rgba(255,255,255,0.9);
|
|
color: #365CF5;
|
|
padding: 0.3rem 0.8rem;
|
|
border-radius: 15px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
z-index: 3;
|
|
}
|
|
|
|
.status-badge.active {
|
|
background: rgba(255,255,255,0.95);
|
|
color: #365CF5;
|
|
}
|
|
|
|
.decorative-elements {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.circle-1 {
|
|
position: absolute;
|
|
top: 10%;
|
|
right: 10%;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid rgba(255,255,255,0.2);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.circle-2 {
|
|
position: absolute;
|
|
bottom: 20%;
|
|
left: 10%;
|
|
width: 15px;
|
|
height: 15px;
|
|
background: rgba(255,255,255,0.15);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.square {
|
|
position: absolute;
|
|
top: 60%;
|
|
right: 15%;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: rgba(255,255,255,0.15);
|
|
border-radius: 3px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
.floating {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.section-divider {
|
|
margin: 3rem 0;
|
|
}
|
|
</style>
|
|
<div class="container-fluid">
|
|
<!-- ========== title-wrapper start ========== -->
|
|
<div class="title-wrapper pt-30">
|
|
<div class="row align-items-start">
|
|
<div class="col-md-6">
|
|
<div class="title">
|
|
<h2 style="font-weight: 500;">Kelas Harian</h2> <!-- Kurangi ketebalan judul -->
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="breadcrumb-wrapper">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="{{ route('dashboard.index') }}">Dashboard</a>
|
|
</li>
|
|
<li class="breadcrumb-item active" aria-current="page">
|
|
Kelas
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ========== title-wrapper end ========== -->
|
|
|
|
<!-- Button Tambah Kelas -->
|
|
<div class="mb-3 text-end">
|
|
<button class="btn btn-primary btn-sm fw-bold" data-bs-toggle="modal" data-bs-target="#modalTambahKelas">
|
|
<i class="fas fa-plus text-white me-2"></i>
|
|
Tambah Kelas
|
|
</button>
|
|
</div>
|
|
<hr class="my-4"> <!-- Garis horizontal pembatas kelas 10, 11, 12 -->
|
|
|
|
<!-- Notifikasi Sukses -->
|
|
@if (session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert" id="successAlert">
|
|
<i class="fas fa-check-circle me-2"></i>
|
|
<strong>Berhasil!</strong> {{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
<script>
|
|
setTimeout(function() {
|
|
const alert = document.getElementById('successAlert');
|
|
if (alert) {
|
|
const bsAlert = new bootstrap.Alert(alert);
|
|
bsAlert.close();
|
|
}
|
|
}, 5000);
|
|
</script>
|
|
@endif
|
|
|
|
<!-- Modal Tambah Kelas -->
|
|
<div class="modal fade" id="modalTambahKelas" tabindex="-1" aria-labelledby="modalTambahKelasLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content shadow-lg border-0 rounded-4">
|
|
<div class="modal-header bg-primary text-white border-0 rounded-top-4">
|
|
<h5 class="modal-title fw-bold text-whi" id="modalTambahKelasLabel">
|
|
<i class="fas fa-plus me-2"></i>Tambah Kelas
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form method="POST" action="{{ route('kelas.store') }}">
|
|
@csrf
|
|
<div class="modal-body bg-light">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Nama Kelas</label>
|
|
<input type="text" name="name" class="form-control" placeholder="Contoh: 10 TKJ 1" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Jurusan</label>
|
|
<input type="text" name="major" class="form-control" placeholder="Contoh: Teknik Komputer dan Jaringan" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Tingkat</label>
|
|
<input type="number" id="addGrade" name="grade" class="form-control" placeholder="Contoh: 10" min="10" max="12" required>
|
|
<small class="text-muted">Hanya boleh: 10, 11, atau 12</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Kode Kelas</label>
|
|
<input type="text" name="code" class="form-control" placeholder="Contoh: TKJ" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-white border-0 p-3">
|
|
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-1"></i>Batal
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save me-1"></i>Simpan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@php
|
|
$kelas10 = $classes->where('grade', 10);
|
|
$kelas11 = $classes->where('grade', 11);
|
|
$kelas12 = $classes->where('grade', 12);
|
|
@endphp
|
|
|
|
<div class="container">
|
|
<!-- Kelas 10 -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h2 class="grade-title">
|
|
<i class="fas fa-graduation-cap me-3"></i>
|
|
KELAS 10
|
|
</h2>
|
|
</div>
|
|
@foreach($kelas10 as $kelas)
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="class-card grade-10 floating position-relative">
|
|
<!-- Overlay link -->
|
|
<a href="{{ route('absensi.absensi_harian', ['classId' => $kelas->id]) }}" class="stretched-link" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;"></a>
|
|
<!-- Dropdown titik tiga di kanan atas tanpa background bulat -->
|
|
<div class="dropdown position-absolute" style="top: 1rem; right: 1rem; z-index: 10;">
|
|
<button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="background:transparent;border:none;padding:0;">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalEditKelas"
|
|
data-kelas-id="{{ $kelas->id }}"
|
|
data-kelas-name="{{ $kelas->name }}"
|
|
data-kelas-major="{{ $kelas->major }}"
|
|
data-kelas-grade="{{ $kelas->grade }}"
|
|
data-kelas-code="{{ $kelas->code }}">
|
|
<i class="fas fa-edit me-2"></i>Edit Kelas
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#modalHapusKelas" data-kelas-id="{{ $kelas->id }}" data-kelas-name="{{ $kelas->name }}">
|
|
<i class="fas fa-trash me-2"></i>Hapus Kelas
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="decorative-elements">
|
|
<div class="circle-1"></div>
|
|
<div class="circle-2"></div>
|
|
<div class="square"></div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div>
|
|
<div class="class-number">{{ $kelas->name }}</div> <!-- Ganti dari $kelas->grade ke $kelas->name -->
|
|
<!-- Hapus/komentari baris class-name jika tidak ingin duplikat -->
|
|
<!-- <div class="class-name">{{ $kelas->name }}</div> -->
|
|
</div>
|
|
<div class="major-name">{{ $kelas->major }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- Kelas 11 -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h2 class="grade-title">
|
|
<i class="fas fa-graduation-cap me-3"></i>
|
|
KELAS 11
|
|
</h2>
|
|
</div>
|
|
@foreach($kelas11 as $kelas)
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="class-card grade-11 floating position-relative">
|
|
<!-- Overlay link -->
|
|
<a href="{{ route('absensi.absensi_harian', ['classId' => $kelas->id]) }}" class="stretched-link" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;"></a>
|
|
<!-- Dropdown titik tiga di kanan atas tanpa background bulat -->
|
|
<div class="dropdown position-absolute" style="top: 1rem; right: 1rem; z-index: 10;">
|
|
<button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="background:transparent;border:none;padding:0;">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalEditKelas"
|
|
data-kelas-id="{{ $kelas->id }}"
|
|
data-kelas-name="{{ $kelas->name }}"
|
|
data-kelas-major="{{ $kelas->major }}"
|
|
data-kelas-grade="{{ $kelas->grade }}"
|
|
data-kelas-code="{{ $kelas->code }}">
|
|
<i class="fas fa-edit me-2"></i>Edit Kelas
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#modalHapusKelas" data-kelas-id="{{ $kelas->id }}" data-kelas-name="{{ $kelas->name }}">
|
|
<i class="fas fa-trash me-2"></i>Hapus Kelas
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="decorative-elements">
|
|
<div class="circle-1"></div>
|
|
<div class="circle-2"></div>
|
|
<div class="square"></div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div>
|
|
<div class="class-number">{{ $kelas->name }}</div> <!-- Ganti dari $kelas->grade ke $kelas->name -->
|
|
<!-- Hapus/komentari baris class-name jika tidak ingin duplikat -->
|
|
<!-- <div class="class-name">{{ $kelas->name }}</div> -->
|
|
</div>
|
|
<div class="major-name">{{ $kelas->major }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- Kelas 12 -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h2 class="grade-title">
|
|
<i class="fas fa-graduation-cap me-3"></i>
|
|
KELAS 12
|
|
</h2>
|
|
</div>
|
|
@foreach($kelas12 as $kelas)
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="class-card grade-12 floating position-relative">
|
|
<!-- Overlay link -->
|
|
<a href="{{ route('absensi.absensi_harian', ['classId' => $kelas->id]) }}" class="stretched-link" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;"></a>
|
|
<!-- Dropdown titik tiga di kanan atas tanpa background bulat -->
|
|
<div class="dropdown position-absolute" style="top: 1rem; right: 1rem; z-index: 10;">
|
|
<button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="background:transparent;border:none;padding:0;">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalEditKelas"
|
|
data-kelas-id="{{ $kelas->id }}"
|
|
data-kelas-name="{{ $kelas->name }}"
|
|
data-kelas-major="{{ $kelas->major }}"
|
|
data-kelas-grade="{{ $kelas->grade }}"
|
|
data-kelas-code="{{ $kelas->code }}">
|
|
<i class="fas fa-edit me-2"></i>Edit Kelas
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#modalHapusKelas" data-kelas-id="{{ $kelas->id }}" data-kelas-name="{{ $kelas->name }}">
|
|
<i class="fas fa-trash me-2"></i>Hapus Kelas
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="decorative-elements">
|
|
<div class="circle-1"></div>
|
|
<div class="circle-2"></div>
|
|
<div class="square"></div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div>
|
|
<div class="class-number">{{ $kelas->name }}</div>
|
|
{{ $kelas->name }}
|
|
</div>
|
|
<div class="major-name">{{ $kelas->major }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Edit Kelas -->
|
|
<div class="modal fade" id="modalEditKelas" tabindex="-1" aria-labelledby="modalEditKelasLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content shadow-lg border-0 rounded-4">
|
|
<div class="modal-header bg-warning text-white border-0 rounded-top-4">
|
|
<h5 class="modal-title fw-bold" id="modalEditKelasLabel">
|
|
<i class="fas fa-edit me-2"></i>Edit Kelas
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form id="formEditKelas" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="modal-body bg-light">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Nama Kelas</label>
|
|
<input type="text" id="editNamaKelas" name="name" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Jurusan</label>
|
|
<input type="text" id="editJurusanKelas" name="major" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Tingkat</label>
|
|
<input type="number" id="editTingkatKelas" name="grade" class="form-control" min="10" max="12" required>
|
|
<small class="text-muted">Hanya boleh: 10, 11, atau 12</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Kode Kelas</label>
|
|
<input type="text" id="editKodeKelas" name="code" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-white border-0 p-3">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-1"></i>Batal
|
|
</button>
|
|
<button type="submit" class="btn btn-warning">
|
|
<i class="fas fa-save me-1"></i>Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Hapus Kelas -->
|
|
<div class="modal fade" id="modalHapusKelas" tabindex="-1" aria-labelledby="modalHapusKelasLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content shadow-lg border-0 rounded-4">
|
|
<div class="modal-header bg-danger text-white border-0 rounded-top-4">
|
|
<h5 class="modal-title fw-bold" id="modalHapusKelasLabel">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>Hapus Kelas
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body bg-light">
|
|
<p class="mb-2">Apakah Anda yakin ingin menghapus kelas berikut?</p>
|
|
<div class="alert alert-warning" role="alert">
|
|
<strong id="kelasNameDisplay"></strong>
|
|
</div>
|
|
<p class="text-muted small">Tindakan ini tidak dapat dibatalkan. Semua data terkait dengan kelas ini juga akan dihapus.</p>
|
|
</div>
|
|
<div class="modal-footer bg-white border-0 p-3">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-1"></i>Batal
|
|
</button>
|
|
<form id="formHapusKelas" method="POST" style="display: inline;">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn btn-danger">
|
|
<i class="fas fa-trash me-1"></i>Hapus Sekarang
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Validasi Tingkat pada form Tambah
|
|
const addGradeInput = document.getElementById('addGrade');
|
|
if (addGradeInput) {
|
|
addGradeInput.addEventListener('change', function() {
|
|
validateGrade(this);
|
|
});
|
|
addGradeInput.addEventListener('invalid', function(e) {
|
|
e.preventDefault();
|
|
const grade = this.value;
|
|
if (grade && ![10, 11, 12].includes(parseInt(grade))) {
|
|
this.setCustomValidity('Tingkat kelas hanya boleh 10, 11, atau 12');
|
|
} else if (!grade) {
|
|
this.setCustomValidity('Tingkat kelas harus diisi');
|
|
}
|
|
});
|
|
addGradeInput.addEventListener('input', function() {
|
|
this.setCustomValidity('');
|
|
});
|
|
}
|
|
|
|
// Validasi Tingkat pada form Edit
|
|
const editGradeInput = document.getElementById('editTingkatKelas');
|
|
if (editGradeInput) {
|
|
editGradeInput.addEventListener('change', function() {
|
|
validateGrade(this);
|
|
});
|
|
editGradeInput.addEventListener('invalid', function(e) {
|
|
e.preventDefault();
|
|
const grade = this.value;
|
|
if (grade && ![10, 11, 12].includes(parseInt(grade))) {
|
|
this.setCustomValidity('Tingkat kelas hanya boleh 10, 11, atau 12');
|
|
} else if (!grade) {
|
|
this.setCustomValidity('Tingkat kelas harus diisi');
|
|
}
|
|
});
|
|
editGradeInput.addEventListener('input', function() {
|
|
this.setCustomValidity('');
|
|
});
|
|
}
|
|
|
|
function validateGrade(input) {
|
|
const grade = parseInt(input.value);
|
|
if (input.value && ![10, 11, 12].includes(grade)) {
|
|
input.classList.add('is-invalid');
|
|
input.classList.remove('is-valid');
|
|
} else if (input.value) {
|
|
input.classList.remove('is-invalid');
|
|
input.classList.add('is-valid');
|
|
} else {
|
|
input.classList.remove('is-invalid', 'is-valid');
|
|
}
|
|
}
|
|
|
|
// Modal Edit
|
|
const modalEdit = document.getElementById('modalEditKelas');
|
|
modalEdit.addEventListener('show.bs.modal', function(event) {
|
|
const button = event.relatedTarget;
|
|
const kelasId = button.getAttribute('data-kelas-id');
|
|
const kelasName = button.getAttribute('data-kelas-name');
|
|
const kelasMajor = button.getAttribute('data-kelas-major');
|
|
const kelasGrade = button.getAttribute('data-kelas-grade');
|
|
const kelasCode = button.getAttribute('data-kelas-code');
|
|
|
|
document.getElementById('editNamaKelas').value = kelasName;
|
|
document.getElementById('editJurusanKelas').value = kelasMajor;
|
|
document.getElementById('editTingkatKelas').value = kelasGrade;
|
|
document.getElementById('editKodeKelas').value = kelasCode;
|
|
document.getElementById('formEditKelas').action = '{{ route("kelas.update", ":id") }}'.replace(':id', kelasId);
|
|
});
|
|
|
|
// Modal Hapus
|
|
const modalHapus = document.getElementById('modalHapusKelas');
|
|
modalHapus.addEventListener('show.bs.modal', function(event) {
|
|
const button = event.relatedTarget;
|
|
const kelasId = button.getAttribute('data-kelas-id');
|
|
const kelasName = button.getAttribute('data-kelas-name');
|
|
|
|
document.getElementById('kelasNameDisplay').textContent = kelasName;
|
|
document.getElementById('formHapusKelas').action = '{{ route("kelas.destroy", ":id") }}'.replace(':id', kelasId);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@endsection
|
|
|
|
|