@extends('layouts.admin')

@section('title', 'Kenaikan Jabatan / Pangkat')

@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">Kenaikan Jabatan & Mutasi</h1>
            <p class="text-xs text-slate-500 mt-1">Kelola usulan promosi, mutasi, demosi, dan persetujuan perubahan posisi pegawai</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('admin.kenaikan-pangkat.jadwal') }}" class="px-4 py-2.5 rounded-xl bg-white border border-slate-200 text-slate-700 text-xs font-semibold hover:bg-slate-50 transition-colors">
                Jadwal Periode
            </a>
            <button onclick="document.getElementById('modalTambahUsulan').classList.remove('hidden')" 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="plus" class="w-4 h-4"></i>
                <span>Ajukan Promosi/Mutasi</span>
            </button>
        </div>
    </div>

    <!-- Tabel Kenaikan Pangkat -->
    <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-[750px] 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">Jenis Perubahan</th>
                        <th class="py-3 px-4">Posisi Asal (Lama)</th>
                        <th class="py-3 px-4">Posisi Tujuan (Baru)</th>
                        <th class="py-3 px-4">Tgl Efektif</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($riwayatPangkat as $item)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <td class="py-3.5 px-4 font-bold text-slate-900">
                            {{ $item->pegawai->nama_lengkap ?? '-' }}
                        </td>
                        <td class="py-3.5 px-4">
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider {{ $item->jenis_perubahan == 'promosi' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : ($item->jenis_perubahan == 'mutasi' ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'bg-rose-50 text-rose-700 border border-rose-200') }}">
                                {{ $item->jenis_perubahan }}
                            </span>
                        </td>
                        <td class="py-3.5 px-4 text-slate-500">
                            <span class="font-medium text-slate-700 block">{{ $item->jabatanLama->nama_jabatan ?? '-' }}</span>
                            <span class="text-[11px] text-slate-400">{{ $item->departemenLama->nama_departemen ?? '-' }}</span>
                        </td>
                        <td class="py-3.5 px-4 text-primary-700 font-semibold">
                            <span class="block text-primary-800 font-bold">{{ $item->jabatanBaru->nama_jabatan ?? '-' }}</span>
                            <span class="text-[11px] text-slate-500">{{ $item->departemenBaru->nama_departemen ?? '-' }}</span>
                        </td>
                        <td class="py-3.5 px-4 text-slate-600 font-mono">
                            {{ $item->tanggal_efektif ? $item->tanggal_efektif->format('d/m/Y') : '-' }}
                        </td>
                        <td class="py-3.5 px-4 text-center">
                            <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold {{ $item->status == 'disetujui' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-amber-50 text-amber-700 border border-amber-200' }}">
                                {{ ucfirst($item->status) }}
                            </span>
                        </td>
                        <td class="py-3.5 px-4 text-right">
                            @if($item->status != 'disetujui')
                            <form action="{{ route('admin.kenaikan-pangkat.approve', $item->id) }}" method="POST" class="inline" onsubmit="return confirm('Setujui usulan kenaikan jabatan ini? Posisi pegawai akan otomatis berubah.');">
                                @csrf
                                <button type="submit" class="px-3 py-1 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-[11px] font-bold shadow-sm transition-colors">
                                    Approve
                                </button>
                            </form>
                            @else
                            <span class="text-[11px] text-emerald-600 font-bold flex items-center justify-end gap-1">
                                <i data-lucide="check" class="w-3.5 h-3.5"></i> Selesai
                            </span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-8 text-center text-slate-400">Belum ada riwayat kenaikan pangkat</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Tambah Usulan Kenaikan Jabatan -->
<div id="modalTambahUsulan" class="fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-sm hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-lg w-full p-5 sm:p-6 shadow-xl space-y-4 max-h-[92vh] overflow-y-auto">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <h3 class="font-bold text-slate-900 text-sm">Ajukan Kenaikan Jabatan / Mutasi</h3>
            <button onclick="document.getElementById('modalTambahUsulan').classList.add('hidden')" class="p-1 text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        <form action="{{ route('admin.kenaikan-pangkat.store') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <div>
                <label class="block font-bold text-slate-700 mb-1">Pilih Pegawai *</label>
                <select name="pegawai_id" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                    @foreach($pegawaiList as $p)
                    <option value="{{ $p->id }}">{{ $p->nama_lengkap }} ({{ $p->jabatan->nama_jabatan ?? '-' }})</option>
                    @endforeach
                </select>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Jenis Perubahan *</label>
                    <select name="jenis_perubahan" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                        <option value="promosi">Promosi (Naik Level)</option>
                        <option value="mutasi">Mutasi (Pindah Unit)</option>
                        <option value="demosi">Demosi</option>
                    </select>
                </div>
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Tanggal Efektif *</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">
                </div>
            </div>
            <div>
                <label class="block font-bold text-slate-700 mb-1">Departemen Baru *</label>
                <select name="departemen_baru_id" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                    @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 name="divisi_baru_id" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                    @foreach($divisiList as $div)
                    <option value="{{ $div->id }}">{{ $div->nama_divisi }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block font-bold text-slate-700 mb-1">Jabatan Baru *</label>
                <select name="jabatan_baru_id" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                    @foreach($jabatanList as $jab)
                    <option value="{{ $jab->id }}">{{ $jab->nama_jabatan }} (Level {{ $jab->tingkat_level }})</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block font-bold text-slate-700 mb-1">Catatan Pertimbangan</label>
                <textarea name="catatan" rows="2" placeholder="Prestasi kerja, penilaian kpi..." class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none"></textarea>
            </div>
            <div class="pt-3 border-t border-slate-100 flex justify-end gap-2">
                <button type="button" onclick="document.getElementById('modalTambahUsulan').classList.add('hidden')" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 font-semibold">Batal</button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700">Ajukan</button>
            </div>
        </form>
    </div>
</div>
@endsection