@extends('layouts.admin')

@section('title', 'Master Pegawai')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Master Pegawai</h1>
            <p class="text-xs text-slate-500 mt-1">Kelola data kepegawaian, hirarki atasan-bawahan, pendidikan, dan pengaturan absensi</p>
        </div>
        <a href="{{ route('admin.pegawai.create') }}" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/30 transition-all">
            <i data-lucide="user-plus" class="w-4 h-4"></i>
            <span>Tambah Pegawai</span>
        </a>
    </div>

    <!-- Filter & Search Bar -->
    <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm">
        <form method="GET" action="{{ route('admin.pegawai.index') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3">
            <div class="relative">
                <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-3"></i>
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Cari Nama / NIP..." class="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
            </div>

            <div>
                <select name="departemen_id" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-slate-700">
                    <option value="">Semua Departemen</option>
                    @foreach($departemenList as $dep)
                    <option value="{{ $dep->id }}" {{ request('departemen_id') == $dep->id ? 'selected' : '' }}>{{ $dep->nama_departemen }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <select name="jabatan_id" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-slate-700">
                    <option value="">Semua Jabatan</option>
                    @foreach($jabatanList as $jab)
                    <option value="{{ $jab->id }}" {{ request('jabatan_id') == $jab->id ? 'selected' : '' }}>{{ $jab->nama_jabatan }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <select name="flag_denda" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-slate-700">
                    <option value="">Semua Kebijakan Denda</option>
                    <option value="aktif" {{ request('flag_denda') == 'aktif' ? 'selected' : '' }}>Denda Penuh</option>
                    <option value="hanya_masuk" {{ request('flag_denda') == 'hanya_masuk' ? 'selected' : '' }}>Hanya Denda Masuk</option>
                    <option value="hanya_pulang" {{ request('flag_denda') == 'hanya_pulang' ? 'selected' : '' }}>Hanya Denda Pulang</option>
                    <option value="bebas_denda" {{ request('flag_denda') == 'bebas_denda' ? 'selected' : '' }}>Bebas Denda</option>
                </select>
            </div>

            <div>
                <select name="status_aktif" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-slate-700">
                    <option value="">Semua Status Keaktifan</option>
                    <option value="1" {{ request('status_aktif') === '1' ? 'selected' : '' }}>Hanya Pegawai Aktif</option>
                    <option value="0" {{ request('status_aktif') === '0' ? 'selected' : '' }}>Hanya Pegawai Non-Aktif</option>
                </select>
            </div>

            <div class="flex gap-2">
                <button type="submit" class="flex-1 py-2 px-3 rounded-xl bg-slate-800 hover:bg-slate-900 text-white text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors">
                    <i data-lucide="filter" class="w-3.5 h-3.5"></i>
                    <span>Filter</span>
                </button>
                <a href="{{ route('admin.pegawai.index') }}" class="py-2 px-3 rounded-xl border border-slate-200 text-slate-500 hover:bg-slate-50 text-xs flex items-center justify-center">
                    <i data-lucide="rotate-ccw" class="w-3.5 h-3.5"></i>
                </a>
            </div>
        </form>
    </div>

    <!-- Table Pegawai (Clean, Low-Text, High Legibility) -->
    <div class="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full min-w-[850px] text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-100 bg-slate-50/60 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                        <th class="py-3 px-4">Pegawai</th>
                        <th class="py-3 px-4">Departemen & Divisi</th>
                        <th class="py-3 px-4">Jabatan & Level</th>
                        <th class="py-3 px-4">Atasan Langsung</th>
                        <th class="py-3 px-4">Jadwal Absen</th>
                        <th class="py-3 px-4">Kebijakan Denda</th>
                        <th class="py-3 px-4 text-center">Status</th>
                        <th class="py-3 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($pegawaiList as $item)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <td class="py-3.5 px-4">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl bg-primary-100 text-primary-700 font-bold flex items-center justify-center text-xs shrink-0 overflow-hidden">
                                    @if($item->foto_profil)
                                        <img src="{{ asset('storage/' . $item->foto_profil) }}" alt="{{ $item->nama_lengkap }}" class="w-full h-full object-cover">
                                    @else
                                        {{ $item->inisial }}
                                    @endif
                                </div>
                                <div class="min-w-0">
                                    <a href="{{ route('admin.pegawai.show', $item->id) }}" class="font-bold text-slate-900 hover:text-primary-600 block truncate">
                                        {{ $item->nama_lengkap }}
                                    </a>
                                    <div class="flex items-center gap-1.5 mt-0.5">
                                        <span class="text-[11px] font-mono text-slate-400">{{ $item->nip }}</span>
                                        @if($item->nama_bank && $item->nomor_rekening)
                                            <span class="text-[10px] px-1.5 py-0.2 rounded font-mono font-semibold bg-orange-50 text-orange-700 border border-orange-100" title="{{ $item->nama_bank }} - {{ $item->nomor_rekening }}">
                                                {{ $item->nama_bank }}
                                            </span>
                                        @endif
                                        @if($item->face_descriptor || $item->face_photo_path)
                                            <span class="text-[9px] px-1.5 py-0.5 rounded font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200 inline-flex items-center gap-0.5" title="Wajah Biometrik Terdaftar">
                                                <i data-lucide="scan-face" class="w-2.5 h-2.5 text-emerald-600"></i> Face
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="py-3.5 px-4 text-slate-600">
                            <span class="font-semibold text-slate-800 block">{{ $item->departemen->nama_departemen ?? '-' }}</span>
                            <span class="text-[11px] text-slate-400">{{ $item->divisi->nama_divisi ?? '-' }}</span>
                        </td>
                        <td class="py-3.5 px-4">
                            <span class="font-semibold text-slate-800 block">{{ $item->jabatan->nama_jabatan ?? '-' }}</span>
                            <span class="inline-block mt-0.5 px-1.5 py-0.5 rounded text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
                                Level {{ $item->jabatan->tingkat_level ?? '-' }}
                            </span>
                        </td>
                        <td class="py-3.5 px-4">
                            @if($item->atasan)
                            <div class="flex items-center gap-1.5 text-slate-700">
                                <i data-lucide="git-commit" class="w-3.5 h-3.5 text-primary-500"></i>
                                <span class="font-medium">{{ $item->atasan->nama_lengkap }}</span>
                            </div>
                            @else
                            <span class="text-slate-400 italic">Puncak Hirarki</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4">
                            @if($item->tipe_jadwal == 'fleksibel_roster')
                            <span class="px-2 py-0.5 rounded-md text-[10px] font-bold bg-purple-50 text-purple-700 border border-purple-200">
                                Roster Fleksibel
                            </span>
                            @elseif($item->tipe_jadwal == 'shift_rutin')
                            <span class="px-2 py-0.5 rounded-md text-[10px] font-bold bg-blue-50 text-blue-700 border border-blue-200">
                                Shift Rutin
                            </span>
                            @else
                            <span class="px-2 py-0.5 rounded-md text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                Tetap (5 Hari)
                            </span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4">
                            @if($item->flag_denda == 'bebas_denda')
                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                Bebas Denda
                            </span>
                            @elseif($item->flag_denda == 'hanya_masuk')
                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold bg-blue-50 text-blue-700 border border-blue-200">
                                Hanya Masuk ({{ $item->golongan_denda ?? 'Reguler' }})
                            </span>
                            @elseif($item->flag_denda == 'hanya_pulang')
                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold bg-purple-50 text-purple-700 border border-purple-200">
                                Hanya Pulang ({{ $item->golongan_denda ?? 'Reguler' }})
                            </span>
                            @else
                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold bg-orange-50 text-orange-700 border border-orange-200">
                                Denda Penuh ({{ $item->golongan_denda ?? 'Reguler' }})
                            </span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4 text-center">
                            @if($item->status_aktif)
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                                <span>Aktif</span>
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-rose-50 text-rose-700 border border-rose-200">
                                <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                                <span>Non-Aktif</span>
                            </span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-1">
                                <a href="{{ route('admin.pegawai.show', $item->id) }}" class="p-1.5 rounded-lg text-slate-400 hover:text-primary-600 hover:bg-primary-50 transition-colors" title="Lihat Profil">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </a>
                                <a href="{{ route('admin.pegawai.edit', $item->id) }}" class="p-1.5 rounded-lg text-slate-400 hover:text-amber-600 hover:bg-amber-50 transition-colors" title="Edit Pegawai & Denda">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </a>

                                @if($item->face_descriptor || $item->face_photo_path)
                                    <!-- Tombol Reset Data Wajah -->
                                    <form action="{{ route('admin.pegawai.reset-face', $item->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin MERESET DATA WAJAH pegawai {{ addslashes($item->nama_lengkap) }}?\n\nTemplate biometrik wajah akan dihapus dan pegawai wajib merekam wajah ulang melalui aplikasi mobile.');" class="inline">
                                        @csrf
                                        <button type="submit" class="p-1.5 rounded-lg text-amber-500 hover:text-amber-700 hover:bg-amber-50 transition-colors" title="Reset Biometrik Wajah Pegawai">
                                            <i data-lucide="scan-face" class="w-4 h-4"></i>
                                        </button>
                                    </form>
                                @endif

                                @if($item->status_aktif)
                                    <!-- Tombol Nonaktifkan Pegawai -->
                                    <form action="{{ route('admin.pegawai.toggle-status', $item->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin MENONAKTIFKAN pegawai {{ addslashes($item->nama_lengkap) }}? Akun mobile dan akses presensinya akan ditangguhkan.');" class="inline">
                                        @csrf
                                        <input type="hidden" name="status_aktif" value="0">
                                        <button type="submit" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Nonaktifkan Pegawai Ini">
                                            <i data-lucide="user-x" class="w-4 h-4"></i>
                                        </button>
                                    </form>
                                @else
                                    <!-- Tombol Aktifkan Pegawai (Hijau Menonjol) -->
                                    <form action="{{ route('admin.pegawai.toggle-status', $item->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin MENGAKTIFKAN KEMBALI pegawai {{ addslashes($item->nama_lengkap) }}? Pegawai akan dapat login dan absen kembali.');" class="inline">
                                        @csrf
                                        <input type="hidden" name="status_aktif" value="1">
                                        <button type="submit" class="p-1.5 rounded-lg text-emerald-600 hover:text-emerald-700 bg-emerald-50 hover:bg-emerald-100 border border-emerald-200 transition-colors shadow-xs" title="Aktifkan Pegawai Ini">
                                            <i data-lucide="user-check" class="w-4 h-4"></i>
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="py-8 text-center text-slate-400">
                            Tidak ditemukan data pegawai yang sesuai
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($pegawaiList->hasPages())
        <div class="p-4 border-t border-slate-100">
            {{ $pegawaiList->links() }}
        </div>
        @endif
    </div>
</div>
@endsection