MIF_E31230892/sim-pkpps/resources/views/admin/kelas/kenaikan/preview.blade.php

279 lines
12 KiB
PHP

@extends('layouts.app')
@section('title', 'Preview Kenaikan Kelas')
@section('content')
<div class="page-header">
<h2><i class="fas fa-users"></i> Preview Kenaikan Kelas - {{ $kelas->nama_kelas }}</h2>
<p class="text-muted">Pilih santri yang akan dinaikkan kelasnya</p>
</div>
<!-- Flash Messages -->
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
<i class="fas fa-check-circle"></i> {{ session('success') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@endif
<!-- Info Cards -->
<div class="content-box" style="margin-bottom: 14px;">
<div class="row-cards">
<div class="card card-info">
<h3>Kelas Asal</h3>
<div class="card-value-small">{{ $kelas->nama_kelas }}</div>
<p class="text-muted" style="margin: 0;">{{ $kelas->kelompok->nama_kelompok }}</p>
</div>
<div class="card card-success">
<h3>Total Santri</h3>
<div class="card-value">{{ $santriList->count() }}</div>
<p class="text-muted" style="margin: 0;">Santri aktif di kelas ini</p>
</div>
<div class="card card-warning">
<h3>Tahun Ajaran</h3>
<div class="card-value-small">{{ $tahunAjaranAktif }}</div>
<div style="margin-top: 8px; font-size: 0.9rem; color: var(--text-light);">
<i class="fas fa-arrow-down"></i>
</div>
<div class="card-value-small" style="color: var(--success-color);">{{ $tahunAjaranBaru }}</div>
</div>
</div>
</div>
<!-- Form Kenaikan Kelas -->
<div class="content-box">
<form action="{{ route('admin.kelas.kenaikan.process-selected') }}" method="POST" id="formKenaikanKelas">
@csrf
<input type="hidden" name="id_kelas_asal" value="{{ $kelas->id }}">
<!-- Pilih Kelas Tujuan -->
<div class="form-group">
<label for="id_kelas_tujuan">
<i class="fas fa-graduation-cap"></i> Kelas Tujuan <span class="text-danger">*</span>
</label>
<select class="form-control @error('id_kelas_tujuan') is-invalid @enderror"
id="id_kelas_tujuan"
name="id_kelas_tujuan"
required>
<option value="">-- Pilih Kelas Tujuan --</option>
@foreach ($kelasOptions as $kelompok)
<optgroup label="{{ $kelompok->nama_kelompok }}">
@foreach ($kelompok->kelas as $kelasOption)
@if ($kelasOption->id != $kelas->id)
<option value="{{ $kelasOption->id }}">
{{ $kelasOption->nama_kelas }}
</option>
@endif
@endforeach
</optgroup>
@endforeach
</select>
@error('id_kelas_tujuan')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<small class="form-text text-muted">
Pilih kelas yang akan menjadi tujuan kenaikan untuk santri yang dipilih
</small>
</div>
<hr>
<!-- Daftar Santri -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
<h4 style="margin: 0;">
<i class="fas fa-users"></i> Daftar Santri
<span class="badge badge-info" id="selectedCount">0 dipilih</span>
</h4>
<div>
<button type="button" class="btn btn-sm btn-info" id="btnSelectAll">
<i class="fas fa-check-square"></i> Pilih Semua
</button>
<button type="button" class="btn btn-sm btn-secondary" id="btnDeselectAll">
<i class="fas fa-square"></i> Batal Pilih
</button>
</div>
</div>
@if ($santriList->count() > 0)
<div class="table-wrapper">
<table class="data-table">
<thead>
<tr>
<th style="width: 50px;">
<input type="checkbox" id="checkAll" style="width: 18px; height: 18px; cursor: pointer;">
</th>
<th style="width: 50px;">No</th>
<th>Foto</th>
<th>NIS</th>
<th>Nama Santri</th>
<th>Jenis Kelamin</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@foreach ($santriList as $index => $santri)
<tr>
<td>
<input type="checkbox"
name="santri_ids[]"
value="{{ $santri->id_santri }}"
class="santri-checkbox"
style="width: 18px; height: 18px; cursor: pointer;">
</td>
<td>{{ $index + 1 }}</td>
<td>
@if ($santri->foto)
<img src="{{ $santri->foto_url }}"
alt="{{ $santri->nama_lengkap }}"
class="santri-avatar">
@else
<div class="santri-avatar-initial">
{{ strtoupper(substr($santri->nama_lengkap, 0, 1)) }}
</div>
@endif
</td>
<td>{{ $santri->nis ?? '-' }}</td>
<td><strong>{{ $santri->nama_lengkap }}</strong></td>
<td>
@if ($santri->jenis_kelamin === 'Laki-laki')
<i class="fas fa-mars text-primary"></i> Laki-laki
@else
<i class="fas fa-venus" style="color: #FF8B94;"></i> Perempuan
@endif
</td>
<td>
<span class="badge badge-success">
<i class="fas fa-check-circle"></i> {{ $santri->status }}
</span>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<hr>
<!-- Action Buttons -->
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle"></i> <strong>Perhatian:</strong>
<ul class="mb-0 mt-2">
<li>Pastikan kelas tujuan sudah dipilih</li>
<li>Pilih santri yang akan dinaikkan kelasnya (minimal 1 santri)</li>
<li>Proses kenaikan kelas akan memindahkan santri ke tahun ajaran <strong>{{ $tahunAjaranBaru }}</strong></li>
<li>Santri yang dipilih akan otomatis terdaftar di kelas tujuan</li>
</ul>
</div>
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<button type="submit" class="btn btn-success" id="btnSubmit" disabled>
<i class="fas fa-arrow-up"></i> Naikkan Kelas yang Dipilih
</button>
<a href="{{ route('admin.kelas.kenaikan.index') }}" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> Kembali
</a>
</div>
@else
<div class="text-center py-5">
<i class="fas fa-users fa-3x text-muted mb-3"></i>
<h5 class="text-muted">Tidak ada santri aktif di kelas ini</h5>
<p class="text-muted">Kelas {{ $kelas->nama_kelas }} tidak memiliki santri aktif.</p>
<a href="{{ route('admin.kelas.kenaikan.index') }}" class="btn btn-secondary mt-2">
<i class="fas fa-arrow-left"></i> Kembali
</a>
</div>
@endif
</form>
</div>
@endsection
@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const checkAll = document.getElementById('checkAll');
const checkboxes = document.querySelectorAll('.santri-checkbox');
const selectedCount = document.getElementById('selectedCount');
const btnSubmit = document.getElementById('btnSubmit');
const btnSelectAll = document.getElementById('btnSelectAll');
const btnDeselectAll = document.getElementById('btnDeselectAll');
const kelasSelect = document.getElementById('id_kelas_tujuan');
function updateSelectedCount() {
const checked = document.querySelectorAll('.santri-checkbox:checked').length;
selectedCount.textContent = `${checked} dipilih`;
// Enable submit button if kelas tujuan selected and at least 1 santri checked
if (kelasSelect.value && checked > 0) {
btnSubmit.disabled = false;
} else {
btnSubmit.disabled = true;
}
}
// Check all functionality
if (checkAll) {
checkAll.addEventListener('change', function() {
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
updateSelectedCount();
});
}
// Individual checkbox
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
// Update check all status
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
if (checkAll) {
checkAll.checked = allChecked;
}
updateSelectedCount();
});
});
// Select all button
if (btnSelectAll) {
btnSelectAll.addEventListener('click', function() {
checkboxes.forEach(checkbox => checkbox.checked = true);
if (checkAll) checkAll.checked = true;
updateSelectedCount();
});
}
// Deselect all button
if (btnDeselectAll) {
btnDeselectAll.addEventListener('click', function() {
checkboxes.forEach(checkbox => checkbox.checked = false);
if (checkAll) checkAll.checked = false;
updateSelectedCount();
});
}
// Kelas tujuan change
if (kelasSelect) {
kelasSelect.addEventListener('change', updateSelectedCount);
}
// Form submit confirmation
const form = document.getElementById('formKenaikanKelas');
if (form) {
form.addEventListener('submit', function(e) {
const checked = document.querySelectorAll('.santri-checkbox:checked').length;
const kelasText = kelasSelect.options[kelasSelect.selectedIndex].text;
if (!confirm(`Apakah Anda yakin ingin menaikkan ${checked} santri ke kelas "${kelasText}"?\n\nProses ini tidak dapat dibatalkan.`)) {
e.preventDefault();
}
});
}
// Initial count
updateSelectedCount();
});
</script>
@endsection