@extends('layouts.app')

@section('title', 'Detail Pegawai')
@section('subtitle', 'Informasi lengkap dan timeline akses')

@section('breadcrumb')
    <li class="flex items-center">
        <i class="fas fa-chevron-right text-xs text-secondary-400 mx-2"></i>
        <a href="{{ route('employees.index') }}" class="text-sm font-medium text-secondary-500 hover:text-primary-600">Pegawai</a>
    </li>
    <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">Detail</span>
    </li>
@endsection

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

@section('content')
<!-- Profile Header -->
<div class="glass-card rounded-2xl p-6 mb-6">
    <div class="flex flex-col md:flex-row items-start md:items-center">
        <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-400 to-primary-600 text-white flex items-center justify-center text-3xl font-bold shadow-lg">
            {{ substr($employee->name, 0, 2) }}
        </div>
        <div class="mt-4 md:mt-0 md:ml-6 flex-1">
            <div class="flex flex-col md:flex-row md:items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-secondary-800">{{ $employee->name }}</h1>
                    <p class="text-secondary-500">{{ $employee->nip }} • {{ $employee->position }}</p>
                </div>
                <div class="mt-3 md:mt-0">
                    @php
                        $statusColors = [
                            'active' => 'bg-emerald-100 text-emerald-800',
                            'retiring' => 'bg-amber-100 text-amber-800',
                            'retired' => 'bg-gray-100 text-gray-800',
                            'extended' => 'bg-purple-100 text-purple-800',
                        ];
                    @endphp
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium {{ $statusColors[$employee->status] ?? 'bg-secondary-100' }}">
                        <span class="w-2 h-2 rounded-full mr-2 {{ $employee->status === 'active' ? 'bg-emerald-500' : ($employee->status === 'retiring' ? 'bg-amber-500' : 'bg-gray-500') }}"></span>
                        {{ ucfirst($employee->status) }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left: Info & Timeline -->
    <div class="lg:col-span-2 space-y-6">
        
        <!-- Personal Info -->
        <div class="glass-card rounded-2xl p-6">
            <h3 class="text-lg font-bold text-secondary-800 mb-4 flex items-center">
                <i class="fas fa-id-card text-primary-500 mr-2"></i>Informasi Pribadi
            </h3>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-xs text-secondary-500 uppercase">Email</p>
                    <p class="text-sm font-medium text-secondary-800">{{ $employee->email }}</p>
                </div>
                <div>
                    <p class="text-xs text-secondary-500 uppercase">Telepon</p>
                    <p class="text-sm font-medium text-secondary-800">{{ $employee->phone ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-xs text-secondary-500 uppercase">Departemen</p>
                    <p class="text-sm font-medium text-secondary-800">{{ $employee->department->name }}</p>
                </div>
                <div>
                    <p class="text-xs text-secondary-500 uppercase">Status Kepegawaian</p>
                    <p class="text-sm font-medium text-secondary-800 capitalize">{{ str_replace('_', ' ', $employee->employment_status) }}</p>
                </div>
                <div>
                    <p class="text-xs text-secondary-500 uppercase">Tanggal Masuk</p>
                    <p class="text-sm font-medium text-secondary-800">{{ $employee->join_date->format('d M Y') }}</p>
                </div>
                <div>
                    <p class="text-xs text-secondary-500 uppercase">Masa Kerja</p>
                    <p class="text-sm font-medium text-secondary-800">{{ $employee->join_date->diffForHumans(null, true) }}</p>
                </div>
            </div>
        </div>

        <!-- Retirement Info -->
        @if($employee->retirement_date)
        <div class="glass-card rounded-2xl p-6 border-l-4 {{ $employee->retirement_date->isPast() ? 'border-gray-400' : ($employee->retirement_date->diffInDays(now()) <= 7 ? 'border-rose-500' : 'border-amber-500') }}">
            <h3 class="text-lg font-bold text-secondary-800 mb-4 flex items-center">
                <i class="fas fa-calendar-times text-amber-500 mr-2"></i>Informasi Pensiun/Resign
            </h3>
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <p class="text-xs text-secondary-500 uppercase">Tanggal</p>
                    <p class="text-lg font-bold {{ $employee->retirement_date->isPast() ? 'text-gray-600' : ($employee->retirement_date->diffInDays(now()) <= 7 ? 'text-rose-600' : 'text-amber-600') }}">
                        {{ $employee->retirement_date->format('d M Y') }}
                    </p>
                </div>
                <div>
                    <p class="text-xs text-secondary-500 uppercase">Tipe</p>
                    <p class="text-sm font-medium text-secondary-800 capitalize">{{ str_replace('_', ' ', $employee->retirement_type) }}</p>
                </div>
            </div>
            @if($employee->retirement_document)
            <a href="{{ asset('storage/' . $employee->retirement_document) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-rose-50 text-rose-600 rounded-lg text-sm font-medium hover:bg-rose-100 transition-colors">
                <i class="fas fa-file-pdf mr-2"></i>Lihat Dokumen
            </a>
            @endif
        </div>
        @endif

        <!-- Access Timeline -->
        <div class="glass-card rounded-2xl p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-bold text-secondary-800 flex items-center">
                    <i class="fas fa-history text-primary-500 mr-2"></i>Timeline Akses
                </h3>
                <button onclick="document.getElementById('addAccessModal').classList.remove('hidden')" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium rounded-lg transition-all">
                    <i class="fas fa-plus mr-1"></i>Tambah Akses
                </button>
            </div>

            <div class="space-y-4">
                @forelse($employee->accessDetails as $access)
                    <div class="relative pl-8 pb-4 border-l-2 {{ $access->status === 'revoked' ? 'border-gray-300' : 'border-primary-300' }} last:border-0">
                        <div class="absolute -left-2.5 top-0 w-5 h-5 rounded-full {{ $access->status === 'active' ? 'bg-emerald-400' : ($access->status === 'extended' ? 'bg-amber-400' : 'bg-gray-400') }} border-2 border-white shadow-sm"></div>
                        <div class="bg-white/50 rounded-xl p-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="font-semibold text-secondary-800">{{ $access->accessCatalog->name }}</p>
                                    <p class="text-xs text-secondary-500">{{ $access->accessCatalog->code }} • {{ $access->accessCatalog->getCategoryLabelAttribute() }}</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    @if($access->status !== 'revoked')
                                        <span class="px-2 py-1 rounded-full text-xs font-medium {{ $access->daysUntilExpiry() <= 7 ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700' }}">
                                            {{ $access->daysUntilExpiry() }} hari
                                        </span>
                                        <a href="{{ route('extensions.create', $access) }}" class="p-1.5 text-amber-600 hover:bg-amber-50 rounded-lg" title="Perpanjang">
                                            <i class="fas fa-clock"></i>
                                        </a>
                                        <form action="{{ route('revocations.revoke', $access) }}" method="POST" class="inline" onsubmit="return confirm('Cabut akses ini?')">
                                            @csrf
                                            <input type="hidden" name="confirm" value="REVOKE">
                                            <button type="submit" class="p-1.5 text-rose-600 hover:bg-rose-50 rounded-lg" title="Cabut">
                                                <i class="fas fa-ban"></i>
                                            </button>
                                        </form>
                                    @else
                                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700">Revoked</span>
                                    @endif
                                </div>
                            </div>
                            <div class="mt-2 flex items-center text-xs text-secondary-500 space-x-4">
                                <span><i class="far fa-calendar-plus mr-1"></i> {{ $access->granted_date->format('d M Y') }}</span>
                                <span><i class="far fa-calendar-times mr-1"></i> {{ $access->current_expiry_date->format('d M Y') }}</span>
                                @if($access->is_extended)
                                    <span class="text-amber-600"><i class="fas fa-history mr-1"></i> Extended {{ $access->extension_count }}x</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8 text-secondary-400">
                        <i class="fas fa-inbox text-3xl mb-2"></i>
                        <p>Belum ada akses yang diberikan</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Right: Summary -->
    <div class="space-y-6">
        <div class="glass-card rounded-2xl p-6">
            <h3 class="text-lg font-bold text-secondary-800 mb-4">Ringkasan Akses</h3>
            <div class="space-y-3">
                <div class="flex items-center justify-between p-3 bg-emerald-50 rounded-lg">
                    <span class="text-sm text-emerald-700">Aktif</span>
                    <span class="font-bold text-emerald-700">{{ $employee->accessDetails->where('status', 'active')->count() }}</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-amber-50 rounded-lg">
                    <span class="text-sm text-amber-700">Extended</span>
                    <span class="font-bold text-amber-700">{{ $employee->accessDetails->where('status', 'extended')->count() }}</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <span class="text-sm text-gray-700">Revoked</span>
                    <span class="font-bold text-gray-700">{{ $employee->accessDetails->where('status', 'revoked')->count() }}</span>
                </div>
            </div>
        </div>

        <div class="glass-card rounded-2xl p-6">
            <h3 class="text-lg font-bold text-secondary-800 mb-4">Aktivitas Terbaru</h3>
            <div class="space-y-3 text-sm">
                @forelse($employee->accessDetails->flatMap->revocationLogs->sortByDesc('created_at')->take(5) as $log)
                    <div class="flex items-start space-x-3">
                        <div class="w-2 h-2 rounded-full bg-primary-400 mt-1.5"></div>
                        <div>
                            <p class="text-secondary-700">{{ $log->employeeAccessDetail->accessCatalog->name }} {{ $log->method === 'automatic' ? 'auto-revoked' : 'revoked' }}</p>
                            <p class="text-xs text-secondary-400">{{ $log->created_at->diffForHumans() }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-secondary-400 text-center py-4">Belum ada aktivitas</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Add Access Modal -->
<div id="addAccessModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-secondary-900/75" onclick="document.getElementById('addAccessModal').classList.add('hidden')"></div>
        <div class="relative glass-card rounded-2xl p-6 w-full max-w-lg">
            <h3 class="text-lg font-bold text-secondary-800 mb-4">Tambah Akses Baru</h3>
            <form action="{{ route('employee-access.store', $employee) }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-secondary-700 mb-2">Pilih Akses</label>
                    <select name="access_catalog_id" required class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm">
                        @foreach(\App\Models\AccessCatalog::active()->whereNotIn('id', $employee->accessDetails->pluck('access_catalog_id'))->get() as $catalog)
                            <option value="{{ $catalog->id }}">{{ $catalog->name }} ({{ $catalog->code }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-secondary-700 mb-2">Tanggal Diberikan</label>
                    <input type="date" name="granted_date" value="{{ now()->format('Y-m-d') }}" required class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm">
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" onclick="document.getElementById('addAccessModal').classList.add('hidden')" class="px-4 py-2 text-secondary-600 hover:bg-secondary-50 rounded-lg">Batal</button>
                    <button type="submit" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600">Tambah</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection