@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>

        <!-- 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