@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="mb-6 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <a href="{{ route('admin.positions.index') }}" class="text-slate-400 hover:text-emerald-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">Detail Posisi / Jabatan</h2>
        </div>
        <a href="{{ route('admin.positions.edit', $position->id) }}" class="px-4 py-2 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 rounded-lg text-sm font-bold transition-all">
            Edit Data
        </a>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-8 mb-8 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-50 rounded-bl-full -mr-8 -mt-8 opacity-50 pointer-events-none"></div>
        
        <div class="flex flex-col sm:flex-row items-start justify-between relative z-10">
            <div class="mb-4 sm:mb-0">
                <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 mb-3 border border-indigo-200">
                    Departemen: {{ $position->department->name ?? 'Tidak Ada Departemen Induk' }}
                </div>
                <h1 class="text-3xl font-extrabold text-slate-900">{{ $position->name }}</h1>
            </div>
            
            <div class="bg-emerald-100 text-emerald-700 px-5 py-3 rounded-xl text-center">
                <span class="block text-2xl font-bold">0</span>
                <span class="block text-[10px] uppercase tracking-wider font-bold mt-1 opacity-80">Karyawan</span>
            </div>
        </div>
    </div>

    <h3 class="text-lg font-bold text-slate-800 mb-4">Daftar Karyawan dengan Jabatan Ini</h3>
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <table class="w-full text-left text-sm">
            <thead class="bg-slate-50 text-slate-500">
                <tr>
                    <th class="p-4 font-semibold">Nama Karyawan</th>
                    <th class="p-4 font-semibold">NIK</th>
                    <th class="p-4 font-semibold text-right">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                <tr>
                    <td colspan="3" class="p-8 text-center text-slate-500 italic">
                        <svg class="w-12 h-12 text-slate-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                        Belum ada karyawan yang terdaftar dengan jabatan ini.
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@endsection