@extends('layouts.admin')

@section('title', 'Mutasi & Promosi Pegawai')

@section('content')
<div class="space-y-6">
    <!-- Header Page -->
    <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 mt-1">Mutasi & Promosi Pegawai</h1>
            <p class="text-xs text-slate-500 mt-0.5">Kelola kenaikan jabatan, rotasi divisi, perpindahan kantor cabang, dan penerbitan SK pegawai</p>
        </div>
        <div class="flex items-center gap-2.5">
            <a href="{{ route('admin.kenaikan-pangkat.jadwal') }}" class="inline-flex items-center gap-2 px-3.5 py-2.5 rounded-xl bg-white border border-slate-200 text-slate-700 text-xs font-semibold hover:bg-slate-50 hover:border-slate-300 transition-colors shadow-sm">
                <i data-lucide="calendar-clock" class="w-4 h-4 text-slate-500"></i>
                <span>Jadwal Periode</span>
            </a>
            @canany(['mutasi.manage', 'kenaikan_pangkat.manage'])
            <button onclick="bukaModalUsulan()" 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-md shadow-primary-500/25 transition-all active:scale-[0.98]">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>Ajukan Mutasi / Promosi</span>
            </button>
            @endcanany
        </div>
    </div>

    <!-- Alert Notifikasi -->
    @if(session('success'))
    <div class="flex items-center gap-3 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-medium">
        <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 shrink-0"></i>
        <span>{{ session('success') }}</span>
    </div>
    @endif

    @if(session('info'))
    <div class="flex items-center gap-3 p-4 rounded-xl bg-blue-50 border border-blue-200 text-blue-800 text-xs font-medium">
        <i data-lucide="info" class="w-4 h-4 text-blue-600 shrink-0"></i>
        <span>{{ session('info') }}</span>
    </div>
    @endif

    @if(session('error'))
    <div class="flex items-center gap-3 p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-medium">
        <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 shrink-0"></i>
        <span>{{ session('error') }}</span>
    </div>
    @endif

    <!-- Kartu Statistik -->
    <div class="grid grid-cols-2 lg:grid-cols-5 gap-3.5 sm:gap-4">
        <!-- Total Usulan -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-slate-300 transition-colors">
            <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-slate-500">Total Usulan</span>
                <span class="p-2 rounded-xl bg-slate-100 text-slate-600">
                    <i data-lucide="file-stack" class="w-4 h-4"></i>
                </span>
            </div>
            <p class="text-2xl font-black text-slate-900 mt-2">{{ number_format($stats['total']) }}</p>
            <p class="text-[11px] text-slate-400 mt-0.5">Seluruh riwayat karir</p>
        </div>

        <!-- Promosi Jabatan -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-slate-300 transition-colors">
            <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-emerald-700">Promosi</span>
                <span class="p-2 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100">
                    <i data-lucide="trending-up" class="w-4 h-4"></i>
                </span>
            </div>
            <p class="text-2xl font-black text-emerald-700 mt-2">{{ number_format($stats['promosi']) }}</p>
            <p class="text-[11px] text-slate-400 mt-0.5">Kenaikan jenjang/level</p>
        </div>

        <!-- Mutasi & Rotasi -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-slate-300 transition-colors">
            <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-blue-700">Mutasi & Rotasi</span>
                <span class="p-2 rounded-xl bg-blue-50 text-blue-600 border border-blue-100">
                    <i data-lucide="arrow-left-right" class="w-4 h-4"></i>
                </span>
            </div>
            <p class="text-2xl font-black text-blue-700 mt-2">{{ number_format($stats['mutasi']) }}</p>
            <p class="text-[11px] text-slate-400 mt-0.5">Pindah unit / cabang</p>
        </div>

        <!-- Menunggu Persetujuan -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-slate-300 transition-colors">
            <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-amber-700">Menunggu</span>
                <span class="p-2 rounded-xl bg-amber-50 text-amber-600 border border-amber-100">
                    <i data-lucide="clock-alert" class="w-4 h-4"></i>
                </span>
            </div>
            <p class="text-2xl font-black text-amber-700 mt-2">{{ number_format($stats['menunggu']) }}</p>
            <p class="text-[11px] text-slate-400 mt-0.5">Perlu verifikasi & SK</p>
        </div>

        <!-- Disetujui / Berlaku -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-slate-300 transition-colors col-span-2 lg:col-span-1">
            <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-indigo-700">Disetujui</span>
                <span class="p-2 rounded-xl bg-indigo-50 text-indigo-600 border border-indigo-100">
                    <i data-lucide="check-check" class="w-4 h-4"></i>
                </span>
            </div>
            <p class="text-2xl font-black text-indigo-700 mt-2">{{ number_format($stats['disetujui']) }}</p>
            <p class="text-[11px] text-slate-400 mt-0.5">Telah disahkan ke pegawai</p>
        </div>
    </div>

    <!-- Filter & Pencarian -->
    <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm space-y-3">
        <form method="GET" action="{{ route('admin.mutasi-promosi.index') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-3 items-end">
            <!-- Search -->
            <div class="lg:col-span-4">
                <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Cari Pegawai / No. SK</label>
                <div class="relative">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Ketik nama pegawai, NIP, atau no SK..." 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">
                    <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-2.5"></i>
                </div>
            </div>

            <!-- Filter Jenis -->
            <div class="lg:col-span-2">
                <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Jenis Karir</label>
                <select name="jenis" 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">
                    <option value="">Semua Jenis</option>
                    <option value="promosi" {{ request('jenis') == 'promosi' ? 'selected' : '' }}>Promosi Jabatan</option>
                    <option value="mutasi" {{ request('jenis') == 'mutasi' ? 'selected' : '' }}>Mutasi Unit/Cabang</option>
                    <option value="rotasi" {{ request('jenis') == 'rotasi' ? 'selected' : '' }}>Rotasi Setara</option>
                    <option value="demosi" {{ request('jenis') == 'demosi' ? 'selected' : '' }}>Demosi</option>
                </select>
            </div>

            <!-- Filter Status -->
            <div class="lg:col-span-2">
                <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Status</label>
                <select name="status" 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">
                    <option value="">Semua Status</option>
                    <option value="diajukan" {{ request('status') == 'diajukan' ? 'selected' : '' }}>Diajukan (Menunggu)</option>
                    <option value="diverifikasi" {{ request('status') == 'diverifikasi' ? 'selected' : '' }}>Diverifikasi</option>
                    <option value="disetujui" {{ request('status') == 'disetujui' ? 'selected' : '' }}>Disetujui</option>
                    <option value="ditolak" {{ request('status') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                    <option value="dibatalkan" {{ request('status') == 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</option>
                </select>
            </div>

            <!-- Filter Departemen -->
            <div class="lg:col-span-2">
                <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1">Departemen Tujuan</label>
                <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">
                    <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>

            <!-- Tombol Aksi -->
            <div class="lg:col-span-2 flex items-center gap-2">
                <button type="submit" class="w-full py-2 px-3 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold transition-colors flex items-center justify-center gap-1.5">
                    <i data-lucide="filter" class="w-3.5 h-3.5"></i>
                    <span>Terapkan</span>
                </button>
                @if(request()->anyFilled(['search', 'jenis', 'status', 'departemen_id']))
                <a href="{{ route('admin.mutasi-promosi.index') }}" class="p-2 rounded-xl border border-slate-200 text-slate-500 hover:bg-slate-50 transition-colors" title="Reset Filter">
                    <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Tabel Data Mutasi & Promosi -->
    <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-[900px] text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-100 bg-slate-50/70 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                        <th class="py-3.5 px-4">Pegawai</th>
                        <th class="py-3.5 px-4">Jenis & SK</th>
                        <th class="py-3.5 px-4">Posisi Asal (Lama)</th>
                        <th class="py-3.5 px-4">Posisi Baru (Tujuan)</th>
                        <th class="py-3.5 px-4">Tgl Efektif</th>
                        <th class="py-3.5 px-4 text-center">Status</th>
                        <th class="py-3.5 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($riwayatList as $item)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <!-- Pegawai -->
                        <td class="py-3.5 px-4">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl bg-slate-100 border border-slate-200 flex items-center justify-center font-bold text-slate-700 text-xs shrink-0 overflow-hidden">
                                    @if($item->pegawai?->foto_profil)
                                        <img src="{{ asset('storage/' . $item->pegawai->foto_profil) }}" alt="{{ $item->pegawai->nama_lengkap }}" class="w-full h-full object-cover">
                                    @else
                                        {{ strtoupper(substr($item->pegawai?->nama_lengkap ?? 'P', 0, 2)) }}
                                    @endif
                                </div>
                                <div>
                                    <a href="{{ route('admin.mutasi-promosi.show', $item->id) }}" class="font-bold text-slate-900 hover:text-primary-600 transition-colors block">
                                        {{ $item->pegawai->nama_lengkap ?? 'Pegawai Terhapus' }}
                                    </a>
                                    <span class="text-[11px] text-slate-400 font-mono">{{ $item->pegawai->nip ?? '-' }}</span>
                                </div>
                            </div>
                        </td>

                        <!-- Jenis & SK -->
                        <td class="py-3.5 px-4">
                            <div class="space-y-1">
                                <div>
                                    @if($item->jenis_perubahan == 'promosi')
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-700 border border-emerald-200">
                                        <i data-lucide="trending-up" class="w-3 h-3"></i> Promosi
                                    </span>
                                    @elseif($item->jenis_perubahan == 'mutasi')
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-blue-50 text-blue-700 border border-blue-200">
                                        <i data-lucide="arrow-left-right" class="w-3 h-3"></i> Mutasi
                                    </span>
                                    @elseif($item->jenis_perubahan == 'rotasi')
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-indigo-50 text-indigo-700 border border-indigo-200">
                                        <i data-lucide="refresh-cw" class="w-3 h-3"></i> Rotasi
                                    </span>
                                    @else
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-rose-50 text-rose-700 border border-rose-200">
                                        <i data-lucide="trending-down" class="w-3 h-3"></i> Demosi
                                    </span>
                                    @endif
                                </div>
                                <div class="text-[11px] text-slate-500 font-medium truncate max-w-[170px]" title="{{ $item->nomor_sk ?? 'Belum ada SK' }}">
                                    {{ $item->nomor_sk ?: 'No SK: -' }}
                                </div>
                            </div>
                        </td>

                        <!-- Posisi Asal -->
                        <td class="py-3.5 px-4 text-slate-500">
                            <span class="font-semibold text-slate-700 block">{{ $item->jabatanLama->nama_jabatan ?? '-' }}</span>
                            <span class="text-[11px] text-slate-400 block">{{ $item->departemenLama->nama_departemen ?? '-' }}</span>
                            @if($item->lokasiLama)
                            <span class="text-[10px] text-slate-400 flex items-center gap-1 mt-0.5">
                                <i data-lucide="map-pin" class="w-2.5 h-2.5"></i> {{ $item->lokasiLama->nama_lokasi }}
                            </span>
                            @endif
                        </td>

                        <!-- Posisi Baru (Tujuan) -->
                        <td class="py-3.5 px-4">
                            <span class="font-bold text-primary-800 block">{{ $item->jabatanBaru->nama_jabatan ?? '-' }}</span>
                            <span class="text-[11px] text-primary-600 block font-medium">{{ $item->departemenBaru->nama_departemen ?? '-' }}</span>
                            @if($item->lokasiBaru)
                            <span class="text-[10px] text-slate-500 flex items-center gap-1 mt-0.5">
                                <i data-lucide="map-pin" class="w-2.5 h-2.5 text-primary-500"></i> {{ $item->lokasiBaru->nama_lokasi }}
                            </span>
                            @endif
                        </td>

                        <!-- Tanggal Efektif -->
                        <td class="py-3.5 px-4 text-slate-600 font-mono text-[11px]">
                            <span class="block font-semibold">{{ $item->tanggal_efektif ? $item->tanggal_efektif->format('d/m/Y') : '-' }}</span>
                            @if($item->tanggal_sk)
                            <span class="text-[10px] text-slate-400">SK: {{ $item->tanggal_sk->format('d/m/Y') }}</span>
                            @endif
                        </td>

                        <!-- Status -->
                        <td class="py-3.5 px-4 text-center">
                            @if($item->status == 'disetujui')
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                <i data-lucide="check" class="w-3 h-3"></i> Disetujui
                            </span>
                            @elseif($item->status == 'diajukan' || $item->status == 'diverifikasi')
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
                                <i data-lucide="clock" class="w-3 h-3"></i> Menunggu
                            </span>
                            @elseif($item->status == 'ditolak')
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-rose-50 text-rose-700 border border-rose-200">
                                <i data-lucide="x" class="w-3 h-3"></i> Ditolak
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-slate-100 text-slate-600 border border-slate-200">
                                Dibatalkan
                            </span>
                            @endif
                        </td>

                        <!-- Aksi -->
                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-1.5">
                                <a href="{{ route('admin.mutasi-promosi.show', $item->id) }}" class="p-1.5 rounded-lg text-slate-600 hover:text-primary-600 hover:bg-slate-100 transition-colors" title="Lihat Detail & Perbandingan">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </a>

                                @if($item->status == 'disetujui')
                                <a href="{{ route('admin.mutasi-promosi.cetak-sk', $item->id) }}" target="_blank" class="p-1.5 rounded-lg text-indigo-600 hover:bg-indigo-50 transition-colors" title="Cetak Surat Keputusan (SK)">
                                    <i data-lucide="printer" class="w-4 h-4"></i>
                                </a>
                                @endif

                                @canany(['mutasi.manage', 'kenaikan_pangkat.manage'])
                                    @if(in_array($item->status, ['diajukan', 'diverifikasi']))
                                    <form action="{{ route('admin.mutasi-promosi.approve', $item->id) }}" method="POST" class="inline" onsubmit="return confirm('Setujui mutasi/promosi ini? Master data posisi pegawai akan otomatis diperbarui sekarang.');">
                                        @csrf
                                        <button type="submit" class="px-2.5 py-1 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-[11px] font-bold shadow-sm transition-colors flex items-center gap-1">
                                            <i data-lucide="check" class="w-3 h-3"></i> Approve
                                        </button>
                                    </form>
                                    @endif

                                    @if($item->status != 'disetujui')
                                    <form action="{{ route('admin.mutasi-promosi.destroy', $item->id) }}" method="POST" class="inline" onsubmit="return confirm('Hapus usulan mutasi/promosi ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus Usulan">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </form>
                                    @endif
                                @endcanany
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-12 text-center text-slate-400">
                            <div class="flex flex-col items-center justify-center gap-2">
                                <i data-lucide="inbox" class="w-8 h-8 text-slate-300"></i>
                                <span class="text-sm font-medium">Belum ada data usulan mutasi atau promosi pegawai</span>
                                <p class="text-xs text-slate-400">Gunakan tombol "Ajukan Mutasi / Promosi" untuk membuat usulan karir pegawai</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($riwayatList->hasPages())
        <div class="p-4 border-t border-slate-100 bg-slate-50/50">
            {{ $riwayatList->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Modal Ajukan Mutasi / Promosi Pegawai -->
<div id="modalTambahUsulan" class="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center p-3 sm:p-4">
    <div class="bg-white rounded-3xl max-w-4xl w-full p-6 shadow-2xl space-y-5 max-h-[94vh] overflow-y-auto animate-in fade-in zoom-in-95 duration-150">
        <!-- Modal Header -->
        <div class="flex items-center justify-between pb-3.5 border-b border-slate-100">
            <div>
                <h3 class="font-bold text-slate-900 text-base">Ajukan Mutasi / Promosi Pegawai</h3>
                <p class="text-xs text-slate-500 mt-0.5">Catat perubahan jabatan, divisi, penyesuaian gaji, atau kantor cabang baru pegawai</p>
            </div>
            <button onclick="tutupModalUsulan()" class="p-2 text-slate-400 hover:text-slate-600 rounded-xl hover:bg-slate-100 transition-colors">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <form action="{{ route('admin.mutasi-promosi.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5 text-xs">
            @csrf

            <!-- Step 1: Pilih Pegawai & Jenis Aksi -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 rounded-2xl bg-slate-50 border border-slate-200/80">
                <div class="md:col-span-2">
                    <label class="block font-bold text-slate-700 mb-1">Pilih Pegawai *</label>
                    <select id="selectPegawai" name="pegawai_id" required onchange="muatDataPegawai(this.value)" class="w-full px-3 py-2.5 rounded-xl border border-slate-200 bg-white font-medium text-slate-800 outline-none focus:ring-2 focus:ring-primary-500">
                        <option value="">-- Pilih Pegawai yang Mengalami Perubahan --</option>
                        @foreach($pegawaiList as $p)
                        <option value="{{ $p->id }}" data-jabatan="{{ $p->jabatan->nama_jabatan ?? '-' }}">
                            {{ $p->nama_lengkap }} ({{ $p->nip ?? '-' }}) - {{ $p->jabatan->nama_jabatan ?? 'Staf' }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Jenis Perubahan Karir *</label>
                    <select name="jenis_perubahan" required class="w-full px-3 py-2.5 rounded-xl border border-slate-200 bg-white font-medium text-slate-800 outline-none focus:ring-2 focus:ring-primary-500">
                        <option value="promosi">Promosi (Naik Level / Jabatan)</option>
                        <option value="mutasi">Mutasi (Pindah Unit / Cabang)</option>
                        <option value="rotasi">Rotasi (Alih Tugas Setara)</option>
                        <option value="demosi">Demosi (Penurunan Jabatan)</option>
                    </select>
                </div>
            </div>

            <!-- Panel Perbandingan Visual: Kondisi Saat Ini (Kiri) vs Posisi Baru (Kanan) -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Kolom Kiri: Kondisi Saat Ini (Readonly Preview) -->
                <div class="p-4 rounded-2xl bg-slate-50/80 border border-slate-200 space-y-3">
                    <div class="flex items-center gap-2 pb-2 border-b border-slate-200 text-slate-700 font-bold">
                        <i data-lucide="history" class="w-4 h-4 text-slate-500"></i>
                        <span>Posisi Saat Ini (Lama)</span>
                    </div>

                    <div id="boxPegawaiKosong" class="py-12 text-center text-slate-400">
                        <p>Silakan pilih pegawai terlebih dahulu untuk memuat data posisi saat ini.</p>
                    </div>

                    <div id="boxPegawaiTerpilih" class="hidden space-y-2.5">
                        <div class="flex items-center justify-between py-1 border-b border-slate-100">
                            <span class="text-slate-400">Jabatan:</span>
                            <span id="prevJabatan" class="font-bold text-slate-800">-</span>
                        </div>
                        <div class="flex items-center justify-between py-1 border-b border-slate-100">
                            <span class="text-slate-400">Departemen:</span>
                            <span id="prevDepartemen" class="font-semibold text-slate-700">-</span>
                        </div>
                        <div class="flex items-center justify-between py-1 border-b border-slate-100">
                            <span class="text-slate-400">Divisi:</span>
                            <span id="prevDivisi" class="text-slate-600">-</span>
                        </div>
                        <div class="flex items-center justify-between py-1 border-b border-slate-100">
                            <span class="text-slate-400">Lokasi / Cabang:</span>
                            <span id="prevLokasi" class="font-medium text-slate-700">-</span>
                        </div>
                        <div class="flex items-center justify-between py-1 border-b border-slate-100">
                            <span class="text-slate-400">Atasan Langsung:</span>
                            <span id="prevAtasan" class="text-slate-600">-</span>
                        </div>
                        <div class="flex items-center justify-between py-1">
                            <span class="text-slate-400">Gaji Pokok:</span>
                            <span id="prevGaji" class="font-mono font-bold text-slate-800">-</span>
                        </div>
                    </div>
                </div>

                <!-- Kolom Kanan: Posisi Baru yang Diusulkan -->
                <div class="p-4 rounded-2xl bg-primary-50/40 border border-primary-200/80 space-y-3">
                    <div class="flex items-center gap-2 pb-2 border-b border-primary-100 text-primary-900 font-bold">
                        <i data-lucide="sparkles" class="w-4 h-4 text-primary-600"></i>
                        <span>Posisi Baru yang Dituju</span>
                    </div>

                    <!-- Jabatan Baru -->
                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Jabatan Baru *</label>
                        <select id="inputJabatanBaru" name="jabatan_baru_id" required class="w-full px-3 py-2 rounded-xl border border-slate-200 bg-white outline-none focus:ring-2 focus:ring-primary-500">
                            @foreach($jabatanList as $jab)
                            <option value="{{ $jab->id }}">{{ $jab->nama_jabatan }} (Level {{ $jab->tingkat_level }})</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Departemen & Divisi Baru -->
                    <div class="grid grid-cols-2 gap-2.5">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Departemen Baru *</label>
                            <select id="inputDepartemenBaru" name="departemen_baru_id" required class="w-full px-3 py-2 rounded-xl border border-slate-200 bg-white outline-none focus:ring-2 focus:ring-primary-500">
                                @foreach($departemenList as $dep)
                                <option value="{{ $dep->id }}">{{ $dep->nama_departemen }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Divisi Baru</label>
                            <select id="inputDivisiBaru" name="divisi_baru_id" class="w-full px-3 py-2 rounded-xl border border-slate-200 bg-white outline-none focus:ring-2 focus:ring-primary-500">
                                <option value="">-- Tanpa Divisi Khusus --</option>
                                @foreach($divisiList as $div)
                                <option value="{{ $div->id }}">{{ $div->nama_divisi }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Lokasi Kerja Baru & Atasan Baru -->
                    <div class="grid grid-cols-2 gap-2.5">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Kantor / Cabang Baru</label>
                            <select id="inputLokasiBaru" name="lokasi_baru_id" class="w-full px-3 py-2 rounded-xl border border-slate-200 bg-white outline-none focus:ring-2 focus:ring-primary-500">
                                @foreach($lokasiList as $lok)
                                <option value="{{ $lok->id }}">{{ $lok->nama_lokasi }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Atasan Langsung Baru</label>
                            <select id="inputAtasanBaru" name="atasan_baru_id" class="w-full px-3 py-2 rounded-xl border border-slate-200 bg-white outline-none focus:ring-2 focus:ring-primary-500">
                                <option value="">-- Tanpa Atasan / Tertinggi --</option>
                                @foreach($pegawaiList as $atasan)
                                <option value="{{ $atasan->id }}">{{ $atasan->nama_lengkap }} ({{ $atasan->jabatan->nama_jabatan ?? '-' }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Gaji Pokok Baru -->
                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Gaji Pokok Baru (Opsional)</label>
                        <div class="relative">
                            <span class="absolute left-3 top-2 text-slate-400 font-mono">Rp</span>
                            <input type="number" id="inputGajiBaru" name="gaji_pokok_baru" min="0" step="50000" placeholder="Biarkan kosong jika gaji tidak berubah" class="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 bg-white font-mono outline-none focus:ring-2 focus:ring-primary-500">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 3: Informasi SK & Legalitas -->
            <div class="p-4 rounded-2xl bg-white border border-slate-200 space-y-3">
                <h4 class="font-bold text-slate-800 text-xs flex items-center gap-2">
                    <i data-lucide="file-badge" class="w-4 h-4 text-slate-600"></i>
                    <span>Informasi Surat Keputusan (SK) & Periode</span>
                </h4>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Nomor SK</label>
                        <input type="text" name="nomor_sk" placeholder="Contoh: SK/DIR/HRD/2026/045" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-primary-500">
                    </div>
                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Tanggal Penetapan SK</label>
                        <input type="date" name="tanggal_sk" value="{{ date('Y-m-d') }}" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-primary-500">
                    </div>
                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Tanggal Efektif Berlaku *</label>
                        <input type="date" name="tanggal_efektif" value="{{ date('Y-m-d') }}" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-primary-500">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Unggah Dokumen SK (PDF / Gambar, Maks 5MB)</label>
                        <input type="file" name="dokumen_sk" accept=".pdf,.jpg,.jpeg,.png" class="w-full text-xs text-slate-500 file:mr-2.5 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                    </div>
                    @if($jadwalAktif->count() > 0)
                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Kaitkan ke Jadwal Periode Promosi</label>
                        <select name="jadwal_kenaikan_pangkat_id" class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-primary-500">
                            <option value="">-- Tidak Terikat Jadwal Khusus --</option>
                            @foreach($jadwalAktif as $jadwal)
                            <option value="{{ $jadwal->id }}">{{ $jadwal->judul }} ({{ $jadwal->gelombang }})</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                </div>

                <div>
                    <label class="block font-bold text-slate-700 mb-1">Catatan / Alasan Pertimbangan</label>
                    <textarea name="catatan" rows="2" placeholder="Tuliskan catatan pencapaian, evaluasi kinerja KPI, atau alasan mutasi kantor..." class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-primary-500"></textarea>
                </div>

                <!-- Opsi Langsung Terapkan -->
                <div class="pt-2">
                    <label class="flex items-center gap-2.5 cursor-pointer p-2.5 rounded-xl bg-emerald-50/70 border border-emerald-200 hover:bg-emerald-50 transition-colors">
                        <input type="checkbox" name="langsung_terapkan" value="1" checked class="w-4 h-4 text-emerald-600 rounded focus:ring-emerald-500 border-slate-300">
                        <div>
                            <span class="font-bold text-emerald-950 block">Langsung Sahkan & Terapkan ke Master Pegawai</span>
                            <span class="text-[11px] text-emerald-700 block">Jika dicentang, usulan langsung berstatus Disetujui dan data jabatan/lokasi pegawai ter-update otomatis saat disimpan.</span>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Footer Buttons -->
            <div class="pt-3 border-t border-slate-100 flex items-center justify-end gap-2.5">
                <button type="button" onclick="tutupModalUsulan()" class="px-4 py-2.5 rounded-xl border border-slate-200 text-slate-600 font-semibold hover:bg-slate-50 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-5 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white font-bold shadow-md shadow-primary-500/30 transition-all flex items-center gap-1.5">
                    <i data-lucide="check" class="w-4 h-4"></i>
                    <span>Simpan Usulan Karir</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function bukaModalUsulan() {
        document.getElementById('modalTambahUsulan').classList.remove('hidden');
    }

    function tutupModalUsulan() {
        document.getElementById('modalTambahUsulan').classList.add('hidden');
    }

    // Mengambil profil data pegawai lama via AJAX ketika admin memilih pegawai
    function muatDataPegawai(pegawaiId) {
        if (!pegawaiId) {
            document.getElementById('boxPegawaiKosong').classList.remove('hidden');
            document.getElementById('boxPegawaiTerpilih').classList.add('hidden');
            return;
        }

        fetch(`{{ url('admin/mutasi-promosi/pegawai-data') }}/${pegawaiId}`)
            .then(res => res.json())
            .then(data => {
                document.getElementById('boxPegawaiKosong').classList.add('hidden');
                document.getElementById('boxPegawaiTerpilih').classList.remove('hidden');

                // Tampilkan info lama
                document.getElementById('prevJabatan').textContent = data.nama_jabatan;
                document.getElementById('prevDepartemen').textContent = data.nama_departemen;
                document.getElementById('prevDivisi').textContent = data.nama_divisi;
                document.getElementById('prevLokasi').textContent = data.nama_lokasi;
                document.getElementById('prevAtasan').textContent = data.nama_atasan;
                document.getElementById('prevGaji').textContent = data.gaji_pokok_format;

                // Pre-fill input baru dengan data eksisting agar admin mudah mengedit yang berubah saja
                if (data.jabatan_id) {
                    document.getElementById('inputJabatanBaru').value = data.jabatan_id;
                }
                if (data.departemen_id) {
                    document.getElementById('inputDepartemenBaru').value = data.departemen_id;
                }
                if (data.divisi_id) {
                    document.getElementById('inputDivisiBaru').value = data.divisi_id;
                }
                if (data.lokasi_id) {
                    document.getElementById('inputLokasiBaru').value = data.lokasi_id;
                }
                if (data.atasan_id) {
                    document.getElementById('inputAtasanBaru').value = data.atasan_id;
                }
                if (data.gaji_pokok) {
                    document.getElementById('inputGajiBaru').value = data.gaji_pokok;
                }
            })
            .catch(err => {
                console.error('Gagal mengambil data pegawai:', err);
            });
    }
</script>
@endsection