@extends('guru.layouts.app')

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

@push('styles')
<style>
.page-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
    margin-top: -20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.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: 16px;
    border: 2px solid #e5e5e5;
    padding: 18px 20px;
    margin-bottom: 16px;
    border-left: 5px solid #f97316;
}

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

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

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

.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: 12px 14px;
    font-size: 14px;
    color: #475569;
    line-height: 1.7;
    border: 1px solid #e2e8f0;
    margin-top: 10px;
    word-break: break-word;
}

.custom-card {
    background: white;
    border-radius: 16px;
    border: 2px solid #e5e5e5;
    padding: 18px 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-header { background: #a5e6ba; }

.table { min-width: 580px; }

.status-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.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-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
    white-space: nowrap;
}

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

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

.stat-box {
    flex: 1;
    min-width: 80px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

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

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

.empty-state {
    text-align: center;
    padding: 36px 20px;
    color: #94a3b8;
}

@media (max-width: 576px) {
    .page-title { font-size: 18px; margin-top: 0; }
    .stat-num { font-size: 20px; }
    .custom-card { padding: 14px 12px; border-radius: 12px; }
    .info-card { padding: 14px 12px; border-radius: 12px; }
}
</style>
@endpush

@section('content')

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

@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">
            <img src="{{ asset('images/icon/gurud/stacked.png') }}" class="icon-inline" alt="Mata pelajaran">
            {{ optional(optional($tugas->mengajar)->mapel)->nama_mapel ?? '-' }}
        </span>
        <span class="meta-chip">
            <img src="{{ asset('images/icon/gurud/school.png') }}" class="icon-inline" alt="Kelas">
            {{ optional(optional($tugas->mengajar)->kelas)->tingkat }}
            {{ optional(optional($tugas->mengajar)->kelas)->nama_kelas ?? '-' }}
        </span>
        <span class="meta-chip {{ $isLewat ? 'red' : 'green' }}">
            <img src="{{ asset('images/icon/gurud/alarm.png') }}" class="icon-inline" alt="Deadline">
            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>

<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</p>
    </div>
</div>

<div class="custom-card">
    <p class="section-title">
        <img src="{{ asset('images/icon/gurud/pengumpulan.png') }}" class="icon-inline" alt="Pengumpulan">
        Daftar Pengumpulan Siswa
    </p>

    @if($tugas->pengumpulanTugas->isEmpty())
        <div class="empty-state">
            <div style="margin-bottom:10px">
                <img src="{{ asset('images/icon/gurud/mailbox.png') }}" class="icon-lg" alt="Belum ada pengumpulan">
            </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>File</th>
                </tr>
            </thead>
            <tbody>
                @foreach($tugas->pengumpulanTugas as $i => $kumpul)
                <tr>
                    <td class="text-center">{{ $i + 1 }}</td>
                    <td style="font-weight:600;word-break:break-word;max-width:160px;">
                        {{ optional($kumpul->siswa)->nama ?? '-' }}
                    </td>
                    <td class="text-center" style="font-size:13px;color:#64748b;white-space:nowrap;">
                        {{ optional($kumpul->siswa)->nisn ?? '-' }}
                    </td>
                    <td class="text-center" style="font-size:13px;color:#64748b;white-space:nowrap;">
                        {{ \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')
                                <img src="{{ asset('images/icon/gurud/v.png') }}" class="icon-inline" alt="Tepat waktu"> Tepat Waktu
                            @elseif($kumpul->status === 'terlambat')
                                <img src="{{ asset('images/icon/gurud/alarm.png') }}" class="icon-inline" alt="Terlambat"> Terlambat
                            @else
                                <img src="{{ asset('images/icon/gurud/x.png') }}" class="icon-inline" alt="Belum"> Belum
                            @endif
                        </span>
                    </td>
                    <td class="text-center">
                        @if($kumpul->lampiran_tugas)
                            <a href="{{ url('storage/app/public/' . $kumpul->lampiran_tugas) }}"
                               target="_blank" class="btn-unduh">
                                <img src="{{ asset('images/icon/gurud/link.png') }}" class="icon-inline" alt="Unduh"> Unduh
                            </a>
                        @else
                            <span style="font-size:12px;color:#94a3b8">-</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

@endsection