@extends('layouts.app')

@section('title', 'Daftar Pegawai')
@section('subtitle', 'Kelola data pegawai dan monitoring pensiun')

@section('breadcrumb')
    <li class="flex items-center">
        <i class="fas fa-chevron-right text-xs text-secondary-400 mx-2"></i>
        <span class="text-sm font-medium text-secondary-700">Pegawai</span>
    </li>
@endsection

@section('actions')
    <a href="{{ route('employees.create') }}" class="px-5 py-2.5 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-xl shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 transition-all flex items-center">
        <i class="fas fa-plus mr-2"></i>
        Tambah Pegawai
    </a>
@endsection

@section('content')
<!-- Filter & Search -->
<div class="glass-card rounded-2xl p-5 mb-6">
    <form action="{{ route('employees.index') }}" method="GET" class="flex flex-wrap items-end gap-4">
        <div class="flex-1 min-w-[200px]">
            <label class="block text-xs font-medium text-secondary-500 mb-2">Cari Pegawai</label>
            <div class="relative">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-secondary-400"></i>
                <input type="text" name="search" value="{{ request('search') }}"
                       placeholder="Nama, NIP, atau Email..."
                       class="w-full pl-10 pr-4 py-2.5 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all">
            </div>
        </div>

        <div class="w-48">
            <label class="block text-xs font-medium text-secondary-500 mb-2">Departemen</label>
            <select name="department_id" class="w-full px-4 py-2.5 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all">
                <option value="">Semua Departemen</option>
                @foreach($departments as $dept)
                    <option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>
                        {{ $dept->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="w-40">
            <label class="block text-xs font-medium text-secondary-500 mb-2">Status</label>
            <select name="status" class="w-full px-4 py-2.5 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all">
                <option value="">Semua Status</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Aktif</option>
                <option value="retiring" {{ request('status') == 'retiring' ? 'selected' : '' }}>Akan Pensiun</option>
                <option value="retired" {{ request('status') == 'retired' ? 'selected' : '' }}>Sudah Pensiun</option>
                <option value="extended" {{ request('status') == 'extended' ? 'selected' : '' }}>Diperpanjang</option>
            </select>
        </div>

        <div class="flex space-x-2">
            <button type="submit" class="px-5 py-2.5 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-xl transition-all shadow-lg shadow-primary-500/20">
                <i class="fas fa-filter mr-2"></i>Filter
            </button>
            <a href="{{ route('employees.index') }}" class="px-5 py-2.5 bg-white hover:bg-secondary-50 text-secondary-600 font-medium rounded-xl border border-secondary-200 transition-all">
                <i class="fas fa-undo"></i>
            </a>
        </div>
    </form>
</div>

<!-- Table -->
<div class="glass-card rounded-2xl overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-secondary-50/80">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Pegawai</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Departemen</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Jabatan</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Tanggal Pensiun</th>
                    <th class="px-6 py-4 text-right text-xs font-semibold text-secondary-500 uppercase tracking-wider">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-secondary-100">
                @forelse($employees as $employee)
                    @php
                        // Calculate time until retirement
                        $timeUntilRetirement = null;
                        $timeLabel = '';

                        if ($employee->retirement_date) {
                            $now = now();
                            $retirementDate = $employee->retirement_date;

                            if ($retirementDate->isFuture()) {
                                $diffInHours = $now->diffInHours($retirementDate, false);
                                $diffInDays = $now->diffInDays($retirementDate, false);

                                if ($diffInHours < 24 && $diffInHours > 0) {
                                    // Less than 24 hours - show in hours
                                    $timeUntilRetirement = ceil($diffInHours);
                                    $timeLabel = $timeUntilRetirement . ' jam lagi';
                                } elseif ($diffInDays > 0) {
                                    // More than 24 hours - show in days
                                    $timeUntilRetirement = ceil($diffInDays);
                                    $timeLabel = $timeUntilRetirement . ' hari lagi';
                                }
                            } elseif ($retirementDate->isPast()) {
                                $timeLabel = 'Sudah pensiun';
                            } else {
                                $timeLabel = 'Hari ini';
                            }
                        }

                        $statusColors = [
                            'active' => ['bg' => 'bg-emerald-100', 'text' => 'text-emerald-800', 'dot' => 'bg-emerald-500', 'label' => 'Aktif'],
                            'retiring' => ['bg' => 'bg-amber-100', 'text' => 'text-amber-800', 'dot' => 'bg-amber-500', 'label' => 'Akan Pensiun'],
                            'retired' => ['bg' => 'bg-gray-100', 'text' => 'text-gray-800', 'dot' => 'bg-gray-500', 'label' => 'Pensiun'],
                            'extended' => ['bg' => 'bg-purple-100', 'text' => 'text-purple-800', 'dot' => 'bg-purple-500', 'label' => 'Diperpanjang'],
                        ];
                        $statusStyle = $statusColors[$employee->status] ?? $statusColors['active'];
                    @endphp
                    <tr class="hover:bg-white/60 transition-colors group">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 text-white flex items-center justify-center font-bold text-sm shadow-lg">
                                    {{ substr($employee->name, 0, 2) }}
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-semibold text-secondary-800 group-hover:text-primary-600 transition-colors">{{ $employee->name }}</p>
                                    <p class="text-xs text-secondary-500">{{ $employee->nip }} • {{ $employee->email }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-primary-50 text-primary-700">
                                <i class="fas fa-building mr-1.5"></i>
                                {{ $employee->department->name }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-sm text-secondary-700">{{ $employee->position }}</p>
                            <p class="text-xs text-secondary-500 capitalize">{{ str_replace('_', ' ', $employee->employment_status) }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium {{ $statusStyle['bg'] }} {{ $statusStyle['text'] }}">
                                <span class="w-1.5 h-1.5 rounded-full {{ $statusStyle['dot'] }} mr-2 animate-pulse"></span>
                                {{ $statusStyle['label'] }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            @if($employee->retirement_date)
                                <div class="flex items-center text-sm text-secondary-700">
                                    <i class="far fa-calendar-alt mr-2 text-secondary-400"></i>
                                    {{ $employee->retirement_date->format('d M Y') }}
                                </div>
                                @if($timeLabel)
                                    <p class="text-xs mt-1 font-medium {{ $retirementDate->isPast() ? 'text-gray-500' : ($diffInHours < 24 ? 'text-rose-600' : 'text-amber-600') }}">
                                        <i class="far fa-clock mr-1"></i>
                                        {{ $timeLabel }}
                                    </p>
                                @endif
                            @else
                                <span class="text-xs text-secondary-400">-</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                <a href="{{ route('employees.show', $employee) }}" class="p-2 text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="Detail">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('employees.edit', $employee) }}" class="p-2 text-amber-600 hover:bg-amber-50 rounded-lg transition-colors" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('employees.destroy', $employee) }}" method="POST" class="inline" onsubmit="return confirmDelete('Apakah Anda yakin ingin menghapus pegawai {{ $employee->name }}?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 text-rose-600 hover:bg-rose-50 rounded-lg transition-colors" title="Hapus">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-16 text-center">
                            <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-secondary-100 flex items-center justify-center">
                                <i class="fas fa-search text-secondary-400 text-3xl"></i>
                            </div>
                            <p class="text-lg font-medium text-secondary-700">Tidak ada data pegawai</p>
                            <p class="text-sm text-secondary-500 mt-1">Coba ubah filter pencarian atau tambah pegawai baru</p>
                            <a href="{{ route('employees.create') }}" class="inline-flex items-center mt-4 px-5 py-2.5 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-xl transition-all">
                                <i class="fas fa-plus mr-2"></i>Tambah Pegawai
                            </a>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    @if($employees->hasPages())
        <div class="px-6 py-4 border-t border-secondary-100 bg-secondary-50/30">
            {{ $employees->links() }}
        </div>
    @endif
</div>
@endsection