724 lines
43 KiB
PHP
724 lines
43 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<style>
|
|
/* === TABS === */
|
|
.dash-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:3px solid var(--primary-color); margin-bottom:0; padding:0; background:#f8faf9; border-radius:12px 12px 0 0; }
|
|
.dash-tab { padding:11px 16px; cursor:pointer; font-size:0.83rem; font-weight:600; color:#666; background:transparent; border:none; border-radius:10px 10px 0 0; transition:all .3s; }
|
|
.dash-tab:hover { color:var(--primary-dark); background:var(--primary-light); }
|
|
.dash-tab.active { color:#fff; background:var(--primary-color); }
|
|
.dash-tab i { margin-right:4px; }
|
|
.tab-content { display:none; animation:fadeTab .35s ease; }
|
|
.tab-content.active { display:block; }
|
|
@keyframes fadeTab { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
|
|
|
|
/* === SECTION CARD === */
|
|
.sc { background:#fff; border-radius:12px; padding:20px; margin-bottom:14px; box-shadow:0 2px 10px rgba(0,0,0,.06); border:1px solid #e8f0ec; }
|
|
.sc h4 { margin:0 0 16px; color:var(--primary-dark); font-size:1rem; display:flex; align-items:center; gap:7px; }
|
|
.sc h4 .bc { background:var(--primary-light); color:var(--primary-dark); font-size:.72rem; padding:2px 9px; border-radius:20px; }
|
|
|
|
/* === KPI === */
|
|
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:14px; }
|
|
.kpi-card { background:#fff; border-radius:12px; padding:14px; position:relative; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,.07); border-left:4px solid; transition:.2s; }
|
|
.kpi-card:hover { transform:translateY(-2px); box-shadow:0 5px 18px rgba(0,0,0,.11); }
|
|
.kpi-card .ki { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:2.2rem; opacity:.1; }
|
|
.kpi-card .kl { font-size:.75rem; color:#888; text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
|
|
.kpi-card .kv { font-size:1.7rem; font-weight:800; line-height:1.1; }
|
|
.kpi-card .ks { font-size:.72rem; color:#aaa; margin-top:3px; }
|
|
.kpi-teal { border-color:#6FBA9D; } .kpi-teal .kv { color:#6FBA9D; }
|
|
.kpi-blue { border-color:#81C6E8; } .kpi-blue .kv { color:#81C6E8; }
|
|
.kpi-purple{ border-color:#B39DDB; } .kpi-purple .kv { color:#B39DDB; }
|
|
.kpi-amber { border-color:#FFD56B; } .kpi-amber .kv { color:#d4a017; }
|
|
.kpi-rose { border-color:#FF8B94; } .kpi-rose .kv { color:#FF8B94; }
|
|
|
|
/* === CHART GRID === */
|
|
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; }
|
|
.chart-box { background:#fff; border-radius:12px; padding:14px; box-shadow:0 2px 10px rgba(0,0,0,.06); border:1px solid #e8f0ec; }
|
|
.chart-box h5 { margin:0 0 12px; color:var(--primary-dark); font-size:.9rem; }
|
|
@media(max-width:768px){ .chart-grid{grid-template-columns:1fr;} }
|
|
|
|
/* === SANTRI CARDS (ringkasan) === */
|
|
.santri-filter-bar { display:flex; gap:6px; margin-bottom:14px; align-items:center; flex-wrap:wrap; }
|
|
.sfb-btn { padding:6px 16px; border-radius:8px; border:2px solid var(--primary-light); background:#fff; color:var(--primary-dark); font-weight:600; cursor:pointer; font-size:.82rem; transition:.2s; text-decoration:none; display:inline-block; }
|
|
.sfb-btn.active, .sfb-btn:hover { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
|
|
.santri-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
|
|
.santri-card { background:#fff; border-radius:10px; padding:14px; border:1px solid #e8f0ec; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:.2s; }
|
|
.santri-card:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.1); }
|
|
.santri-card .sc-name { font-weight:700; font-size:.88rem; color:#333; margin-bottom:2px; }
|
|
.santri-card .sc-meta { font-size:.72rem; color:#999; margin-bottom:8px; }
|
|
.santri-card .sc-pct { font-size:1.3rem; font-weight:800; }
|
|
.prog-bar { height:8px; background:#e8e8e8; border-radius:4px; overflow:hidden; margin-top:5px; }
|
|
.prog-fill { height:100%; border-radius:4px; transition:width .5s; }
|
|
.lihat-semua { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:8px; background:var(--primary-light); color:var(--primary-dark); font-weight:600; font-size:.82rem; text-decoration:none; margin-top:12px; transition:.2s; }
|
|
.lihat-semua:hover { background:var(--primary-color); color:#fff; }
|
|
|
|
/* === RANKING === */
|
|
.ranking-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
|
|
.rt-btn { padding:7px 18px; border-radius:8px; border:2px solid var(--primary-light); background:#fff; color:var(--primary-dark); font-weight:600; cursor:pointer; font-size:.82rem; transition:.2s; }
|
|
.rt-btn.active, .rt-btn:hover { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
|
|
.ranking-content { display:none; } .ranking-content.active { display:block; }
|
|
.rank-badge { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; }
|
|
.rank-1 { background:linear-gradient(135deg,#FFD700,#FFA000); color:#fff; }
|
|
.rank-2 { background:linear-gradient(135deg,#C0C0C0,#9E9E9E); color:#fff; }
|
|
.rank-3 { background:linear-gradient(135deg,#CD7F32,#A0522D); color:#fff; }
|
|
.rank-other { background:#f0f0f0; color:#666; }
|
|
|
|
/* === GANTT === */
|
|
.gantt-row { display:flex; align-items:center; margin-bottom:5px; min-height:30px; }
|
|
.gantt-label { width:150px; min-width:150px; font-size:.76rem; font-weight:600; color:#444; padding-right:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.gantt-bar-wrap { flex:1; background:#f0f0f0; border-radius:5px; height:22px; position:relative; }
|
|
.gantt-bar { height:100%; border-radius:5px; display:flex; align-items:center; justify-content:flex-end; padding-right:7px; font-size:.65rem; font-weight:700; color:#fff; min-width:28px; }
|
|
.gantt-info { width:110px; min-width:110px; text-align:right; font-size:.7rem; color:#777; padding-left:7px; }
|
|
|
|
/* === TIMELINE === */
|
|
.tl-wrap { position:relative; padding-left:26px; }
|
|
.tl-wrap::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:3px; background:linear-gradient(to bottom,var(--primary-color),var(--primary-light)); border-radius:3px; }
|
|
.tl-item { position:relative; margin-bottom:12px; padding:9px 12px; background:#f8faf9; border-radius:7px; border-left:3px solid var(--primary-color); }
|
|
.tl-item::before { content:''; position:absolute; left:-20px; top:12px; width:10px; height:10px; border-radius:50%; background:var(--primary-color); border:2px solid #fff; box-shadow:0 0 0 2px var(--primary-color); }
|
|
.tl-item .tl-sem { font-weight:700; font-size:.8rem; color:var(--primary-dark); }
|
|
.tl-item .tl-prog { font-size:.75rem; color:#666; margin-top:2px; }
|
|
|
|
/* === MISC === */
|
|
.growth-pos { color:#2e7d32; font-weight:700; }
|
|
.growth-neg { color:#c62828; font-weight:700; }
|
|
.growth-zero { color:#999; }
|
|
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 18px; background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.06); margin-bottom:14px; border:1px solid #e8f0ec; }
|
|
.filter-bar select { padding:7px 11px; border:2px solid #e0e0e0; border-radius:8px; font-size:.84rem; }
|
|
.filter-bar select:focus { border-color:var(--primary-color); outline:none; }
|
|
.mini-table { width:100%; border-collapse:collapse; font-size:.81rem; }
|
|
.mini-table th { background:#f5f8f6; color:#555; font-weight:700; padding:9px 7px; text-align:left; border-bottom:2px solid #e0e0e0; font-size:.76rem; text-transform:uppercase; }
|
|
.mini-table td { padding:8px 7px; border-bottom:1px solid #f0f0f0; }
|
|
.mini-table tbody tr:hover { background:#f8fdf9; }
|
|
.khatam-section { background:linear-gradient(135deg,#e8f5e9,#f1f8e9); border:2px dashed #66bb6a; border-radius:10px; padding:14px; margin-top:14px; }
|
|
.khatam-section h5 { color:#2e7d32; margin:0 0 8px; font-size:.88rem; }
|
|
.empty-msg { text-align:center; padding:20px; color:#aaa; font-size:.88rem; }
|
|
.empty-msg i { font-size:1.8rem; display:block; margin-bottom:8px; opacity:.4; }
|
|
.btn-khatam { background:linear-gradient(135deg,#66bb6a,#43a047); color:#fff; border:none; padding:4px 11px; border-radius:6px; font-size:.73rem; cursor:pointer; font-weight:600; transition:.2s; }
|
|
.btn-khatam:hover { transform:scale(1.04); }
|
|
.btn-batal-khatam { background:#ef5350; color:#fff; border:none; padding:4px 11px; border-radius:6px; font-size:.73rem; cursor:pointer; font-weight:600; }
|
|
.bn-alert { background:linear-gradient(135deg,#fff3e0,#fbe9e7); border-left:4px solid #ff7043; border-radius:7px; padding:12px 16px; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
|
|
.bn-icon { font-size:1.4rem; color:#ff7043; }
|
|
.bn-text { font-size:.83rem; color:#555; }
|
|
.completion-cell { text-align:center; font-weight:600; font-size:.76rem; padding:5px 3px !important; }
|
|
.completion-cell.high { background:#e8f5e9; color:#2e7d32; }
|
|
.completion-cell.mid { background:#fff8e1; color:#f57f17; }
|
|
.completion-cell.low { background:#fbe9e7; color:#bf360c; }
|
|
.completion-cell.none { background:#f5f5f5; color:#bbb; }
|
|
.rapor-btn { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--primary-color),var(--primary-dark)); color:#fff; padding:8px 16px; border-radius:8px; text-decoration:none; font-size:.81rem; font-weight:600; transition:.2s; border:none; cursor:pointer; }
|
|
.rapor-btn:hover { transform:translateY(-2px); color:#fff; }
|
|
.summary-card { background:linear-gradient(135deg,#f5f8f6,#fff); border-radius:9px; padding:14px; text-align:center; border:1px solid #e0e0e0; }
|
|
.summary-card .sc-val { font-size:1.4rem; font-weight:800; }
|
|
.summary-card .sc-label { font-size:.73rem; color:#888; margin-top:3px; }
|
|
.summary-card .sc-change { font-size:.78rem; margin-top:5px; }
|
|
@media print { .dash-tabs, .filter-bar, .no-print { display:none !important; } .tab-content { display:block !important; } }
|
|
</style>
|
|
|
|
<div class="page-header">
|
|
<h2><i class="fas fa-chart-pie"></i> Dashboard Capaian Al-Qur'an & Hadist</h2>
|
|
</div>
|
|
|
|
{{-- ===== FILTER BAR ===== --}}
|
|
<form method="GET" action="{{ route('admin.capaian.dashboard') }}" class="filter-bar no-print">
|
|
<span style="color:#888;font-size:.84rem;"><i class="fas fa-filter"></i> Filter:</span>
|
|
<select name="id_semester" class="form-control" style="min-width:200px;">
|
|
<option value="">Semua Semester</option>
|
|
@foreach($semesters as $sem)
|
|
<option value="{{ $sem->id_semester }}" {{ $selectedSemester == $sem->id_semester ? 'selected' : '' }}>
|
|
{{ $sem->nama_semester }} @if($sem->is_active) ★ @endif
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<select name="kelas" class="form-control" style="min-width:170px;">
|
|
<option value="">Semua Kelas</option>
|
|
@php $kelompokGrouped = $kelasModels->groupBy(fn($k) => $k->kelompok->nama_kelompok ?? 'Lainnya'); @endphp
|
|
@foreach($kelompokGrouped as $namaKelompok => $kelasGroup)
|
|
<optgroup label="{{ $namaKelompok }}">
|
|
@foreach($kelasGroup as $km)
|
|
<option value="{{ $km->nama_kelas }}" {{ $kelas == $km->nama_kelas ? 'selected' : '' }}>{{ $km->nama_kelas }}</option>
|
|
@endforeach
|
|
</optgroup>
|
|
@endforeach
|
|
</select>
|
|
<button type="submit" class="btn btn-primary" style="padding:7px 16px;"><i class="fas fa-search"></i> Terapkan</button>
|
|
@if($kelas || $selectedSemester != ($semesterAktif->id_semester ?? ''))
|
|
<a href="{{ route('admin.capaian.dashboard') }}" class="btn btn-secondary" style="padding:7px 16px;"><i class="fas fa-redo"></i> Reset</a>
|
|
@endif
|
|
</form>
|
|
|
|
{{-- ===== TAB NAVIGATION ===== --}}
|
|
<div class="dash-tabs no-print" id="dashTabs">
|
|
<button class="dash-tab active" data-tab="tab-overview"><i class="fas fa-tachometer-alt"></i> Ringkasan</button>
|
|
<button class="dash-tab" data-tab="tab-ranking"><i class="fas fa-trophy"></i> Ranking Kelas</button>
|
|
<button class="dash-tab" data-tab="tab-materi"><i class="fas fa-book"></i> Analisis Materi</button>
|
|
<button class="dash-tab" data-tab="tab-prediksi"><i class="fas fa-tasks"></i> Kalkulasi Progress</button>
|
|
<button class="dash-tab" data-tab="tab-laporan"><i class="fas fa-file-alt"></i> Laporan</button>
|
|
</div>
|
|
|
|
{{-- ==================== TAB 1: RINGKASAN ==================== --}}
|
|
<div class="tab-content active" id="tab-overview">
|
|
{{-- KPI --}}
|
|
<div class="kpi-grid" style="margin-top:14px;">
|
|
<div class="kpi-card kpi-blue">
|
|
<div class="kl">Santri Aktif</div>
|
|
<div class="kv">{{ $totalSantriAktif }}</div>
|
|
<div class="ks">Sedang belajar</div>
|
|
<i class="fas fa-users ki"></i>
|
|
</div>
|
|
<div class="kpi-card kpi-purple">
|
|
<div class="kl">Rata-rata Progress</div>
|
|
<div class="kv">{{ number_format($rataRataProgress, 1) }}%</div>
|
|
<div class="ks">Keseluruhan</div>
|
|
<i class="fas fa-chart-line ki"></i>
|
|
</div>
|
|
<div class="kpi-card kpi-rose">
|
|
<div class="kl">Santri Khatam</div>
|
|
<div class="kv">{{ $santrisKhatam->count() }}</div>
|
|
<div class="ks">Semua materi selesai</div>
|
|
<i class="fas fa-graduation-cap ki"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Statistik per Kategori --}}
|
|
<div class="kpi-grid">
|
|
@foreach($statistikKategori as $kat => $stats)
|
|
<div class="kpi-card {{ $kat == "Al-Qur'an" ? 'kpi-teal' : ($kat == 'Hadist' ? 'kpi-blue' : 'kpi-amber') }}">
|
|
<div class="kl">{{ $kat }}</div>
|
|
<div class="kv" style="font-size:1.4rem;">{{ number_format($stats['avg'], 1) }}%</div>
|
|
<div class="ks">{{ $stats['count'] }} capaian • {{ $stats['selesai'] }} selesai</div>
|
|
<i class="fas fa-{{ $kat == "Al-Qur'an" ? 'book-quran' : ($kat == 'Hadist' ? 'scroll' : 'book') }} ki"></i>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Charts: Semester Comparison + Distribusi --}}
|
|
<div class="chart-grid">
|
|
<div class="chart-box">
|
|
<h5><i class="fas fa-chart-line"></i> Progress Rata-rata Per Semester</h5>
|
|
<p style="font-size:.76rem;color:#999;margin:0 0 10px;">Trend progress rata-rata setiap kelas antar semester.</p>
|
|
<canvas id="chartSemesterComparison" style="max-height:260px;"></canvas>
|
|
</div>
|
|
<div class="chart-box">
|
|
<h5><i class="fas fa-chart-bar"></i> Distribusi Progress</h5>
|
|
<canvas id="chartDistribusi" style="max-height:260px;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ==================== TAB 2: RANKING KELAS ==================== --}}
|
|
<div class="tab-content" id="tab-ranking">
|
|
<div class="sc" style="margin-top:14px;">
|
|
<h4><i class="fas fa-trophy"></i> Rekap Per Kelas</h4>
|
|
<div class="ranking-tabs">
|
|
@foreach($kelasList as $idx => $k)
|
|
<button class="rt-btn {{ $idx === 0 ? 'active' : '' }}" data-kelas="{{ $k }}">
|
|
{{ $k }} <span style="opacity:.7;font-size:.72rem;">({{ $rekapKelas[$k]['total_aktif'] }})</span>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
@foreach($kelasList as $idx => $k)
|
|
<div class="ranking-content {{ $idx === 0 ? 'active' : '' }}" id="ranking-{{ $k }}">
|
|
@if(isset($rekapKelas[$k]['summary']))
|
|
@php $s = $rekapKelas[$k]['summary']; @endphp
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px;">
|
|
<div style="background:#e8f5e9;border-radius:9px;padding:12px;text-align:center;border:1px solid #c8e6c9;">
|
|
<div style="font-size:1.3rem;font-weight:800;color:#2e7d32;">{{ $s['total_santri'] }}</div>
|
|
<div style="font-size:.7rem;color:#555;">Total Santri</div>
|
|
</div>
|
|
<div style="background:#e1f5fe;border-radius:9px;padding:12px;text-align:center;border:1px solid #b3e5fc;">
|
|
<div style="font-size:1.3rem;font-weight:800;color:#0277bd;">{{ $s['avg_progress'] }}%</div>
|
|
<div style="font-size:.7rem;color:#555;">Rata-rata Progress</div>
|
|
</div>
|
|
<div style="background:#fff8e1;border-radius:9px;padding:12px;text-align:center;border:1px solid #ffe082;">
|
|
<div style="font-size:1.3rem;font-weight:800;color:#f57f17;">{{ $s['total_selesai'] }}</div>
|
|
<div style="font-size:.7rem;color:#555;">Total Materi Selesai</div>
|
|
</div>
|
|
<div style="background:#fbe9e7;border-radius:9px;padding:12px;text-align:center;border:1px solid #ffccbc;">
|
|
<div style="font-size:1.3rem;font-weight:800;color:#d32f2f;">{{ $s['santri_tuntas'] }}</div>
|
|
<div style="font-size:.7rem;color:#555;">Santri Tuntas 100%</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if(count($rekapKelas[$k]['ranking']) > 0)
|
|
<div style="overflow-x:auto;">
|
|
<table class="mini-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:42px;">#</th>
|
|
<th>Nama Santri</th>
|
|
<th style="width:85px;">Progress</th>
|
|
<th style="width:110px;">Materi</th>
|
|
<th style="width:150px;">Bar</th>
|
|
<th style="width:65px;">Al-Qur'an</th>
|
|
<th style="width:60px;">Hadist</th>
|
|
<th style="width:65px;">Tambahan</th>
|
|
<th style="width:100px;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($rekapKelas[$k]['ranking'] as $rIdx => $r)
|
|
<tr>
|
|
<td><span class="rank-badge {{ $rIdx < 3 ? 'rank-'.($rIdx+1) : 'rank-other' }}">{{ $rIdx+1 }}</span></td>
|
|
<td>
|
|
<strong>{{ $r['santri']->nama_lengkap }}</strong>
|
|
<br><span style="font-size:.7rem;color:#999;">{{ $r['santri']->nis }}</span>
|
|
</td>
|
|
<td>
|
|
<span style="font-weight:800;color:{{ $r['avg_progress'] >= 80 ? '#2e7d32' : ($r['avg_progress'] >= 50 ? '#f57f17' : '#c62828') }};">
|
|
{{ number_format($r['avg_progress'],1) }}%
|
|
</span>
|
|
</td>
|
|
<td><span style="font-size:.78rem;">{{ $r['selesai'] }}/{{ $r['total_materi_kelas'] }}</span></td>
|
|
<td>
|
|
<div class="prog-bar" style="height:10px;">
|
|
<div class="prog-fill" style="width:{{ $r['avg_progress'] }}%;background:linear-gradient(90deg,{{ $r['avg_progress'] >= 80 ? '#66bb6a,#2e7d32' : ($r['avg_progress'] >= 50 ? '#ffa726,#f57f17' : '#ef5350,#c62828') }});"></div>
|
|
</div>
|
|
</td>
|
|
<td style="text-align:center;font-size:.76rem;font-weight:700;color:{{ $r['alquran'] >= 80 ? '#2e7d32' : ($r['alquran'] >= 50 ? '#f57f17' : '#c62828') }};">{{ number_format($r['alquran'],0) }}%</td>
|
|
<td style="text-align:center;font-size:.76rem;font-weight:700;color:{{ $r['hadist'] >= 80 ? '#2e7d32' : ($r['hadist'] >= 50 ? '#f57f17' : '#c62828') }};">{{ number_format($r['hadist'],0) }}%</td>
|
|
<td style="text-align:center;font-size:.76rem;font-weight:700;color:{{ $r['tambahan'] >= 80 ? '#2e7d32' : ($r['tambahan'] >= 50 ? '#f57f17' : '#c62828') }};">{{ number_format($r['tambahan'],0) }}%</td>
|
|
<td>
|
|
@if($r['is_full_khatam'])
|
|
<form method="POST" action="{{ route('admin.capaian.tandai-khatam', $r['santri']->id_santri) }}" style="display:inline;">
|
|
@csrf
|
|
<button type="submit" class="btn-khatam"
|
|
onclick="return confirm('Tandai {{ addslashes($r['santri']->nama_lengkap) }} sebagai Khatam?')">
|
|
<i class="fas fa-check"></i> Tandai Lulus
|
|
</button>
|
|
</form>
|
|
@else
|
|
<a href="{{ route('admin.capaian.riwayat-santri', $r['santri']->id_santri) }}"
|
|
style="font-size:.76rem;color:var(--primary-color);">
|
|
<i class="fas fa-eye"></i> Detail
|
|
</a>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-top:10px;text-align:right;">
|
|
@php $kelasModelObj = $kelasModels->where('nama_kelas', $k)->first(); @endphp
|
|
<a href="{{ route('admin.capaian.index', array_filter(['id_kelas' => $kelasModelObj?->id, 'id_semester' => $selectedSemester])) }}"
|
|
class="lihat-semua" style="display:inline-flex;">
|
|
<i class="fas fa-list"></i>
|
|
Lihat Semua Santri Kelas {{ $k }}
|
|
({{ $rekapKelas[$k]['total_aktif'] }} santri)
|
|
</a>
|
|
</div>
|
|
|
|
@if(count($rekapKelas[$k]['ranking']) >= 2)
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;">
|
|
<div style="background:#e8f5e9;border-radius:7px;padding:10px;">
|
|
<span style="font-weight:700;color:#2e7d32;font-size:.83rem;"><i class="fas fa-arrow-up"></i> Tertinggi</span>
|
|
<div style="margin-top:4px;font-size:.8rem;">{{ $rekapKelas[$k]['ranking'][0]['santri']->nama_lengkap }} — <strong>{{ number_format($rekapKelas[$k]['ranking'][0]['avg_progress'],1) }}%</strong></div>
|
|
</div>
|
|
<div style="background:#fbe9e7;border-radius:7px;padding:10px;">
|
|
<span style="font-weight:700;color:#c62828;font-size:.83rem;"><i class="fas fa-arrow-down"></i> Terendah</span>
|
|
@php $last = end($rekapKelas[$k]['ranking']); @endphp
|
|
<div style="margin-top:4px;font-size:.8rem;">{{ $last['santri']->nama_lengkap }} — <strong>{{ number_format($last['avg_progress'],1) }}%</strong></div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@else
|
|
<div class="empty-msg"><i class="fas fa-inbox"></i>Belum ada data ranking</div>
|
|
@endif
|
|
|
|
@if($rekapKelas[$k]['khatam']->count() > 0)
|
|
<div class="khatam-section">
|
|
<h5><i class="fas fa-star"></i> Santri Khatam ({{ $rekapKelas[$k]['khatam']->count() }})</h5>
|
|
<div style="display:flex;flex-wrap:wrap;gap:7px;">
|
|
@foreach($rekapKelas[$k]['khatam'] as $ks)
|
|
<div style="background:#fff;border-radius:7px;padding:7px 12px;display:flex;align-items:center;gap:7px;font-size:.8rem;box-shadow:0 1px 4px rgba(0,0,0,.07);">
|
|
<i class="fas fa-award" style="color:#FFD700;"></i>
|
|
<span><strong>{{ $ks->nama_lengkap }}</strong> ({{ $ks->nis }})</span>
|
|
<form method="POST" action="{{ route('admin.capaian.batal-khatam', $ks->id_santri) }}" style="display:inline;margin-left:4px;">
|
|
@csrf
|
|
<button type="submit" class="btn-batal-khatam"
|
|
onclick="return confirm('Batalkan status Khatam?')"
|
|
style="font-size:.66rem;padding:2px 7px;">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ==================== TAB 4: ANALISIS MATERI ==================== --}}
|
|
<div class="tab-content" id="tab-materi">
|
|
<div class="sc" style="margin-top:14px;">
|
|
<h4><i class="fas fa-table"></i> Materi Completion Rate Per Semester</h4>
|
|
@if(count($materiCompletionRate) > 0)
|
|
<div style="overflow-x:auto;">
|
|
<table class="mini-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="min-width:150px;">Materi</th>
|
|
<th>Kategori</th>
|
|
<th>Kelas</th>
|
|
@foreach($allSemestersOrdered as $sem)
|
|
<th style="text-align:center;font-size:.68rem;min-width:85px;">{{ $sem->nama_semester }}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($materiCompletionRate as $mcr)
|
|
<tr>
|
|
<td><strong>{{ $mcr['materi']->nama_kitab }}</strong></td>
|
|
<td>{!! $mcr['materi']->kategori_badge !!}</td>
|
|
<td>{!! $mcr['materi']->kelas_badge !!}</td>
|
|
@foreach($allSemestersOrdered as $sem)
|
|
@php $rate = $mcr['rates'][$sem->id_semester] ?? null; @endphp
|
|
<td class="completion-cell {{ $rate === null ? 'none' : ($rate >= 70 ? 'high' : ($rate >= 30 ? 'mid' : 'low')) }}">
|
|
{{ $rate !== null ? $rate.'%' : '-' }}
|
|
</td>
|
|
@endforeach
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@else
|
|
<div class="empty-msg"><i class="fas fa-book"></i>Belum ada data materi</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="sc">
|
|
<h4><i class="fas fa-exclamation-triangle" style="color:#ff7043;"></i> Bottleneck Analysis</h4>
|
|
<p style="font-size:.76rem;color:#999;margin:-10px 0 12px;">Materi yang menjadi bottleneck — banyak santri stuck di bawah 50%.</p>
|
|
@if(count($bottleneckMateri) > 0)
|
|
@foreach(array_slice($bottleneckMateri, 0, 3) as $bn)
|
|
@if($bn['stuck_percentage'] > 0)
|
|
<div class="bn-alert">
|
|
<div class="bn-icon"><i class="fas fa-exclamation-circle"></i></div>
|
|
<div class="bn-text">
|
|
<strong>{{ number_format($bn['stuck_percentage'],0) }}%</strong> santri stuck di
|
|
<strong>{{ $bn['materi']->nama_kitab }}</strong> — rata-rata <strong>{{ number_format($bn['avg_progress'],1) }}%</strong>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
<table class="mini-table" style="margin-top:12px;">
|
|
<thead>
|
|
<tr>
|
|
<th>Materi</th>
|
|
<th>Kategori</th>
|
|
<th style="text-align:center;">Total</th>
|
|
<th style="text-align:center;">Stuck</th>
|
|
<th style="text-align:center;">% Stuck</th>
|
|
<th>Avg Progress</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($bottleneckMateri as $bn)
|
|
<tr>
|
|
<td><strong>{{ $bn['materi']->nama_kitab }}</strong></td>
|
|
<td>{!! $bn['materi']->kategori_badge !!}</td>
|
|
<td style="text-align:center;">{{ $bn['total_santri'] }}</td>
|
|
<td style="text-align:center;color:#c62828;font-weight:700;">{{ $bn['stuck_santri'] }}</td>
|
|
<td style="text-align:center;">
|
|
<span style="background:{{ $bn['stuck_percentage'] >= 50 ? '#fbe9e7' : '#fff8e1' }};color:{{ $bn['stuck_percentage'] >= 50 ? '#c62828' : '#f57f17' }};padding:2px 9px;border-radius:10px;font-weight:700;font-size:.76rem;">
|
|
{{ number_format($bn['stuck_percentage'],0) }}%
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="prog-bar" style="width:110px;">
|
|
<div class="prog-fill" style="width:{{ $bn['avg_progress'] }}%;background:{{ $bn['avg_progress'] >= 50 ? '#66bb6a' : ($bn['avg_progress'] >= 25 ? '#ffa726' : '#ef5350') }};"></div>
|
|
</div>
|
|
<span style="font-size:.7rem;color:#888;">{{ number_format($bn['avg_progress'],1) }}%</span>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
@else
|
|
<div class="empty-msg"><i class="fas fa-check-circle"></i>Tidak ada bottleneck terdeteksi</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ==================== TAB 5: KALKULASI PROGRESS ==================== --}}
|
|
<div class="tab-content" id="tab-prediksi">
|
|
<div class="sc" style="margin-top:14px;">
|
|
<h4><i class="fas fa-tasks"></i> Estimasi Selesai Per Kelas
|
|
<span class="bc">{{ $santrisAktif->count() }} santri aktif</span>
|
|
</h4>
|
|
<p style="font-size:.76rem;color:#999;margin:-10px 0 14px;">
|
|
Kalkulasi estimasi semester selesai berdasarkan rata-rata pertumbuhan progress antar semester.
|
|
"Stagnan" = tidak ada pertumbuhan atau menurun.
|
|
</p>
|
|
|
|
{{-- Tab Kelas --}}
|
|
<div class="ranking-tabs" id="progKelasTabBtns">
|
|
@foreach($kelasList as $idx => $k)
|
|
<button class="pk-btn rt-btn {{ $idx === 0 ? 'active' : '' }}" data-progkelas="{{ $idx }}">
|
|
{{ $k }}
|
|
<span style="opacity:.7;font-size:.72rem;">({{ count($projectedByKelas[$k] ?? []) }})</span>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
@foreach($kelasList as $idx => $k)
|
|
<div class="prog-kelas-content {{ $idx === 0 ? 'active' : '' }}" id="progkelas-{{ $idx }}"
|
|
style="{{ $idx !== 0 ? 'display:none;' : '' }}">
|
|
@if(isset($projectedByKelas[$k]) && count($projectedByKelas[$k]) > 0)
|
|
<div style="margin-bottom:8px;font-size:.78rem;color:#888;">
|
|
<i class="fas fa-users"></i> Menampilkan <strong>{{ count($projectedByKelas[$k]) }}</strong> santri kelas {{ $k }}
|
|
</div>
|
|
@foreach($projectedByKelas[$k] as $pg)
|
|
<div class="gantt-row">
|
|
<div class="gantt-label" title="{{ $pg['santri']->nama_lengkap }}">
|
|
{{ \Illuminate\Support\Str::limit($pg['santri']->nama_lengkap, 18) }}
|
|
</div>
|
|
<div class="gantt-bar-wrap">
|
|
@php
|
|
$prog = min($pg['current_progress'], 100);
|
|
$gc = $prog >= 80 ? '#66bb6a,#2e7d32' : ($prog >= 50 ? '#ffa726,#f57f17' : '#ef5350,#c62828');
|
|
@endphp
|
|
<div class="gantt-bar" style="width:{{ $prog }}%;background:linear-gradient(90deg,{{ $gc }});">
|
|
{{ number_format($prog, 0) }}%
|
|
</div>
|
|
</div>
|
|
<div class="gantt-info">
|
|
@if($pg['current_progress'] >= 100)
|
|
<span style="color:#2e7d32;font-weight:700;"><i class="fas fa-check-circle"></i> Khatam</span>
|
|
@elseif($pg['semesters_to_grad'] !== null)
|
|
<span>+{{ $pg['semesters_to_grad'] }} sem</span>
|
|
<br><span style="font-size:.63rem;color:#999;">{{ $pg['growth_rate'] > 0 ? '+' : '' }}{{ $pg['growth_rate'] }}%/sem</span>
|
|
@else
|
|
<span style="color:#c62828;font-size:.7rem;"><i class="fas fa-exclamation-triangle"></i> Stagnan</span>
|
|
@endif
|
|
</div>
|
|
<div style="min-width:70px;padding-left:8px;">
|
|
<a href="{{ route('admin.capaian.riwayat-santri', $pg['santri']->id_santri) }}"
|
|
style="font-size:.72rem;color:var(--primary-color);text-decoration:none;">
|
|
<i class="fas fa-eye"></i> Detail
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
<div style="margin-top:12px;text-align:right;">
|
|
@php $kelasModelObj2 = $kelasModels->where('nama_kelas', $k)->first(); @endphp
|
|
<a href="{{ route('admin.capaian.index', array_filter(['id_kelas' => $kelasModelObj2?->id, 'id_semester' => $selectedSemester])) }}"
|
|
class="lihat-semua" style="display:inline-flex;">
|
|
<i class="fas fa-list"></i> Lihat Detail Capaian Kelas {{ $k }}
|
|
</a>
|
|
</div>
|
|
@else
|
|
<div class="empty-msg"><i class="fas fa-inbox"></i>Belum ada data kalkulasi untuk kelas {{ $k }}</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
|
|
<div style="margin-top:14px;padding:9px;background:#f5f8f6;border-radius:7px;font-size:.76rem;color:#666;">
|
|
<i class="fas fa-info-circle" style="color:var(--primary-color);"></i>
|
|
Estimasi dihitung berdasarkan rata-rata pertumbuhan progress per semester dari data historis yang tersedia.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ==================== TAB 6: LAPORAN ==================== --}}
|
|
<div class="tab-content" id="tab-laporan">
|
|
@if($semesterSummary)
|
|
<div class="sc" style="margin-top:14px;">
|
|
<h4><i class="fas fa-clipboard-check"></i> Semester Summary — {{ $semesterSummary['semester']->nama_semester }}</h4>
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px;">
|
|
<div class="summary-card">
|
|
<div class="sc-val" style="color:#6FBA9D;">{{ $semesterSummary['total_santri'] }}</div>
|
|
<div class="sc-label">Total Santri</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="sc-val" style="color:#81C6E8;">{{ number_format($semesterSummary['avg_progress'],1) }}%</div>
|
|
<div class="sc-label">Rata-rata Progress</div>
|
|
<div class="sc-change {{ $semesterSummary['kenaikan'] >= 0 ? 'growth-pos' : 'growth-neg' }}">
|
|
{{ $semesterSummary['kenaikan'] >= 0 ? '+' : '' }}{{ number_format($semesterSummary['kenaikan'],1) }}%
|
|
dari {{ $semesterSummary['prev_semester']?->nama_semester ?? 'N/A' }}
|
|
</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="sc-val" style="color:#2e7d32;">{{ $semesterSummary['santri_khatam'] }}</div>
|
|
<div class="sc-label">Khatam Semua Materi</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="sc-val" style="color:#c62828;">{{ $semesterSummary['santri_remedial_count'] }}</div>
|
|
<div class="sc-label">Perlu Remedial (<30%)</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
|
|
<div>
|
|
<h5 style="color:#2e7d32;font-size:.86rem;margin-bottom:8px;"><i class="fas fa-star"></i> Materi Terbanyak Dikhatamkan</h5>
|
|
@forelse($semesterSummary['materi_khatam'] as $mk)
|
|
<div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f0f0f0;font-size:.8rem;">
|
|
<span>{{ $mk['materi']->nama_kitab ?? '-' }}</span>
|
|
<span style="font-weight:700;color:#2e7d32;">{{ $mk['count'] }} santri</span>
|
|
</div>
|
|
@empty
|
|
<span style="color:#999;font-size:.8rem;">Belum ada</span>
|
|
@endforelse
|
|
</div>
|
|
<div>
|
|
<h5 style="color:#c62828;font-size:.86rem;margin-bottom:8px;"><i class="fas fa-exclamation-triangle"></i> Materi Paling Sedikit Progress</h5>
|
|
@forelse($semesterSummary['materi_min'] as $mm)
|
|
<div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f0f0f0;font-size:.8rem;">
|
|
<span>{{ $mm['materi']->nama_kitab ?? '-' }}</span>
|
|
<span style="font-weight:700;color:#c62828;">{{ $mm['avg'] }}%</span>
|
|
</div>
|
|
@empty
|
|
<span style="color:#999;font-size:.8rem;">Tidak ada data</span>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
@if($semesterSummary['santri_remedial_count'] > 0)
|
|
<div style="margin-top:14px;background:#fbe9e7;border-radius:8px;padding:11px;">
|
|
<h5 style="color:#c62828;margin:0 0 7px;font-size:.84rem;"><i class="fas fa-user-times"></i> Santri Perlu Remedial</h5>
|
|
<div style="display:flex;flex-wrap:wrap;gap:5px;font-size:.78rem;">
|
|
@foreach($semesterSummary['santri_remedial'] as $sr)
|
|
<span style="background:#fff;padding:3px 9px;border-radius:6px;border:1px solid #ffcdd2;">{{ $sr->nama_lengkap }} ({{ $sr->kelas }})</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="sc" style="margin-top:14px;">
|
|
<div class="empty-msg"><i class="fas fa-clipboard-check"></i>Pilih semester pada filter untuk melihat laporan</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="sc">
|
|
<h4><i class="fas fa-file-pdf"></i> Export Rapor Per Santri</h4>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:end;">
|
|
<div>
|
|
<label style="font-size:.81rem;font-weight:600;color:#555;">Pilih Santri:</label>
|
|
<select id="raporSantri" style="width:100%;padding:7px 11px;border:2px solid #e0e0e0;border-radius:8px;font-size:.84rem;margin-top:3px;">
|
|
<option value="">-- Pilih Santri --</option>
|
|
@foreach($santrisAktif as $s)
|
|
<option value="{{ $s->id_santri }}">{{ $s->nama_lengkap }} ({{ $s->kelas }})</option>
|
|
@endforeach
|
|
@foreach($santrisKhatam as $s)
|
|
<option value="{{ $s->id_santri }}">{{ $s->nama_lengkap }} ({{ $s->kelas }}) - Khatam</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label style="font-size:.81rem;font-weight:600;color:#555;">Pilih Semester:</label>
|
|
<select id="raporSemester" style="width:100%;padding:7px 11px;border:2px solid #e0e0e0;border-radius:8px;font-size:.84rem;margin-top:3px;">
|
|
<option value="">-- Pilih Semester --</option>
|
|
@foreach($semesters as $sem)
|
|
<option value="{{ $sem->id_semester }}">{{ $sem->nama_semester }}@if($sem->is_active) ★ @endif</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<button class="rapor-btn" onclick="exportRapor()"><i class="fas fa-download"></i> Generate Rapor</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;" class="no-print">
|
|
<a href="{{ route('admin.capaian.create') }}" class="btn btn-success" style="padding:9px 18px;"><i class="fas fa-plus"></i> Input Capaian Baru</a>
|
|
<a href="{{ route('admin.capaian.index') }}" class="btn btn-primary" style="padding:9px 18px;"><i class="fas fa-list"></i> Daftar Capaian</a>
|
|
<a href="{{ route('admin.materi.index') }}" class="btn btn-info" style="padding:9px 18px;"><i class="fas fa-book"></i> Master Materi</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== CHART.JS ===== --}}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|
<script>
|
|
// Tab switching (main tabs)
|
|
document.querySelectorAll('.dash-tab').forEach(t => {
|
|
t.addEventListener('click', function() {
|
|
document.querySelectorAll('.dash-tab').forEach(x => x.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach(x => x.classList.remove('active'));
|
|
this.classList.add('active');
|
|
document.getElementById(this.dataset.tab).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Ranking kelas tabs
|
|
document.querySelectorAll('.rt-btn:not(.pk-btn)').forEach(t => {
|
|
t.addEventListener('click', function() {
|
|
document.querySelectorAll('.rt-btn:not(.pk-btn)').forEach(x => x.classList.remove('active'));
|
|
document.querySelectorAll('.ranking-content').forEach(x => x.classList.remove('active'));
|
|
this.classList.add('active');
|
|
document.getElementById('ranking-' + this.dataset.kelas).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Kalkulasi Progress kelas tabs
|
|
document.querySelectorAll('.pk-btn').forEach(t => {
|
|
t.addEventListener('click', function() {
|
|
document.querySelectorAll('.pk-btn').forEach(x => x.classList.remove('active'));
|
|
document.querySelectorAll('.prog-kelas-content').forEach(x => x.style.display = 'none');
|
|
this.classList.add('active');
|
|
const el = document.getElementById('progkelas-' + this.dataset.progkelas);
|
|
if (el) el.style.display = 'block';
|
|
});
|
|
});
|
|
|
|
const clr = {
|
|
teal:'rgba(111,186,157,', blue:'rgba(129,198,232,', amber:'rgba(255,213,107,',
|
|
rose:'rgba(255,139,148,', orange:'rgba(255,171,145,', purple:'rgba(179,157,219,', green:'rgba(102,187,106,'
|
|
};
|
|
const palette = [clr.teal,clr.blue,clr.amber,clr.rose,clr.purple,clr.orange,clr.green];
|
|
|
|
// Chart: Distribusi Progress
|
|
new Chart(document.getElementById('chartDistribusi'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['0-25%','26-50%','51-75%','76-99%','100%'],
|
|
datasets: [{
|
|
data: [{{ $distribusiProgress['0-25%'] }},{{ $distribusiProgress['26-50%'] }},{{ $distribusiProgress['51-75%'] }},{{ $distribusiProgress['76-99%'] }},{{ $distribusiProgress['100%'] }}],
|
|
backgroundColor: [clr.rose+'0.8)',clr.orange+'0.8)',clr.amber+'0.8)',clr.blue+'0.8)',clr.teal+'0.8)'],
|
|
borderColor: [clr.rose+'1)',clr.orange+'1)',clr.amber+'1)',clr.blue+'1)',clr.teal+'1)'],
|
|
borderWidth: 2, borderRadius: 5
|
|
}]
|
|
},
|
|
options: {
|
|
responsive:true, maintainAspectRatio:true,
|
|
scales:{ y:{ beginAtZero:true, ticks:{stepSize:1} } },
|
|
plugins:{ legend:{display:false} }
|
|
}
|
|
});
|
|
|
|
// Chart: Semester Comparison (digunakan di Tab Ringkasan)
|
|
const semLabels = @json($semesterLabels);
|
|
const semData = @json($semesterComparison);
|
|
const lineDatasets = Object.entries(semData).map(([k,v],i) => {
|
|
const c = palette[i % palette.length];
|
|
return { label:k, data:v, borderColor:c+'1)', backgroundColor:c+'0.12)', tension:.4, fill:true, pointRadius:4, borderWidth:2.5 };
|
|
});
|
|
if(document.getElementById('chartSemesterComparison')) {
|
|
new Chart(document.getElementById('chartSemesterComparison'), {
|
|
type:'line',
|
|
data:{ labels:semLabels, datasets:lineDatasets },
|
|
options:{
|
|
responsive:true, maintainAspectRatio:true,
|
|
scales:{ y:{ beginAtZero:true, max:100, ticks:{callback:v=>v+'%'} } },
|
|
plugins:{
|
|
legend:{ position:'bottom', labels:{padding:12} },
|
|
tooltip:{ callbacks:{label:ctx=>ctx.dataset.label+': '+ctx.parsed.y.toFixed(1)+'%'}, mode:'index', intersect:false }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Export rapor
|
|
function exportRapor() {
|
|
const santri = document.getElementById('raporSantri').value;
|
|
const semester = document.getElementById('raporSemester').value;
|
|
if (!santri || !semester) { alert('Pilih santri dan semester terlebih dahulu.'); return; }
|
|
window.open('{{ url("admin/capaian/export-rapor") }}/'+santri+'/'+semester, '_blank');
|
|
}
|
|
</script>
|
|
@endsection |