@extends('admin.layouts.app')

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

@section('content')

<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; }
.meta-chip.yellow { background: #fef9c3; color: #854d0e; }

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

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

.stat-box {
    flex: 1;
    background: white;
    border-radius: 16px;
    padding: 18px 20px;
    text-align: center;
    border: 2px solid #e5e5e5;
}

.stat-num {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
}

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

.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;
    display: flex;
    align-items: center;
    gap: 6px;
}

.table-header { background: #a5e6ba; }

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

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

.exp-badge {
    background: #fef9c3;
    color: #b45309;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.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: 4px;
    transition: background 0.2s;
}

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

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

.table-search {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 14px;
    width: 220px;
    outline: none;
}

.table-search:focus { border-color: #2b8ef3; }

/* Icon sizes */
.icon-sm    { width: 16px; height: 16px; vertical-align: middle; }
.icon-meta  { width: 15px; height: 15px; vertical-align: middle; }
.icon-empty { width: 56px; height: 56px; }
</style>

@php
    $isLewat      = \Carbon\Carbon::parse($tugas->deadline)->isPast();
    $tepat        = $tugas->pengumpulanTugas->where('status', 'dikumpulkan')->count();
    $terlambat    = $tugas->pengumpulanTugas->where('status', 'terlambat')->count();
    $totalKumpul  = $tugas->pengumpulanTugas->count();
@endphp

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

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

    <div class="info-meta">
        <span class="meta-chip yellow">
            <img src="{{ asset('images/icon/gurud/guru.png') }}" class="icon-meta topbar-waving" alt="Guru">
            {{ optional(optional($tugas->mengajar)->guru)->nama ?? '-' }}
        </span>
        <span class="meta-chip">
            <img src="{{ asset('images/icon/gurud/stacked.png') }}" class="icon-meta topbar-waving" 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-meta topbar-waving" 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-meta topbar-waving" alt="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">{{ $tepat }}</p>
        <p class="stat-label">Tepat Waktu</p>
    </div>
    <div class="stat-box">
        <p class="stat-num" style="color:#f97316">{{ $terlambat }}</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">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <p class="section-title mb-0">
            <img src="{{ asset('images/icon/gurud/pengumpulan.png') }}" class="icon-sm topbar-waving" alt="Pengumpulan">
            Daftar Pengumpulan Siswa
        </p>
        <input type="text" class="table-search" id="searchSiswa"
               placeholder="Cari nama / NISN..."
               onkeyup="filterTable()">
    </div>

    @if($tugas->pengumpulanTugas->isEmpty())
        <div class="empty-state">
            <div style="margin-bottom:10px">
                <img src="{{ asset('images/icon/gurud/mailbox.png') }}" class="icon-empty topbar-waving" alt="Belum ada pengumpulan">
            </div>
            <p>Belum ada siswa yang mengumpulkan tugas ini.</p>
        </div>
    @else
        <div class="table-responsive">
        <table class="table align-middle" id="tableSiswa">
            <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 / Poin</th>
                    <th>File Jawaban</th>
                </tr>
            </thead>
            <tbody>
                @foreach($tugas->pengumpulanTugas as $i => $kumpul)
                <tr>
                    <td class="text-center">{{ $i + 1 }}</td>
                    <td style="font-weight:600;color:#1e293b">
                        {{ optional($kumpul->siswa)->nama ?? '-' }}
                    </td>
                    <td class="text-center" style="font-size:13px;color:#64748b;font-family:monospace">
                        {{ 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') }}
                        <div style="font-size:11px">
                            {{ \Carbon\Carbon::parse($kumpul->tanggal_submit)->format('H:i') }}
                        </div>
                    </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-sm topbar-waving" alt="Tepat waktu">
                                Tepat Waktu
                            @elseif($kumpul->status === 'terlambat')
                                <img src="{{ asset('images/icon/gurud/alarm.png') }}" class="icon-sm topbar-waving" alt="Terlambat">
                                Terlambat
                            @else
                                <img src="{{ asset('images/icon/gurud/x.png') }}" class="icon-sm topbar-waving" alt="Belum dikumpulkan">
                                Belum
                            @endif
                        </span>
                    </td>
                    <td class="text-center">
                        @if($kumpul->exp > 0)
                            <span class="exp-badge">
                                <img src="{{ asset('images/icon/gurud/star.png') }}" class="icon-sm topbar-waving" alt="EXP">
                                {{ $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)
                            @php
                                $ext = strtolower(pathinfo($kumpul->lampiran_tugas, PATHINFO_EXTENSION));
                                $iconSrc = match(true) {
                                    in_array($ext, ['pdf'])              => asset('images/icon/gurud/buku2.png'),
                                    in_array($ext, ['doc','docx'])       => asset('images/icon/gurud/buku1.png'),
                                    in_array($ext, ['jpg','jpeg','png']) => asset('images/icon/gurud/image.png'),
                                    default                              => asset('images/icon/gurud/link.png'),
                                };
                                $iconAlt = match(true) {
                                    in_array($ext, ['pdf'])              => 'File PDF',
                                    in_array($ext, ['doc','docx'])       => 'File Word',
                                    in_array($ext, ['jpg','jpeg','png']) => 'File Gambar',
                                    default                              => 'File Lampiran',
                                };
                            @endphp
                            <a href="{{ asset('storage/' . $kumpul->lampiran_tugas) }}"
                               target="_blank" class="btn-unduh">
                                <img src="{{ $iconSrc }}" class="icon-sm topbar-waving" alt="{{ $iconAlt }}">
                                Unduh
                            </a>
                        @else
                            <span style="font-size:12px;color:#94a3b8">-</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
    @endif
</div>

<script>
function filterTable() {
    const keyword = document.getElementById('searchSiswa').value.toLowerCase();
    const rows    = document.querySelectorAll('#tableSiswa tbody tr');

    rows.forEach(row => {
        const nama = row.cells[1]?.textContent.toLowerCase() ?? '';
        const nisn = row.cells[2]?.textContent.toLowerCase() ?? '';
        row.style.display = (nama.includes(keyword) || nisn.includes(keyword)) ? '' : 'none';
    });
}
</script>

@endsection