@extends('guru.layouts.app')

@section('title', 'History 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; }

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

.table-header { background: #a5e6ba; }

.mapel-badge {
    display: inline-block;
    background: #e6f0ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

.kelas-badge {
    display: inline-block;
    background: #f0fdf4;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

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

.deadline-lewat  { background: #fee2e2; color: #ef4444; }
.deadline-aktif  { background: #dcfce7; color: #16a34a; }

.submit-count {
    font-size: 13px;
    font-weight: 700;
    color: #f97316;
}

.btn-detail {
    background: #f97316;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 5px 14px;
    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-detail:hover { background: #ea6c0a; color: white; }

.alert-success-custom {
    background: #dcfce7;
    color: #166534;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

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

.table {
    min-width: 650px;
}

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

@section('content')

<a href="{{ route('guru.mapel.index') }}" class="back-link">← Kembali ke Mata Pelajaran</a>

<h3 class="page-title">
    <img src="{{ asset('images/icon/gurud/history.png') }}" class="icon-inline" alt="Ikon history">
    HISTORY TUGAS
</h3>

@if(session('success'))
    <div class="alert-success-custom">
        <img src="{{ asset('images/icon/gurud/v.png') }}" class="icon-inline" alt="Berhasil">
        {{ session('success') }}
    </div>
@endif

<div class="custom-card">
    @if($tugasList->isEmpty())
        <div class="empty-state">
            <div style="margin-bottom:12px">
                <img src="{{ asset('images/icon/gurud/mailbox.png') }}" class="icon-lg" alt="Belum ada tugas">
            </div>
            <p>Belum ada tugas yang dibuat.</p>
        </div>
    @else
        <table class="table align-middle">
            <thead class="table-header text-center">
                <tr>
                    <th>No</th>
                    <th>Judul Tugas</th>
                    <th>Mata Pelajaran</th>
                    <th>Kelas</th>
                    <th>Deadline</th>
                    <th>Pengumpulan</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($tugasList as $i => $tugas)
                @php
                    $isLewat = \Carbon\Carbon::parse($tugas->deadline)->isPast();
                    $jumlahKumpul = $tugas->pengumpulanTugas->count();
                @endphp
                <tr>
                    <td class="text-center">{{ $tugasList->firstItem() + $i }}</td>
                    <td>
                        <div style="font-weight:600;color:#1e293b;word-break:break-word;max-width:180px;">{{ $tugas->judul_tugas }}</div>
                        @if($tugas->keterangan)
                            <div style="font-size:12px;color:#94a3b8;margin-top:2px">
                                {{ Str::limit($tugas->keterangan, 60) }}
                            </div>
                        @endif
                    </td>
                    <td class="text-center">
                        <span class="mapel-badge">
                            {{ optional(optional($tugas->mengajar)->mapel)->nama_mapel ?? '-' }}
                        </span>
                    </td>
                    <td class="text-center">
                        <span class="kelas-badge">
                            {{ optional(optional($tugas->mengajar)->kelas)->tingkat }}
                            {{ optional(optional($tugas->mengajar)->kelas)->nama_kelas ?? '-' }}
                        </span>
                    </td>
                    <td class="text-center">
                        @if($isLewat)
                            <span class="deadline-badge deadline-lewat">
                                <img src="{{ asset('images/icon/gurud/alarm.png') }}" class="icon-inline" alt="Deadline lewat"> Lewat
                            </span>
                        @else
                            <span class="deadline-badge deadline-aktif">
                                <img src="{{ asset('images/icon/gurud/v.png') }}" class="icon-inline" alt="Deadline aktif"> Aktif
                            </span>
                        @endif
                        <div style="font-size:12px;color:#64748b;margin-top:4px;white-space:nowrap;">
                            {{ \Carbon\Carbon::parse($tugas->deadline)->format('d M Y, H:i') }}
                        </div>
                    </td>
                    <td class="text-center">
                        <span class="submit-count">{{ $jumlahKumpul }}</span>
                        <span style="font-size:12px;color:#64748b"> pengumpulan</span>
                    </td>
                    <td class="text-center">
                        <a href="{{ route('guru.tugas.detail', $tugas->id_tugas) }}" class="btn-detail">
                            <img src="{{ asset('images/icon/gurud/eye.png') }}" class="icon-inline" alt="Detail tugas"> Detail
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="d-flex justify-content-end mt-3">
            {{ $tugasList->links() }}
        </div>
    @endif
</div>

@endsection