409 lines
11 KiB
PHP
409 lines
11 KiB
PHP
@extends('layouts.siswa.app')
|
|
|
|
@section('title', $tugas->judul_tugas)
|
|
|
|
@push('styles')
|
|
<style>
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #2b8ef3;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.back-link:hover { text-decoration: underline; }
|
|
|
|
.tugas-header {
|
|
background: #fff;
|
|
border-radius: 20px;
|
|
padding: 28px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
|
margin-bottom: 20px;
|
|
border-left: 5px solid #2b8ef3;
|
|
}
|
|
|
|
.tugas-header.terlambat { border-left-color: #ef4444; }
|
|
.tugas-header.selesai { border-left-color: #22c55e; }
|
|
|
|
.tugas-judul {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.tugas-meta-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.meta-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: #f1f5f9;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
padding: 6px 12px;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.meta-chip.deadline-chip {
|
|
background: #fee2e2;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.meta-chip.deadline-chip.aman {
|
|
background: #e6f0ff;
|
|
color: #2b8ef3;
|
|
}
|
|
|
|
.keterangan-box {
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
color: #475569;
|
|
line-height: 1.7;
|
|
border: 1px solid #e2e8f0;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* SUBMIT FORM */
|
|
.submit-card {
|
|
background: #fff;
|
|
border-radius: 20px;
|
|
padding: 28px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.submit-title {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.upload-area {
|
|
border: 2px dashed #cbd5e1;
|
|
border-radius: 14px;
|
|
padding: 32px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.upload-area:hover, .upload-area.drag-over {
|
|
border-color: #2b8ef3;
|
|
background: #f0f7ff;
|
|
}
|
|
|
|
.upload-area input[type="file"] {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.upload-icon { font-size: 36px; margin-bottom: 10px; }
|
|
|
|
.upload-text {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.upload-hint {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
margin: 0;
|
|
}
|
|
|
|
.file-preview {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background: #f0f7ff;
|
|
border-radius: 10px;
|
|
padding: 12px 16px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.file-preview.show { display: flex; }
|
|
|
|
.file-preview-name {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.file-preview-size {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.btn-submit {
|
|
width: 100%;
|
|
background: #2b8ef3;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
margin-top: 16px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-submit:hover { background: #1a7ae0; }
|
|
.btn-submit:disabled {
|
|
background: #cbd5e1;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* SUDAH KUMPUL */
|
|
.sudah-kumpul-card {
|
|
background: #dcfce7;
|
|
border-radius: 20px;
|
|
padding: 28px;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.sudah-kumpul-icon { font-size: 40px; margin-bottom: 10px; }
|
|
|
|
.sudah-kumpul-title {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: #166534;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.sudah-kumpul-sub {
|
|
font-size: 14px;
|
|
color: #16a34a;
|
|
margin: 0;
|
|
}
|
|
|
|
.exp-display {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: #fef9c3;
|
|
color: #b45309;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
padding: 6px 16px;
|
|
border-radius: 99px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.terlambat-warning {
|
|
background: #fff7ed;
|
|
border: 1px solid #fed7aa;
|
|
border-radius: 14px;
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
margin-bottom: 20px;
|
|
font-size: 13px;
|
|
color: #9a3412;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
border-radius: 12px;
|
|
padding: 14px 18px;
|
|
margin-bottom: 20px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.alert-error {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border-radius: 12px;
|
|
padding: 14px 18px;
|
|
margin-bottom: 20px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
|
|
<a href="{{ route('siswa.tugas.index') }}" class="back-link">← Kembali ke Daftar Tugas</a>
|
|
|
|
@if(session('success'))
|
|
<div class="alert-success">✅ {{ session('success') }}</div>
|
|
@endif
|
|
@if(session('error'))
|
|
<div class="alert-error">❌ {{ session('error') }}</div>
|
|
@endif
|
|
|
|
{{-- DETAIL TUGAS --}}
|
|
@php
|
|
$headerClass = $sudahKumpul ? 'selesai' : ($terlambat ? 'terlambat' : '');
|
|
$deadlineClass = $terlambat ? '' : 'aman';
|
|
@endphp
|
|
|
|
<div class="tugas-header {{ $headerClass }}">
|
|
<h1 class="tugas-judul">{{ $tugas->judul_tugas }}</h1>
|
|
|
|
<div class="tugas-meta-row">
|
|
<span class="meta-chip">
|
|
📚 {{ optional(optional($tugas->mengajar)->mapel)->nama_mapel ?? '-' }}
|
|
</span>
|
|
<span class="meta-chip">
|
|
👨🏫 {{ optional(optional($tugas->mengajar)->guru)->nama ?? '-' }}
|
|
</span>
|
|
<span class="meta-chip deadline-chip {{ $deadlineClass }}">
|
|
⏰ Deadline: {{ \Carbon\Carbon::parse($tugas->deadline)->format('d M Y, H:i') }}
|
|
</span>
|
|
</div>
|
|
|
|
@if($tugas->keterangan)
|
|
<div class="keterangan-box">
|
|
{!! nl2br(e($tugas->keterangan)) !!}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- WARNING TERLAMBAT --}}
|
|
@if($terlambat && !$sudahKumpul)
|
|
<div class="terlambat-warning">
|
|
<span style="font-size:20px">⚠️</span>
|
|
<div>
|
|
<strong>Deadline sudah lewat!</strong><br>
|
|
Kamu masih bisa mengumpulkan tugas ini, tapi akan ditandai sebagai <strong>terlambat</strong>.
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- SUDAH DIKUMPULKAN --}}
|
|
@if($sudahKumpul)
|
|
<div class="sudah-kumpul-card">
|
|
<div class="sudah-kumpul-icon">🎉</div>
|
|
<p class="sudah-kumpul-title">Tugas sudah dikumpulkan!</p>
|
|
<p class="sudah-kumpul-sub">
|
|
Dikumpulkan pada {{ \Carbon\Carbon::parse($pengumpulan->tanggal_submit)->format('d M Y, H:i') }}
|
|
• Status: <strong>{{ ucfirst($pengumpulan->status) }}</strong>
|
|
</p>
|
|
@if($pengumpulan->exp > 0)
|
|
<div class="exp-display">⭐ {{ $pengumpulan->exp }} EXP didapat</div>
|
|
@else
|
|
<p style="font-size:13px;color:#16a34a;margin-top:8px">
|
|
EXP akan diberikan setelah guru menilai tugasmu.
|
|
</p>
|
|
@endif
|
|
|
|
@if($pengumpulan->lampiran_tugas)
|
|
<a href="{{ asset('storage/' . $pengumpulan->lampiran_tugas) }}"
|
|
target="_blank"
|
|
style="display:inline-flex;align-items:center;gap:6px;margin-top:14px;
|
|
background:#fff;color:#2b8ef3;padding:8px 18px;border-radius:10px;
|
|
font-weight:600;font-size:13px;text-decoration:none;">
|
|
📎 Lihat File yang Dikumpulkan
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- FORM SUBMIT --}}
|
|
@else
|
|
<div class="submit-card">
|
|
<p class="submit-title">📤 Upload Jawaban</p>
|
|
|
|
<form action="{{ route('siswa.tugas.submit', $tugas->id_tugas) }}"
|
|
method="POST"
|
|
enctype="multipart/form-data"
|
|
id="submitForm">
|
|
@csrf
|
|
|
|
@error('lampiran_tugas')
|
|
<div class="alert-error" style="margin-bottom:16px">❌ {{ $message }}</div>
|
|
@enderror
|
|
|
|
<div class="upload-area" id="uploadArea">
|
|
<input type="file"
|
|
name="lampiran_tugas"
|
|
id="fileInput"
|
|
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
|
|
required>
|
|
<div class="upload-icon">☁️</div>
|
|
<p class="upload-text"><strong>Klik untuk pilih file</strong> atau drag & drop di sini</p>
|
|
<p class="upload-hint">PDF, DOC, DOCX, JPG, PNG • Maks. 5MB</p>
|
|
</div>
|
|
|
|
<div class="file-preview" id="filePreview">
|
|
<span style="font-size:22px">📎</span>
|
|
<span class="file-preview-name" id="fileName">-</span>
|
|
<span class="file-preview-size" id="fileSize">-</span>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-submit" id="submitBtn" disabled>
|
|
Kumpulkan Tugas
|
|
</button>
|
|
</form>
|
|
</div>
|
|
@endif
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
const fileInput = document.getElementById('fileInput');
|
|
const filePreview = document.getElementById('filePreview');
|
|
const fileName = document.getElementById('fileName');
|
|
const fileSize = document.getElementById('fileSize');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const uploadArea = document.getElementById('uploadArea');
|
|
|
|
if (fileInput) {
|
|
fileInput.addEventListener('change', function () {
|
|
if (this.files && this.files[0]) {
|
|
const file = this.files[0];
|
|
const size = (file.size / 1024 / 1024).toFixed(2);
|
|
fileName.textContent = file.name;
|
|
fileSize.textContent = size + ' MB';
|
|
filePreview.classList.add('show');
|
|
submitBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// Drag & drop highlight
|
|
uploadArea.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.classList.add('drag-over');
|
|
});
|
|
|
|
uploadArea.addEventListener('dragleave', () => {
|
|
uploadArea.classList.remove('drag-over');
|
|
});
|
|
|
|
uploadArea.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.classList.remove('drag-over');
|
|
if (e.dataTransfer.files[0]) {
|
|
fileInput.files = e.dataTransfer.files;
|
|
fileInput.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
@endpush |