@extends('layouts.app')
@section('title', 'Daftar Tugas')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800;900&display=swap');

    :root { --arn-teal: #0d9488; --arn-teal-light: #f0fdfa; --arn-dark: #111827; }
    
    .content-inner { font-family: 'Plus Jakarta Sans', sans-serif; background: #fcfdfd; min-height: 100vh; }
    .text-massive { font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -1.5px; }
    .label-mono { font-family: monospace; font-size: 0.75rem; letter-spacing: 0.05em; color: #6b7280; font-weight: 800; }
    
    .card-modern { border-radius: 16px; border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
    
    .table-container { border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; }
    .table-teal th { 
        background-color: var(--arn-teal) !important; 
        color: #ffffff !important; 
        font-size: 0.85rem; 
        font-weight: 800; 
        padding: 16px 24px; 
        border: none; 
    }
    .table-teal td { padding: 16px 24px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
</style>

<div class="content-inner p-4 p-md-5">
    {{-- Header --}}
    <div class="mb-5">
        <h1 class="text-massive mb-2" style="font-size: 2.5rem; color: var(--arn-dark);">Daftar Tugas</h1>
        <div class="label-mono" style="color: var(--arn-teal);">Manajemen penugasan akademik</div>
    </div>

    {{-- Kartu Statistik (Menggunakan data $stats dari Controller) --}}
    <div class="row g-4 mb-5">
        <div class="col-6 col-md-3">
            <div class="card-modern p-4 h-100 text-start" style="border-top: 5px solid var(--arn-dark);">
                <div class="text-massive mb-3" style="color: var(--arn-dark);">{{ $stats->total }}</div>
                <div class="label-mono">Total tugas</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card-modern p-4 h-100 text-start" style="border-top: 5px solid #0d9488;">
                <div class="text-massive mb-3" style="color: #0d9488;">{{ $stats->belum }}</div>
                <div class="label-mono">Belum dikumpul</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card-modern p-4 h-100 text-start" style="border-top: 5px solid #ef4444;">
                <div class="text-massive mb-3" style="color: #ef4444;">{{ $stats->sudah }}</div>
                <div class="label-mono">Sudah dikumpul</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card-modern p-4 h-100 text-start" style="border-top: 5px solid #f59e0b;">
                <div class="text-massive mb-3" style="color: #f59e0b;">{{ $stats->dinilai }}</div>
                <div class="label-mono">Sudah dinilai</div>
            </div>
        </div>
    </div>

    {{-- Filter Pencarian Berdasarkan Mata Kuliah & Status --}}
    @php
        // Ambil mata kuliah unik yang ada di list tugas mahasiswa tersebut
        $listMatkul = \App\Models\MataKuliah::orderBy('nama', 'asc')->get(); 
    @endphp

    <div class="card-modern p-4 mb-5 border-0 shadow-sm" style="background: #f8fafc;">
        <form method="GET" action="{{ url()->current() }}" class="row g-3 align-items-end">
            <div class="col-md-5">
                <label class="label-mono mb-2 text-dark">Mata kuliah</label>
                <select name="mata_kuliah_id" class="form-select fw-bold border-0 shadow-sm" style="height: 50px; border-radius: 12px; background: #fff;">
                    <option value="">Semua mata kuliah</option>
                    @foreach($listMatkul as $mk)
                        <option value="{{ $mk->id }}" {{ request('mata_kuliah_id') == $mk->id ? 'selected' : '' }}>
                            {{ $mk->nama }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="label-mono mb-2 text-dark">Status pengerjaan</label>
                <select name="status" class="form-select fw-bold border-0 shadow-sm" style="height: 50px; border-radius: 12px; background: #fff;">
                    <option value="">Semua status</option>
                    <option value="belum" {{ request('status') == 'belum' ? 'selected' : '' }}>Belum dikumpul</option>
                    <option value="sudah" {{ request('status') == 'sudah' ? 'selected' : '' }}>Sudah dikumpul</option>
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button type="submit" class="btn text-white fw-900 shadow-sm flex-grow-1" style="background: var(--arn-teal); height: 50px; border-radius: 12px; letter-spacing: 0.5px;">
                    Cari data
                </button>
                @if(request()->hasAny(['mata_kuliah_id','status']))
                <a href="{{ url()->current() }}" class="btn fw-900 shadow-sm px-4 d-flex align-items-center justify-content-center" style="background: #fff; border: 1px solid #e5e7eb; color: var(--arn-dark); height: 50px; border-radius: 12px; letter-spacing: 0.5px; text-decoration: none;">
                    Reset
                </a>
                @endif
            </div>
        </form>
    </div>

    {{-- Tabel Tugas --}}
    <div class="table-container shadow-sm mb-4">
        <div class="table-responsive">
            <table class="table table-teal mb-0">
                <thead>
                    <tr>
                        <th class="ps-4">Tugas & mata kuliah</th>
                        <th>Tenggat waktu</th>
                        <th>Status validasi</th>
                        <th class="text-center">Nilai akhir</th>
                        <th class="pe-4 text-end">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tugasList ?? [] as $tugas)
                    @php
                        // Menggunakan pengumpulan_saya yang di-inject dari Controller
                        $pengumpulan = $tugas->pengumpulan_saya ?? null;
                        $isDeadlinePassed = \Carbon\Carbon::now()->isAfter($tugas->deadline);
                        
                        if ($pengumpulan) {
                            $statusText = 'Sudah dikumpul'; $bg = '#f0fdfa'; $clr = '#0d9488';
                        } elseif ($isDeadlinePassed) {
                            $statusText = 'Terlambat (ditutup)'; $bg = '#fef2f2'; $clr = '#ef4444';
                        } else {
                            $statusText = 'Belum dikerjakan'; $bg = '#fffbeb'; $clr = '#d97706';
                        }
                    @endphp
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex align-items-center gap-3">
                                <div style="width: 44px; height: 44px; border-radius: 12px; background: var(--arn-teal); color: white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; flex-shrink: 0;">
                                    {{ strtoupper(substr($tugas->mataKuliah->nama ?? 'T', 0, 2)) }}
                                </div>
                                <div>
                                    <div class="fw-900 text-dark" style="font-size: 0.95rem;">{{ $tugas->judul }}</div>
                                    <div class="label-mono mt-1" style="font-size: 0.65rem;">{{ $tugas->mataKuliah->nama ?? '-' }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="fw-900 text-dark" style="font-size: 0.9rem;">{{ \Carbon\Carbon::parse($tugas->deadline)->format('d/m/Y') }}</div>
                            <div class="fw-bold mt-1" style="font-size: 0.75rem; color: {{ $isDeadlinePassed && !$pengumpulan ? '#ef4444' : '#64748b' }};">
                                pukul {{ \Carbon\Carbon::parse($tugas->deadline)->format('H:i') }} wib
                            </div>
                        </td>
                        <td>
                            <span class="px-3 py-1 fw-900" style="font-size: 0.7rem; border-radius: 6px; background: {{ $bg }}; color: {{ $clr }}; border: 1px solid {{ $clr }};">
                                {{ $statusText }}
                            </span>
                        </td>
                        <td class="text-center">
                            @if($pengumpulan && $pengumpulan->nilai !== null)
                                <div class="fw-900" style="font-size: 1.5rem; color: {{ $pengumpulan->nilai >= 75 ? '#10b981' : '#ef4444' }};">
                                    {{ $pengumpulan->nilai }}
                                </div>
                            @else
                                <div class="label-mono" style="color: #cbd5e1; font-size: 1.2rem;">-</div>
                            @endif
                        </td>
                        <td class="pe-4 text-end">
                            <a href="{{ route('mahasiswa.tugas.show', $tugas->id) }}" class="btn fw-900" style="background: {{ ($pengumpulan || $isDeadlinePassed) ? '#f8fafc' : 'var(--arn-teal)' }}; color: {{ ($pengumpulan || $isDeadlinePassed) ? 'var(--arn-dark)' : 'white' }}; border: 1px solid {{ ($pengumpulan || $isDeadlinePassed) ? '#cbd5e1' : 'var(--arn-teal)' }}; font-size: 0.75rem; border-radius: 8px; padding: 10px 20px; text-decoration: none; display: inline-block;">
                                {{ ($pengumpulan || $isDeadlinePassed) ? 'Lihat detail' : 'Kerjakan tugas' }}
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-5">
                            <h2 class="text-massive" style="color: #e5e7eb; font-size: 3rem;">Kosong</h2>
                            <p class="text-muted fw-bold mt-2 mb-0">Tidak ada tugas yang ditemukan.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    @if(isset($tugasList) && $tugasList->hasPages())
    <div class="d-flex justify-content-center mt-4">
        {{ $tugasList->appends(request()->query())->links() }}
    </div>
    @endif
</div>
@endsection