298 lines
18 KiB
PHP
298 lines
18 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
|
|
:root {
|
|
--primary:#4F46E5;--primary-dark:#3730A3;--primary-light:#EEF2FF;
|
|
--success:#059669;--success-light:#ECFDF5;
|
|
--warning:#D97706;--warning-light:#FFFBEB;
|
|
--danger:#DC2626;--danger-light:#FEF2F2;
|
|
--info:#0284C7;--info-light:#F0F9FF;
|
|
--neutral-light:#F9FAFB;--bg:#F3F4F8;--surface:#FFFFFF;
|
|
--border:#E5E7EB;--text-dark:#111827;--text-mid:#374151;--text-soft:#6B7280;
|
|
--radius-md:10px;--radius-lg:16px;
|
|
}
|
|
*{font-family:'Plus Jakarta Sans',sans-serif;box-sizing:border-box;}
|
|
#content{padding:0!important;background:var(--bg)!important;}
|
|
#content-wrapper{background:var(--bg)!important;}
|
|
.sw-page{padding:28px 32px;background:var(--bg);min-height:calc(100vh - 70px);}
|
|
.sw-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap;}
|
|
.sw-topbar h3{font-size:21px;font-weight:800;color:var(--text-dark);margin:0 0 3px;letter-spacing:-.3px;}
|
|
.sw-topbar p{font-size:13px;color:var(--text-soft);margin:0;}
|
|
.sw-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:var(--radius-md);font-size:13.5px;font-weight:700;border:none;cursor:pointer;text-decoration:none;transition:all .18s ease;line-height:1;font-family:'Plus Jakarta Sans',sans-serif;}
|
|
.sw-btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.3);}
|
|
.sw-btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-1px);}
|
|
.sw-btn-sm{padding:7px 13px;font-size:12.5px;border-radius:8px;}
|
|
.sw-btn-warning{background:var(--warning-light);color:var(--warning);border:1px solid #FDE68A;}
|
|
.sw-btn-warning:hover{background:var(--warning);color:#fff;}
|
|
.sw-btn-danger{background:var(--danger-light);color:var(--danger);border:1px solid #FECACA;}
|
|
.sw-btn-danger:hover{background:var(--danger);color:#fff;}
|
|
.sw-btn-success{background:var(--success);color:#fff;box-shadow:0 4px 14px rgba(5,150,105,.3);}
|
|
.sw-btn-success:hover{background:#047857;color:#fff;transform:translateY(-1px);}
|
|
.sw-btn-info{background:var(--info-light);color:var(--info);border:1px solid #BAE6FD;}
|
|
.sw-btn-info:hover{background:var(--info);color:#fff;}
|
|
/* Tombol baru: kirim ke menu nilai */
|
|
.sw-btn-nilai{background:#f5f3ff;color:#7c3aed;border:1px solid #ddd6fe;font-size:12px;}
|
|
.sw-btn-nilai:hover{background:#7c3aed;color:#fff;}
|
|
.sw-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden;margin-bottom:22px;}
|
|
.sw-card-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#F5F3FF 0%,#EEF2FF 100%);}
|
|
.sw-card-hd-left{display:flex;align-items:center;gap:10px;}
|
|
.sw-card-hd-icon{width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;}
|
|
.sw-card-hd h6{font-size:14px;font-weight:700;color:#3730A3;margin:0;}
|
|
.sw-card-hd p{font-size:11.5px;color:#6D6AA4;margin:2px 0 0;}
|
|
.sw-count-badge{background:var(--primary-light);border:1px solid #C7D2FE;border-radius:99px;padding:3px 12px;font-size:12px;font-weight:700;color:var(--primary);}
|
|
.sw-ujian-list{padding:8px 0;}
|
|
.sw-ujian-item{display:flex;align-items:center;gap:18px;padding:18px 22px;border-bottom:1px solid var(--border);transition:background .15s;flex-wrap:wrap;}
|
|
.sw-ujian-item:last-child{border-bottom:none;}
|
|
.sw-ujian-item:hover{background:#FAFAFF;}
|
|
.sw-ujian-icon{width:46px;height:46px;border-radius:12px;background:var(--primary-light);border:1px solid #C7D2FE;display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;}
|
|
.sw-ujian-info{flex:1;min-width:0;}
|
|
.sw-ujian-title{font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.sw-ujian-meta{display:flex;gap:10px;flex-wrap:wrap;}
|
|
.sw-meta-chip{display:inline-flex;align-items:center;gap:5px;background:var(--neutral-light);border:1px solid var(--border);border-radius:7px;padding:3px 10px;font-size:11.5px;font-weight:600;color:var(--text-soft);}
|
|
.sw-jenis{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.5px;}
|
|
.sw-jenis-uts{background:var(--info-light);border:1px solid #BAE6FD;color:var(--info);}
|
|
.sw-jenis-uas{background:var(--warning-light);border:1px solid #FDE68A;color:var(--warning);}
|
|
.sw-status-draft{display:inline-flex;align-items:center;gap:5px;background:#F3F4F6;border:1px solid #D1D5DB;border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700;color:#6B7280;}
|
|
.sw-status-kirim{display:inline-flex;align-items:center;gap:5px;background:var(--success-light);border:1px solid #A7F3D0;border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--success);}
|
|
.sw-status-nilai{display:inline-flex;align-items:center;gap:5px;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700;color:#7c3aed;}
|
|
.sw-ujian-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;flex-wrap:wrap;}
|
|
.sw-empty{padding:70px 20px;text-align:center;}
|
|
.sw-empty-ring{width:80px;height:80px;border-radius:50%;background:var(--primary-light);border:2px solid #C7D2FE;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--primary);}
|
|
.sw-empty h5{font-size:16px;font-weight:700;color:var(--text-dark);margin-bottom:6px;}
|
|
.sw-empty p{font-size:13px;color:var(--text-soft);margin-bottom:20px;}
|
|
|
|
/* NILAI SECTION */
|
|
.sw-nilai-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden;}
|
|
.sw-nilai-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#ECFDF5,#D1FAE5);}
|
|
.sw-select-kelas{padding:8px 14px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:13px;font-weight:600;color:var(--text-dark);background:var(--neutral-light);font-family:'Plus Jakarta Sans',sans-serif;outline:none;}
|
|
.sw-select-kelas:focus{border-color:var(--success);box-shadow:0 0 0 3px rgba(5,150,105,.1);}
|
|
.sw-table{width:100%;border-collapse:collapse;}
|
|
.sw-table th{padding:11px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-soft);background:var(--neutral-light);border-bottom:1px solid var(--border);text-align:left;}
|
|
.sw-table td{padding:12px 16px;font-size:13.5px;color:var(--text-mid);border-bottom:1px solid var(--border);}
|
|
.sw-table tr:last-child td{border-bottom:none;}
|
|
.sw-table tr:hover td{background:#FAFAFF;}
|
|
.sw-nilai-badge{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:4px 10px;border-radius:99px;font-size:13px;font-weight:800;}
|
|
.n-a{background:#DCFCE7;color:#166534;}
|
|
.n-b{background:#FEF9C3;color:#854D0E;}
|
|
.n-c{background:#FEE2E2;color:#991B1B;}
|
|
|
|
@media(max-width:768px){
|
|
.sw-page{padding:14px;}
|
|
.sw-ujian-actions{width:100%;justify-content:flex-end;}
|
|
}
|
|
</style>
|
|
|
|
<div class="sw-page">
|
|
|
|
{{-- TOPBAR --}}
|
|
<div class="sw-topbar">
|
|
<div>
|
|
<h3>Manajemen Ujian</h3>
|
|
<p>Kelola ujian dan pantau nilai siswa</p>
|
|
</div>
|
|
<a href="{{ route('guru.ujian.create') }}" class="sw-btn sw-btn-primary">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Buat Ujian
|
|
</a>
|
|
</div>
|
|
|
|
{{-- ALERT --}}
|
|
@if(session('success'))
|
|
<div style="display:flex;align-items:center;gap:10px;background:var(--success-light);border:1px solid #A7F3D0;border-radius:var(--radius-md);padding:13px 16px;margin-bottom:20px;font-size:13px;font-weight:600;color:var(--success);">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
{{-- DAFTAR UJIAN --}}
|
|
<div class="sw-card">
|
|
<div class="sw-card-hd">
|
|
<div class="sw-card-hd-left">
|
|
<div class="sw-card-hd-icon">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
|
</div>
|
|
<div>
|
|
<h6>Daftar Ujian</h6>
|
|
<p>Semua ujian yang telah dibuat</p>
|
|
</div>
|
|
</div>
|
|
<span class="sw-count-badge">{{ $data->count() }} Ujian</span>
|
|
</div>
|
|
|
|
<div class="sw-ujian-list">
|
|
@forelse($data as $u)
|
|
<div class="sw-ujian-item">
|
|
<div class="sw-ujian-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
</div>
|
|
|
|
<div class="sw-ujian-info">
|
|
<div class="sw-ujian-title">{{ $u->judul }}</div>
|
|
<div class="sw-ujian-meta">
|
|
@if($u->jenis)
|
|
<span class="sw-jenis {{ $u->jenis == 'UTS' ? 'sw-jenis-uts' : 'sw-jenis-uas' }}">
|
|
{{ $u->jenis }}
|
|
</span>
|
|
@endif
|
|
|
|
{{-- STATUS KIRIM --}}
|
|
@if($u->status_kirim == 'terkirim')
|
|
<span class="sw-status-kirim">
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 2L11 13"/><path d="M22 2L15 22 11 13 2 9l20-7z"/></svg>
|
|
Terkirim ke Siswa
|
|
</span>
|
|
@else
|
|
<span class="sw-status-draft">
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
|
Draft
|
|
</span>
|
|
@endif
|
|
|
|
<span class="sw-meta-chip">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
{{ $u->durasi ?? '-' }} menit
|
|
</span>
|
|
|
|
{{-- KELAS --}}
|
|
@foreach($u->kelas as $k)
|
|
<span class="sw-meta-chip" style="background:var(--primary-light);border-color:#C7D2FE;color:var(--primary);">
|
|
{{ $k->nama_kelas }}
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sw-ujian-actions">
|
|
{{-- Tombol Kirim ke Siswa (hanya kalau masih draft) --}}
|
|
@if($u->status_kirim == 'draft')
|
|
<form action="{{ route('guru.ujian.kirim', $u->id) }}" method="POST" class="d-inline"
|
|
onsubmit="return confirm('Kirim ujian ini ke semua kelas yang dipilih?')">
|
|
@csrf
|
|
<button type="submit" class="sw-btn sw-btn-sm sw-btn-success">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M22 2L11 13"/><path d="M22 2L15 22 11 13 2 9l20-7z"/></svg>
|
|
Kirim ke Siswa
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
{{-- ✅ Tombol Kirim ke Menu Nilai (hanya kalau sudah terkirim & ada hasil) --}}
|
|
@if($u->status_kirim == 'terkirim')
|
|
<form action="{{ route('guru.nilai.masukkanUjian') }}" method="POST" class="d-inline"
|
|
onsubmit="return confirm('Kirim nilai {{ $u->jenis }} ujian ini ke Menu Nilai? Nilai siswa yang sudah mengerjakan akan masuk ke rekap nilai.')">
|
|
@csrf
|
|
<input type="hidden" name="ujian_id" value="{{ $u->id }}">
|
|
<button type="submit" class="sw-btn sw-btn-sm sw-btn-nilai">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10"/></svg>
|
|
→ Menu Nilai ({{ $u->jenis }})
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
<a href="{{ route('guru.ujian.edit', $u->id) }}" class="sw-btn sw-btn-sm sw-btn-warning">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
Edit
|
|
</a>
|
|
|
|
<form action="{{ route('guru.ujian.destroy', $u->id) }}" method="POST" class="d-inline"
|
|
onsubmit="return confirm('Yakin hapus ujian ini?')">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="sw-btn sw-btn-sm sw-btn-danger">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="sw-empty">
|
|
<div class="sw-empty-ring">
|
|
<svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
<h5>Belum Ada Ujian</h5>
|
|
<p>Klik tombol di atas untuk membuat ujian pertama</p>
|
|
<a href="{{ route('guru.ujian.create') }}" class="sw-btn sw-btn-primary">+ Buat Ujian</a>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ══ NILAI SISWA ══ --}}
|
|
<div class="sw-nilai-card">
|
|
<div class="sw-nilai-hd">
|
|
<div style="display:flex;align-items:center;gap:10px;">
|
|
<div style="width:34px;height:34px;border-radius:9px;background:var(--success);color:#fff;display:flex;align-items:center;justify-content:center;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2"/></svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:14px;font-weight:700;color:#065F46;">Nilai Siswa</div>
|
|
<div style="font-size:11.5px;color:#047857;margin-top:2px;">Filter berdasarkan kelas</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- FILTER KELAS --}}
|
|
<form method="GET" action="{{ route('guru.ujian.index') }}" style="display:flex;gap:8px;align-items:center;">
|
|
<select name="kelas_id" class="sw-select-kelas" onchange="this.form.submit()">
|
|
<option value="">-- Pilih Kelas --</option>
|
|
@foreach($kelasList as $k)
|
|
<option value="{{ $k->id }}" {{ $selectedKelas == $k->id ? 'selected' : '' }}>
|
|
{{ $k->nama_kelas }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@if($selectedKelas)
|
|
<a href="{{ route('guru.ujian.index') }}" style="font-size:12px;color:var(--text-soft);text-decoration:none;font-weight:600;">✕ Reset</a>
|
|
@endif
|
|
</form>
|
|
</div>
|
|
|
|
@if($selectedKelas && $nilaiSiswa->count())
|
|
<table class="sw-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Nama Siswa</th>
|
|
<th>Ujian</th>
|
|
<th>Jenis</th>
|
|
<th>Nilai</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($nilaiSiswa as $i => $n)
|
|
<tr>
|
|
<td style="color:var(--text-soft);font-weight:600;">{{ $i + 1 }}</td>
|
|
<td style="font-weight:700;color:var(--text-dark);">{{ $n->siswa->nama ?? '-' }}</td>
|
|
<td>{{ $n->ujian->judul ?? '-' }}</td>
|
|
<td>
|
|
@if($n->ujian && $n->ujian->jenis)
|
|
<span class="sw-jenis {{ $n->ujian->jenis == 'UTS' ? 'sw-jenis-uts' : 'sw-jenis-uas' }}">
|
|
{{ $n->ujian->jenis }}
|
|
</span>
|
|
@endif
|
|
</td>
|
|
<td>
|
|
@php $v = $n->nilai; @endphp
|
|
<span class="sw-nilai-badge {{ $v >= 75 ? 'n-a' : ($v >= 60 ? 'n-b' : 'n-c') }}">
|
|
{{ $v }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
@elseif($selectedKelas)
|
|
<div style="padding:40px;text-align:center;color:var(--text-soft);font-size:13px;font-weight:600;">
|
|
Belum ada siswa yang mengerjakan ujian di kelas ini.
|
|
</div>
|
|
@else
|
|
<div style="padding:40px;text-align:center;color:var(--text-soft);font-size:13px;font-weight:600;">
|
|
Pilih kelas di atas untuk melihat nilai siswa.
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
@endsection |