@extends('layouts.portal')

@section('title', 'Dashboard Pegawai')

@section('content')
<div class="space-y-6">

    <!-- 1. Banner Sambutan & Profil Pegawai -->
    <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-slate-900 via-orange-950 to-primary-900 text-white p-6 sm:p-8 shadow-xl">
        <!-- Background Accents -->
        <div class="absolute -right-10 -bottom-10 w-64 h-64 bg-primary-500/10 rounded-full blur-2xl pointer-events-none"></div>

        <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div class="flex items-center gap-4 sm:gap-5">
                @if($pegawai->foto_profil)
                    <img src="{{ asset('storage/' . $pegawai->foto_profil) }}" alt="{{ $pegawai->nama_lengkap }}" class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl object-cover ring-4 ring-white/10 shadow-lg">
                @else
                    <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl bg-gradient-to-tr from-primary-600 to-amber-500 text-white font-extrabold text-2xl flex items-center justify-center ring-4 ring-white/10 shadow-lg">
                        {{ strtoupper(substr($pegawai->nama_lengkap, 0, 2)) }}
                    </div>
                @endif
                <div>
                    <div class="flex items-center gap-2 mb-1 flex-wrap">
                        <span class="text-xs font-bold uppercase tracking-wider px-2.5 py-0.5 rounded-full {{ $isAtasan ? 'bg-amber-500/20 text-amber-300 border border-amber-500/30' : 'bg-primary-500/20 text-primary-300 border border-primary-500/30' }}">
                            {{ $isAtasan ? 'Atasan / Supervisor' : 'Staff / Pelaksana' }}
                        </span>
                        <span class="text-xs text-slate-300">NIP: {{ $pegawai->nip }}</span>
                    </div>
                    <h1 class="text-xl sm:text-2xl font-black text-white tracking-tight">
                        Halo, {{ $pegawai->nama_lengkap }}! 👋
                    </h1>
                    <p class="text-xs sm:text-sm text-slate-200 mt-1 font-medium">
                        {{ $pegawai->jabatan?->nama_jabatan ?? 'Pegawai' }} • {{ $pegawai->departemen?->nama_departemen ?? 'Umum' }}
                        @if($pegawai->divisi) • Divisi {{ $pegawai->divisi->nama_divisi }} @endif
                    </p>
                </div>
            </div>

            <!-- Action Quick Link -->
            <div class="flex items-center gap-3">
                @if($isAtasan)
                <a href="{{ route('portal.penugasan.create') }}" 
                   class="px-4 py-2.5 rounded-xl bg-gradient-to-r from-primary-600 to-amber-600 hover:from-primary-500 hover:to-amber-500 text-white text-sm font-bold shadow-lg shadow-primary-600/30 transition-all flex items-center gap-2 hover:scale-105 active:scale-95">
                    <i data-lucide="plus-circle" class="w-4 h-4"></i>
                    Buat Tugas Baru
                </a>
                @endif
                <a href="{{ route('portal.penugasan.index', ['tab' => 'saya']) }}" 
                   class="px-4 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-white text-sm font-bold border border-white/10 transition-all flex items-center gap-2">
                    <i data-lucide="inbox" class="w-4 h-4"></i>
                    Lihat Semua Tugas
                </a>
            </div>
        </div>
    </div>

    <!-- 2. Kartu Metrik Statistik Tugas Saya -->
    <div>
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-sm font-bold uppercase tracking-wider text-slate-500 flex items-center gap-2">
                <i data-lucide="bar-chart-2" class="w-4 h-4"></i>
                Statistik Penugasan Saya
            </h2>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            
            <!-- Card 1: Total Tugas Diterima -->
            <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Total Tugas</span>
                    <div class="w-9 h-9 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center">
                        <i data-lucide="briefcase" class="w-5 h-5"></i>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="text-2xl font-black text-slate-900">{{ $statsTugasSaya['total'] }}</div>
                    <div class="text-xs text-slate-500 mt-0.5">Semua penugasan untuk Anda</div>
                </div>
            </div>

            <!-- Card 2: Sedang Berjalan -->
            <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Sedang Berjalan</span>
                    <div class="w-9 h-9 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
                        <i data-lucide="clock" class="w-5 h-5"></i>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="text-2xl font-black text-blue-600">{{ $statsTugasSaya['berjalan'] }}</div>
                    <div class="text-xs text-slate-500 mt-0.5">Tugas aktif dalam pengerjaan</div>
                </div>
            </div>

            <!-- Card 3: Menunggu Review -->
            <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Menunggu Review</span>
                    <div class="w-9 h-9 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center">
                        <i data-lucide="hourglass" class="w-5 h-5"></i>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="text-2xl font-black text-amber-600">{{ $statsTugasSaya['menunggu_review'] }}</div>
                    <div class="text-xs text-slate-500 mt-0.5">Sudah diajukan ke atasan</div>
                </div>
            </div>

            <!-- Card 4: Selesai -->
            <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Selesai</span>
                    <div class="w-9 h-9 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
                        <i data-lucide="check-circle-2" class="w-5 h-5"></i>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="text-2xl font-black text-emerald-600">{{ $statsTugasSaya['selesai'] }}</div>
                    <div class="text-xs text-slate-500 mt-0.5">Telah disetujui atasan</div>
                </div>
            </div>

        </div>
    </div>

    <!-- 3. Khusus Atasan: Section Tugas Tim & Yang Menunggu Review -->
    @if($isAtasan)
    <div class="p-6 rounded-2xl bg-gradient-to-br from-orange-50/50 to-slate-50 border border-orange-100/80 space-y-4">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-orange-100 pb-3">
            <div>
                <h3 class="text-base font-extrabold text-slate-900 flex items-center gap-2">
                    <i data-lucide="users" class="w-5 h-5 text-primary-600"></i>
                    Manajemen Tim & Penugasan Bawahan
                </h3>
                <p class="text-xs text-slate-600 font-medium mt-0.5">
                    Anda memimpin {{ $statsTugasTim['total_bawahan'] }} bawahan langsung. Delegasikan tugas dan pantau penyelesaian pekerjaan tim.
                </p>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('portal.penugasan.index', ['tab' => 'tim']) }}" class="text-xs font-bold text-primary-600 hover:text-primary-700 flex items-center gap-1">
                    Lihat Semua Tugas Tim &rarr;
                </a>
            </div>
        </div>

        <!-- Kartu Ringkasan Tim -->
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm text-center">
                <div class="text-xs text-slate-500 font-bold uppercase">Total Tugas Diberikan</div>
                <div class="text-xl font-black text-slate-900 mt-1">{{ $statsTugasTim['total'] }}</div>
            </div>
            <div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm text-center">
                <div class="text-xs text-blue-600 font-bold uppercase">Sedang Dikerjakan Tim</div>
                <div class="text-xl font-black text-blue-600 mt-1">{{ $statsTugasTim['berjalan'] }}</div>
            </div>
            <div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm text-center {{ $statsTugasTim['menunggu_review'] > 0 ? 'ring-2 ring-amber-400 bg-amber-50/50' : '' }}">
                <div class="text-xs text-amber-600 font-bold uppercase">Perlu Anda Review</div>
                <div class="text-xl font-black text-amber-600 mt-1">{{ $statsTugasTim['menunggu_review'] }}</div>
            </div>
            <div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm text-center">
                <div class="text-xs text-emerald-600 font-bold uppercase">Tugas Tim Selesai</div>
                <div class="text-xl font-black text-emerald-600 mt-1">{{ $statsTugasTim['selesai'] }}</div>
            </div>
        </div>

        <!-- Tugas Menunggu Review Atasan (Jika Ada) -->
        @if($tugasButuhReview->isNotEmpty())
        <div class="bg-white rounded-xl border border-amber-200 p-4 shadow-sm mt-4">
            <div class="flex items-center gap-2 text-xs font-bold text-amber-800 uppercase tracking-wider mb-3">
                <i data-lucide="bell" class="w-4 h-4 text-amber-600"></i>
                Tugas Yang Membutuhkan Evaluasi & Persetujuan Anda:
            </div>
            <div class="divide-y divide-slate-100">
                @foreach($tugasButuhReview as $item)
                <div class="py-2.5 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <div class="space-y-0.5">
                        <div class="flex items-center gap-2">
                            <span class="text-xs font-mono font-bold text-slate-500">{{ $item->kode_penugasan }}</span>
                            <span class="text-sm font-bold text-slate-900 hover:text-primary-600 transition-colors">{{ $item->judul }}</span>
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded-full" style="background-color: {{ $item->badge_prioritas['bg'] }}; color: {{ $item->badge_prioritas['text'] }}; border: 1px solid {{ $item->badge_prioritas['border'] }};">
                                {{ $item->badge_prioritas['label'] }}
                            </span>
                        </div>
                        <div class="text-xs text-slate-500">
                            Anggota: {{ $item->pegawais->pluck('nama_lengkap')->join(', ') }}
                        </div>
                    </div>
                    <a href="{{ route('portal.penugasan.show', $item->id) }}" 
                       class="px-3 py-1.5 rounded-lg bg-amber-500 hover:bg-amber-600 text-white text-xs font-bold shadow-sm transition-colors flex items-center justify-center gap-1.5 self-start sm:self-auto">
                        <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                        Periksa & Review
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>

    <!-- 3.1 Khusus Atasan: Monitoring Presensi Pegawai Bawahan Hari Ini -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-6 space-y-5">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-100 pb-4">
            <div>
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                    <span class="text-xs font-bold uppercase tracking-wider text-primary-600">Supervisi Kehadiran Realtime</span>
                </div>
                <h3 class="text-base font-extrabold text-slate-900 flex items-center gap-2 mt-0.5">
                    <i data-lucide="calendar-check" class="w-5 h-5 text-primary-600"></i>
                    <span>Kehadiran Pegawai Bawahan Hari Ini</span>
                </h3>
                <p class="text-xs text-slate-500 mt-0.5">
                    {{ $statsAbsensiBawahan['tanggal_label'] ?? \Carbon\Carbon::today()->translatedFormat('l, d F Y') }} &bull; Total {{ $statsAbsensiBawahan['total_bawahan'] ?? 0 }} Pegawai Bawahan
                </p>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('portal.absensi-bawahan.index') }}" 
                   class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-primary-50 hover:bg-primary-100 text-primary-700 text-xs font-bold transition-all border border-primary-200/60">
                    <i data-lucide="clipboard-list" class="w-3.5 h-3.5"></i>
                    <span>Buka Laporan Absensi Lengkap</span>
                    <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>
        </div>

        <!-- Kartu Metrik Kehadiran Hari Ini -->
        <div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
            <div class="bg-slate-50 p-3 rounded-xl border border-slate-200/60 text-center">
                <div class="text-[11px] text-slate-500 font-bold uppercase">Total Bawahan</div>
                <div class="text-xl font-black text-slate-800 mt-1">{{ $statsAbsensiBawahan['total_bawahan'] ?? 0 }}</div>
            </div>
            <div class="bg-emerald-50/70 p-3 rounded-xl border border-emerald-100 text-center">
                <div class="text-[11px] text-emerald-700 font-bold uppercase">Hadir Tepat Waktu</div>
                <div class="text-xl font-black text-emerald-700 mt-1">{{ $statsAbsensiBawahan['tepat_waktu'] ?? 0 }}</div>
            </div>
            <div class="bg-amber-50/70 p-3 rounded-xl border border-amber-100 text-center">
                <div class="text-[11px] text-amber-700 font-bold uppercase">Terlambat Masuk</div>
                <div class="text-xl font-black text-amber-700 mt-1">{{ $statsAbsensiBawahan['terlambat'] ?? 0 }}</div>
            </div>
            <div class="bg-blue-50/70 p-3 rounded-xl border border-blue-100 text-center">
                <div class="text-[11px] text-blue-700 font-bold uppercase">Izin / Sakit / Dinas</div>
                <div class="text-xl font-black text-blue-700 mt-1">{{ $statsAbsensiBawahan['izin_sakit'] ?? 0 }}</div>
            </div>
            <div class="bg-slate-100/70 p-3 rounded-xl border border-slate-200 text-center col-span-2 sm:col-span-1">
                <div class="text-[11px] text-slate-600 font-bold uppercase">Belum Absen</div>
                <div class="text-xl font-black text-slate-700 mt-1">{{ $statsAbsensiBawahan['belum_absen'] ?? 0 }}</div>
            </div>
        </div>

        <!-- Tabel Status Bawahan Hari Ini -->
        @if($monitoringAbsensiBawahan->isNotEmpty())
        <div class="border border-slate-200 rounded-xl overflow-hidden shadow-xs">
            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead>
                        <tr class="bg-slate-50 text-slate-500 font-bold uppercase tracking-wider border-b border-slate-200">
                            <th class="px-4 py-3">Pegawai Bawahan</th>
                            <th class="px-4 py-3">Jam Masuk</th>
                            <th class="px-4 py-3">Jam Pulang</th>
                            <th class="px-4 py-3">Status Kedatangan</th>
                            <th class="px-4 py-3 text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach($monitoringAbsensiBawahan as $bawahanItem)
                        <tr class="hover:bg-slate-50/70 transition-colors">
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-3">
                                    @if($bawahanItem->pegawai->foto_profil)
                                        <img src="{{ asset('storage/' . $bawahanItem->pegawai->foto_profil) }}" alt="{{ $bawahanItem->pegawai->nama_lengkap }}" class="w-8 h-8 rounded-xl object-cover shrink-0 ring-1 ring-slate-200">
                                    @else
                                        <div class="w-8 h-8 rounded-xl bg-orange-100 text-primary-700 font-bold text-xs flex items-center justify-center shrink-0">
                                            {{ strtoupper(substr($bawahanItem->pegawai->nama_lengkap, 0, 2)) }}
                                        </div>
                                    @endif
                                    <div>
                                        <div class="font-bold text-slate-900">{{ $bawahanItem->pegawai->nama_lengkap }}</div>
                                        <div class="text-[11px] text-slate-400 font-mono">{{ $bawahanItem->pegawai->nip }} &bull; {{ $bawahanItem->pegawai->jabatan?->nama_jabatan ?? 'Pegawai' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                @if($bawahanItem->jam_masuk)
                                    <span class="font-mono font-bold text-slate-900 text-xs">{{ substr($bawahanItem->jam_masuk, 0, 5) }} WIB</span>
                                @else
                                    <span class="text-slate-400 font-mono">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                @if($bawahanItem->jam_pulang)
                                    <span class="font-mono font-bold text-slate-900 text-xs">{{ substr($bawahanItem->jam_pulang, 0, 5) }} WIB</span>
                                @else
                                    <span class="text-slate-400 font-mono">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                @if(!$bawahanItem->sudah_absen)
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-slate-100 text-slate-600">
                                        <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
                                        Belum Absen Masuk
                                    </span>
                                @elseif($bawahanItem->status_masuk === 'terlambat')
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-amber-100 text-amber-800">
                                        <i data-lucide="clock" class="w-3 h-3 text-amber-600"></i>
                                        Terlambat ({{ $bawahanItem->menit_terlambat }} mnt)
                                    </span>
                                @elseif($bawahanItem->status_kehadiran === 'hadir')
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-emerald-100 text-emerald-800">
                                        <i data-lucide="check" class="w-3 h-3 text-emerald-600"></i>
                                        Hadir Tepat Waktu
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-blue-100 text-blue-800">
                                        {{ ucfirst($bawahanItem->status_kehadiran) }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-right">
                                <a href="{{ route('portal.absensi-bawahan.index', ['pegawai_id' => $bawahanItem->pegawai->id]) }}" 
                                   class="text-xs font-semibold text-primary-600 hover:text-primary-700 hover:underline inline-flex items-center gap-1">
                                    <span>Riwayat</span>
                                    <i data-lucide="chevron-right" class="w-3 h-3"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </div>
    @endif

    <!-- 4. Daftar Tugas Aktif Saya -->
    <div class="space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-base font-extrabold text-slate-900 flex items-center gap-2">
                    <i data-lucide="layers" class="w-5 h-5 text-primary-600"></i>
                    Tugas Aktif yang Perlu Dikerjakan
                </h2>
                <p class="text-xs text-slate-500">Daftar penugasan aktif dari atasan Anda</p>
            </div>
            <a href="{{ route('portal.penugasan.index', ['tab' => 'saya']) }}" class="text-xs font-bold text-primary-600 hover:text-primary-700">
                Lihat Semua &rarr;
            </a>
        </div>

        @if($tugasTerbaru->isEmpty())
        <div class="p-8 text-center bg-white rounded-2xl border border-slate-200">
            <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center mx-auto mb-3">
                <i data-lucide="check-circle" class="w-6 h-6"></i>
            </div>
            <h3 class="text-sm font-bold text-slate-900">Tidak ada tugas aktif</h3>
            <p class="text-xs text-slate-500 mt-1">Seluruh penugasan Anda telah selesai atau belum ada tugas baru dari atasan.</p>
        </div>
        @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($tugasTerbaru as $tugas)
            <div class="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-sm hover:shadow-md transition-all flex flex-col justify-between group">
                <div>
                    <!-- Header Kartu: Status & Prioritas -->
                    <div class="flex items-center justify-between gap-2 mb-3">
                        <span class="text-xs font-mono font-bold text-slate-400">{{ $tugas->kode_penugasan }}</span>
                        <div class="flex items-center gap-1.5">
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded-full" style="background-color: {{ $tugas->badge_prioritas['bg'] }}; color: {{ $tugas->badge_prioritas['text'] }}; border: 1px solid {{ $tugas->badge_prioritas['border'] }};">
                                {{ $tugas->badge_prioritas['label'] }}
                            </span>
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded-full" style="background-color: {{ $tugas->badge_status['bg'] }}; color: {{ $tugas->badge_status['text'] }}; border: 1px solid {{ $tugas->badge_status['border'] }};">
                                {{ $tugas->badge_status['label'] }}
                            </span>
                        </div>
                    </div>

                    <!-- Judul Tugas -->
                    <h3 class="text-base font-extrabold text-slate-900 group-hover:text-primary-600 transition-colors line-clamp-2 mb-2">
                        {{ $tugas->judul }}
                    </h3>

                    <!-- Deskripsi ringkas -->
                    <p class="text-xs text-slate-500 line-clamp-2 font-medium mb-4">
                        {{ $tugas->deskripsi ?: 'Tidak ada instruksi khusus.' }}
                    </p>
                </div>

                <div class="pt-4 border-t border-slate-100 space-y-3">
                    <!-- Media Badge & Atasan -->
                    <div class="flex items-center justify-between text-xs text-slate-500 font-medium">
                        <span class="flex items-center gap-1.5 px-2 py-0.5 rounded-md font-bold text-[11px]
                            @if($tugas->tipe_media === 'spreadsheet')
                                text-emerald-700 bg-emerald-50
                            @elseif($tugas->tipe_media === 'dokumen_online')
                                text-blue-700 bg-blue-50
                            @else
                                text-primary-700 bg-primary-50
                            @endif">
                            @if($tugas->tipe_media === 'spreadsheet')
                                <i data-lucide="sheet" class="w-3.5 h-3.5 text-emerald-600"></i>
                                Spreadsheet
                            @elseif($tugas->tipe_media === 'dokumen_online')
                                <i data-lucide="file-edit" class="w-3.5 h-3.5 text-blue-600"></i>
                                Google Docs
                            @else
                                <i data-lucide="file-text" class="w-3.5 h-3.5 text-primary-600"></i>
                                Upload Dokumen
                            @endif
                        </span>

                        <span class="text-[11px] text-slate-400">
                            Oleh: <strong class="text-slate-600">{{ $tugas->atasan?->nama_lengkap ?? 'Atasan' }}</strong>
                        </span>
                    </div>

                    <!-- Deadline & Action Button -->
                    <div class="flex items-center justify-between gap-2 pt-1">
                        <div class="text-[11px] text-slate-500 flex items-center gap-1">
                            <i data-lucide="calendar" class="w-3.5 h-3.5 text-slate-400"></i>
                            @if($tugas->tenggat_waktu)
                                <span>Batas: {{ $tugas->tenggat_waktu->format('d M, H:i') }}</span>
                            @else
                                <span>Fleksibel</span>
                            @endif
                        </div>

                        <a href="{{ route('portal.penugasan.show', $tugas->id) }}" 
                           class="px-3 py-1.5 rounded-xl bg-slate-900 hover:bg-primary-600 text-white text-xs font-bold transition-all flex items-center gap-1">
                            <span>Buka Tugas</span>
                            <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>

</div>
@endsection