MIF_E31230356/resources/views/guru/tugas/detail.blade.php

@extends('guru.layouts.app')

@section('title', 'Detail Tugas')

@push('styles')
<style>
.page-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 6px;
    margin-top: -20px;
}

.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; }

.info-card {
    background: white;
    border-radius: 20px;
    border: 2px solid #e5e5e5;
    padding: 24px 28px;
    margin-bottom: 20px;
    border-left: 5px solid #f97316;
}

.info-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px;
}

.info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 99px;
}

.meta-chip.orange { background: #fff7ed; color: #ea580c; }
.meta-chip.green  { background: #f0fdf4; color: #16a34a; }
.meta-chip.red    { background: #fef2f2; color: #dc2626; }

.keterangan-box {
    background: #f8fafc;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    color: #475569;
    line-height: 1.7;
    border: 1px solid #e2e8f0;
    margin-top: 10px;
}

.custom-card {
    background: white;
    border-radius: 20px;
    border: 2px solid #e5e5e5;
    padding: 25px;
}

.section-title {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
}

.table-header { background: #a5e6ba; }

.status-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    display: inline-block;
}

.status-dikumpulkan { background: #dcfce7; color: #16a34a; }
.status-terlambat   { background: #fff7ed; color: #ea580c; }
.status-belum       { background: #f1f5f9; color: #64748b; }

.btn-unduh {
    background: #e6f0ff;
    color: #2b8ef3;
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}

.btn-unduh:hover { background: #bfdbfe; color: #1d4ed8; }

.stat-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.stat-box {
    flex: 1;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.stat-num {
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.stat-label {
    font-size: 12px;
    color: #94a3b8;
    margin: 4px 0 0;
    font-weight: 500;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}
</style>
@endpush

@section('content')

<a href="{{ route('guru.tugas.history') }}" class="back-link">← Kembali ke History Tugas</a>

{{-- INFO TUGAS --}}
@php
    $isLewat      = \Carbon\Carbon::parse($tugas->deadline)->isPast();
    $jumlahKumpul = $tugas->pengumpulanTugas->where('status', 'dikumpulkan')->count();
    $jumlahLambat = $tugas->pengumpulanTugas->where('status', 'terlambat')->count();
    $totalKumpul  = $tugas->pengumpulanTugas->count();
@endphp

<div class="info-card">
    <h2 class="info-title">{{ $tugas->judul_tugas }}</h2>

    <div class="info-meta">
        <span class="meta-chip">
            📚 {{ optional(optional($tugas->mengajar)->mapel)->nama_mapel ?? '-' }}
        </span>
        <span class="meta-chip">
            🏫 {{ optional(optional($tugas->mengajar)->kelas)->tingkat }}
               {{ optional(optional($tugas->mengajar)->kelas)->nama_kelas ?? '-' }}
        </span>
        <span class="meta-chip {{ $isLewat ? 'red' : 'green' }}">
            ⏰ Deadline: {{ \Carbon\Carbon::parse($tugas->deadline)->format('d M Y, H:i') }}
            — {{ $isLewat ? 'Sudah lewat' : 'Masih aktif' }}
        </span>
    </div>

    @if($tugas->keterangan)
        <div class="keterangan-box">
            {!! nl2br(e($tugas->keterangan)) !!}
        </div>
    @endif
</div>

{{-- STATISTIK --}}
<div class="stat-row">
    <div class="stat-box">
        <p class="stat-num" style="color:#22c55e">{{ $jumlahKumpul }}</p>
        <p class="stat-label">Tepat Waktu</p>
    </div>
    <div class="stat-box">
        <p class="stat-num" style="color:#f97316">{{ $jumlahLambat }}</p>
        <p class="stat-label">Terlambat</p>
    </div>
    <div class="stat-box">
        <p class="stat-num" style="color:#2b8ef3">{{ $totalKumpul }}</p>
        <p class="stat-label">Total Pengumpulan</p>
    </div>
</div>

{{-- DAFTAR PENGUMPULAN --}}
<div class="custom-card">
    <p class="section-title">📥 Daftar Pengumpulan Siswa</p>

    @if($tugas->pengumpulanTugas->isEmpty())
        <div class="empty-state">
            <div style="font-size:40px;margin-bottom:10px">📭</div>
            <p>Belum ada siswa yang mengumpulkan tugas ini.</p>
        </div>
    @else
        <table class="table align-middle">
            <thead class="table-header text-center">
                <tr>
                    <th>No</th>
                    <th>Nama Siswa</th>
                    <th>NISN</th>
                    <th>Waktu Submit</th>
                    <th>Status</th>
                    <th>EXP</th>
                    <th>File</th>
                </tr>
            </thead>
            <tbody>
                @foreach($tugas->pengumpulanTugas as $i => $kumpul)
                <tr>
                    <td class="text-center">{{ $i + 1 }}</td>
                    <td style="font-weight:600">
                        {{ optional($kumpul->siswa)->nama ?? '-' }}
                    </td>
                    <td class="text-center" style="font-size:13px;color:#64748b">
                        {{ optional($kumpul->siswa)->nisn ?? '-' }}
                    </td>
                    <td class="text-center" style="font-size:13px;color:#64748b">
                        {{ \Carbon\Carbon::parse($kumpul->tanggal_submit)->format('d M Y, H:i') }}
                    </td>
                    <td class="text-center">
                        <span class="status-badge status-{{ $kumpul->status }}">
                            @if($kumpul->status === 'dikumpulkan') ✅ Tepat Waktu
                            @elseif($kumpul->status === 'terlambat') ⏰ Terlambat
                            @else ❌ Belum
                            @endif
                        </span>
                    </td>
                    <td class="text-center">
                        @if($kumpul->exp > 0)
                            <span style="background:#fef9c3;color:#b45309;font-size:12px;
                                         font-weight:700;padding:3px 10px;border-radius:99px">
                                ⭐ {{ $kumpul->exp }} EXP
                            </span>
                        @else
                            <span style="font-size:12px;color:#94a3b8">Belum dinilai</span>
                        @endif
                    </td>
                    <td class="text-center">
                        @if($kumpul->lampiran_tugas)
                            <a href="{{ asset('storage/' . $kumpul->lampiran_tugas) }}"
                               target="_blank" class="btn-unduh">
                                📎 Unduh
                            </a>
                        @else
                            <span style="font-size:12px;color:#94a3b8">-</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

@endsection