lms-v2/resources/views/pages/admin/employee/show.blade.php

@extends('layouts.app')

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    
    <!-- HEADER & TOMBOL AKSI -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div class="flex items-center space-x-3">
            <a href="{{ route('admin.employees.index') }}" class="text-slate-400 hover:text-blue-600 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>
            <h2 class="text-2xl font-bold text-slate-800 tracking-tight">Profil Karyawan</h2>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('admin.employees.edit', $employee->id) }}" class="px-4 py-2 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-semibold hover:bg-slate-50 flex items-center shadow-sm">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                Edit Data
            </a>
            <form action="{{ route('admin.employees.destroy', $employee->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus karyawan ini secara permanen?');">
                @csrf @method('DELETE')
                <button type="submit" class="px-4 py-2 bg-red-50 text-red-600 border border-red-100 rounded-lg text-sm font-semibold hover:bg-red-100 flex items-center shadow-sm">
                    Hapus
                </button>
            </form>
        </div>
    </div>

    <!-- KARTU PROFIL UTAMA -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-blue-600 to-indigo-700 h-24 sm:h-32"></div>
        <div class="px-6 sm:px-8 pb-8 relative">
            <div class="-mt-12 sm:-mt-16 flex justify-between items-end mb-4">
                <!-- Avatar Inisial -->
                <div class="w-24 h-24 sm:w-32 sm:h-32 bg-white rounded-full p-1.5 shadow-lg">
                    <div class="w-full h-full bg-blue-100 rounded-full flex items-center justify-center text-blue-700 text-3xl font-bold border-2 border-blue-200">
                        {{ strtoupper(substr($employee->first_name, 0, 1)) }}{{ $employee->last_name ? strtoupper(substr($employee->last_name, 0, 1)) : '' }}
                    </div>
                </div>
                <!-- Status Role Spatie -->
                <div class="mb-2">
                    @foreach($employee->roles as $role)
                        <span class="px-3 py-1 text-xs font-bold rounded-full bg-slate-900 text-white uppercase tracking-wider shadow-sm">
                            Role: {{ $role->name }}
                        </span>
                    @endforeach
                </div>
            </div>

            <div>
                <h1 class="text-2xl font-extrabold text-slate-900">{{ $employee->first_name }} {{ $employee->last_name }}</h1>
                <p class="text-slate-500 font-medium">NIK: <span class="text-slate-800">{{ $employee->nik }}</span></p>
            </div>
        </div>
    </div>

    <!-- DETAIL INFORMASI -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <!-- Kolom Kiri: Info Pekerjaan -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
            <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 pb-2 border-b border-slate-100">Informasi Pekerjaan</h3>
            
            <dl class="space-y-4">
                <div>
                    <dt class="text-xs font-semibold text-slate-500">Departemen</dt>
                    <dd class="text-sm font-bold text-indigo-700 mt-1">{{ $employee->department->name ?? 'Belum ditentukan' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-semibold text-slate-500">Posisi / Jabatan</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-1">{{ $employee->position->name ?? 'Belum ditentukan' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-semibold text-slate-500">Tanggal Bergabung</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-1">{{ $employee->join_date ? $employee->join_date->translatedFormat('d F Y') : '-' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-semibold text-slate-500">Matrix Training Utama</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-1">
                        @if($employee->training_matrix_id)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-emerald-100 text-emerald-800">
                                Matriks Tersedia (ID: {{ $employee->training_matrix_id }})
                            </span>
                        @else
                            <span class="text-slate-400 italic">Belum dikaitkan ke matriks</span>
                        @endif
                    </dd>
                </div>
            </dl>
        </div>

        <div class="mt-8 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
                <h3 class="text-lg font-bold text-slate-800">Riwayat Training & SOP</h3>
                <span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full">
                    {{ $employee->trainings->count() }} Materi Diikuti
                </span>
            </div>
            
            <div class="p-0 overflow-x-auto">
                <table class="w-full text-left text-sm text-slate-600">
                    <thead class="bg-white border-b border-slate-100 text-slate-500 uppercase text-xs">
                        <tr>
                            <th class="px-6 py-3 w-16 text-center">No</th>
                            <th class="px-6 py-3">Nama Materi / Dokumen</th>
                            <th class="px-6 py-3 w-48 text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @forelse($employee->trainings as $index => $training)
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4 text-center text-slate-400">{{ $index + 1 }}</td>
                            <td class="px-6 py-4 font-bold text-slate-700">{{ $training->name }}</td>
                            <td class="px-6 py-4 text-center">
                                @if($training->pivot->status == 'passed')
                                    <span class="inline-flex items-center px-2.5 py-1 bg-emerald-50 text-emerald-700 rounded-md text-xs font-bold border border-emerald-200">
                                        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                        Lulus
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-1 bg-amber-50 text-amber-700 rounded-md text-xs font-bold border border-amber-200">
                                        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                        Belum Training
                                    </span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="px-6 py-8 text-center text-slate-500">Karyawan ini belum ditugaskan untuk materi/SOP apapun.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Kolom Kanan: Info Personal -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
            <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 pb-2 border-b border-slate-100">Informasi Personal & Kontak</h3>
            
            <dl class="space-y-4 grid grid-cols-2 gap-x-4">
                <div class="col-span-2">
                    <dt class="text-xs font-semibold text-slate-500">Email Perusahaan</dt>
                    <dd class="text-sm font-bold text-blue-600 mt-1">{{ $employee->email }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-semibold text-slate-500">No. HP / Telepon</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-1">{{ $employee->phone ?? '-' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-semibold text-slate-500">Nomor KTP</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-1">{{ $employee->identity_number ?? '-' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-semibold text-slate-500">Jenis Kelamin</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-1">
                        {{ $employee->gender == 'L' ? 'Laki-laki' : ($employee->gender == 'P' ? 'Perempuan' : '-') }}
                    </dd>
                </div>
                <div>
                    <dt class="text-xs font-semibold text-slate-500">Tanggal Lahir</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-1">{{ $employee->date_of_birth ? $employee->date_of_birth->translatedFormat('d F Y') : '-' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-semibold text-slate-500">Inisial Nama</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-1 uppercase">{{ $employee->initial ?? '-' }}</dd>
                </div>
            </dl>
        </div>

    </div>
</div>
@endsection