@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto px-4 py-8">
    
    <div class="flex items-center space-x-4 mb-6">
        <a href="{{ route('admin.dashboard', ['month' => $selectedMonth, 'year' => $selectedYear]) }}" class="p-2 bg-slate-100 text-slate-500 rounded-xl hover:bg-slate-200 transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-slate-800">Detail Pemenuhan: Dept. {{ $department->name }}</h1>
            <p class="text-sm text-slate-500">
                Data penugasan training periode <span class="font-bold text-slate-700">{{ date('F', mktime(0, 0, 0, $selectedMonth, 1)) }} {{ $selectedYear }}</span>
            </p>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm text-slate-600">
                <thead class="bg-slate-50 border-b border-slate-200 text-slate-500 uppercase text-[11px] tracking-wider">
                    <tr>
                        <th class="px-6 py-4 font-bold">Karyawan</th>
                        <th class="px-6 py-4 font-bold">Modul / SOP</th>
                        <th class="px-6 py-4 font-bold">Tanggal Ditugaskan</th>
                        <th class="px-6 py-4 font-bold">Batas Waktu (Deadline)</th>
                        <th class="px-6 py-4 font-bold text-center">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($assignments as $assign)
                        @php
                            $isOverdue = $assign->status !== 'passed' && \Carbon\Carbon::parse($assign->deadline_date)->isPast();
                        @endphp
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4">
                                <div class="font-bold text-slate-800">{{ $assign->first_name }} {{ $assign->last_name }}</div>
                                <div class="text-xs text-slate-400 mt-1">NIK: {{ $assign->nik ?? '-' }}</div>
                            </td>
                            <td class="px-6 py-4 font-medium text-slate-700">
                                {{ $assign->title }}
                            </td>
                            <td class="px-6 py-4 text-slate-500">
                                {{ \Carbon\Carbon::parse($assign->created_at)->format('d M Y') }}
                            </td>
                            <td class="px-6 py-4">
                                <span class="{{ $isOverdue ? 'text-red-500 font-bold' : 'text-slate-500' }}">
                                    {{ \Carbon\Carbon::parse($assign->deadline_date)->format('d M Y, H:i') }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                @if($assign->status === 'passed')
                                    <span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-lg text-[11px] font-bold border border-emerald-200">LULUS</span>
                                @elseif($isOverdue)
                                    <span class="px-2.5 py-1 bg-red-100 text-red-700 rounded-lg text-[11px] font-bold border border-red-200 animate-pulse">OVERDUE</span>
                                @elseif($assign->status === 'ongoing')
                                    <span class="px-2.5 py-1 bg-blue-100 text-blue-700 rounded-lg text-[11px] font-bold border border-blue-200">DIKERJAKAN</span>
                                @else
                                    <span class="px-2.5 py-1 bg-amber-100 text-amber-700 rounded-lg text-[11px] font-bold border border-amber-200">PENDING</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-10 text-center text-slate-500">
                                <div class="flex flex-col items-center justify-center">
                                    <svg class="w-12 h-12 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
                                    Tidak ada riwayat penugasan untuk departemen ini di bulan yang dipilih.
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <div class="p-4 bg-slate-50 border-t border-slate-100">
            {{ $assignments->appends(request()->query())->links() }}
        </div>
    </div>
</div>
@endsection